Tailwind CSSとshadcnで作るアカウント登録画面の実装ガイド（Next.js対応）

$ npx shadcn@latest add card

一部抜粋

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

'use client'

import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'

interface CardWrapperProps {
  children: React.ReactNode
  headerLabel: string
  buttonLabel?: string
  buttonHref?: string
  showSocial?: boolean
}

export const CardWrapper = ({
  children,
  buttonLabel,
  buttonHref,
  showSocial,
}: CardWrapperProps) => {
  return (
    <Card className="w-[400px] shadow-md">
      <CardHeader></CardHeader>
      <CardContent>{children}</CardContent>
      {showSocial && <CardFooter></CardFooter>}
      {buttonLabel && buttonHref && <CardFooter></CardFooter>}
    </Card>
  )
}

interface HeaderProps {
  label: string
}

export const Header = ({ label }: HeaderProps) => {
  return (
    <div className="flex w-full flex-col items-center justify-center gap-y-4">
      <h1 className='text-2xl font-semibold'>認証チュートリアル</h1>
      <p className="text-sm text-muted-foreground">{label}</p>
    </div>
  )
}

import Link from 'next/link'
import { Button } from '@/components/ui/button'

interface FooterButtonProps {
  href: string
  label: string
}

export const FooterButton = ({ href, label }: FooterButtonProps) => {
  return (
    <Button variant="link" className="w-full font-normal" size="sm" asChild>
      <Link href={href}>{label}</Link>
    </Button>
  )
}

$ npm i react-icons

import { FaGithub } from 'react-icons/fa'
import { FcGoogle } from 'react-icons/fc'
import { Button } from '@/components/ui/button'

export const Social = () => {
  return (
    <div className="flex w-full items-center gap-x-2">
      <Button size="lg" className="w-full" variant="outline">
        <FcGoogle className="size-5" />
      </Button>
      <Button size="lg" className="w-full" variant="outline">
        <FaGithub className="size-5" />
      </Button>
    </div>
  )
}

'use client'

import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { FooterButton } from './footer-button'
+import { Header } from './header'
+import { Social } from './social'

interface CardWrapperProps {
  children: React.ReactNode
  headerLabel: string
  buttonLabel?: string
  buttonHref?: string
  showSocial?: boolean
}

export const CardWrapper = ({
  children,
+ headerLabel,
  buttonLabel,
  buttonHref,
  showSocial,
}: CardWrapperProps) => {
  return (
    <Card className="w-[400px] shadow-md">
-    <CardHeader></CardHeader>
+      <CardHeader>
+        <Header label={headerLabel} />
+      </CardHeader>
      <CardContent>{children}</CardContent>
-      {showSocial && <CardFooter></CardFooter>}
+      {showSocial && (
+        <CardFooter>
+          <Social />
+        </CardFooter>
      )}
-      {buttonLabel && buttonHref && <CardFooter></CardFooter>}
+      {buttonLabel && buttonHref && (
+        <CardFooter>
+          <FooterButton label={buttonLabel} href={buttonHref} />
+        </CardFooter>
      )}
    </Card>
  )
}

import { CardWrapper } from './card-wrapper'

export const RegisterForm = () => {
  return (
    <CardWrapper
      headerLabel="各項目を入力してアカウントを作成"
      buttonLabel="既にアカウントを登録済みの方はコチラ"
      buttonHref="/auth/login"
      showSocial
    >
      入力フォーム
    </CardWrapper>
  )
}

+import { RegisterForm } from '@/components/auth/register-form'

const RegisterPage = () => {
- return <div>アカウント登録画面</div>
+ return <RegisterForm />
}

export default RegisterPage

const AuthLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div className="flex h-full items-center justify-center bg-gradient-to-br from-sky-100 to-blue-300">
      {children}
    </div>
  )
}

export default AuthLayout