import { motion } from "motion/react";
import { cn } from "@/lib/utils";
interface ActivityData {
label: string;
value: number;
color: string;
size: number;
current: number;
target: number;
unit: string;
}
interface CircleProgressProps {
data: ActivityData;
index: number;
}
const activities: ActivityData[] = [
{
label: "MOVE",
value: 85,
color: "#FF2D55",
size: 200,
current: 479,
target: 800,
unit: "CAL",
},
{
label: "EXERCISE",
value: 60,
color: "#A3F900",
size: 160,
current: 24,
target: 30,
unit: "MIN",
},
{
label: "STAND",
value: 30,
color: "#04C7DD",
size: 120,
current: 6,
target: 12,
unit: "HR",
},
];
const CircleProgress = ({ data, index }: CircleProgressProps) => {
const strokeWidth = 16;
const radius = (data.size - strokeWidth) / 2;
const circumference = radius * 2 * Math.PI;
const progress = ((100 - data.value) / 100) * circumference;
const gradientId = `gradient-${data.label.toLowerCase()}`;
const gradientUrl = `url(#${gradientId})`;
return (
);
};
const DetailedActivityInfo = () => {
return (
{activities.map((activity) => (
{activity.label}
{activity.current}/{activity.target}
{activity.unit}
))}
);
};
export default function AppleActivityCard({
title = "Activity Rings",
className,
}: {
title?: string;
className?: string;
}) {
return (
{title}
{activities.map((activity, index) => (