Panel Components

Colecție de componente pentru paneluri în proiecte Next.js + TailwindCSS. Exemple live + explicații de utilizare.

StatsPanel

Panou de tip overview cu carduri statistice. Poți controla datele, numărul de coloane, culorile și tipografia pentru a crea dashboard-uri flexibile.

Users

1,284

+8%

Conv.

4.2%

+0.3pp

Minimalist dark, 2 coloane, accent pe contrast.

MRR

€12,430

+€920

Subscrieri

430

+12

Churn

5.2%

-0.4pp

LTV

€240

+€30

Varianta light cu 4 carduri, KPI detaliați.

Uptime

99.99%

+0.01%

Errors

-5

Latency

120ms

-20ms

Dark cu accent indigo, ideal pentru metrici tehnici.

Utilizare

import StatsPanel from "@/components/panels-components/StatsPanel";

/** Minimalist dark */
<StatsPanel
  stats={[
    { key: "users", label: "Users", value: "1,284", delta: "+8%" },
    { key: "conv", label: "Conv.", value: "4.2%", delta: "+0.3pp" },
  ]}
  cols={{ base: 1, md: 2 }}
  cardBg="bg-neutral-900"
  cardBorder="border-neutral-800"
/>

/** Light complex */
<StatsPanel
  stats={[
    { key: "mrr", label: "MRR", value: "€12,430", delta: "+€920" },
    { key: "subs", label: "Subscrieri", value: "430", delta: "+12" },
    { key: "churn", label: "Churn", value: "5.2%", delta: "-0.4pp" },
    { key: "ltv", label: "LTV", value: "€240", delta: "+€30" },
  ]}
  cols={{ base: 1, md: 2, xl: 4 }}
  cardBg="bg-white"
  cardBorder="border-zinc-200"
/>

/** Dark v2 */
<StatsPanel
  stats={[
    { key: "uptime", label: "Uptime", value: "99.99%", delta: "+0.01%" },
    { key: "errors", label: "Errors", value: "23", delta: "-5" },
    { key: "latency", label: "Latency", value: "120ms", delta: "-20ms" },
  ]}
  cols={{ base: 1, md: 3 }}
  cardBg="bg-neutral-900"
  cardBorder="border-neutral-800"
/>

Caracteristici dinamice

stats — array de obiecte { key, label, value, delta?, deltaColor? }.
cols — număr de coloane responsive (ex: { base:1, md:2, xl:4 }).
gap — spațiere între carduri (ex: gap-4).
cardBg — culoare fundal card (ex: bg-white, bg-neutral-900).
cardBorder — clasă Tailwind pentru border (ex: border-zinc-200).
cardRounded — radius carduri (implicit rounded-lg).
cardPadding — padding carduri (implicit p-4).
labelClassName, valueClassName, deltaClassName — controlează tipografia și stilurile textului.

TablePanel

Panou de tabel dinamic: definești coloanele și rândurile, poți personaliza randarea celulelor, stilurile și layout-ul.

ID	Nume	Status
1	Produs A	active
2	Produs B	paused

Minimal dark: tabel simplu cu 3 coloane.

ID	Produs	Status	Actualizat
PRD-1012	Abonament Pro	active	2025-09-20
PRD-1013	SQL 101	paused	2025-09-18
PRD-1099	Consultanță 1:1	active	2025-09-17

Varianta light: 4 coloane, mai multe rânduri, header contrastant.

ID	Event	Severity
EVT-22	Login fail	high
EVT-23	API timeout	medium
EVT-24	Deploy complete	low

Dark v2 cu randare custom pentru severitate.

Utilizare

import TablePanel from "@/components/panels-components/TablePanel";

/** Minimalist dark */
<TablePanel
  columns={[
    { key: "id", header: "ID" },
    { key: "name", header: "Nume" },
    { key: "status", header: "Status" },
  ]}
  rows={[
    { id: "1", name: "Produs A", status: "active" },
    { id: "2", name: "Produs B", status: "paused" },
  ]}
/>

/** Light complex */
<TablePanel
  columns={[
    { key: "id", header: "ID" },
    { key: "name", header: "Produs" },
    { key: "status", header: "Status" },
    { key: "updatedAt", header: "Actualizat" },
  ]}
  rows={[
    { id: "PRD-1012", name: "Abonament Pro", status: "active", updatedAt: "2025-09-20" },
    { id: "PRD-1013", name: "SQL 101", status: "paused", updatedAt: "2025-09-18" },
  ]}
/>

/** Dark v2 (custom render) */
<TablePanel
  columns={[
    { key: "id", header: "ID" },
    { key: "event", header: "Event" },
    { key: "severity", header: "Severity", render: (r: { id: string; event: string; severity: string }) => <b>{r.severity}</b> },
  ]}
  rows={[
    { id: "EVT-22", event: "Login fail", severity: "high" },
    { id: "EVT-23", event: "API timeout", severity: "medium" },
  ]}
/>

Caracteristici dinamice

columns — definiția coloanelor: key, header, className?, render?.
rows — array de obiecte cu datele pentru rânduri.
tableClassName — clase pentru tabel (implicit w-full text-sm).
headClassName — clase pentru <thead>.
rowClassName — clase pentru fiecare <tr>.
cellClassName — clase pentru fiecare <td>.
striped — activează culoare alternativă pe rânduri.
bordered — aplică border la container.
rounded — radius pentru container (implicit rounded-lg).

SettingsPanel

Trei exemple rapide: minimalist dark, light mai complex, apoi încă un dark cu alt accent.

Minimal, contrat și aerisit pentru view-uri simple.

Varianta light, mai bogată în opțiuni și descrieri.

Dark cu accent pe securitate și notificări.

Utilizare

// Minimalist dark
<SettingsPanel
    layout="vertical"
    bgColor="bg-neutral-950"
    borderColor="border-neutral-800"
    textColor="text-neutral-100"
    rounded="rounded-lg"
    padding="p-4"
    gap="space-y-3"
    options={[
        { key: "dm", label: "Dark mode", defaultValue: true },
        { key: "alerts", label: "Alerte critice", defaultValue: true },
    ]}
    buttonLabel="Save"
    buttonClassName="rounded-md border border-neutral-800 px-3 py-1.5 text-sm text-neutral-200 hover:bg-neutral-900"
/>

// Light complex (2 coloane)
<SettingsPanel
    layout="horizontal"
    bgColor="bg-white"
    borderColor="border-zinc-200"
    textColor="text-black"
    rounded="rounded-xl"
    padding="p-6"
    gap="space-y-6"
    options={[
        { key: "weekly", label: "Raport săptămânal", defaultValue: true, description: "Trimis în fiecare luni la 09:00." },
        { key: "monthly", label: "Raport lunar", defaultValue: false, description: "Rezumat KPI + trenduri." },
        { key: "beta", label: "Program beta", defaultValue: false, description: "Funcționalități înainte de lansare." },
        { key: "newsletter", label: "Newsletter", defaultValue: true, description: "Noutăți și articole." },
    ]}
    buttonLabel="Aplică preferințele"
    buttonClassName="rounded-md border border-zinc-200 bg-white px-4 py-2 text-sm hover:bg-zinc-50 text-black"
/>

// Dark v2
<SettingsPanel
    layout="vertical"
    bgColor="bg-neutral-950"
    borderColor="border-neutral-800"
    textColor="text-neutral-100"
    rounded="rounded-lg"
    padding="p-5"
    gap="space-y-4"
    options={[
        { key: "twofa", label: "2FA", defaultValue: true, description: "Securitate suplimentară la login." },
        { key: "emails", label: "Emailuri tranzacționale", defaultValue: true },
        { key: "productUpdates", label: "Product updates", defaultValue: false },
    ]}
    buttonLabel="Save changes"
    buttonClassName="rounded-md border border-neutral-800 px-4 py-2 text-sm text-neutral-100 hover:bg-neutral-900"
/>

Caracteristici dinamice

options — listă de opțiuni (array). Fiecare element: key, label, defaultValue?, description?, onChange?.
layout — "vertical" (stack) sau "horizontal" (grid în 2 coloane).
bgColor — culoarea de fundal a panoului (clasă Tailwind).
borderColor — culoarea/forța border-ului (clasă Tailwind pentru border-*).
textColor — culoare text (clasă Tailwind).
rounded — radius-ul containerelor (ex: rounded-lg, rounded-xl).
padding — padding intern (ex: p-4, p-6).
gap — spațiere între elemente (ex: space-y-4).
buttonLabel — textul butonului (ex: Save, Aplică preferințele).
buttonClassName — stilul butonului (clase Tailwind).