diff --git a/src/components/custom/formatSelectionGroup.tsx b/src/components/custom/formatSelectionGroup.tsx index 8b4724f..992b0b8 100644 --- a/src/components/custom/formatSelectionGroup.tsx +++ b/src/components/custom/formatSelectionGroup.tsx @@ -58,7 +58,7 @@ const FormatSelectionGroupItem = React.forwardRef< ref={ref} className={cn( "relative w-full rounded-lg border-2 border-border bg-background px-3 py-2 shadow-sm transition-all", - "data-[state=checked]:border-primary data-[state=checked]:border-2 data-[state=checked]:bg-primary/10", + "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10", "hover:bg-muted/70", "disabled:cursor-not-allowed disabled:opacity-50", className diff --git a/src/components/custom/formatToggleGroup.tsx b/src/components/custom/formatToggleGroup.tsx new file mode 100644 index 0000000..ff04a36 --- /dev/null +++ b/src/components/custom/formatToggleGroup.tsx @@ -0,0 +1,114 @@ +import * as React from "react"; +import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"; +import { type VariantProps } from "class-variance-authority"; +import { cn } from "@/lib/utils"; +import { toggleVariants } from "@/components/ui/toggle"; +import { VideoFormat } from "@/types/video"; +import { determineFileType, formatBitrate, formatCodec, formatFileSize } from "@/utils"; +import { Music, Video, File } from "lucide-react"; + +const FormatToggleGroupContext = React.createContext< + VariantProps & { toggleType?: "single" | "multiple" } +>({ + size: "default", + variant: "default", + toggleType: "multiple", +}); + +type FormatToggleGroupProps = + | (Omit, "type"> & + VariantProps & { type: "single", value?: string, onValueChange?: (value: string) => void }) + | (Omit, "type"> & + VariantProps & { type: "multiple", value?: string[], onValueChange?: (value: string[]) => void }); + +export const FormatToggleGroup = React.forwardRef< + React.ComponentRef, + FormatToggleGroupProps +>(({ className, variant, size, children, type = "multiple", ...props }, ref) => { + if (type === "single") { + return ( + + + {children} + + + ); + } + + return ( + + + {children} + + + ); +}); +FormatToggleGroup.displayName = "FormatToggleGroup"; + +export const FormatToggleGroupItem = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef & + VariantProps & { + format: VideoFormat + } +>(({ className, children, variant, size, format, value, ...props }, ref) => { + const determineFileTypeIcon = (format: VideoFormat) => { + const fileFormat = determineFileType(/*format.video_ext, format.audio_ext,*/ format.vcodec, format.acodec) + switch (fileFormat) { + case 'video+audio': + return ( + + + ) + case 'video': + return ( +