"use client";
import { Minus, Plus } from "blode-icons-react";
import type * as React from "react";
import { useState } from "react";
import { Bar, BarChart, ResponsiveContainer } from "recharts";
import { Button } from "@/components/ui/button";
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
const data = [
{
goal: 400,
},
{
goal: 300,
},
{
goal: 200,
},
{
goal: 300,
},
{
goal: 200,
},
{
goal: 278,
},
{
goal: 189,
},
{
goal: 239,
},
{
goal: 300,
},
{
goal: 200,
},
{
goal: 278,
},
{
goal: 189,
},
{
goal: 349,
},
];
export const DrawerDemo = () => {
const [goal, setGoal] = useState(350);
const onClick = (adjustment: number) => {
setGoal(Math.max(200, Math.min(400, goal + adjustment)));
};
return (
<Drawer>
<DrawerTrigger asChild>
<Button variant="outline">Open Drawer</Button>
</DrawerTrigger>
<DrawerContent>
<div className="mx-auto w-full max-w-sm">
<DrawerHeader>
<DrawerTitle>Move Goal</DrawerTitle>
<DrawerDescription>Set your daily activity goal.</DrawerDescription>
</DrawerHeader>
<div className="p-4 pb-0">
<div className="flex items-center justify-center space-x-2">
<Button
className="h-8 w-8 shrink-0 rounded-full"
disabled={goal <= 200}
onClick={() => onClick(-10)}
size="icon"
variant="outline"
>
<Minus />
<span className="sr-only">Decrease</span>
</Button>
<div className="flex-1 text-center">
<div className="font-bold text-7xl tracking-tighter">{goal}</div>
<div className="text-[0.70rem] text-muted-foreground uppercase">Calories/day</div>
</div>
<Button
className="h-8 w-8 shrink-0 rounded-full"
disabled={goal >= 400}
onClick={() => onClick(10)}
size="icon"
variant="outline"
>
<Plus />
<span className="sr-only">Increase</span>
</Button>
</div>
<div className="mt-3 h-[120px]">
<ResponsiveContainer height="100%" width="100%">
<BarChart data={data}>
<Bar
dataKey="goal"
style={
{
fill: "var(--chart-1)",
} as React.CSSProperties
}
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</div>
</DrawerContent>
</Drawer>
);
};