Apple Activity Card

1"use client";
2 
3/**
4 * @author: @kokonutui
5 * @description: Apple Activity Card
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { cn } from "@/lib/utils";
15 
16interface ActivityData {
17  label: string;
18  value: number;
19  color: string;
20  size: number;
21  current: number;
22  target: number;
23  unit: string;
24}
25 
26interface CircleProgressProps {
27  data: ActivityData;
28  index: number;
29}
30 
31const activities: ActivityData[] = [
32  {
33    label: "MOVE",
34    value: 85,
35    color: "#FF2D55",
36    size: 200,
37    current: 479,
38    target: 800,
39    unit: "CAL",
40  },
41  {
42    label: "EXERCISE",
43    value: 60,
44    color: "#A3F900",
45    size: 160,
46    current: 24,
47    target: 30,
48    unit: "MIN",
49  },
50  {
51    label: "STAND",
52    value: 30,
53    color: "#04C7DD",
54    size: 120,
55    current: 6,
56    target: 12,
57    unit: "HR",
58  },
59];
60 
61const CircleProgress = ({ data, index }: CircleProgressProps) => {
62  const strokeWidth = 16;
63  const radius = (data.size - strokeWidth) / 2;
64  const circumference = radius * 2 * Math.PI;
65  const progress = ((100 - data.value) / 100) * circumference;
66 
67  const gradientId = `gradient-${data.label.toLowerCase()}`;
68  const gradientUrl = `url(#${gradientId})`;
69 
70  return (
71    <motion.div
72      animate={{ opacity: 1, scale: 1 }}
73      className="absolute inset-0 flex items-center justify-center"
74      initial={{ opacity: 0, scale: 0.8 }}
75      transition={{ duration: 0.8, delay: index * 0.2, ease: "easeOut" }}
76    >
77      <div className="relative">
78        <svg
79          aria-label={`${data.label} Activity Progress - ${data.value}%`}
80          className="-rotate-90 transform"
81          height={data.size}
82          viewBox={`0 0 ${data.size} ${data.size}`}
83          width={data.size}
84        >
85          <title>{`${data.label} Activity Progress - ${data.value}%`}</title>
86 
87          <defs>
88            <linearGradient id={gradientId} x1="0%" x2="100%" y1="0%" y2="100%">
89              <stop
90                offset="0%"
91                style={{
92                  stopColor: data.color,
93                  stopOpacity: 1,
94                }}
95              />
96              <stop
97                offset="100%"
98                style={{
99                  stopColor:
100                    data.color === "#FF2D55"
101                      ? "#FF6B8B"
102                      : data.color === "#A3F900"
103                        ? "#C5FF4D"
104// … truncated