mobile download

2026-05-28 14:44:19 +09:00
parent e2816b037f
commit 3503ef33f5
152 changed files with 11021 additions and 687 deletions
@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface SegmentedControlProps<T extends string> {
+  options: { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+  size?: 'sm' | 'md';
+}
+
+export default function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  size = 'md',
+}: SegmentedControlProps<T>) {
+  return (
+    <div className={`seg seg-${size}`} role="tablist">
+      {options.map(opt => (
+        <button
+          key={opt.value}
+          type="button"
+          role="tab"
+          aria-selected={value === opt.value}
+          className={`seg-item${value === opt.value ? ' active' : ''}`}
+          onClick={() => onChange(opt.value)}
+        >
+          {opt.label}
+        </button>
+      ))}
+      <style>{`
+        .seg {
+          display: flex;
+          background: rgba(255,255,255,0.06);
+          border-radius: 10px;
+          padding: 3px;
+          gap: 2px;
+        }
+        .seg-sm .seg-item { font-size: 11px; padding: 6px 8px; }
+        .seg-md .seg-item { font-size: 12px; padding: 8px 10px; }
+        .seg-item {
+          flex: 1;
+          border-radius: 8px;
+          color: var(--gc-text-muted);
+          font-weight: 500;
+          min-height: 32px;
+          transition: background 0.15s, color 0.15s;
+        }
+        .seg-item.active {
+          background: var(--gc-accent-soft);
+          color: var(--gc-accent);
+          font-weight: 600;
+        }
+      `}</style>
+    </div>
+  );
+}