从零搭建基于 AI 问答平台(4) Home Page/Dashboard

效果

实现步骤如下：

修改首页

修改 src/app/page.tsx:

"use client"

import { useUser } from '@clerk/nextjs';
import { redirect } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Link from "next/link";

export default function Home() {
  const { isSignedIn, isLoaded } = useUser();

  if (!isLoaded) {
    return <div>Loading...</div>
  };

  if (isSignedIn) {
    return redirect("/dashboard");
  };

  return (
    <div className="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
      <Card className="w-[300px]">
        <CardHeader>
          <CardTitle>Welcome to Smartquiz 🔥!</CardTitle>
          <CardDescription>
            Smartquiz is a platform for creating quizzes using AI!. Get started by loggin in below!
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button asChild>
            <Link href="/sign-in">Sign In</Link>
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}

添加 Dashboard

添加 src/app/dashboard/page.tsx:

import React from 'react';
import { auth } from '@clerk/nextjs/server';
import { redirect } from 'next/navigation';
import QuizMeCard from '@/components/dashboard/QuizMeCard';
import HistoryCard from '@/components/dashboard/HistoryCard';
import HotTopicsCard from '@/components/dashboard/HotTopicsCard';
import RecentActivityCard from '@/components/dashboard/RecentActivityCard';

type Props = {}

export const metadata = {
  title: 'Dashboard | Smartquiz',
};

const Dashboard = async (props: Props) => {
  const { userId } = await auth();

  if (!userId) {
    return redirect('/');
  }

  return (
    <main className="p-8 mx-auto max-w-7xl">
      <div className="flex items-center">
        <h2 className="mr-2 text-3xl font-bold tracking-tight">Dashboard</h2>
      </div>

      <div className="grid gap-4 mt-4 md:grid-cols-2">
        <QuizMeCard />
        <HistoryCard />
      </div>
      <div className="grid gap-4 mt-4 md:grid-cols-2 lg:grid-cols-7">
        <HotTopicsCard />
        <RecentActivityCard />
      </div>
    </main>
  )
}

export default Dashboard;

---

作者：Bearalise
出处：从零搭建基于 AI 问答平台(4) Home Page/Dashboard
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。