A widget to display storage
npm install lucide-react
It will create a new file called storage-widget.tsx inside the components/animata/widget directory.
storage-widget.tsx
components/animata/widget
mkdir -p components/animata/widget && touch components/animata/widget/storage-widget.tsx
Open the newly created file and paste the following code:
import { Ban, Loader, Minus } from "lucide-react"; const getColor = (count: number) => { const colors: { [key: number]: string } = { 0: "bg-purple-400", 1: "bg-pink-400", 2: "bg-blue-400", 3: "bg-gray-600", }; return colors[count]; }; export default function StorageWidget() { const columns = 7; const rows = 15; const storageData = Array.from({ length: rows }, (_, i) => Array.from({ length: columns }, (_, j) => { if (i * columns + j + 1 <= 42) return 0; if (i * columns + j + 1 <= 54) return 1; if (i * columns + j + 1 <= 73) return 2; return 3; }), ); return ( <div className="size-52 rounded-3xl bg-zinc-800 p-4 text-gray-400"> <div className="flex justify-between"> <div> <div className="flex items-end gap-1"> <div className="text-3xl font-semibold text-white">5.31</div> <div className="font-semibold">/16 GB</div> </div> <div className="mt-1 flex items-center"> <Ban className="mr-1 rotate-45" size={16} /> 28% </div> </div> <div className="relative"> <Minus size={44} color="white" className="rotate-45 rounded-full border-4 border-black pl-2" /> <Loader className="absolute left-2 top-2" color="white" size={22} /> </div> </div> <div className="flex gap-1"> {storageData.map((week, i) => ( <div key={`week-${i}`} className="flex flex-col gap-1"> {week.map((storageCount, j) => ( <div key={`week-${i}-day-${j}`} className={`h-2 w-2 rounded-[2px] ${getColor(storageCount)}`} /> ))} </div> ))} </div> <div className="flex justify-between font-bold text-gray-600"> <div className="flex gap-1"> <p className="text-purple-400">5.90</p>|<p className="text-pink-400">2.15</p>| <p className="text-blue-400">2.59</p> </div> <div className="text-gray-300">GB</div> </div> </div> ); }
Built by Aashish Katila yevhenyurchuk.com