migrated from auth.js to clerk; some ui remake; added expense-card

src/app/(router)/add/page.tsx

@@ -1,22 +1,24 @@
 import ExpenseForm from "@/app/_components/expense/expense-form";
 import Header from "@/components/header";
-import Section from "@/components/section";
+
 import { Button } from "@/components/ui/button";
-import { auth } from "@/server/auth";
 import { api, HydrateClient } from "@/trpc/server";
+import { currentUser } from "@clerk/nextjs/server";
 import React from "react";
 
 export default async function Page() {
-  const session = await auth();
-  if (session?.user) void api.friend.getAll.prefetch();
+  const user = await currentUser();
+  if (user) void api.friend.getAll.prefetch();
+  const sessionUser = await api.user.getSessionUser();
+
   return (
     <HydrateClient>
       <Header text="Add Expense">
-        <Button type="submit" form="expense-form">
+        <Button type="submit" form="expense-form" size={"sm"}>
           Create Expense
         </Button>
       </Header>
-      <ExpenseForm hideSubmit session={session!} />
+      <ExpenseForm hideSubmit sessionUser={sessionUser!} />
     </HydrateClient>
   );
 }