Components
Loading preview...
Battery Card A visually polished component to display device battery status, featuring a dynamic, animated liquid-fill effect that reflects the current charge level.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/battery-cardimport * as React from "react";
import { BatteryCard } from "@/components/ui/battery-card"; // Adjust the import path
import { Laptop } from "lucide-react";
const BatteryCardDemo = () => {
const [batteryLevel, setBatteryLevel] = React.useState(55);
// Effect to simulate battery charging for demonstration purposes
React.useEffect(() => {
const interval = setInterval(() => {
setBatteryLevel((prevLevel) => {
const newLevel = prevLevel + 1;
// Reset when it reaches 100
return newLevel > 100 ? 20 : newLevel;
});
}, 800); // Update every 800ms
// Clean up the interval on component unmount
return () => clearInterval(interval);
}, []);
// Format the remaining time based on battery level
const formatTime = (level: number) => {
if (level >= 100) return "Charged";
const remainingPercentage = 100 - level;
const minutesRemaining = Math.round(remainingPercentage * 1.5); // Simple estimation logic
const hours = Math.floor(minutesRemaining / 60);
const minutes = minutesRemaining % 60;
if (hours > 0) {
return `${hours}h ${minutes}m`;
}
return `${minutes}m`;
};
return (
<div className="flex items-center justify-center bg-background p-10">
<BatteryCard
deviceName="Josh MacBook"
deviceIcon={<Laptop className="h-4 w-4" />}
batteryLevel={batteryLevel}
isCharging={true}
timeToFull={formatTime(batteryLevel)}
estimateLabel="Time to full charge"
/>
</div>
);
};
export default BatteryCardDemo;