feat: ajout structure projet + config Node 20
This commit is contained in:
UltraLionFr
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Book1Outlined,
|
||||
Folder1Outlined,
|
||||
PlusOutlined,
|
||||
} from "@lineiconshq/free-icons";
|
||||
import { Lineicons } from "@lineiconshq/react-lineicons";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
href: "/dashboard",
|
||||
label: "Tutoriels",
|
||||
icon: Book1Outlined,
|
||||
exact: true,
|
||||
},
|
||||
{
|
||||
href: "/dashboard/nouveau",
|
||||
label: "Nouveau",
|
||||
icon: PlusOutlined,
|
||||
},
|
||||
{
|
||||
href: "/dashboard/categories",
|
||||
label: "Catégories",
|
||||
icon: Folder1Outlined,
|
||||
},
|
||||
];
|
||||
|
||||
export function DashboardSidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActive = (href: string, exact?: boolean) => {
|
||||
if (exact) return pathname === href;
|
||||
return pathname.startsWith(href);
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="w-64 min-h-[calc(100vh-65px)] border-r border-slate-800/50 bg-slate-900/30 backdrop-blur-sm sticky top-16">
|
||||
<div className="p-4">
|
||||
{/* Section title */}
|
||||
<div className="px-4 py-2 mb-2">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Gestion
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Nav items */}
|
||||
<nav className="space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const active = isActive(item.href, item.exact);
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`group flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
|
||||
active
|
||||
? "bg-cyan-500/10 text-cyan-400 border-l-2 border-cyan-400 ml-[-1px]"
|
||||
: "text-slate-400 hover:text-slate-100 hover:bg-slate-800/50"
|
||||
}`}
|
||||
>
|
||||
<Lineicons
|
||||
icon={item.icon}
|
||||
size={20}
|
||||
className={`transition-transform duration-200 ${
|
||||
active ? "" : "group-hover:scale-110"
|
||||
}`}
|
||||
/>
|
||||
<span>{item.label}</span>
|
||||
{active && (
|
||||
<span className="ml-auto w-1.5 h-1.5 rounded-full bg-cyan-400" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="my-6 border-t border-slate-800/50" />
|
||||
|
||||
{/* Quick action */}
|
||||
<Link
|
||||
href="/dashboard/nouveau"
|
||||
className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-medium bg-gradient-to-r from-cyan-500/20 to-violet-500/20 text-slate-100 hover:from-cyan-500/30 hover:to-violet-500/30 border border-slate-700/50 hover:border-cyan-500/30 transition-all duration-300"
|
||||
>
|
||||
<Lineicons icon={PlusOutlined} size={18} />
|
||||
<span>Créer un tuto</span>
|
||||
</Link>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,524 @@
|
||||
"use client";
|
||||
|
||||
import { MarkdownRenderer } from "@/app/tutos/[slug]/markdown-renderer";
|
||||
import type { Category, Tutorial } from "@/lib/tutorials";
|
||||
import {
|
||||
AlignTextLeftOutlined,
|
||||
Books2Outlined,
|
||||
CheckCircle1Outlined,
|
||||
Code1Outlined,
|
||||
EyeOutlined,
|
||||
Folder1Outlined,
|
||||
KeyboardOutlined,
|
||||
Layers1Outlined,
|
||||
Pencil1Outlined,
|
||||
StopwatchOutlined,
|
||||
} from "@lineiconshq/free-icons";
|
||||
import { Lineicons } from "@lineiconshq/react-lineicons";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
type TutorialFormProps = {
|
||||
categories: Category[];
|
||||
action: (formData: FormData) => Promise<void>;
|
||||
submitLabel: string;
|
||||
initialData?: Partial<Tutorial>;
|
||||
};
|
||||
|
||||
// Wrapper pour simplifier l'utilisation des icônes LineIcons
|
||||
function Icon({
|
||||
icon,
|
||||
size = 16,
|
||||
className = "",
|
||||
}: {
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
size?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return <Lineicons icon={icon} size={size} className={className} />;
|
||||
}
|
||||
|
||||
// Composant pour les labels avec icône
|
||||
function FormLabel({
|
||||
icon,
|
||||
children,
|
||||
required,
|
||||
}: {
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
children: React.ReactNode;
|
||||
required?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<label className="flex items-center gap-2 text-sm font-mono text-slate-400 mb-2">
|
||||
<Icon icon={icon} size={16} className="text-cyan-500/70" />
|
||||
<span>{children}</span>
|
||||
{required && <span className="text-cyan-500">*</span>}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
// Composant input stylisé
|
||||
function FormInput({
|
||||
className = "",
|
||||
...props
|
||||
}: React.InputHTMLAttributes<HTMLInputElement>) {
|
||||
return (
|
||||
<input
|
||||
{...props}
|
||||
className={`w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-2.5 text-sm
|
||||
text-slate-100 placeholder:text-slate-600
|
||||
focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
|
||||
hover:border-slate-600 transition-all duration-200
|
||||
backdrop-blur-sm ${className}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Composant select stylisé
|
||||
function FormSelect({
|
||||
children,
|
||||
className = "",
|
||||
...props
|
||||
}: React.SelectHTMLAttributes<HTMLSelectElement>) {
|
||||
return (
|
||||
<select
|
||||
{...props}
|
||||
className={`w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-2.5 text-sm
|
||||
text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
|
||||
hover:border-slate-600 transition-all duration-200
|
||||
backdrop-blur-sm cursor-pointer ${className}`}
|
||||
>
|
||||
{children}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
// Composant textarea stylisé
|
||||
function FormTextarea({
|
||||
className = "",
|
||||
...props
|
||||
}: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
|
||||
return (
|
||||
<textarea
|
||||
{...props}
|
||||
className={`w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-3 text-sm
|
||||
text-slate-100 placeholder:text-slate-600
|
||||
focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
|
||||
hover:border-slate-600 transition-all duration-200
|
||||
backdrop-blur-sm resize-y ${className}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Composant carte section
|
||||
function FormSection({
|
||||
title,
|
||||
icon,
|
||||
children,
|
||||
className = "",
|
||||
noPadding = false,
|
||||
}: {
|
||||
title: string;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
noPadding?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`relative bg-gradient-to-br from-slate-900/90 to-slate-900/70
|
||||
border border-slate-700/40 rounded-xl overflow-hidden
|
||||
backdrop-blur-md shadow-xl shadow-black/20 ${className}`}
|
||||
>
|
||||
{/* Effet de brillance en haut */}
|
||||
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 px-6 py-4 border-b border-slate-700/40 bg-slate-800/30">
|
||||
<div className="p-2 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
|
||||
<Icon icon={icon} size={16} className="text-cyan-400" />
|
||||
</div>
|
||||
<h2 className="text-base font-semibold text-slate-100 tracking-wide">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{noPadding ? children : <div className="p-6">{children}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TutorialForm({
|
||||
categories,
|
||||
action,
|
||||
submitLabel,
|
||||
initialData,
|
||||
}: TutorialFormProps) {
|
||||
const [content, setContent] = useState(initialData?.content || "");
|
||||
const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit");
|
||||
const [charCount, setCharCount] = useState(content.length);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Mise à jour du compteur de caractères
|
||||
useEffect(() => {
|
||||
setCharCount(content.length);
|
||||
}, [content]);
|
||||
|
||||
// Estimation du temps de lecture
|
||||
const estimatedReadTime = useCallback(() => {
|
||||
const words = content.trim().split(/\s+/).length;
|
||||
const minutes = Math.ceil(words / 200);
|
||||
return `~${minutes} min`;
|
||||
}, [content]);
|
||||
|
||||
// Raccourcis clavier pour le markdown
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
const textarea = textareaRef.current;
|
||||
if (!textarea) return;
|
||||
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const selected = content.substring(start, end);
|
||||
|
||||
let newContent = content;
|
||||
let newStart = start;
|
||||
let newEnd = end;
|
||||
|
||||
switch (e.key) {
|
||||
case "b": // Bold
|
||||
e.preventDefault();
|
||||
newContent =
|
||||
content.substring(0, start) +
|
||||
`**${selected}**` +
|
||||
content.substring(end);
|
||||
newStart = start + 2;
|
||||
newEnd = end + 2;
|
||||
break;
|
||||
case "i": // Italic
|
||||
e.preventDefault();
|
||||
newContent =
|
||||
content.substring(0, start) +
|
||||
`*${selected}*` +
|
||||
content.substring(end);
|
||||
newStart = start + 1;
|
||||
newEnd = end + 1;
|
||||
break;
|
||||
case "k": // Code
|
||||
e.preventDefault();
|
||||
newContent =
|
||||
content.substring(0, start) +
|
||||
`\`${selected}\`` +
|
||||
content.substring(end);
|
||||
newStart = start + 1;
|
||||
newEnd = end + 1;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
setContent(newContent);
|
||||
// Restaurer la sélection après le re-render
|
||||
requestAnimationFrame(() => {
|
||||
textarea.setSelectionRange(newStart, newEnd);
|
||||
});
|
||||
}
|
||||
},
|
||||
[content]
|
||||
);
|
||||
|
||||
return (
|
||||
<form action={action} className="space-y-8">
|
||||
{/* Hidden input pour toujours envoyer le content */}
|
||||
<input type="hidden" name="content" value={content} />
|
||||
|
||||
{/* Métadonnées */}
|
||||
<FormSection
|
||||
title="Informations du tutoriel"
|
||||
icon={Folder1Outlined}
|
||||
>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<FormLabel icon={AlignTextLeftOutlined} required>
|
||||
Titre
|
||||
</FormLabel>
|
||||
<FormInput
|
||||
name="title"
|
||||
type="text"
|
||||
required
|
||||
defaultValue={initialData?.title}
|
||||
placeholder="Mon super tutoriel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FormLabel icon={Books2Outlined} required>
|
||||
Catégorie
|
||||
</FormLabel>
|
||||
<FormSelect
|
||||
name="categoryId"
|
||||
required
|
||||
defaultValue={initialData?.categoryId}
|
||||
>
|
||||
<option value="">
|
||||
Sélectionner une catégorie...
|
||||
</option>
|
||||
{categories.map((cat) => (
|
||||
<option key={cat.id} value={cat.id}>
|
||||
{cat.name}
|
||||
</option>
|
||||
))}
|
||||
</FormSelect>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FormLabel icon={Layers1Outlined}>Difficulté</FormLabel>
|
||||
<FormSelect
|
||||
name="difficulty"
|
||||
defaultValue={
|
||||
initialData?.difficulty || "Intermédiaire"
|
||||
}
|
||||
>
|
||||
<option value="Débutant">🌱 Débutant</option>
|
||||
<option value="Intermédiaire">
|
||||
🌿 Intermédiaire
|
||||
</option>
|
||||
<option value="Avancé">🌳 Avancé</option>
|
||||
</FormSelect>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FormLabel icon={StopwatchOutlined}>
|
||||
Temps de lecture
|
||||
</FormLabel>
|
||||
<div className="relative">
|
||||
<FormInput
|
||||
name="readTime"
|
||||
type="text"
|
||||
defaultValue={initialData?.readTime}
|
||||
placeholder="5 min"
|
||||
/>
|
||||
{content.length > 0 && (
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500 font-mono">
|
||||
Estimé: {estimatedReadTime()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<FormLabel icon={AlignTextLeftOutlined}>Extrait</FormLabel>
|
||||
<FormTextarea
|
||||
name="excerpt"
|
||||
rows={2}
|
||||
defaultValue={initialData?.excerpt}
|
||||
placeholder="Courte description qui s'affichera sur la page d'accueil..."
|
||||
/>
|
||||
<p className="mt-2 text-xs text-slate-500 font-mono">
|
||||
Laissez vide pour générer automatiquement depuis le
|
||||
contenu
|
||||
</p>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Éditeur Markdown */}
|
||||
<FormSection title="Contenu" icon={Code1Outlined} noPadding>
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center justify-between border-b border-slate-700/40 bg-slate-800/20">
|
||||
<div className="flex">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab("edit")}
|
||||
className={`group flex items-center gap-2 px-6 py-3.5 text-sm font-mono transition-all duration-200 relative ${
|
||||
activeTab === "edit"
|
||||
? "text-cyan-400"
|
||||
: "text-slate-400 hover:text-slate-300"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`transition-transform duration-200 ${
|
||||
activeTab === "edit"
|
||||
? "scale-110"
|
||||
: "group-hover:scale-105"
|
||||
}`}
|
||||
>
|
||||
<Icon icon={Pencil1Outlined} size={16} />
|
||||
</span>
|
||||
<span>Éditer</span>
|
||||
{activeTab === "edit" && (
|
||||
<span className="absolute bottom-0 inset-x-0 h-0.5 bg-gradient-to-r from-cyan-500 to-cyan-400" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab("preview")}
|
||||
className={`group flex items-center gap-2 px-6 py-3.5 text-sm font-mono transition-all duration-200 relative ${
|
||||
activeTab === "preview"
|
||||
? "text-cyan-400"
|
||||
: "text-slate-400 hover:text-slate-300"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`transition-transform duration-200 ${
|
||||
activeTab === "preview"
|
||||
? "scale-110"
|
||||
: "group-hover:scale-105"
|
||||
}`}
|
||||
>
|
||||
<Icon icon={EyeOutlined} size={16} />
|
||||
</span>
|
||||
<span>Aperçu</span>
|
||||
{activeTab === "preview" && (
|
||||
<span className="absolute bottom-0 inset-x-0 h-0.5 bg-gradient-to-r from-cyan-500 to-cyan-400" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Statistiques */}
|
||||
<div className="flex items-center gap-4 pr-6 text-xs font-mono text-slate-500">
|
||||
<span>{charCount.toLocaleString()} caractères</span>
|
||||
<span className="text-slate-700">|</span>
|
||||
<span>
|
||||
{content.trim().split(/\s+/).filter(Boolean).length}{" "}
|
||||
mots
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{activeTab === "edit" ? (
|
||||
<div className="space-y-3">
|
||||
{/* Barre d'outils markdown */}
|
||||
<div className="flex items-center gap-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700/30">
|
||||
<Icon
|
||||
icon={KeyboardOutlined}
|
||||
size={14}
|
||||
className="text-slate-500"
|
||||
/>
|
||||
<span className="text-xs text-slate-500 font-mono mr-2">
|
||||
Raccourcis:
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<kbd className="px-2 py-1 text-xs font-mono bg-slate-700/50 text-slate-300 rounded border border-slate-600/50">
|
||||
Ctrl+B
|
||||
</kbd>
|
||||
<span className="text-slate-600 text-xs">
|
||||
Gras
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 ml-3">
|
||||
<kbd className="px-2 py-1 text-xs font-mono bg-slate-700/50 text-slate-300 rounded border border-slate-600/50">
|
||||
Ctrl+I
|
||||
</kbd>
|
||||
<span className="text-slate-600 text-xs">
|
||||
Italique
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 ml-3">
|
||||
<kbd className="px-2 py-1 text-xs font-mono bg-slate-700/50 text-slate-300 rounded border border-slate-600/50">
|
||||
Ctrl+K
|
||||
</kbd>
|
||||
<span className="text-slate-600 text-xs">
|
||||
Code
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
rows={20}
|
||||
required
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-3 text-sm
|
||||
font-mono text-slate-100 placeholder:text-slate-600
|
||||
focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
|
||||
hover:border-slate-600 transition-all duration-200
|
||||
resize-y min-h-[450px] leading-relaxed"
|
||||
placeholder={`# Mon tutoriel
|
||||
|
||||
## Introduction
|
||||
|
||||
Voici un exemple de contenu en **Markdown**.
|
||||
|
||||
## Étapes
|
||||
|
||||
1. Première étape
|
||||
2. Deuxième étape
|
||||
3. Troisième étape
|
||||
|
||||
## Code
|
||||
|
||||
\`\`\`typescript
|
||||
const hello = "world";
|
||||
console.log(hello);
|
||||
\`\`\`
|
||||
|
||||
## Conclusion
|
||||
|
||||
C'est tout pour ce tutoriel !`}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-slate-500 font-mono">
|
||||
<p>
|
||||
Supporte le Markdown : titres (#), gras
|
||||
(**), italique (*), code (`), listes,
|
||||
citations (>), liens, images...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-h-[450px] rounded-lg bg-slate-950/50 border border-slate-700/30 p-6 overflow-auto">
|
||||
{content.trim() ? (
|
||||
<MarkdownRenderer content={content} />
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full py-20 text-center">
|
||||
<div className="p-4 rounded-full bg-slate-800/50 mb-4">
|
||||
<Icon
|
||||
icon={EyeOutlined}
|
||||
size={32}
|
||||
className="text-slate-600"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-slate-500 font-mono text-sm">
|
||||
Commencez à écrire pour voir l'aperçu...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative flex items-center gap-3 px-8 py-3.5 rounded-xl font-mono text-sm
|
||||
bg-gradient-to-r from-cyan-500/20 to-cyan-600/20
|
||||
text-cyan-400 border border-cyan-500/40
|
||||
hover:border-cyan-400/70 hover:text-cyan-300
|
||||
hover:from-cyan-500/30 hover:to-cyan-600/30
|
||||
hover:shadow-lg hover:shadow-cyan-500/20
|
||||
active:scale-[0.98]
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-all duration-300"
|
||||
>
|
||||
{/* Effet de brillance */}
|
||||
<span className="absolute inset-0 rounded-xl overflow-hidden">
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
|
||||
</span>
|
||||
|
||||
<span className="relative z-10">
|
||||
<Icon icon={CheckCircle1Outlined} size={20} />
|
||||
</span>
|
||||
<span className="relative z-10">{submitLabel}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user