@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/app/dashboard/components/widgets/theme-config.tsx.ejs

@@ -1,275 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { ImageIcon, Palette, Upload } from 'lucide-react';
-import { useRef, useState } from 'react';
-
-const PRESET_COLORS = [
-  { name: 'Azul', value: '#3b82f6' },
-  { name: 'Indigo', value: '#6366f1' },
-  { name: 'Violeta', value: '#8b5cf6' },
-  { name: 'Rosa', value: '#ec4899' },
-  { name: 'Vermelho', value: '#ef4444' },
-  { name: 'Laranja', value: '#f97316' },
-  { name: 'Amber', value: '#f59e0b' },
-  { name: 'Esmeralda', value: '#10b981' },
-  { name: 'Teal', value: '#14b8a6' },
-  { name: 'Ciano', value: '#06b6d4' },
-  { name: 'Cinza', value: '#6b7280' },
-  { name: 'Zinc', value: '#18181b' },
-];
-
-export default function ThemeConfig() {
-  const [title, setTitle] = useState('HeroAdmin');
-  const [slogan, setSlogan] = useState('Painel de Controle Inteligente');
-  const [primaryColor, setPrimaryColor] = useState('#3b82f6');
-  const [logoPreview, setLogoPreview] = useState<string | null>(null);
-  const [faviconPreview, setFaviconPreview] = useState<string | null>(null);
-  const logoRef = useRef<HTMLInputElement>(null);
-  const faviconRef = useRef<HTMLInputElement>(null);
-
-  function handleFileChange(
-    e: React.ChangeEvent<HTMLInputElement>,
-    setter: (url: string | null) => void
-  ) {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => setter(reader.result as string);
-      reader.readAsDataURL(file);
-    }
-  }
-
-  return (
-    <Card className="h-full">
-      <CardHeader>
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-rose-50">
-            <Palette className="h-5 w-5 text-rose-600" />
-          </div>
-          <div>
-            <CardTitle className="text-base">Aparencia e Tema</CardTitle>
-            <CardDescription>
-              Personalize a identidade visual do sistema
-            </CardDescription>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        {/* Preview */}
-        <div className="rounded-lg border bg-muted/30 p-4">
-          <p className="mb-3 text-xs font-medium text-muted-foreground">
-            Pre-visualizacao
-          </p>
-          <div className="flex items-center gap-3 rounded-lg border bg-background p-3">
-            <div
-              className="flex h-10 w-10 items-center justify-center rounded-lg"
-              style={{ backgroundColor: primaryColor }}
-            >
-              {logoPreview ? (
-                <img
-                  src={logoPreview}
-                  alt="Logo"
-                  className="h-6 w-6 rounded object-contain"
-                />
-              ) : (
-                <span className="text-sm font-bold text-white">
-                  {title.charAt(0)}
-                </span>
-              )}
-            </div>
-            <div>
-              <span
-                className="text-sm font-bold"
-                style={{ color: primaryColor }}
-              >
-                {title || 'Titulo do Sistema'}
-              </span>
-              <p className="text-xs text-muted-foreground">
-                {slogan || 'Slogan do sistema'}
-              </p>
-            </div>
-            {faviconPreview && (
-              <div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
-                <img
-                  src={faviconPreview}
-                  alt="Favicon"
-                  className="h-4 w-4 object-contain"
-                />
-                Favicon
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Logo + Favicon */}
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label>Logo do sistema</Label>
-            <div
-              onClick={() => logoRef.current?.click()}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') logoRef.current?.click();
-              }}
-              role="button"
-              tabIndex={0}
-              className="flex h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
-            >
-              {logoPreview ? (
-                <img
-                  src={logoPreview}
-                  alt="Logo"
-                  className="h-12 w-12 object-contain"
-                />
-              ) : (
-                <>
-                  <Upload className="h-5 w-5 text-muted-foreground" />
-                  <span className="text-xs text-muted-foreground">
-                    Clique para enviar
-                  </span>
-                </>
-              )}
-            </div>
-            <input
-              ref={logoRef}
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={(e) => handleFileChange(e, setLogoPreview)}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label>Favicon</Label>
-            <div
-              onClick={() => faviconRef.current?.click()}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') faviconRef.current?.click();
-              }}
-              role="button"
-              tabIndex={0}
-              className="flex h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
-            >
-              {faviconPreview ? (
-                <img
-                  src={faviconPreview}
-                  alt="Favicon"
-                  className="h-8 w-8 object-contain"
-                />
-              ) : (
-                <>
-                  <ImageIcon className="h-5 w-5 text-muted-foreground" />
-                  <span className="text-xs text-muted-foreground">
-                    16x16 ou 32x32 px
-                  </span>
-                </>
-              )}
-            </div>
-            <input
-              ref={faviconRef}
-              type="file"
-              accept="image/png,image/ico,image/x-icon,image/svg+xml"
-              className="hidden"
-              onChange={(e) => handleFileChange(e, setFaviconPreview)}
-            />
-          </div>
-        </div>
-
-        {/* Title + Slogan */}
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label htmlFor="sys-title">Titulo do sistema</Label>
-            <Input
-              id="sys-title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="Meu Sistema"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="sys-slogan">Slogan</Label>
-            <Input
-              id="sys-slogan"
-              value={slogan}
-              onChange={(e) => setSlogan(e.target.value)}
-              placeholder="Seu slogan aqui"
-            />
-          </div>
-        </div>
-
-        {/* Color Picker */}
-        <div className="space-y-3">
-          <Label>Cor primaria</Label>
-          <div className="flex items-center gap-3">
-            <div
-              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border"
-              style={{ backgroundColor: primaryColor }}
-            >
-              <input
-                type="color"
-                value={primaryColor}
-                onChange={(e) => setPrimaryColor(e.target.value)}
-                className="h-full w-full cursor-pointer opacity-0"
-                title="Selecionar cor"
-              />
-            </div>
-            <Input
-              value={primaryColor}
-              onChange={(e) => setPrimaryColor(e.target.value)}
-              className="w-28 font-mono text-sm uppercase"
-              maxLength={7}
-            />
-          </div>
-          <div className="flex flex-wrap gap-2 pt-1">
-            {PRESET_COLORS.map((c) => (
-              <button
-                key={c.value}
-                type="button"
-                onClick={() => setPrimaryColor(c.value)}
-                className={`group relative flex h-7 w-7 items-center justify-center rounded-full border-2 transition-all ${
-                  primaryColor === c.value
-                    ? 'border-foreground scale-110'
-                    : 'border-transparent hover:scale-105'
-                }`}
-                title={c.name}
-              >
-                <span
-                  className="h-5 w-5 rounded-full"
-                  style={{ backgroundColor: c.value }}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center justify-end border-t pt-4">
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => {
-                setTitle('HeroAdmin');
-                setSlogan('Painel de Controle Inteligente');
-                setPrimaryColor('#3b82f6');
-                setLogoPreview(null);
-                setFaviconPreview(null);
-              }}
-            >
-              Restaurar padrao
-            </Button>
-            <Button size="sm">Salvar</Button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}