A calorie counter for your app
It will create a new file called calorie-counter.tsx inside the components/animata/widget directory.
calorie-counter.tsx
components/animata/widget
mkdir -p components/animata/widget && touch components/animata/widget/calorie-counter.tsx
Open the newly created file and paste the following code:
"use client"; import DonutChart from "@/animata/graphs/donut-chart"; interface ICalorieCounterProps { goal: number; fulfilled: number; image: string; } export const testCalorieCounterProps: ICalorieCounterProps = { goal: 4000, fulfilled: 120, image: "https://plus.unsplash.com/premium_vector-1689096672037-98309fdc7f44?bg=FFFFFF&q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3", }; export default function CalorieCounter({ goal = testCalorieCounterProps.goal, fulfilled = testCalorieCounterProps.fulfilled, image = testCalorieCounterProps.image, }: ICalorieCounterProps) { return ( <div className="calorie-container relative flex h-96 w-52 flex-col items-center justify-start gap-4 rounded-3xl border-2 border-gray-200 bg-gray-100 px-5 py-3 dark:border-none dark:bg-slate-800 sm:w-72"> <div className="day-date flex w-full flex-row items-center justify-between pt-2"> <div> <p className="day text-gray-400">Monday</p> <p className="date font-md text-xl dark:text-white">25 October</p> </div> <img alt="image" src={image} className="h-10 w-10 rounded-full" /> </div> <DonutChart progress={(fulfilled / goal) * 100} circleWidth={18} progressWidth={18} size={180} progressClassName="dark:text-cyan-300 text-green-400" className="relative m-2 flex items-center justify-center" /> <div className="goal absolute bottom-8 flex h-14 w-56 items-center justify-between rounded-xl border-gray-100 bg-gray-400 bg-opacity-10 bg-clip-padding px-4 backdrop-blur-sm backdrop-filter sm:w-64"> <p className="dark:text-white">Your goal</p> <p className="font-bold text-orange-300">{goal}Cal</p> </div> <div className="fulfilled absolute top-40 flex flex-col items-center"> <p className="text-gray-400 dark:text-gray-200">Today</p> <p className="font-md text-xl dark:text-white">{fulfilled}Cal</p> </div> </div> ); }
Built by Aadarsh Baral