// components/ui/card.tsx
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center px-6 pt-4 pb-4 sm:pt-6 [.border-t]:pt-6", className)}
      {...props}
    />
  )
}

// app/page.tsx
<div className="brand-bg min-h-[100svh]">
  <CardFooter>
    <Button className="w-full sm:w-auto" type="submit" disabled={!canSubmit}>
      {loading ? (
        <>
          <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Submitting...
        </>
      ) : (
        "Buy TK Token Now"
      )}
    </Button>
  </CardFooter>
</div>

// app/login/page.tsx
<CardFooter className="pt-4">
  <Button type="submit" className="w-full" disabled={loading}>
    {loading ? (
      <>
        <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Signing in...
      </>
    ) : (
      "Sign in"
    )}
  </Button>
</CardFooter>

// components/ui/sidebar.tsx
import { PanelLeft } from 'lucide-react'

function SidebarTrigger({ className, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      data-slot="sidebar-trigger"
      className={cn("group/sidebar-trigger flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground", className)}
      {...props}
    >
      <PanelLeft />
    </button>
  )
}

// components/ui/select.tsx
function Select({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="select"
      className={cn("relative inline-flex w-full max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) text-sm outline-none select-none", className)}
      {...props}
    />
  )
}

// components/ui/tooltip.tsx
function Tooltip({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="tooltip"
      className={cn("relative inline-flex origin-(--radix-tooltip-content-transform-origin)", className)}
      {...props}
    />
  )
}

// components/ui/sheet.tsx
function Sheet({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet"
      className={cn("rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", className)}
      {...props}
    />
  )
}

// components/ui/tabs.tsx
function Tabs({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="tabs"
      className={cn("focus-visible:ring-ring/50", className)}
      {...props}
    />
  )
}

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>...</head>
      <body className="bg-background">{children}</body>
    </html>
  )
}
