create-einja-app 0.2.15 → 0.2.18

package/templates/default/.github/workflows/release-create-einja-app.yml

@@ -0,0 +1,95 @@
+name: Release create-einja-app
+
+on:
+  push:
+    tags:
+      - 'create-einja-app-v*'
+  workflow_dispatch:
+    inputs:
+      dry_run:
+        description: 'Dry run (skip actual publish)'
+        required: false
+        default: 'false'
+        type: boolean
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write  # npm provenance用
+    steps:
+      # actions/checkout@v4.2.2
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+
+      # pnpm/action-setup@v4.1.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda
+        with:
+          version: 10.14.0
+
+      # actions/setup-node@v4.4.0
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020
+        with:
+          node-version: '22.16.0'
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build package
+        run: pnpm -F create-einja-app build
+
+      - name: Run tests
+        run: pnpm -F create-einja-app test
+
+      - name: Type check
+        run: pnpm -F create-einja-app typecheck
+
+      - name: Lint
+        run: pnpm -F create-einja-app lint
+
+      - name: Get version info
+        id: version
+        run: |
+          PKG_VERSION=$(node -p "require('./packages/create-einja-app/package.json').version")
+          echo "pkg_version=$PKG_VERSION" >> $GITHUB_OUTPUT
+          if [[ "${{ github.ref_type }}" == "tag" ]]; then
+            TAG_VERSION="${{ github.ref_name }}"
+            TAG_VERSION="${TAG_VERSION#create-einja-app-v}"
+            echo "tag_version=$TAG_VERSION" >> $GITHUB_OUTPUT
+            echo "source=tag" >> $GITHUB_OUTPUT
+          else
+            echo "source=manual" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Verify version (tag trigger)
+        if: ${{ steps.version.outputs.source == 'tag' }}
+        run: |
+          if [[ "${{ steps.version.outputs.pkg_version }}" != "${{ steps.version.outputs.tag_version }}" ]]; then
+            echo "::error::Version mismatch: package.json=${{ steps.version.outputs.pkg_version }}, tag=${{ steps.version.outputs.tag_version }}"
+            exit 1
+          fi
+          echo "✅ Version verified: ${{ steps.version.outputs.pkg_version }}"
+
+      - name: Show release info
+        run: |
+          echo "📦 Package: create-einja-app"
+          echo "📌 Version: ${{ steps.version.outputs.pkg_version }}"
+          echo "🎯 Trigger: ${{ steps.version.outputs.source }}"
+          echo "🧪 Dry run: ${{ github.event.inputs.dry_run || 'false' }}"
+
+      - name: Verify package contents
+        run: |
+          cd packages/create-einja-app
+          npm pack --dry-run
+
+      - name: Publish to npm (dry-run)
+        if: ${{ github.event.inputs.dry_run == 'true' }}
+        run: pnpm -F create-einja-app publish --no-git-checks --access public --provenance --dry-run
+
+      - name: Publish to npm
+        if: ${{ github.event.inputs.dry_run != 'true' }}
+        run: pnpm -F create-einja-app publish --no-git-checks --access public --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/templates/default/.mcp.json

@@ -19,16 +19,17 @@
 			"args": ["-y", "@playwright/mcp", "--isolated"]
 		},
 		"serena": {
+			"type": "stdio",
 			"command": "uvx",
 			"args": [
 				"--from",
 				"git+https://github.com/oraios/serena",
-				"serena-mcp-server",
+				"serena",
+				"start-mcp-server",
 				"--context",
-				"ide-assistant",
-				".",
-				"--enable-web-dashboard=false"
-			]
+				"claude-code",
+				"--open-web-dashboard",
+				"false"]
 		},
 		"github": {
 			"type": "http",
@@ -36,10 +37,6 @@
 			"headers": {
 				"Authorization": "Bearer ${GITHUB_TOKEN}"
 			}
-		},
-		"asana": {
-			"command": "npx",
-			"args": ["mcp-remote", "https://mcp.asana.com/sse"]
 		}
 	}
 }

package/templates/default/.serena/project.yml

@@ -79,6 +79,27 @@ excluded_tools: []
 # initial prompt for the project. It will always be given to the LLM upon activating the project
 # (contrary to the memories, which are loaded on demand).
 initial_prompt: ""
-
+# the name by which the project can be referenced within Serena
 project_name: "einja-management-template"
+
+# list of tools to include that would otherwise be disabled (particularly optional tools that are disabled by default)
 included_optional_tools: []
+
+# list of mode names to that are always to be included in the set of active modes
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the base_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this setting overrides the global configuration.
+# Set this to [] to disable base modes for this project.
+# Set this to a list of mode names to always include the respective modes for this project.
+base_modes:
+
+# list of mode names that are to be activated by default.
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the default_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this overrides the setting from the global configuration (serena_config.yml).
+# This setting can, in turn, be overridden by CLI parameters (--mode).
+default_modes:
+
+# fixed set of tools to use as the base tool set (if non-empty), replacing Serena's default set of tools.
+# This cannot be combined with non-empty excluded_tools or included_optional_tools.
+fixed_tools: []

package/templates/default/CLAUDE.md

@@ -18,11 +18,17 @@
 
 | 作業 | 委託先 |
 |------|--------|
-| コミット・プッシュ | `task-committer` |
 | コンフリクト解消 | `conflict-resolver` |
 | コード実装 | `task-executer` |
 | 品質検証（QA） | `task-qa` |
 | 実装レビュー | `task-reviewer` |
+| Codex作業（レビュー・実装支援等） | `codex-agent` |
+
+#### Skill（直接呼び出し）
+
+| 作業 | 使用するSkill |
+|------|--------------|
+| コミット・プッシュ | `einja-task-commit` Skill |
 
 #### ビルトインサブエージェント（探索・計画用）
 
@@ -51,7 +57,7 @@
 
 ## コード変更時の動作方針
 
-**【厳守事項】コード変更の指示があった場合、絶対に即座に実装を開始してはならない。**
+**【厳守事項】コード変更の指示があった場合、絶対に即座に実装を開始してはならない。（サブエージェントとしての動作時は除く）**
 
 ### 必須フロー
 1. 問題・要件を調査・分析する
@@ -88,7 +94,7 @@ einja-management-template/
 │       ├── package.json
 │       └── tsconfig.json
 ├── packages/
-│   ├── config/                   # 共通設定（Biome, TypeScript, Panda CSS）
+│   ├── config/                   # 共通設定（Biome, TypeScript）
 │   ├── front-core/               # フロントエンド共通層
 │   │   └── src/
 │   │       ├── auth/             # NextAuth共通設定・型定義
@@ -206,16 +212,16 @@ pnpm env:prepare
 - ワークスペース間の依存関係管理
 
 ### パッケージ構成:
-- `@repo/config` - 共通設定（Biome, TypeScript, Panda CSS）
+- `@repo/config` - 共通設定（Biome, TypeScript）
 - `@repo/front-core` - フロントエンド共通層（認証共通設定、hooks、utils、context）
 - `@repo/server-core` - バックエンド共通層（Prismaクライアント・スキーマ、ドメインロジック）
 - `@repo/ui` - 共通UIコンポーネント（shadcn/ui）
 - `@repo/web` - メイン管理画面アプリケーション
 
 ### スタイリングシステム:
-- **Panda CSS** でデザイントークンとレシピを使用したスタイリング
-- タイプセーフなスタイル生成によるCSS-in-JS
-- スタイルコンポーネントは `apps/web/src/styled-system/` ディレクトリに出力
+- **Tailwind CSS v4** + shadcn/ui によるユーティリティファーストのスタイリング
+- `globals.css` でCSS変数によるデザイントークンを定義
+- shadcn/ui の `cva` によるコンポーネントバリアント管理
 - カスタムブレークポイント: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1440px)
 
 ### コード品質:
@@ -231,7 +237,6 @@ pnpm env:prepare
 - Voltaまたはfnmを使用したNode.jsバージョン管理 (v22.16.0)
 
 ### 特記事項:
-- プロダクションビルド前に必ず`panda codegen`を実行
 - Biomeはスペース2つインデントとダブルクォートを使用
 - ビルド時はESLintを無効化（代わりにBiomeを使用）
 - Turborepoのキャッシュ機能で高速ビルド
@@ -286,10 +291,17 @@ export const { handlers, signIn, signOut, auth } = NextAuth(authOptions);
 
 ## AskUserQuestion ツールの使用
 
-選択肢を提示してユーザーに質問する場合は、**必ず AskUserQuestion ツール**を使用してください。
+**不明点や曖昧な点がある場合は、推測で進めずに必ず AskUserQuestion ツールで確認してください。**
+
+### 基本姿勢
+- 要件が不明確な場合は**積極的に質問する**
+- 推測や仮定で実装を進めない
+- 確認することで手戻りを防ぐ
 
 ### 使用必須シーン
-- 複数の実装方法・設計アプローチがある場合
+- **要件・仕様が不明確な場合**
+- **複数の実装方法・設計アプローチがある場合**
+- **技術的な判断が必要な場合**（ライブラリ選定、アーキテクチャ決定など）
 - 重要な判断（コミット分割、リファクタリング方針など）
 - 破壊的な操作の前
 
@@ -298,6 +310,9 @@ export const { handlers, signIn, signOut, auth } = NextAuth(authOptions);
 - 番号付きリスト: 詳細説明が必要な場合
 - 推奨オプションには `（推奨）` と理由を付記
 
+### サブエージェントでの使用
+サブエージェント（task-executer等）も同様に、不明点がある場合は AskUserQuestion を使用して確認すること。
+
 ## サブエージェント結果報告のルール
 
 サブエージェントの出力形式は **@.claude/skills/einja-output-format/SKILL.md** に定義されています。
@@ -398,6 +413,32 @@ export const { handlers, signIn, signOut, auth } = NextAuth(authOptions);
 [後続処理の説明]
 ```
 
+#### codex-agent 呼び出し時
+
+プロンプト末尾に以下を追加:
+
+```
+---
+**【必須】以下の形式で報告してください。この形式以外は不可:**
+
+## 🤖 Codex作業完了
+
+### タスク: [作業内容]
+
+### 作業結果: [✅ SUCCESS / ⚠️ PARTIAL / ❌ FAILURE]
+
+### 作業モード: [レビュー / 実装 / バグ修正 / リファクタリング / 調査]
+
+### サマリー
+[主要な結果・数値]
+
+### 詳細
+[Codexからの出力・分析結果]
+
+### 次のステップ
+[後続処理の説明]
+```
+
 ## 追加指示
 
 以下のドキュメントも参照して作業を進めてください:
@@ -409,6 +450,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth(authOptions);
 - @docs/einja/steering/development/review-guidelines.md - コードレビューのガイドライン
 - @docs/einja/memory/decisions.md - 過去の意思決定記録（セッション跨ぎで継承）
 - @docs/einja/memory/patterns.md - 再利用可能なパターン（セッション跨ぎで継承）
+- @.claude/skills/einja-playwright-mcp/SKILL.md - Playwright MCP動作確認ガイドライン
 
 <!-- @einja:excluded:start -->
 ## このリポジトリ限定の設定

package/templates/default/README.md

@@ -26,7 +26,7 @@ einja-management-template/
 ├── packages/
 │   ├── cli/                      # @einja/dev-cli
 │   ├── create-einja-app/         # create-einja-app
-│   ├── config/                   # 共通設定（Biome, TypeScript, Panda CSS）
+│   ├── config/                   # 共通設定（Biome, TypeScript）
 │   ├── front-core/               # フロントエンド共通層
 │   │   └── src/
 │   │       ├── auth/             # NextAuth共通設定・型定義
@@ -50,7 +50,7 @@ einja-management-template/
 - **モノレポ**: Turborepo + pnpm workspaces
 - **フレームワーク**: Next.js 15 (App Router)
 - **言語**: TypeScript (strict mode)
-- **スタイリング**: Panda CSS
+- **スタイリング**: Tailwind CSS v4
 - **UI**: shadcn/ui + Radix UI
 - **データベース**: PostgreSQL + Prisma
 - **認証**: NextAuth.js v5
@@ -171,7 +171,6 @@ pnpm db:studio        # Prisma Studio起動
 # 特定のワークスペースでコマンド実行
 pnpm --filter @repo/web dev
 pnpm --filter @repo/web build
-pnpm --filter @repo/web panda codegen
 ```
 
 ### データベース設定
@@ -218,7 +217,7 @@ pnpm db:studio
 
 - **@einja/dev-cli**: Claude Code設定配布CLI（[詳細](./packages/cli/README.md)）
 - **create-einja-app**: プロジェクト作成CLI（[詳細](./packages/create-einja-app/README.md)）
-- **@repo/config**: Biome, TypeScript, Panda CSSの共通設定
+- **@repo/config**: Biome, TypeScriptの共通設定
 - **@repo/front-core**: フロントエンド共通層（認証共通設定、hooks、utils、context）
 - **@repo/server-core**: バックエンド共通層（Prismaクライアント・スキーマ、ドメインロジック）
 - **@repo/ui**: 共通UIコンポーネント（shadcn/ui）
@@ -229,9 +228,8 @@ pnpm db:studio
 2. コードを変更
 3. ホットリロードで即座に反映
 4. データベーススキーマを変更した場合は `pnpm db:push`
-5. Panda CSSのスタイル変更時は自動生成される
-6. コミット前に自動的にlint-stagedが実行される
-7. プルリクエストを作成
+5. コミット前に自動的にlint-stagedが実行される
+6. プルリクエストを作成
 
 ### トラブルシューティング
 
@@ -258,13 +256,6 @@ pnpmがインストールされていません：
 volta install pnpm@10.14.0
 ```
 
-#### Panda CSS関連エラー
-
-```bash
-# styled-systemを再生成
-pnpm --filter @repo/web panda codegen
-```
-
 #### Prisma関連エラー
 
 ```bash

package/templates/default/apps/admin/next.config.ts

@@ -0,0 +1,11 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  output: "standalone",
+  transpilePackages: ["@repo/admin-ui"],
+};
+
+export default nextConfig;

package/templates/default/apps/admin/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@repo/admin",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "rm -rf .next && next dev --turbopack --port ${PORT_ADMIN:-4000}",
+    "build": "next build",
+    "start": "next start",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write",
+    "format": "biome format .",
+    "format:fix": "biome format --write .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.1.1",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@repo/admin-ui": "workspace:*",
+    "@repo/front-core": "workspace:*",
+    "@repo/server-core": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tanstack/react-query": "^5.81.5",
+    "@tanstack/react-table": "^8.21.3",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.523.0",
+    "next": "15.3.3",
+    "next-auth": "^5.0.0-beta.28",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.59.0",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.10",
+    "zod": "^3.25.67"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@faker-js/faker": "^9.0.0",
+    "@repo/config": "workspace:*",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tw-animate-css": "^1.3.4",
+    "typescript": "^5",
+    "vitest": "^3.2.2"
+  }
+}

package/templates/default/apps/admin/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/default/apps/admin/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "{{packageName}}/admin-ui/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { ArrowRight, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  email: z.string().email("Invalid email address").min(1, "Please enter your email"),
+});
+
+export default function ForgotPasswordPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: "" },
+  });
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true);
+    console.log("Forgot Password Data:", data);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      form.reset();
+      alert(`Email sent to ${data.email}`);
+      router.push("/otp");
+    }, 2000);
+  }
+
+  return (
+    <Card className="gap-4">
+      <CardHeader>
+        <CardTitle className="text-lg tracking-tight">Forgot Password</CardTitle>
+        <CardDescription>
+          Enter your registered email and <br /> we will send you a link to reset your password.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={cn("grid gap-2")}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="name@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button className="mt-2" disabled={isLoading}>
+              Continue
+              {isLoading ? <Loader2 className="animate-spin" /> : <ArrowRight />}
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+      <CardFooter>
+        <p className="mx-auto px-8 text-center text-sm text-balance text-muted-foreground">
+          Don&apos;t have an account?{" "}
+          <Link href="/sign-up" className="underline underline-offset-4 hover:text-primary">
+            Sign up
+          </Link>
+          .
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/templates/default/apps/admin/src/app/(auth)/layout.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+interface AuthLayoutProps {
+  children: ReactNode;
+}
+
+export default function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div className="container grid h-svh max-w-none items-center justify-center">
+      <div className="mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8">
+        <div className="mb-4 flex items-center justify-center">
+          <h1 className="text-xl font-medium">Admin Portal</h1>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/templates/default/apps/admin/src/app/(auth)/otp/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "{{packageName}}/admin-ui/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "{{packageName}}/admin-ui/ui/input-otp";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  otp: z.string().min(6, "Please enter the 6-digit code").max(6, "Please enter the 6-digit code"),
+});
+
+export default function OtpPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { otp: "" },
+  });
+
+  const otp = form.watch("otp");
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true);
+    console.log("OTP Data:", data);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      alert(`OTP verified: ${data.otp}`);
+      router.push("/");
+    }, 1000);
+  }
+
+  return (
+    <Card className="gap-4">
+      <CardHeader>
+        <CardTitle className="text-base tracking-tight">Two-factor Authentication</CardTitle>
+        <CardDescription>
+          Please enter the authentication code. <br /> We have sent the authentication code to your
+          email.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={cn("grid gap-2")}>
+            <FormField
+              control={form.control}
+              name="otp"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="sr-only">One-Time Password</FormLabel>
+                  <FormControl>
+                    <InputOTP
+                      maxLength={6}
+                      {...field}
+                      containerClassName="justify-between sm:[&>[data-slot='input-otp-group']>div]:w-12"
+                    >
+                      <InputOTPGroup>
+                        <InputOTPSlot index={0} />
+                        <InputOTPSlot index={1} />
+                      </InputOTPGroup>
+                      <InputOTPSeparator />
+                      <InputOTPGroup>
+                        <InputOTPSlot index={2} />
+                        <InputOTPSlot index={3} />
+                      </InputOTPGroup>
+                      <InputOTPSeparator />
+                      <InputOTPGroup>
+                        <InputOTPSlot index={4} />
+                        <InputOTPSlot index={5} />
+                      </InputOTPGroup>
+                    </InputOTP>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button className="mt-2" disabled={otp.length < 6 || isLoading}>
+              Verify
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+      <CardFooter>
+        <p className="px-8 text-center text-sm text-muted-foreground">
+          Haven&apos;t received it?{" "}
+          <Link href="/sign-in" className="underline underline-offset-4 hover:text-primary">
+            Resend a new code
+          </Link>
+          .
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}