65 lines
2.1 KiB
TypeScript

import { appConfig } from "@/app.config";
import Header from "@/components/header";
import Section from "@/components/section";
import { ModeToggle } from "@/components/mode-toggle";
import { UserButton } from "@clerk/nextjs";
import { Icons } from "@/components/icons";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { getAmount } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import Link from "next/link";
export default async function Home() {
return (
<>
<Header
text={
<>
<Icons.logo
className="size-32 scale-125 mr-2 absolute -left-4 -top-1/2 text-muted-foreground/5 -z-10
mask-r-from-30%
"
/>
<span>{appConfig.name}</span>
<ModeToggle className="ml-4" />
</>
}
>
<div className="flex gap-6 items-center ">
<UserButton />
</div>
</Header>
<Section className="">
<Card className="bg-card/5">
<CardHeader className="flex items-center">
<CardTitle className="size-full flex flex-col gap-1">
<p>
Your Balance{" "}
<span className="font-normal text-sm text-muted-foreground">
(You Owe)
</span>
</p>
<span className="text-xl text-destructive">
{getAmount(812.47)}
</span>
</CardTitle>
<Link
className="cursor-pointer h-max flex items-center bg-primary text-primary-foreground rounded-lg pl-4 w-24 justify-between"
href={"/add"}
>
<span>Add</span>
<Icons.addSquare className="size-8" />
</Link>
</CardHeader>
</Card>
<div className="size-full border rounded-xl"></div>
<div className="size-full border rounded-xl"></div>
<div className="size-full border rounded-xl"></div>
<div className="size-full border rounded-xl max-h-52"></div>
</Section>
</>
);
}