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

src/app/_components/expense/expense-split.tsx

@@ -3,15 +3,14 @@ import React from "react";
 import FriendSelect from "../friend/friend-select";
 import { Button } from "@/components/ui/button";
 
-import type { Session } from "next-auth";
-
 import { Icons } from "@/components/icons";
 import { useExpenseStore } from "@/lib/store/expense-store";
 import PaidByInput from "./paid-by";
 import { api } from "@/trpc/react";
 import SplitTo from "./split-to";
+import type { User } from "@/server/db/schema";
 
-export default function ExpenseSplit({ session }: { session: Session }) {
+export default function ExpenseSplit({ sessionUser }: { sessionUser: User }) {
   const [friends] = api.friend.getAll.useSuspenseQuery();
 
   const friendTarget = useExpenseStore((state) => state.friendTarget);
@@ -22,7 +21,7 @@ export default function ExpenseSplit({ session }: { session: Session }) {
     <div className="space-y-4 ">
       <div className="flex items-center justify-center gap-2">
         <span>Paid by</span>
-        <PaidByInput sessionUser={session.user} />
+        <PaidByInput sessionUser={sessionUser} />
       </div>
       <div className="flex items-center justify-center gap-2">
         <span>and spliited</span>