set up for shadcn-ui

app/components/home/running-bar-chart.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+
+const data = [
+ {
+ name: "Jan",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Feb",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Mar",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Apr",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "May",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Jun",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Jul",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Aug",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Sep",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Oct",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Nov",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: "Dec",
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+];
+
+export default function RunningBarChart() {
+ return (
+ <ResponsiveContainer width="100%" height={350}>
+ <BarChart data={data}>
+ <XAxis
+ dataKey="name"
+ stroke="#888888"
+ fontSize={12}
+ tickLine={false}
+ axisLine={false}
+ />
+ <YAxis
+ stroke="#888888"
+ fontSize={12}
+ tickLine={false}
+ axisLine={false}
+ tickFormatter={(value: any) => `$${value}`}
+ />
+ <Bar dataKey="total" fill="#adfa1d" radius={[4, 4, 0, 0]} />
+ </BarChart>
+ </ResponsiveContainer>
+ );
+}

app/components/home/running.tsx

@@ -1,11 +1,16 @@
 import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
+import RunningBarChart from "./running-bar-chart";
 
 export const dynamic = "force-dynamic";
 
 export default async function Running() {
  const supabase = createServerComponentClient<Database>({ cookies });
  const { data: runs } = await supabase.from("running").select();
 
- return <div>RUNS</div>;
+ return (
+ <div>
+ <RunningBarChart />
+ </div>
+ );
 }

app/globals.css

@@ -2,26 +2,82 @@
 @tailwind components;
 @tailwind utilities;
 
-/* :root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 47.4% 11.2%;
+
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 47.4% 11.2%;
+
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 47.4% 11.2%;
+
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: 0 100% 50%;
+ --destructive-foreground: 210 40% 98%;
+
+ --ring: 215 20.2% 65.1%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 224 71% 4%;
+ --foreground: 213 31% 91%;
+
+ --muted: 223 47% 11%;
+ --muted-foreground: 215.4 16.3% 56.9%;
+
+ --accent: 216 34% 17%;
+ --accent-foreground: 210 40% 98%;
+
+ --popover: 224 71% 4%;
+ --popover-foreground: 215 20.2% 65.1%;
+
+ --border: 216 34% 17%;
+ --input: 216 34% 17%;
+
+ --card: 224 71% 4%;
+ --card-foreground: 213 31% 91%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 1.2%;
+
+ --secondary: 222.2 47.4% 11.2%;
+ --secondary-foreground: 210 40% 98%;
+
+ --destructive: 0 63% 31%;
+ --destructive-foreground: 210 40% 98%;
+
+ --ring: 216 34% 17%;
+
+ --radius: 0.5rem;
+ }
 }
 
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
+@layer base {
+ * {
+ @apply border-border;
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ font-feature-settings: "rlig" 1, "calt" 1;
  }
 }
-*/
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-} 
+