style: jokey barnyard dashboard with comic sans
This commit is contained in:
@@ -1,8 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Activity,
|
||||
Egg,
|
||||
ExternalLink,
|
||||
History,
|
||||
LogOut,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Terminal } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
@@ -49,7 +58,7 @@ export default function DashboardPage() {
|
||||
setWallet(walletRes.data);
|
||||
setPendingRequests(reqRes.data.requests || []);
|
||||
} catch {
|
||||
toast.error("ERR_DASH_LOAD");
|
||||
toast.error("Chickens escaped! Failed to load.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -80,123 +89,167 @@ export default function DashboardPage() {
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background font-mono text-primary">
|
||||
_LOADING_COOP_V1.0.4
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-background text-primary gap-4 font-display">
|
||||
<Egg className="h-12 w-12 animate-bounce" />
|
||||
<span>Sitting on eggs...</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background font-mono text-foreground p-2 sm:p-4 selection:bg-primary selection:text-primary-foreground">
|
||||
<div className="mx-auto max-w-7xl border-2 border-foreground bg-card shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
|
||||
<div className="flex items-center justify-between border-b-2 border-foreground bg-primary p-2 text-primary-foreground">
|
||||
<div className="flex items-center gap-2 font-bold uppercase tracking-tighter">
|
||||
<Terminal className="h-4 w-4" />
|
||||
<span>COOP_STATION_V1 // {new Date().toLocaleDateString()}</span>
|
||||
<div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8 font-sans">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
{/* Barn Header */}
|
||||
<div className="flex flex-col items-center justify-between gap-4 rounded-3xl border-4 border-primary bg-accent/20 p-6 shadow-[8px_8px_0px_0px_rgba(192,111,74,1)] md:flex-row">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-primary p-3 text-primary-foreground shadow-lg">
|
||||
<Egg className="h-8 w-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-display text-4xl leading-none text-primary uppercase italic tracking-tighter">
|
||||
The Big Coop
|
||||
</h1>
|
||||
<p className="text-sm font-bold text-muted-foreground">
|
||||
Welcome back to the flock! 🐔
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRefresh}
|
||||
className="hover:underline"
|
||||
>
|
||||
[REFRESH]
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="hover:underline"
|
||||
>
|
||||
[LOGOUT]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-0 border-b-2 border-foreground sm:grid-cols-4">
|
||||
<div className="border-r-2 border-foreground p-3">
|
||||
<div className="text-[10px] uppercase text-muted-foreground underline">
|
||||
User_Balance
|
||||
</div>
|
||||
<div className="text-xl font-black">
|
||||
{formatNumber(wallet?.balance || 0)} $COOP
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-r-2 border-foreground p-3 bg-secondary/20">
|
||||
<div className="text-[10px] uppercase text-muted-foreground underline">
|
||||
In_Transit
|
||||
</div>
|
||||
<div className="text-xl font-black">
|
||||
{pendingRequests.length} PKTS
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-r-2 border-foreground p-3 hidden sm:block">
|
||||
<div className="text-[10px] uppercase text-muted-foreground underline">
|
||||
Sys_Costs
|
||||
</div>
|
||||
<div className="text-xl font-black">
|
||||
{requestCosts.movie}/{requestCosts.tv}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 bg-primary/10">
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
<Button
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
className="h-full w-full rounded-none border-2 border-foreground bg-primary font-bold uppercase shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none transition-none"
|
||||
className="rounded-full bg-primary px-6 font-bold text-lg hover:scale-105 transition-transform"
|
||||
>
|
||||
[+] NEW_REQ
|
||||
<Search className="mr-2 h-5 w-5" />
|
||||
PECK FOR FEED
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleRefresh}
|
||||
className="rounded-full border-2 border-primary bg-background font-bold text-primary hover:bg-primary/10"
|
||||
>
|
||||
<RefreshCw className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleLogout}
|
||||
className="rounded-full font-bold text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<LogOut className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-[1fr_300px]">
|
||||
<div className="border-r-2 border-foreground min-h-[600px]">
|
||||
{/* Nest Stats */}
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="group relative rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
|
||||
<div className="text-xs font-black uppercase tracking-widest text-muted-foreground">
|
||||
Your Nest Egg
|
||||
</div>
|
||||
<div className="mt-2 text-4xl font-black text-primary">
|
||||
{formatNumber(wallet?.balance || 0)}{" "}
|
||||
<span className="text-sm">$COOP</span>
|
||||
</div>
|
||||
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
||||
🥚
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative rounded-3xl border-4 border-foreground bg-secondary p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
|
||||
<div className="text-xs font-black uppercase tracking-widest text-secondary-foreground/60">
|
||||
Eggs Cooking
|
||||
</div>
|
||||
<div className="mt-2 text-4xl font-black text-secondary-foreground">
|
||||
{pendingRequests.length} <span className="text-sm">Requests</span>
|
||||
</div>
|
||||
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
||||
🔥
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative rounded-3xl border-4 border-foreground bg-accent p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all">
|
||||
<div className="text-xs font-black uppercase tracking-widest text-accent-foreground/60">
|
||||
Market Price
|
||||
</div>
|
||||
<div className="mt-2 text-2xl font-black text-accent-foreground">
|
||||
{requestCosts.movie} <span className="text-sm">/</span>{" "}
|
||||
{requestCosts.tv}
|
||||
</div>
|
||||
<div className="text-[10px] font-bold text-accent-foreground/50 uppercase">
|
||||
Movie / TV Series
|
||||
</div>
|
||||
<div className="absolute top-4 right-4 text-4xl opacity-20 group-hover:opacity-40 transition-opacity">
|
||||
🌽
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Yard */}
|
||||
<div className="grid gap-8 lg:grid-cols-[1fr_320px]">
|
||||
<div className="rounded-[3rem] border-4 border-foreground bg-card shadow-[12px_12px_0px_0px_rgba(0,0,0,0.1)]">
|
||||
<Tabs defaultValue="history" className="w-full">
|
||||
<TabsList className="flex w-full rounded-none border-b-2 border-foreground bg-muted p-0">
|
||||
<TabsList className="grid w-full grid-cols-3 gap-2 bg-muted/30 p-3 rounded-t-[2.75rem] border-b-4 border-foreground">
|
||||
<TabsTrigger
|
||||
value="history"
|
||||
className="flex-1 rounded-none border-r-2 border-foreground py-2 font-bold uppercase data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-none transition-none"
|
||||
className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:scale-105 transition-all"
|
||||
>
|
||||
HIST
|
||||
<History className="mr-2 h-4 w-4" /> WATCHED
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="requests"
|
||||
className="flex-1 rounded-none border-r-2 border-foreground py-2 font-bold uppercase data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-none transition-none"
|
||||
className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:scale-105 transition-all"
|
||||
>
|
||||
REQS
|
||||
<ExternalLink className="mr-2 h-4 w-4" /> ORDERS
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="leaderboard"
|
||||
className="flex-1 rounded-none py-2 font-bold uppercase data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-none transition-none"
|
||||
className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:scale-105 transition-all"
|
||||
>
|
||||
FLCK
|
||||
<Users className="mr-2 h-4 w-4" /> THE FLOCK
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="p-4">
|
||||
<TabsContent value="history" className="mt-0">
|
||||
<div className="p-6">
|
||||
<TabsContent
|
||||
value="history"
|
||||
className="mt-0 focus-visible:outline-none"
|
||||
>
|
||||
<WatchHistory />
|
||||
</TabsContent>
|
||||
<TabsContent value="requests" className="mt-0">
|
||||
<TabsContent
|
||||
value="requests"
|
||||
className="mt-0 focus-visible:outline-none"
|
||||
>
|
||||
<RequestHistory onRefresh={handleRefresh} />
|
||||
</TabsContent>
|
||||
<TabsContent value="leaderboard" className="mt-0">
|
||||
<TabsContent
|
||||
value="leaderboard"
|
||||
className="mt-0 focus-visible:outline-none"
|
||||
>
|
||||
<Leaderboard />
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/30">
|
||||
<div className="border-b-2 border-foreground bg-secondary/40 p-2 font-bold uppercase text-[10px] tracking-widest">
|
||||
>> SYSTEM_LOG
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-3xl border-4 border-foreground bg-accent/10 p-6 shadow-sm">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<Activity className="h-5 w-5 text-primary" />
|
||||
<h3 className="font-display text-2xl font-bold uppercase italic text-primary">
|
||||
Barn Noise
|
||||
</h3>
|
||||
</div>
|
||||
<div className="max-h-[500px] overflow-y-auto pr-2 scrollbar-hide">
|
||||
<ActivityFeed />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 text-[11px] leading-tight">
|
||||
<ActivityFeed />
|
||||
|
||||
<div className="rounded-3xl border-4 border-primary bg-primary/5 p-6 text-center italic">
|
||||
<p className="text-sm font-bold text-primary">
|
||||
"The early bird gets the 4K stream."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t-2 border-foreground bg-muted p-1 text-[9px] uppercase flex justify-between px-2">
|
||||
<span>COOP OS // ALL_SYSTEMS_GO</span>
|
||||
<span>LATENCY: 42MS // BH: {wallet?.totalEarned || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SearchRequestModal
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: "JetBrains Mono", "Fira Code", monospace;
|
||||
--font-display: "JetBrains Mono", monospace;
|
||||
--font-sans: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
|
||||
--font-display: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
|
||||
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
|
||||
Reference in New Issue
Block a user