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

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

@@ -1,3 +1,4 @@
+import ExpenseCard from "@/app/_components/expense/expense-card";
 import Header from "@/components/header";
 import Section from "@/components/section";
 import { Button } from "@/components/ui/button";
@@ -7,20 +8,26 @@ import React from "react";
 
 export default async function Page() {
   const splits = await api.expense.getAll();
+
   return (
     <>
       <Header text="Expenses">
-        <Button asChild>
+        <Button asChild size={"sm"}>
           <Link href="/add">Add Expense</Link>
         </Button>
       </Header>
       <Section>
-        {splits.map(({ expense }) => (
-          <div key={expense.id}>
-            <h2>{expense.description}</h2>
-            <p>{expense.amount}</p>
-          </div>
-        ))}
+        <div className="p-4 rounded-md flex items-center justify-center text-muted-foreground bg-card/25">
+          Expense Stats
+        </div>
+
+        <ul className="space-y-4">
+          {splits.map((expense) => (
+            <li key={expense.id}>
+              <ExpenseCard expense={expense} />
+            </li>
+          ))}
+        </ul>
       </Section>
     </>
   );