"use client";
import { type Survey } from "@prisma/client";
import Link from "next/link";
import { useState, type FC } from "react";
import { cn } from "~/lib/utils";
import { buttonVariants } from "./ui/button";

interface SurveyListProps {
  defaultSurveys: Survey[];
}

const SurveyList: FC<SurveyListProps> = ({ defaultSurveys }) => {
  const [surveys, setSurveys] = useState<Survey[]>(defaultSurveys);
  return (
    <div className="mt-10 p-6">
      <h1 className="mb-5 pl-20 text-3xl">Your Surveys:</h1>
      <div className="mx-auto grid w-3/4 grid-cols-6 gap-2">
        {surveys.map((survey, index) => (
          <Link
            href={`/survey/${survey.id}`}
            className={cn(
              "col-span-1 gap-2 border",
              buttonVariants({ variant: "link" }),
            )}
          >
            {survey.title}
          </Link>
        ))}
      </div>
    </div>
  );
};

export default SurveyList;

import { redirect } from "next/navigation";
import Navbar from "~/components/Navbar";
import { getServerAuthSession } from "~/server/auth";
import NewSurveyDialog from "~/components/NewSurveyDialog";
import SurveyList from "~/components/SurveyList";
import { api } from "~/trpc/server";

const Account = async () => {
  const session = await getServerAuthSession();
  if (!session) {
    redirect("/");
  }

  const surveys = await api.survey.getAll.query();

  return (
    <>
      <Navbar />
      <main className="mx-auto w-2/3">
        <h1 className="p-20 pb-0 text-5xl text-zinc-400">
          Hello, <span className="italic">{session.user.name}</span>
        </h1>
        <SurveyList defaultSurveys={surveys} />
        <NewSurveyDialog />
      </main>
    </>
  );
};

export default Account;