img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
className
)}
{...props}
/>
)
}
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
}
```
### `components/ui/tabs.tsx`
```tsx
"use client"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Tabs as TabsPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Tabs({
className,
orientation = "horizontal",
...props
}: React.ComponentProps
) {
return (
)
}
const tabsListVariants = cva(
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
{
variants: {
variant: {
default: "bg-muted",
line: "gap-1 bg-transparent",
},
},
defaultVariants: {
variant: "default",
},
}
)
function TabsList({
className,
variant = "default",
...props
}: React.ComponentProps &
VariantProps) {
return (
)
}
function TabsTrigger({
className,
...props
}: React.ComponentProps) {
return (
)
}
function TabsContent({
className,
...props
}: React.ComponentProps) {
return (
)
}
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
```
### `components/ui/dropdown-menu.tsx`
```tsx
"use client"
import * as React from "react"
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
import { CheckIcon, ChevronRightIcon } from "lucide-react"
function DropdownMenu({
...props
}: React.ComponentProps) {
return
}
function DropdownMenuPortal({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuContent({
className,
align = "start",
sideOffset = 4,
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuGroup({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
)
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
inset,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuRadioItem({
className,
children,
inset,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
)
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps) {
return (
)
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
)
}
function DropdownMenuSub({
...props
}: React.ComponentProps) {
return
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps & {
inset?: boolean
}) {
return (
{children}
)
}
function DropdownMenuSubContent({
className,
...props
}: React.ComponentProps) {
return (
)
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
}
```