app/_components/HomeScreen/HomeCreateButton.tsx
"use client";

import { api } from "~/trpc/react";
import { redirect, useRouter } from "next/navigation";
import React from "react";


const HomeCreateButton = () => {
  const router = useRouter();
  const createBaseMutation = api.base.create.useMutation();
  const handleCreate = async () => {
    const base = await createBaseMutation.mutateAsync(
      {name: "Untitled Base"}
    );
    router.push(`/${base.id}`);

  }

  return (
    <button 
      className="bg-blue-600 w-full flex justify-center items-center p-[0.4rem] rounded-md gap-2 mt-2"
      onClick={handleCreate}>
      <svg
        width="14"
        height="14"
        viewBox="0 0 16 16"
        className="flex-none"
        fill="white"
      >
        <use href="/icons/icons_definitions.svg#Plus"></use>
      </svg>
      <span className="text-white text-[0.75rem]">Create</span>
    </button>
  )
}

export default HomeCreateButton;

app/[baseId]/page.tsx
"use client";

import React from "react";
import { api } from "~/trpc/react";

interface BasePageProps {
  params: {
    baseId: string;
  };
}

export default function BasePage({ params }: BasePageProps) {
  // Call getById to load the base
  const { data: base, isLoading } = api.base.getById.useQuery({
    baseId: params.baseId,
  });

  if (isLoading) {
    return <div className="p-4">Loading base...</div>;
  }

  if (!base) {
    return (
      <div className="p-4">
        <p>Base not found or you do not have permission.</p>
      </div>
    );
  }

  // Once loaded, you can render the base’s “dummy content” or table or anything else
  return (
    <div className="p-4">

      {/* Put your placeholder or real table UI here */}
      <p className="mt-4">TODO: Build out the real table UI for {base.name}!</p>
    </div>
  );
}