DocsComponentsBlog
Star us
Docs

Battery Level

A widget that shows battery level of different devices

Installation

Update tailwind.config.js

theme: {
    extend: {
     colors: {
        foreground: "hsl(var(--foreground))",
        background: "hsl(var(--background))",
     }
    },
  },

Run the following command

It will create a new file called battery-level.tsx inside the components/animata/widget directory.

mkdir -p components/animata/widget && touch components/animata/widget/battery-level.tsx

Paste the code

Open the newly created file and paste the following code:

import { AppleIcon, Laptop, Phone, Watch } from "lucide-react";
 
import DonutChart from "@/animata/graphs/donut-chart";
 
const items = [
  {
    level: 100,
    icon: AppleIcon,
  },
  {
    level: 40,
    icon: Phone,
  },
  {
    level: 80,
    icon: Laptop,
  },
  {
    level: 20,
    icon: Watch,
  },
];
 
export default function BatteryLevel() {
  return (
    <div className="grid size-52 grid-cols-2 grid-rows-2 justify-evenly rounded-3xl bg-foreground p-4 text-background">
      {items.map((item, index) => {
        return (
          <DonutChart
            progress={item.level}
            circleWidth={10}
            progressWidth={10}
            size={76}
            className="relative flex items-center justify-center"
            key={`item_${index}`}
            trackClassName="text-green-500/50 text-green-100/30"
          >
            <item.icon className="absolute" size={24} />
          </DonutChart>
        );
      })}
    </div>
  );
}

Credits

Built by hari

Edit this page on GitHub
BatteryCalendar event