This commit is contained in:
563
app/wizard.jsx
Normal file
563
app/wizard.jsx
Normal file
@@ -0,0 +1,563 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
User,
|
||||
Server,
|
||||
Bot,
|
||||
ShieldCheck,
|
||||
Wrench,
|
||||
FileText,
|
||||
ArrowRight,
|
||||
ArrowLeft,
|
||||
Send,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Copy
|
||||
} from 'lucide-react';
|
||||
|
||||
// --- CONFIGURAZIONE API ---
|
||||
const API_ENDPOINT = "https://api.example.com/v1/requirements";
|
||||
const API_KEY_HEADER = "X-Api-Key"; // Se necessario
|
||||
const API_KEY_VALUE = ""; // Inserire chiave se necessaria
|
||||
|
||||
export default function App() {
|
||||
const [step, setStep] = useState(0);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState(null); // 'success', 'error'
|
||||
const [payloadPreview, setPayloadPreview] = useState("");
|
||||
|
||||
// Stato unico per tutti i dati del form
|
||||
const [formData, setFormData] = useState({
|
||||
// Metadata
|
||||
commerciale: '',
|
||||
cliente: '',
|
||||
data: new Date().toISOString().split('T')[0],
|
||||
|
||||
// Step 1: Gestionale
|
||||
gestionale_obiettivo: '',
|
||||
gestionale_utenti_interni: '',
|
||||
gestionale_utenti_esterni: false,
|
||||
gestionale_device: 'desktop', // desktop, web, app
|
||||
gestionale_entita: '',
|
||||
gestionale_migrazione: 'nessuna', // nessuna, excel, legacy
|
||||
|
||||
// Step 2: Automazioni
|
||||
automazione_trigger: '',
|
||||
automazione_azione: '',
|
||||
automazione_software_a: '',
|
||||
automazione_software_b: '',
|
||||
automazione_frequenza: 'bassa',
|
||||
|
||||
// Step 3: Compliance
|
||||
compliance_dati: [], // array di stringhe
|
||||
compliance_retention: '',
|
||||
compliance_hosting: 'cloud',
|
||||
|
||||
// Step 4: Manutenzione
|
||||
manutenzione_tipo: 'standard',
|
||||
manutenzione_budget: '',
|
||||
manutenzione_deadline: '',
|
||||
|
||||
// Step 5: Extra
|
||||
note_finali: ''
|
||||
});
|
||||
|
||||
// Gestione input generica
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
|
||||
if (type === 'checkbox' && name === 'compliance_dati') {
|
||||
// Gestione array per checkbox multiple
|
||||
let updatedList = [...formData.compliance_dati];
|
||||
if (checked) {
|
||||
updatedList.push(value);
|
||||
} else {
|
||||
updatedList = updatedList.filter((item) => item !== value);
|
||||
}
|
||||
setFormData({ ...formData, compliance_dati: updatedList });
|
||||
} else if (type === 'checkbox') {
|
||||
setFormData({ ...formData, [name]: checked });
|
||||
} else {
|
||||
setFormData({ ...formData, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
// Navigazione
|
||||
const nextStep = () => setStep((prev) => Math.min(prev + 1, steps.length - 1));
|
||||
const prevStep = () => setStep((prev) => Math.max(prev - 1, 0));
|
||||
|
||||
// Invio Dati
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
const payload = JSON.stringify(formData, null, 2);
|
||||
setPayloadPreview(payload);
|
||||
|
||||
try {
|
||||
// Simulazione o Invio Reale
|
||||
const response = await fetch(API_ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
[API_KEY_HEADER]: API_KEY_VALUE
|
||||
},
|
||||
body: payload
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitStatus('success');
|
||||
} else {
|
||||
// Fallback per demo (visto che example.com darà 404/405)
|
||||
console.warn("API Error (Expected in demo):", response.status);
|
||||
setSubmitStatus('error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Network Error:", error);
|
||||
setSubmitStatus('error');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
nextStep(); // Vai alla schermata finale
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = () => {
|
||||
navigator.clipboard.writeText(payloadPreview);
|
||||
alert("Dati copiati negli appunti!");
|
||||
};
|
||||
|
||||
// Definizione degli Step
|
||||
const steps = [
|
||||
{ id: 0, title: "Start", icon: User, color: "bg-blue-500" },
|
||||
{ id: 1, title: "Gestionale", icon: Server, color: "bg-indigo-500" },
|
||||
{ id: 2, title: "Automazione", icon: Bot, color: "bg-purple-500" },
|
||||
{ id: 3, title: "GDPR", icon: ShieldCheck, color: "bg-red-500" },
|
||||
{ id: 4, title: "Service", icon: Wrench, color: "bg-orange-500" },
|
||||
{ id: 5, title: "Note", icon: FileText, color: "bg-gray-500" },
|
||||
{ id: 6, title: "Fine", icon: Send, color: "bg-green-500" },
|
||||
];
|
||||
|
||||
const currentStepData = steps[step];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 font-sans text-slate-800 flex flex-col">
|
||||
|
||||
{/* HEADER / PROGRESS BAR */}
|
||||
<div className="bg-white shadow-sm sticky top-0 z-10">
|
||||
<div className="max-w-lg mx-auto px-4 py-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-bold text-gray-400 uppercase tracking-wider">
|
||||
Step {step + 1} di {steps.length}
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-blue-600">
|
||||
{currentStepData.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ease-out ${currentStepData.color}`}
|
||||
style={{ width: `${((step + 1) / steps.length) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CONTENT AREA */}
|
||||
<div className="flex-1 max-w-lg mx-auto w-full p-4 pb-24 overflow-y-auto">
|
||||
|
||||
{/* Titolo Dinamico */}
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<div className={`p-3 rounded-xl text-white shadow-lg ${currentStepData.color}`}>
|
||||
<currentStepData.icon size={24} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
{currentStepData.title === "Start" && "Anagrafica"}
|
||||
{currentStepData.title === "Gestionale" && "Sviluppo App"}
|
||||
{currentStepData.title === "Automazione" && "Bot & Integrazioni"}
|
||||
{currentStepData.title === "GDPR" && "Privacy & Dati"}
|
||||
{currentStepData.title === "Service" && "Manutenzione"}
|
||||
{currentStepData.title === "Note" && "Info Extra"}
|
||||
{currentStepData.title === "Fine" && "Riepilogo"}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* STEP 0: ANAGRAFICA */}
|
||||
{step === 0 && (
|
||||
<div className="space-y-4 animate-fadeIn">
|
||||
<InputGroup label="Riferimento Commerciale" icon={User}>
|
||||
<input
|
||||
type="text"
|
||||
name="commerciale"
|
||||
value={formData.commerciale}
|
||||
onChange={handleChange}
|
||||
placeholder="Il tuo nome"
|
||||
className="w-full p-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup label="Nome Cliente / Azienda" icon={User}>
|
||||
<input
|
||||
type="text"
|
||||
name="cliente"
|
||||
value={formData.cliente}
|
||||
onChange={handleChange}
|
||||
placeholder="Es. Rossi Srl"
|
||||
className="w-full p-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup label="Data Incontro">
|
||||
<input
|
||||
type="date"
|
||||
name="data"
|
||||
value={formData.data}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
</InputGroup>
|
||||
<div className="bg-blue-50 p-4 rounded-lg text-sm text-blue-800 border border-blue-100 mt-4">
|
||||
💡 <strong>Info:</strong> Tutti i campi successivi sono facoltativi. Compila solo le sezioni pertinenti al progetto.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* STEP 1: GESTIONALE */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-5 animate-fadeIn">
|
||||
<Label text="Obiettivo principale del software?" />
|
||||
<textarea
|
||||
name="gestionale_obiettivo"
|
||||
value={formData.gestionale_obiettivo}
|
||||
onChange={handleChange}
|
||||
placeholder="Es. Gestire il magazzino e le spedizioni..."
|
||||
className="w-full p-3 h-24 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none resize-none"
|
||||
></textarea>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label text="Utenti Interni" />
|
||||
<input
|
||||
type="number"
|
||||
name="gestionale_utenti_interni"
|
||||
value={formData.gestionale_utenti_interni}
|
||||
onChange={handleChange}
|
||||
placeholder="N."
|
||||
className="w-full p-3 border rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label text="Utenti Esterni?" />
|
||||
<div className="flex items-center h-full">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="gestionale_utenti_esterni"
|
||||
checked={formData.gestionale_utenti_esterni}
|
||||
onChange={handleChange}
|
||||
className="w-5 h-5 accent-indigo-600"
|
||||
/>
|
||||
<span className="text-gray-700">Sì, accedono</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Label text="Tipo di Dispositivo richiesto" />
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<SelectCard
|
||||
selected={formData.gestionale_device === 'desktop'}
|
||||
onClick={() => setFormData({...formData, gestionale_device: 'desktop'})}
|
||||
label="Solo PC"
|
||||
/>
|
||||
<SelectCard
|
||||
selected={formData.gestionale_device === 'web'}
|
||||
onClick={() => setFormData({...formData, gestionale_device: 'web'})}
|
||||
label="Web Resp."
|
||||
/>
|
||||
<SelectCard
|
||||
selected={formData.gestionale_device === 'app'}
|
||||
onClick={() => setFormData({...formData, gestionale_device: 'app'})}
|
||||
label="App Nativa"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Label text="Migrazione Dati Attuali" />
|
||||
<select
|
||||
name="gestionale_migrazione"
|
||||
value={formData.gestionale_migrazione}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 bg-white border rounded-lg"
|
||||
>
|
||||
<option value="nessuna">Nessuna (Start from scratch)</option>
|
||||
<option value="carta">Cartaceo / Mentale</option>
|
||||
<option value="excel">Excel / Fogli Google</option>
|
||||
<option value="legacy">Vecchio Gestionale (SQL/CSV)</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* STEP 2: AUTOMAZIONE */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-5 animate-fadeIn">
|
||||
<div>
|
||||
<Label text="Trigger (Quando parte?)" />
|
||||
<input
|
||||
type="text"
|
||||
name="automazione_trigger"
|
||||
value={formData.automazione_trigger}
|
||||
onChange={handleChange}
|
||||
placeholder="Es. Arrivo email, compilazione form..."
|
||||
className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label text="Azione (Cosa fa?)" />
|
||||
<textarea
|
||||
name="automazione_azione"
|
||||
value={formData.automazione_azione}
|
||||
onChange={handleChange}
|
||||
placeholder="Es. Crea fattura e salvala in Drive..."
|
||||
className="w-full p-3 h-20 border rounded-lg focus:ring-2 focus:ring-purple-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-purple-50 rounded-lg border border-purple-100">
|
||||
<Label text="Software Coinvolti" />
|
||||
<div className="space-y-3 mt-2">
|
||||
<input
|
||||
type="text"
|
||||
name="automazione_software_a"
|
||||
value={formData.automazione_software_a}
|
||||
onChange={handleChange}
|
||||
placeholder="Software A (es. Gmail)"
|
||||
className="w-full p-2 border rounded bg-white"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="automazione_software_b"
|
||||
value={formData.automazione_software_b}
|
||||
onChange={handleChange}
|
||||
placeholder="Software B (es. Zucchetti)"
|
||||
className="w-full p-2 border rounded bg-white"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-purple-600 mt-2 italic">Chiedi sempre se hanno accesso API o admin.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* STEP 3: GDPR */}
|
||||
{step === 3 && (
|
||||
<div className="space-y-5 animate-fadeIn">
|
||||
<Label text="Tipologia Dati Trattati (GDPR)" />
|
||||
<div className="space-y-2">
|
||||
{['Dati Comuni (Anagrafiche)', 'Dati Finanziari (IBAN/CC)', 'Dati Sensibili (Sanitari/Giudiziari)'].map((tipo) => (
|
||||
<label key={tipo} className="flex items-center gap-3 p-3 border rounded-lg bg-white active:bg-gray-50">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="compliance_dati"
|
||||
value={tipo}
|
||||
checked={formData.compliance_dati.includes(tipo)}
|
||||
onChange={handleChange}
|
||||
className="w-5 h-5 accent-red-600"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-700">{tipo}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Label text="Hosting Preferito" />
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<SelectCard
|
||||
selected={formData.compliance_hosting === 'cloud'}
|
||||
onClick={() => setFormData({...formData, compliance_hosting: 'cloud'})}
|
||||
label="Cloud (SaaS)"
|
||||
sub="Gestito da noi"
|
||||
/>
|
||||
<SelectCard
|
||||
selected={formData.compliance_hosting === 'premise'}
|
||||
onClick={() => setFormData({...formData, compliance_hosting: 'premise'})}
|
||||
label="On-Premise"
|
||||
sub="Server Cliente"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* STEP 4: MANUTENZIONE */}
|
||||
{step === 4 && (
|
||||
<div className="space-y-5 animate-fadeIn">
|
||||
<Label text="Livello Service Level Agreement (SLA)" />
|
||||
<select
|
||||
name="manutenzione_tipo"
|
||||
value={formData.manutenzione_tipo}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 bg-white border rounded-lg mb-4"
|
||||
>
|
||||
<option value="standard">Standard (Sicurezza + Backup)</option>
|
||||
<option value="business">Business (Monitoraggio Automazioni)</option>
|
||||
<option value="critical">Critical (H24 - Costo alto)</option>
|
||||
</select>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label text="Budget Stimato" />
|
||||
<input
|
||||
type="text"
|
||||
name="manutenzione_budget"
|
||||
value={formData.manutenzione_budget}
|
||||
onChange={handleChange}
|
||||
placeholder="€ Range"
|
||||
className="w-full p-3 border rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label text="Deadline" />
|
||||
<input
|
||||
type="date"
|
||||
name="manutenzione_deadline"
|
||||
value={formData.manutenzione_deadline}
|
||||
onChange={handleChange}
|
||||
className="w-full p-3 border rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* STEP 5: NOTE FINALI */}
|
||||
{step === 5 && (
|
||||
<div className="space-y-4 animate-fadeIn">
|
||||
<div className="bg-yellow-50 border border-yellow-200 p-4 rounded-lg flex gap-3 items-start">
|
||||
<AlertCircle className="text-yellow-600 shrink-0" size={20} />
|
||||
<p className="text-sm text-yellow-800">
|
||||
Usa questo spazio per dettagli tecnici non coperti dal wizard, sensazioni sul cliente o vincoli particolari.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
name="note_finali"
|
||||
value={formData.note_finali}
|
||||
onChange={handleChange}
|
||||
placeholder="Scrivi qui note libere..."
|
||||
className="w-full p-4 h-64 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 outline-none resize-none text-lg"
|
||||
></textarea>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* STEP 6: ESITO INVIO */}
|
||||
{step === 6 && (
|
||||
<div className="text-center space-y-6 animate-fadeIn pt-10">
|
||||
{submitStatus === 'success' ? (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="text-green-600" size={40} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-green-700">Inviato con Successo!</h2>
|
||||
<p className="text-gray-600">Il team tecnico ha ricevuto i requisiti.</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-8 text-blue-600 underline font-medium"
|
||||
>
|
||||
Nuova Raccolta
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center">
|
||||
<AlertCircle className="text-orange-600" size={40} />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-gray-800">Invio API Fallito</h2>
|
||||
<p className="text-sm text-gray-500 px-4">
|
||||
L'API non è raggiungibile (normale in questa demo). <br/>
|
||||
Copia il report qui sotto e invialo manualmente.
|
||||
</p>
|
||||
|
||||
<div className="w-full bg-gray-800 rounded-lg p-4 text-left relative group">
|
||||
<pre className="text-green-400 text-xs overflow-x-auto font-mono whitespace-pre-wrap break-all">
|
||||
{payloadPreview}
|
||||
</pre>
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="absolute top-2 right-2 bg-white/20 hover:bg-white/40 text-white p-2 rounded-md backdrop-blur-sm transition"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="w-full bg-gray-900 text-white py-3 px-6 rounded-xl font-semibold flex items-center justify-center gap-2"
|
||||
>
|
||||
<Copy size={18} /> Copia JSON
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* FOOTER NAVIGATION */}
|
||||
{step < 6 && (
|
||||
<div className="bg-white border-t border-gray-200 p-4 fixed bottom-0 w-full max-w-lg mx-auto left-0 right-0 z-20">
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={prevStep}
|
||||
disabled={step === 0}
|
||||
className={`p-4 rounded-xl flex items-center justify-center transition-colors ${step === 0 ? 'text-gray-300 bg-gray-50' : 'text-gray-600 bg-gray-100 hover:bg-gray-200'}`}
|
||||
>
|
||||
<ArrowLeft size={24} />
|
||||
</button>
|
||||
|
||||
{step === 5 ? (
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-green-600 text-white font-bold text-lg rounded-xl shadow-lg shadow-green-200 hover:bg-green-700 active:scale-95 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
{isSubmitting ? 'Invio...' : 'Invia al Tecnico'} <Send size={20} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={nextStep}
|
||||
className="flex-1 bg-blue-600 text-white font-bold text-lg rounded-xl shadow-lg shadow-blue-200 hover:bg-blue-700 active:scale-95 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
Avanti <ArrowRight size={24} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- UI COMPONENTS ---
|
||||
|
||||
function InputGroup({ label, icon: Icon, children }) {
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-gray-700 font-semibold text-sm mb-1">
|
||||
{Icon && <Icon size={16} className="text-gray-400" />}
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Label({ text }) {
|
||||
return <h3 className="text-gray-800 font-semibold text-sm mb-2">{text}</h3>;
|
||||
}
|
||||
|
||||
function SelectCard({ selected, onClick, label, sub }) {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`p-3 rounded-lg border-2 cursor-pointer transition-all text-center ${
|
||||
selected
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||
: 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<div className="font-bold text-sm">{label}</div>
|
||||
{sub && <div className="text-xs opacity-75">{sub}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user