create-snapify-app 0.0.0-stage → 1.1.0

package/template/src/admin/ui/charts.tsx

@@ -0,0 +1,108 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { fmtNumber } from '../lib/format';
+import { cx } from './primitives';
+
+const shortDate = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short' });
+
+export interface TrendSeries {
+  key: string;
+  label: string;
+  color: string;
+}
+
+export function TrendChart({ data, series, height = 260 }: { data: Record<string, number | string>[]; series: TrendSeries[]; height?: number }) {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <AreaChart data={data} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
+        <defs>
+          {series.map((s) => (
+            <linearGradient key={s.key} id={`grad-${s.key}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={s.color} stopOpacity={0.22} />
+              <stop offset="100%" stopColor={s.color} stopOpacity={0} />
+            </linearGradient>
+          ))}
+        </defs>
+        <CartesianGrid stroke="#eef2f6" vertical={false} />
+        <XAxis
+          dataKey="date"
+          tickFormatter={(d: string) => shortDate.format(new Date(d))}
+          tick={{ fontSize: 11, fill: '#94a3b8' }}
+          axisLine={false}
+          tickLine={false}
+          minTickGap={24}
+        />
+        <YAxis tick={{ fontSize: 11, fill: '#94a3b8' }} axisLine={false} tickLine={false} allowDecimals={false} width={48} />
+        <Tooltip
+          cursor={{ stroke: '#cbd5e1', strokeDasharray: 4 }}
+          content={({ active, payload, label }) =>
+            active && payload?.length ? (
+              <div className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs shadow-lg">
+                <p className="mb-1 font-medium text-slate-900">{new Date(String(label)).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}</p>
+                {payload.map((p) => (
+                  <p key={String(p.dataKey)} className="flex items-center gap-2 text-slate-600">
+                    <span className="h-2 w-2 rounded-full" style={{ background: p.color }} />
+                    {series.find((s) => s.key === p.dataKey)?.label} : <span className="font-medium text-slate-900">{fmtNumber(Number(p.value))}</span>
+                  </p>
+                ))}
+              </div>
+            ) : null
+          }
+        />
+        {series.map((s) => (
+          <Area key={s.key} type="monotone" dataKey={s.key} stroke={s.color} strokeWidth={2} fill={`url(#grad-${s.key})`} />
+        ))}
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}
+
+/** Liste avec barres proportionnelles (pays, pages, sources). */
+export function BarList({
+  items,
+  valueLabel,
+  emptyLabel = 'Pas encore de données',
+}: {
+  items: { key: string; label: React.ReactNode; value: number; extra?: React.ReactNode }[];
+  valueLabel?: string;
+  emptyLabel?: string;
+}) {
+  const max = Math.max(1, ...items.map((i) => i.value));
+  if (!items.length) return <p className="py-8 text-center text-sm text-slate-400">{emptyLabel}</p>;
+  return (
+    <div className="space-y-1.5">
+      {valueLabel ? (
+        <div className="flex justify-end pb-1 text-[11px] font-medium uppercase tracking-wide text-slate-400">{valueLabel}</div>
+      ) : null}
+      {items.map((i) => (
+        <div key={i.key} className="relative flex items-center justify-between gap-3 overflow-hidden rounded-md px-2.5 py-1.5 text-sm">
+          <div className="absolute inset-y-0 left-0 rounded-md bg-brand-50" style={{ width: `${(i.value / max) * 100}%` }} />
+          <span className="relative min-w-0 truncate text-slate-700">{i.label}</span>
+          <span className="relative flex shrink-0 items-center gap-3 tabular-nums">
+            {i.extra ? <span className="text-xs text-slate-400">{i.extra}</span> : null}
+            <span className="font-medium text-slate-900">{fmtNumber(i.value)}</span>
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function Legend({ series, className }: { series: TrendSeries[]; className?: string }) {
+  return (
+    <div className={cx('flex items-center gap-4 text-xs text-slate-500', className)}>
+      {series.map((s) => (
+        <span key={s.key} className="flex items-center gap-1.5">
+          <span className="h-2 w-2 rounded-full" style={{ background: s.color }} />
+          {s.label}
+        </span>
+      ))}
+    </div>
+  );
+}

package/template/src/admin/ui/media.tsx

@@ -0,0 +1,265 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { Check, FileText, Film, ImageIcon, ImagePlus, Search, UploadCloud, X } from 'lucide-react';
+import type { MediaAsset } from '../../../server/cms/types';
+import { api } from '../lib/api';
+import { errorMessage, useAsync } from '../lib/hooks';
+import { fmtBytes } from '../lib/format';
+import { Button, cx, EmptyState, Input, Spinner } from './primitives';
+import { Modal } from './overlays';
+
+const MAX_BYTES = 15 * 1024 * 1024;
+export const ACCEPT_IMAGES = 'image/png,image/jpeg,image/webp,image/gif,image/svg+xml,image/avif';
+export const ACCEPT_ALL = `${ACCEPT_IMAGES},video/mp4,video/webm,application/pdf`;
+
+function readAsBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result).split(',')[1] || '');
+    r.onerror = () => reject(new Error(`Lecture impossible : ${file.name}`));
+    r.readAsDataURL(file);
+  });
+}
+
+export async function uploadFiles(files: File[]): Promise<MediaAsset[]> {
+  const out: MediaAsset[] = [];
+  for (const file of files) {
+    if (file.size > MAX_BYTES) {
+      toast.error(`${file.name} dépasse 15 Mo`);
+      continue;
+    }
+    try {
+      const dataBase64 = await readAsBase64(file);
+      const asset = await api.upload({ filename: file.name, dataBase64, mimeType: file.type, alt: '' });
+      out.push(asset);
+    } catch (e) {
+      toast.error(`${file.name} : ${errorMessage(e)}`);
+    }
+  }
+  if (out.length) toast.success(out.length > 1 ? `${out.length} fichiers importés` : 'Fichier importé');
+  return out;
+}
+
+export function MediaThumb({ asset, className }: { asset: Pick<MediaAsset, 'url' | 'mimeType' | 'alt'>; className?: string }) {
+  if (asset.mimeType.startsWith('image/')) {
+    return <img src={asset.url} alt={asset.alt || ''} loading="lazy" className={cx('h-full w-full object-cover', className)} />;
+  }
+  const Icon = asset.mimeType.startsWith('video/') ? Film : FileText;
+  return (
+    <div className={cx('flex h-full w-full items-center justify-center bg-slate-100 text-slate-400', className)}>
+      <Icon className="h-8 w-8" />
+    </div>
+  );
+}
+
+export function DropZone({ onFiles, accept = ACCEPT_ALL, compact }: { onFiles: (f: File[]) => void; accept?: string; compact?: boolean }) {
+  const [over, setOver] = useState(false);
+  const input = useRef<HTMLInputElement>(null);
+  return (
+    <div
+      onDragOver={(e) => {
+        e.preventDefault();
+        setOver(true);
+      }}
+      onDragLeave={() => setOver(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setOver(false);
+        onFiles([...e.dataTransfer.files]);
+      }}
+      onClick={() => input.current?.click()}
+      className={cx(
+        'flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed text-center transition',
+        compact ? 'px-4 py-5' : 'px-6 py-10',
+        over ? 'border-brand-500 bg-brand-50' : 'border-slate-200 bg-slate-50/50 hover:border-slate-300 hover:bg-slate-50'
+      )}
+    >
+      <UploadCloud className={cx('text-slate-400', compact ? 'mb-1 h-5 w-5' : 'mb-3 h-8 w-8')} />
+      <p className="text-sm font-medium text-slate-700">Glissez vos fichiers ici ou cliquez pour parcourir</p>
+      {!compact ? <p className="mt-1 text-xs text-slate-500">Images, vidéos MP4/WebM, PDF — 15 Mo maximum</p> : null}
+      <input
+        ref={input}
+        type="file"
+        multiple
+        accept={accept}
+        className="hidden"
+        onChange={(e) => {
+          onFiles([...(e.target.files || [])]);
+          e.target.value = '';
+        }}
+      />
+    </div>
+  );
+}
+
+/** Sélecteur de médias : bibliothèque + import. */
+export function MediaPicker({
+  open,
+  onClose,
+  onSelect,
+  kind = 'image',
+}: {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (asset: MediaAsset) => void;
+  kind?: 'image' | 'video' | 'any';
+}) {
+  const { data, setData, loading } = useAsync(() => (open ? api.media() : Promise.resolve(null)), [open]);
+  const [q, setQ] = useState('');
+  const [selected, setSelected] = useState<MediaAsset | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const filtered = useMemo(
+    () =>
+      (data || []).filter(
+        (m) =>
+          (kind === 'any' || m.mimeType.startsWith(`${kind}/`)) &&
+          (!q || m.filename.toLowerCase().includes(q.toLowerCase()) || m.alt?.toLowerCase().includes(q.toLowerCase()))
+      ),
+    [data, q, kind]
+  );
+
+  const handleFiles = useCallback(
+    async (files: File[]) => {
+      setUploading(true);
+      const added = await uploadFiles(files);
+      setUploading(false);
+      if (added.length) {
+        setData((d) => [...added, ...(d || [])]);
+        setSelected(added[0]);
+      }
+    },
+    [setData]
+  );
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      size="xl"
+      title="Médiathèque"
+      description="Choisissez un fichier existant ou importez-en un nouveau."
+      footer={
+        <>
+          <Button onClick={onClose}>Annuler</Button>
+          <Button
+            variant="primary"
+            disabled={!selected}
+            onClick={() => {
+              if (selected) onSelect(selected);
+              onClose();
+            }}
+          >
+            Utiliser ce fichier
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <DropZone onFiles={handleFiles} compact accept={kind === 'image' ? ACCEPT_IMAGES : kind === 'video' ? 'video/mp4,video/webm' : ACCEPT_ALL} />
+        {uploading ? (
+          <p className="flex items-center gap-2 text-sm text-slate-500">
+            <Spinner className="h-4 w-4" /> Import en cours…
+          </p>
+        ) : null}
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
+          <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher un fichier…" className="pl-9" />
+        </div>
+        {loading ? (
+          <div className="flex justify-center py-10">
+            <Spinner />
+          </div>
+        ) : filtered.length === 0 ? (
+          <EmptyState icon={ImageIcon} title="Aucun fichier" description="Importez votre premier fichier ci-dessus." />
+        ) : (
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
+            {filtered.map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                onClick={() => setSelected(m)}
+                onDoubleClick={() => {
+                  onSelect(m);
+                  onClose();
+                }}
+                className={cx(
+                  'group relative aspect-square overflow-hidden rounded-lg border-2 bg-slate-50 transition',
+                  selected?.id === m.id ? 'border-brand-500 ring-3 ring-brand-500/20' : 'border-transparent hover:border-slate-300'
+                )}
+                title={m.filename}
+              >
+                <MediaThumb asset={m} />
+                {selected?.id === m.id ? (
+                  <span className="absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-brand-600 text-white">
+                    <Check className="h-3 w-3" />
+                  </span>
+                ) : null}
+                <span className="absolute inset-x-0 bottom-0 truncate bg-gradient-to-t from-black/60 px-2 pb-1 pt-4 text-left text-[10px] text-white opacity-0 transition group-hover:opacity-100">
+                  {m.filename} · {fmtBytes(m.sizeBytes)}
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+/** Champ image : aperçu + choix depuis la médiathèque. */
+export function ImageField({
+  value,
+  onChange,
+  aspect = 'aspect-video',
+  kind = 'image',
+  emptyLabel = 'Choisir une image',
+}: {
+  value?: string;
+  onChange: (url: string, asset?: MediaAsset) => void;
+  aspect?: string;
+  kind?: 'image' | 'video';
+  emptyLabel?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      {value ? (
+        <div className={cx('group relative overflow-hidden rounded-xl border border-slate-200 bg-slate-50', aspect)}>
+          {kind === 'video' ? (
+            <video src={value} className="h-full w-full object-cover" muted />
+          ) : (
+            <img src={value} alt="" className="h-full w-full object-contain" />
+          )}
+          <div className="absolute inset-0 flex items-center justify-center gap-2 bg-slate-900/50 opacity-0 transition group-hover:opacity-100">
+            <Button size="sm" onClick={() => setOpen(true)}>
+              Remplacer
+            </Button>
+            <Button size="sm" variant="danger" icon={X} onClick={() => onChange('')}>
+              Retirer
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={cx(
+            'flex w-full flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50 text-sm text-slate-500 transition hover:border-brand-500 hover:bg-brand-50 hover:text-brand-700',
+            aspect
+          )}
+        >
+          <ImagePlus className="h-6 w-6" />
+          {emptyLabel}
+        </button>
+      )}
+      <MediaPicker open={open} onClose={() => setOpen(false)} onSelect={(a) => onChange(a.url, a)} kind={kind} />
+    </>
+  );
+}

package/template/src/admin/ui/overlays.tsx

@@ -0,0 +1,239 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AlertTriangle, X } from 'lucide-react';
+import { Button, cx } from './primitives';
+
+function useEscape(open: boolean, onClose: () => void) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = 'md',
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}) {
+  useEscape(open, onClose);
+  if (!open) return null;
+  const width = { sm: 'max-w-md', md: 'max-w-xl', lg: 'max-w-3xl', xl: 'max-w-5xl' }[size];
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex items-start justify-center overflow-y-auto bg-slate-900/40 p-4 pt-[8vh] backdrop-blur-[2px]" onMouseDown={onClose}>
+      <div role="dialog" aria-modal="true" className={cx('w-full rounded-2xl bg-white shadow-2xl ring-1 ring-slate-900/5', width)} onMouseDown={(e) => e.stopPropagation()}>
+        <div className="flex items-start justify-between gap-4 border-b border-slate-100 px-6 py-4">
+          <div>
+            <h2 className="text-base font-semibold text-slate-900">{title}</h2>
+            {description ? <p className="mt-0.5 text-sm text-slate-500">{description}</p> : null}
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Fermer">
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto px-6 py-5 scrollbar-thin">{children}</div>
+        {footer ? <div className="flex justify-end gap-2 rounded-b-2xl border-t border-slate-100 bg-slate-50/60 px-6 py-3">{footer}</div> : null}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export function Drawer({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  useEscape(open, onClose);
+  if (!open) return null;
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex justify-end bg-slate-900/30 backdrop-blur-[1px]" onMouseDown={onClose}>
+      <aside className="flex h-full w-full max-w-lg flex-col bg-white shadow-2xl" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+          <h2 className="text-base font-semibold text-slate-900">{title}</h2>
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Fermer">
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="flex-1 overflow-y-auto px-6 py-5 scrollbar-thin">{children}</div>
+        {footer ? <div className="flex justify-end gap-2 border-t border-slate-100 px-6 py-3">{footer}</div> : null}
+      </aside>
+    </div>,
+    document.body
+  );
+}
+
+/* ------------------------------------------------------------------ Confirmation */
+
+interface ConfirmOptions {
+  title: string;
+  message?: React.ReactNode;
+  confirmLabel?: string;
+  danger?: boolean;
+}
+
+const ConfirmContext = createContext<(o: ConfirmOptions) => Promise<boolean>>(async () => false);
+
+export function ConfirmProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<ConfirmOptions | null>(null);
+  const resolver = useRef<(v: boolean) => void>(() => undefined);
+
+  const confirm = useCallback((o: ConfirmOptions) => {
+    setState(o);
+    return new Promise<boolean>((resolve) => {
+      resolver.current = resolve;
+    });
+  }, []);
+
+  const close = (v: boolean) => {
+    resolver.current(v);
+    setState(null);
+  };
+
+  return (
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      <Modal
+        open={!!state}
+        onClose={() => close(false)}
+        size="sm"
+        title={
+          <span className="flex items-center gap-2">
+            {state?.danger ? <AlertTriangle className="h-4 w-4 text-rose-600" /> : null}
+            {state?.title}
+          </span>
+        }
+        footer={
+          <>
+            <Button onClick={() => close(false)}>Annuler</Button>
+            <Button variant={state?.danger ? 'danger' : 'primary'} onClick={() => close(true)} autoFocus>
+              {state?.confirmLabel || 'Confirmer'}
+            </Button>
+          </>
+        }
+      >
+        <div className="text-sm leading-relaxed text-slate-600">{state?.message}</div>
+      </Modal>
+    </ConfirmContext.Provider>
+  );
+}
+
+export const useConfirm = () => useContext(ConfirmContext);
+
+/* ------------------------------------------------------------------ Menu déroulant */
+
+const MENU_GAP = 4;
+const VIEWPORT_MARGIN = 8;
+
+/**
+ * Le menu est rendu dans <body> en position fixe : un tableau ou une carte en `overflow-hidden`
+ * ne peut plus le couper. Il s'ouvre vers le haut quand la place manque en bas de l'écran.
+ */
+export function Dropdown({ trigger, children, align = 'right' }: { trigger: React.ReactNode; children: React.ReactNode; align?: 'left' | 'right' }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<React.CSSProperties>({ visibility: 'hidden' });
+  const anchor = useRef<HTMLDivElement>(null);
+  const menu = useRef<HTMLDivElement>(null);
+
+  const place = useCallback(() => {
+    const a = anchor.current?.getBoundingClientRect();
+    const m = menu.current;
+    if (!a || !m) return;
+    const { offsetWidth: w, offsetHeight: h } = m;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const below = vh - a.bottom - MENU_GAP - VIEWPORT_MARGIN;
+    const top = below >= h || a.top - MENU_GAP - VIEWPORT_MARGIN < h ? Math.min(a.bottom + MENU_GAP, vh - h - VIEWPORT_MARGIN) : a.top - MENU_GAP - h;
+    const left = align === 'right' ? a.right - w : a.left;
+    setPos({ top: Math.max(VIEWPORT_MARGIN, top), left: Math.min(Math.max(VIEWPORT_MARGIN, left), vw - w - VIEWPORT_MARGIN) });
+  }, [align]);
+
+  useLayoutEffect(() => {
+    if (open) place();
+    else setPos({ visibility: 'hidden' });
+  }, [open, place]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (!anchor.current?.contains(t) && !menu.current?.contains(t)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [open, place]);
+
+  return (
+    <div className="relative inline-flex" ref={anchor}>
+      <div onClick={() => setOpen((o) => !o)}>{trigger}</div>
+      {open
+        ? createPortal(
+            <div
+              ref={menu}
+              role="menu"
+              style={pos}
+              className="fixed z-[90] min-w-[190px] rounded-xl border border-slate-200 bg-white p-1 shadow-lg"
+              onClick={() => setOpen(false)}
+            >
+              {children}
+            </div>,
+            document.body
+          )
+        : null}
+    </div>
+  );
+}
+
+export function DropdownItem({ icon: Icon, children, onClick, danger }: { icon?: React.ElementType; children: React.ReactNode; onClick?: () => void; danger?: boolean }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cx('flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm', danger ? 'text-rose-600 hover:bg-rose-50' : 'text-slate-700 hover:bg-slate-100')}
+    >
+      {Icon ? <Icon className="h-4 w-4 opacity-70" /> : null}
+      {children}
+    </button>
+  );
+}