first commit

2026-09-28 13:52:25 +07:00
commit 566275348c
262 changed files with 37008 additions and 0 deletions
@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import Icon from '@/components/site/icon';
+import { cn } from '@/lib/utils';
+
+const tones = {
+    neutral:
+        'border-outline-variant/60 bg-surface-container-high text-on-surface-variant',
+    brand: 'border-primary/40 bg-primary-container/10 text-primary dark:bg-primary-container/25 dark:text-highlight',
+} as const;
+
+type PillProps = {
+    tone?: keyof typeof tones;
+    icon?: string;
+    /** Show a pulsing status dot instead of an icon. */
+    pulse?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+
+export default function Pill({
+    tone = 'neutral',
+    icon,
+    pulse = false,
+    className,
+    children,
+}: PillProps) {
+    return (
+        <div
+            className={cn(
+                'inline-flex items-center gap-2 self-start rounded-full border px-3.5 py-1.5 font-mono text-xs font-semibold',
+                tones[tone],
+                className,
+            )}
+        >
+            {pulse && (
+                <span className="relative flex h-2.5 w-2.5">
+                    <span className="bg-primary absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" />
+                    <span className="bg-primary relative inline-flex h-2.5 w-2.5 rounded-full" />
+                </span>
+            )}
+            {icon && <Icon name={icon} className="text-primary text-base" />}
+            <span>{children}</span>
+        </div>
+    );
+}