create-ej-app 3.2.0 → 5.0.0

package/template/new/src/app/(auth)/login/email-login-form.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Mail } from 'lucide-react'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
+import { signIn } from '~/lib/auth-client'
+import { toastSuccessMessage } from '~/lib/toast-message'
+
+const emailLoginFormSchema = z.object({
+  email: z.email()
+})
+
+export const EmailLoginForm = () => {
+  const form = useForm<z.infer<typeof emailLoginFormSchema>>({
+    resolver: zodResolver(emailLoginFormSchema),
+    defaultValues: {
+      email: ''
+    }
+  })
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSent, setIsSent] = useState('')
+
+  async function onSubmit(values: z.infer<typeof emailLoginFormSchema>) {
+    const email = values.email
+
+    if (!email) return
+
+    setIsLoading(true)
+    try {
+      const res = await signIn.magicLink({
+        email,
+        name: ''
+      })
+      if (res?.error) throw res.error
+      setIsSent(email)
+      toastSuccessMessage('Magic link sent! Check your email.')
+    } catch (err) {
+      console.error('Error sending magic link:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (isSent) {
+    return (
+      <div className="rounded-lg border p-4 text-center">
+        <Mail className="text-primary mx-auto mb-2 size-6" />
+        <h3 className="mb-1 text-sm font-medium">Check your email</h3>
+        <p className="text-muted-foreground text-xs">
+          We&apos;ve sent a magic link to <strong>{isSent}</strong>
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="name@example.com"
+                  autoCapitalize="off"
+                  autoComplete="email"
+                  autoFocus
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? 'Sending...' : 'Send Magic Link'}
+        </Button>
+      </form>
+    </Form>
+  )
+}

package/template/new/src/app/(auth)/login/page.tsx

@@ -0,0 +1,72 @@
+import { ShoppingBag } from 'lucide-react'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Separator } from '~/components/ui/separator'
+import { getAuthSession } from '~/lib/auth'
+import { EmailLoginForm } from './email-login-form'
+import { SocialLoginButtons } from './social-login-buttons'
+
+export default async function LoginPage() {
+  const session = await getAuthSession()
+
+  if (session?.user) redirect('/')
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <ShoppingBag className="text-primary size-6" />
+          </div>
+          <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
+          <CardDescription className="text-muted-foreground text-sm">
+            Sign in to your account to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="border-muted-foreground/50 bg-muted/50 rounded-lg border border-dashed p-4">
+            <p className="text-muted-foreground text-sm">
+              <strong>New to our site?</strong> No need to create a separate
+              account. Simply use one of the options below to both sign up and
+              log in.
+            </p>
+          </div>
+
+          <EmailLoginForm />
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background text-muted-foreground px-2">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          <SocialLoginButtons />
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-4">
+          <Separator className="my-2" />
+          <div className="text-muted-foreground text-center text-sm">
+            <Link
+              href="/"
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              Return to home page
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}

package/template/new/src/app/(auth)/login/social-login-buttons.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Button } from '~/components/ui/button'
+import { getLastUsedLoginMethod, signIn } from '~/lib/auth-client'
+
+export const SocialLoginButtons = () => {
+  const lastUsedLoginMethod = getLastUsedLoginMethod()
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Button
+        variant="outline"
+        onClick={async () => {
+          await signIn.social({
+            provider: 'google'
+          })
+        }}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+            <path
+              fill="#4285F4"
+              d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
+            />
+            <path
+              fill="#34A853"
+              d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
+            />
+            <path
+              fill="#EA4335"
+              d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
+            />
+          </g>
+        </svg>
+        Continue with Google
+        {lastUsedLoginMethod === 'google' ? ' (last used)' : ''}
+      </Button>
+
+      <Button
+        variant="outline"
+        onClick={async () => {
+          await signIn.social({
+            provider: 'github'
+          })
+        }}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+        </svg>
+        Continue with GitHub
+        {lastUsedLoginMethod === 'github' ? ' (last used)' : ''}
+      </Button>
+    </div>
+  )
+}

package/template/new/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from 'better-auth/next-js'
+import { auth } from '~/lib/auth'
+
+export const { GET, POST } = toNextJsHandler(auth.handler)

package/template/new/src/app/globals.css

@@ -0,0 +1,128 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply text-foreground bg-background min-h-screen font-sans antialiased;
+  }
+  button:not([disabled]),
+  [role='button']:not([disabled]) {
+    cursor: pointer;
+  }
+}
+
+@utility container {
+  @apply mx-auto p-4;
+}

package/template/new/src/app/layout.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from 'next'
+import { ThemeProvider } from 'next-themes'
+import { Geist, Geist_Mono } from 'next/font/google'
+import { Loader } from '~/components/loader'
+import { ReactQueryProvider } from '~/components/react-query-provider'
+import { ScreenSize } from '~/components/screen-size'
+import { Toaster } from '~/components/ui/sonner'
+import { env } from '~/env'
+import { siteConfig } from '~/lib/siteConfig'
+import './globals.css'
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin']
+})
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin']
+})
+
+export const metadata: Metadata = {
+  title: siteConfig.name,
+  description: siteConfig.description
+}
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <ReactQueryProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="light"
+            forcedTheme="light"
+          >
+            <Loader />
+            {children}
+            {env.NODE_ENV === 'development' ? <ScreenSize /> : null}
+            <Toaster />
+          </ThemeProvider>
+        </ReactQueryProvider>
+      </body>
+    </html>
+  )
+}

package/template/new/src/app/page.tsx

@@ -0,0 +1,3 @@
+export default async function HomePage() {
+  return <div>Hello, World!</div>
+}

package/template/new/src/components/loader.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import NextTopLoader from 'nextjs-toploader'
+
+import { FC } from 'react'
+
+export const Loader: FC = () => {
+  return (
+    <NextTopLoader
+      color="#777777"
+      initialPosition={0.08}
+      crawlSpeed={200}
+      height={3}
+      crawl={true}
+      showSpinner={true}
+      easing="ease"
+      speed={200}
+      shadow={`0 0 10px '#777777',0 0 5px '#777777'`}
+      template='<div class="bar" role="bar"><div class="peg"></div></div> 
+  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
+      zIndex={10000}
+      showAtBottom={false}
+    />
+  )
+}

package/template/new/src/components/react-query-provider.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { FC, ReactNode } from 'react'
+
+export const ReactQueryProvider: FC<{
+  children?: ReactNode
+}> = ({ children }) => {
+  const client = new QueryClient({})
+
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>
+}

package/template/new/src/components/screen-size.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { FC, useEffect, useState } from 'react'
+
+export const ScreenSize: FC = () => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+
+  useEffect(() => {
+    function updateDimensions() {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight
+      })
+    }
+
+    updateDimensions()
+    window.addEventListener('resize', updateDimensions)
+
+    return () => {
+      window.removeEventListener('resize', updateDimensions)
+    }
+  }, [])
+
+  const { width, height } = dimensions
+
+  return (
+    <div className="bg-foreground text-background fixed right-4 bottom-4 flex items-center gap-2 rounded-full p-2 text-xs font-medium">
+      <span>
+        {width.toLocaleString()} x {height.toLocaleString()}
+      </span>
+      <div className="bg-muted-foreground h-4 w-px" />
+      <span className="sm:hidden">XS</span>
+      <span className="hidden sm:inline md:hidden">SM</span>
+      <span className="hidden md:inline lg:hidden">MD</span>
+      <span className="hidden lg:inline xl:hidden">LG</span>
+      <span className="hidden xl:inline 2xl:hidden">XL</span>
+      <span className="hidden 2xl:inline">2XL</span>
+    </div>
+  )
+}

package/template/new/src/components/theme-toggle.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { FC } from 'react'
+import { Button } from './ui/button'
+
+export const ThemeToggle: FC = () => {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label="Toggle theme"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      <Sun className="hidden h-5 w-5 dark:inline" />
+      <Moon className="inline h-5 w-5 dark:hidden" />
+    </Button>
+  )
+}

package/template/new/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '~/lib/cn'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/template/new/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '~/lib/cn'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+}