style: simplify dashboard hero
This commit is contained in:
@@ -1,17 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
ArrowRight,
|
||||
BadgeDollarSign,
|
||||
Bird,
|
||||
Clock3,
|
||||
Loader2,
|
||||
PartyPopper,
|
||||
RefreshCw,
|
||||
ShieldCheck,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -134,84 +132,30 @@ export default function DashboardPage() {
|
||||
<div className="relative min-h-screen overflow-hidden px-4 py-6 sm:px-6 lg:px-8">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(185,28,28,0.12),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(217,119,6,0.10),_transparent_28%),radial-gradient(circle_at_bottom,_rgba(120,53,15,0.06),_transparent_40%)]" />
|
||||
<div className="mx-auto max-w-7xl space-y-6">
|
||||
<div className="overflow-hidden rounded-[2rem] border border-primary/15 bg-gradient-to-br from-primary via-primary to-amber-700 text-primary-foreground shadow-[0_30px_80px_-40px_rgba(127,29,29,0.7)]">
|
||||
<div className="grid gap-8 p-6 sm:p-8 lg:grid-cols-[1.4fr_0.9fr] lg:p-10">
|
||||
<div className="space-y-5">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-white/90">
|
||||
<Bird className="h-4 w-4" />
|
||||
Join flock
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-display text-4xl leading-none sm:text-5xl lg:text-6xl">
|
||||
Barnyard coop
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-sm/6 text-white/85 sm:text-base">
|
||||
Keep nest full, request feed, track harvest. Warm barn light,
|
||||
quick lookup, no fluff.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
className="bg-amber-200 text-amber-950 hover:bg-amber-100"
|
||||
>
|
||||
Request content <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleRefresh}
|
||||
className="border-white/25 bg-white/10 text-white hover:bg-white/20"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Check requests
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleLogout}
|
||||
className="border-white/25 bg-white/10 text-white hover:bg-white/20"
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-3 rounded-[1.5rem] border border-white/15 bg-white/10 p-4 backdrop-blur-md">
|
||||
<div className="rounded-2xl bg-white/15 p-4">
|
||||
<div className="flex items-center justify-between text-white/80">
|
||||
<span className="text-xs uppercase tracking-[0.3em]">
|
||||
Nest Egg
|
||||
</span>
|
||||
<ShieldCheck className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="mt-3 text-4xl font-bold">
|
||||
{formatNumber(wallet?.balance || 0)}{" "}
|
||||
<span className="text-xl">$COOP</span>
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-white/75">
|
||||
Ready to spend on requests.
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-2xl bg-black/10 p-4">
|
||||
<div className="text-[11px] uppercase tracking-[0.25em] text-white/70">
|
||||
Gathered
|
||||
</div>
|
||||
<div className="mt-2 text-2xl font-bold">
|
||||
{formatNumber(wallet?.totalEarned || 0)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-black/10 p-4">
|
||||
<div className="text-[11px] uppercase tracking-[0.25em] text-white/70">
|
||||
Spent
|
||||
</div>
|
||||
<div className="mt-2 text-2xl font-bold">
|
||||
{formatNumber(wallet?.totalSpent || 0)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3 rounded-2xl border border-primary/10 bg-card/70 px-5 py-4 shadow-sm backdrop-blur-sm">
|
||||
<div>
|
||||
<div className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
|
||||
Dashboard
|
||||
</div>
|
||||
<h1 className="font-display text-3xl">Barnyard coop</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="secondary" onClick={handleRefresh}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<StatTile
|
||||
label="Nest Egg"
|
||||
value={`${formatNumber(wallet?.balance || 0)} $COOP`}
|
||||
hint="Ready to spend"
|
||||
icon={ShieldCheck}
|
||||
/>
|
||||
<StatTile
|
||||
label="Pending requests"
|
||||
value={String(pendingRequests.length)}
|
||||
@@ -219,17 +163,11 @@ export default function DashboardPage() {
|
||||
icon={Clock3}
|
||||
/>
|
||||
<StatTile
|
||||
label="Movie cost"
|
||||
value={`${requestCosts.movie}`}
|
||||
hint="One fetch"
|
||||
label="Request costs"
|
||||
value={`${requestCosts.movie}/${requestCosts.tv}`}
|
||||
hint="Movie / TV"
|
||||
icon={BadgeDollarSign}
|
||||
/>
|
||||
<StatTile
|
||||
label="TV cost"
|
||||
value={`${requestCosts.tv}`}
|
||||
hint="Season hangout"
|
||||
icon={PartyPopper}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-6 lg:grid-cols-[1.35fr_0.65fr]">
|
||||
<Card className="border-primary/10 bg-card/80 shadow-[0_18px_50px_-30px_rgba(0,0,0,0.45)] backdrop-blur-sm">
|
||||
|
||||
Reference in New Issue
Block a user