feat: auth & admin

2026-06-03 10:41:53 +03:00
parent 612d0f0125
commit 7dc59fb3c4
120 changed files with 4683 additions and 2159 deletions
@@ -0,0 +1,101 @@
+/*
+ * Thin wrapper over @phosphor-icons/react so app code can reference icons by
+ * the kebab names used in the design reference (`<Icon name="vinyl-record" />`)
+ * instead of importing each component. modern-sk is intentionally icon-agnostic
+ * (its SearchField/MenuItem/Callout take an `icon` ReactNode), so the icon set
+ * is the app's concern.
+ *
+ * The rendered <svg> carries className "ph" and sizes to 1em, so the shell CSS
+ * controls size/colour via font-size + currentColor, exactly like the reference.
+ */
+import type { CSSProperties } from 'react';
+import {
+  ArrowCircleDown,
+  ArrowsClockwise,
+  CheckCircle,
+  Cloud,
+  DotsSixVertical,
+  GearSix,
+  HardDrives,
+  Heart,
+  House,
+  MagnifyingGlass,
+  Pause,
+  Play,
+  Playlist,
+  Plus,
+  PushPin,
+  Queue,
+  Radio,
+  Repeat,
+  ShieldCheck,
+  Shuffle,
+  SignOut,
+  SkipBack,
+  SkipForward,
+  Sparkle,
+  SpeakerHigh,
+  SpeakerSimpleX,
+  ThumbsDown,
+  Trash,
+  UploadSimple,
+  VinylRecord,
+  WarningCircle,
+  X,
+  type IconProps,
+} from '@phosphor-icons/react';
+
+const ICONS = {
+  'vinyl-record': VinylRecord,
+  house: House,
+  'magnifying-glass': MagnifyingGlass,
+  'arrow-circle-down': ArrowCircleDown,
+  'upload-simple': UploadSimple,
+  'hard-drives': HardDrives,
+  'push-pin': PushPin,
+  playlist: Playlist,
+  plus: Plus,
+  'shield-check': ShieldCheck,
+  'gear-six': GearSix,
+  queue: Queue,
+  trash: Trash,
+  x: X,
+  radio: Radio,
+  sparkle: Sparkle,
+  'dots-six-vertical': DotsSixVertical,
+  shuffle: Shuffle,
+  'skip-back': SkipBack,
+  play: Play,
+  pause: Pause,
+  'skip-forward': SkipForward,
+  repeat: Repeat,
+  heart: Heart,
+  'thumbs-down': ThumbsDown,
+  'speaker-high': SpeakerHigh,
+  'speaker-x': SpeakerSimpleX,
+  cloud: Cloud,
+  'check-circle': CheckCircle,
+  'warning-circle': WarningCircle,
+  'sign-out': SignOut,
+  'arrows-clockwise': ArrowsClockwise,
+} satisfies Record<string, React.ComponentType<IconProps>>;
+
+export type IconName = keyof typeof ICONS;
+
+interface Props {
+  name: IconName;
+  fill?: boolean;
+  style?: CSSProperties;
+  className?: string;
+}
+
+export function Icon({ name, fill, style, className }: Props) {
+  const Cmp = ICONS[name];
+  return (
+    <Cmp
+      weight={fill ? 'fill' : 'regular'}
+      className={className ? `ph ${className}` : 'ph'}
+      style={{ flexShrink: 0, ...style }}
+    />
+  );
+}