Sleep Score

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
"use client";
 
import { forwardRef, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
import { Moon } from "lucide-react";
 
const MASCOT = "#38BDF8";
const ACCENT = "#7DD3FC";
const DIAL = { cx: 88, cy: 84, r: 56 } as const;
 
export type SleepScoreWidgetProps = Readonly<
  {
    score?: number;
    quality?: string;
    duration?: string;
    label?: string;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Sleep score — DND-style face card with closed eyes and a calm dial.
export const SleepScoreWidget = forwardRef<
  HTMLDivElement,
  SleepScoreWidgetProps
>(
  (
    {
      className,
      score = 87,
      quality = "Good",
      duration = "7h 24m",
      label = "Sleep",
      ...props
    },
    ref,
  ) => {
    return (
      <div
        ref={ref}
        data-slot="sleep-score-widget"
        className={cn(
          "relative h-44 w-44 overflow-hidden rounded-[1.75rem] bg-black font-sans shadow-lg shadow-black/5 select-none",
          className,
        )}
        {...props}
      >
        <svg
          viewBox="0 0 176 176"
          className="absolute inset-0 h-full w-full"
          aria-hidden
        >
          <rect width="176" height="176" fill="#020617" />
          <circle cx="88" cy="142" r="58" fill={MASCOT} />
          <path
            d="M64 122 Q68 118 72 122"
            stroke="white"
            strokeWidth="2.2"
            fill="none"
            strokeLinecap="round"
          />
          <path
            d="M104 122 Q108 118 112 122"
            stroke="white"
            strokeWidth="2.2"
            fill="none"
            strokeLinecap="round"
          />
          <path
            d="M78 138 Q88 143 98 138"
            stroke="white"
            strokeWidth="2.2"
            fill="none"
            strokeLinecap="round"
          />
          <circle
            cx={DIAL.cx}
            cy={DIAL.cy}
            r={DIAL.r}
            fill="none"
            stroke={ACCENT}
            strokeWidth="1.5"
            opacity="0.28"
          />
        </svg>
 
        <span className="absolute top-3.5 right-3.5 z-10" aria-hidden>
          <Moon size={14} color={ACCENT} fill={ACCENT} />
        </span>
 
        <div className="absolute inset-x-0 top-[32%] z-10 px-3 text-center">
          <p className="text-base leading-none font-semibold text-white tabular-nums">
            {score}
          </p>
          <p className="mt-1 text-[10px] font-medium tracking-wide text-white/40 uppercase">
            {quality} {label}
          </p>
        </div>
 
        <p className="absolute inset-x-0 bottom-3.5 z-10 text-center text-[10px] text-white/30 tabular-nums">
          {duration}
        </p>
      </div>
    );
  },
);
 
SleepScoreWidget.displayName = "SleepScoreWidget";