From 602669a9c065b16b9c7e217636f5856d22b90bb6 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Sun, 20 Apr 2025 21:32:16 +0200
Subject: [PATCH] style: Update code syntax highlighting colors

---
 app/components/Highlight.tsx  | 343 ++++------------------------------
 app/components/Snippet.tsx    |  25 ++-
 app/layouts/prism.css         | 233 ++++++-----------------
 app/pages/docs/react/tabs.tsx | 130 ++++++-------
 app/partials/HeroSection.tsx  |   2 +-
 5 files changed, 174 insertions(+), 559 deletions(-)

diff --git a/app/components/Highlight.tsx b/app/components/Highlight.tsx
index e9fa484..6067ea2 100644
--- a/app/components/Highlight.tsx
+++ b/app/components/Highlight.tsx
@@ -8,320 +8,16 @@ import {
 	on,
 	splitProps,
 } from "solid-js";
+import { clipboard } from "solid-heroicons/solid";
+import { Icon } from "solid-heroicons";
 import * as Prismjs from "prismjs";
+import toast from "solid-toast";
 import clsx from "clsx";
 
-/**
- * @see https://prismjs.com/#supported-languages
- */
-export const Language = {
-	JAVASCRIPT: "javascript",
-	HTML: "html",
-	CSS: "css",
-	MARKUP: "markup",
-	XML: "xml",
-	SVG: "svg",
-	ABAP: "abap",
-	ABNF: "abnf",
-	ACTION_SCRIPT: "actionscript",
-	ADA: "ada",
-	AGDA: "agda",
-	AL: "al",
-	ANTLR4: "antlr4",
-	G4: "g4",
-	APACHE_CONFIGURATION: "apacheconf",
-	APEX: "apex",
-	APL: "apl",
-	APPLESCRIPT: "applescript",
-	AQL: "aql",
-	ARDUINO: "arduino",
-	ARFF: "arff",
-	ARM_ASSEMBLY: "armasm",
-	ARTURO: "arturo",
-	ASCIIDOC: "asciidoc",
-	ASP_NET: "aspnet",
-	ASSEMBLY_6502: "asm6502",
-	ASSEMBLY_ATMEL_AVR: "asmatmel",
-	AUTO_HOTKEY: "autohotkey",
-	AUTO_IT: "autoit",
-	AVI_SYNTH: "avisynth",
-	AVRO_IDL: "avro-idl",
-	AWK: "awk",
-	BASH: "bash",
-	BASIC: "basic",
-	BATCH: "batch",
-	BBCODE: "bbcode",
-	BBJ: "bbj",
-	BICEP: "bicep",
-	BIRB: "birb",
-	BISON: "bison",
-	BNF: "bnf",
-	BQN: "bqn",
-	BRAINFUCK: "brainfuck",
-	BRIGHT_SCRIPT: "brightscript",
-	BRO: "bro",
-	BSL: "bsl",
-	C: "c",
-	CSHARP: "csharp",
-	CPP: "cpp",
-	CF_SCRIPT: "cfscript",
-	CHAI_SCRIPT: "chaiscript",
-	CIL: "cil",
-	CILK_C: "cilkc",
-	CILK_CPP: "cilkcpp",
-	CLOJURE: "clojure",
-	CMAKE: "cmake",
-	COBOL: "cobol",
-	COFFEE_SCRIPT: "coffeescript",
-	CONCURNAS: "concurnas",
-	CONTENT_SECURITY_POLICY: "csp",
-	COOKLANG: "cooklang",
-	Coq: "coq",
-	CRYSTAL: "crystal",
-	CSS_EXTRAS: "css-extras",
-	CSV: "csv",
-	CUE: "cue",
-	CYPHER: "cypher",
-	D: "d",
-	DART: "dart",
-	DATA_WEAVE: "dataweave",
-	DAX: "dax",
-	DHALL: "dhall",
-	DIFF: "diff",
-	DJANGO: "django",
-	JINJA2: "jinja2",
-	DNS_ZONE_FILE: "dns-zone-file",
-	DOCKER: "docker",
-	DOT: "dot",
-	EBNF: "ebnf",
-	EDITOR_CONFIG: "editorconfig",
-	EIFFEL: "eiffel",
-	EJS: "ejs",
-	ELIXIR: "elixir",
-	ELM: "elm",
-	EMBEDDED_LUA_TEMPLATING: "etlua",
-	ERB: "erb",
-	ERLANG: "erlang",
-	EXCEL_FORMULA: "excel-formula",
-	FSHARP: "fsharp",
-	FACTOR: "factor",
-	FALSE: "false",
-	FIRESTORE_SECURITY_RULES: "firestore-security-rules",
-	FLOW: "flow",
-	FORTRAN: "fortran",
-	FREEMARKER_TEMPLATE_LANGUAGE: "ftl",
-	GAMEMAKER_LANGUAGE: "gml",
-	GAP: "gap",
-	GCODE: "gcode",
-	GD_SCRIPT: "gdscript",
-	GEDCOM: "gedcom",
-	GETTEXT: "gettext",
-	GHERKIN: "gherkin",
-	GIT: "git",
-	GLSL: "glsl",
-	GN: "gn",
-	GNU_LINKER_SCRIPT: "linker-script",
-	GO: "go",
-	GO_MODULE: "go-module",
-	GRADLE: "gradle",
-	GRAPHQL: "graphql",
-	GROOVY: "groovy",
-	HAML: "haml",
-	HANDLEBARS: "handlebars",
-	HASKELL: "haskell",
-	HAXE: "haxe",
-	HCL: "hcl",
-	HLSL: "hlsl",
-	HOON: "hoon",
-	HTTP: "http",
-	HTTP_PUBLIC_KEY_PINS: "hpkp",
-	HTTP_STRICT_TRANSPORT_SECURITY: "hsts",
-	ICHIGOJAM: "ichigojam",
-	ICON: "icon",
-	ICU_MESSAGE_FORMAT: "icu-message-format",
-	IDRIS: "idris",
-	IGNORE: "ignore",
-	INFORM_7: "inform7",
-	INI: "ini",
-	IO: "io",
-	J: "j",
-	JAVA: "java",
-	JAVADOC: "javadoc",
-	JAVADOC_LIKE: "javadoclike",
-	JAVA_STACK_TRACE: "javastacktrace",
-	JEXL: "jexl",
-	JOLIE: "jolie",
-	JQ: "jq",
-	JSDOC: "jsdoc",
-	JS_EXTRAS: "js-extras",
-	JSON: "json",
-	JSON5: "json5",
-	JSONP: "jsonp",
-	JS_STACK_TRACE: "jsstacktrace",
-	JS_TEMPLATES: "js-templates",
-	JULIA: "julia",
-	KEEPALIVED_CONFIGURE: "keepalived",
-	KEYMAN: "keyman",
-	KOTLIN: "kotlin",
-	KUMIR: "kumir",
-	KUSTO: "kusto",
-	LATEX: "latex",
-	LATTE: "latte",
-	LESS: "less",
-	LILYPOND: "lilypond",
-	LIQUID: "liquid",
-	LISP: "lisp",
-	LIVESCRIPT: "livescript",
-	LLVM: "llvm",
-	LOG: "log",
-	LOLCODE: "lolcode",
-	LUA: "lua",
-	MAGMA: "magma",
-	MAKEFILE: "makefile",
-	MARKDOWN: "markdown",
-	MARKUP_TEMPLATING: "markup-templating",
-	MATA: "mata",
-	MATLAB: "matlab",
-	MAXSCRIPT: "maxscript",
-	MEL: "mel",
-	MERMAID: "mermaid",
-	METAFONT: "metafont",
-	MIZAR: "mizar",
-	MONGODB: "mongodb",
-	MONKEY: "monkey",
-	MOONSCRIPT: "moonscript",
-	N1QL: "n1ql",
-	N4JS: "n4js",
-	NAND_TO_TETRIS_HDL: "nand2tetris",
-	NANINOVEL_SCRIPT: "naniscript",
-	NASM: "nasm",
-	NEON: "neon",
-	NEVOD: "nevod",
-	NGINX: "nginx",
-	NIM: "nim",
-	NIX: "nix",
-	NSIS: "nsis",
-	OBJECTIVE_C: "objectivec",
-	OCAML: "ocaml",
-	ODIN: "odin",
-	OPENCL: "opencl",
-	OPENQASM: "openqasm",
-	OZ: "oz",
-	PARI_GP: "parigp",
-	PARSER: "parser",
-	PASCAL: "pascal",
-	PASCALIGO: "pascaligo",
-	PATROL_SCRIPTING_LANGUAGE: "psl",
-	PC_AXIS: "pcaxis",
-	PEOPLECODE: "peoplecode",
-	PERL: "perl",
-	PHP: "php",
-	PHP_DOC: "phpdoc",
-	PHP_EXTRAS: "php-extras",
-	PLANT_UML: "plant-uml",
-	PL_SQL: "plsql",
-	POWERQUERY: "powerquery",
-	POWERSHELL: "powershell",
-	PROCESSING: "processing",
-	PROLOG: "prolog",
-	PROMQL: "promql",
-	PROPERTIES: "properties",
-	PROTOBUF: "protobuf",
-	PUG: "pug",
-	PUPPET: "puppet",
-	PURE: "pure",
-	PUREBASIC: "purebasic",
-	PURESCRIPT: "purescript",
-	PYTHON: "python",
-	QSHARP: "qsharp",
-	Q: "q",
-	QML: "qml",
-	QORE: "qore",
-	R: "r",
-	RACKET: "racket",
-	RAZOR: "razor",
-	REACT_JSX: "jsx",
-	REACT_TSX: "tsx",
-	REASON: "reason",
-	REGEX: "regex",
-	REGO: "rego",
-	RENPY: "renpy",
-	RESCRIPT: "rescript",
-	REST: "rest",
-	RIP: "rip",
-	ROBOCONF: "roboconf",
-	ROBOT_FRAMEWORK: "robotframework",
-	RUBY: "ruby",
-	RUST: "rust",
-	SAS: "sas",
-	SASS: "sass",
-	SCSS: "scss",
-	SCALA: "scala",
-	SCHEME: "scheme",
-	SHELL_SESSION: "shell-session",
-	SMALI: "smali",
-	SMALLTALK: "smalltalk",
-	SMARTY: "smarty",
-	SML: "sml",
-	SOLIDITY: "solidity",
-	SOLUTION_FILE: "solution-file",
-	SOY: "soy",
-	SPARQL: "sparql",
-	SPLUNK_SPL: "splunk-spl",
-	SQF: "sqf",
-	SQL: "sql",
-	SQUIRREL: "squirrel",
-	STAN: "stan",
-	STATA_ADO: "stata",
-	STRUCTURED_TEXT: "iecst",
-	STYLUS: "stylus",
-	SUPERCOLLIDER: "supercollider",
-	SWIFT: "swift",
-	SYSTEMD: "systemd",
-	T4_TEMPLATING: "t4-templating",
-	T4_CSHARP: "t4-cs",
-	T4_VB: "t4-vb",
-	TAP: "tap",
-	TCL: "tcl",
-	TEMPLATE_TOOLKIT_2: "tt2",
-	TEXTILE: "textile",
-	TOML: "toml",
-	TREMOR: "tremor",
-	TURTLE: "turtle",
-	TWIG: "twig",
-	TYPESCRIPT: "typescript",
-	TYPOSCRIPT: "typoscript",
-	UNREALSCRIPT: "unrealscript",
-	UO_RAZOR_SCRIPT: "uorazor",
-	URI: "uri",
-	V: "v",
-	VALA: "vala",
-	VB_NET: "vbnet",
-	VELOCITY: "velocity",
-	VERILOG: "verilog",
-	VHDL: "vhdl",
-	VIM: "vim",
-	VISUAL_BASIC: "visual-basic",
-	WARP_SCRIPT: "warpscript",
-	WEB_ASSEMBLY: "wasm",
-	WEB_IDL: "web-idl",
-	WGSL: "wgsl",
-	WIKI: "wiki",
-	WOLFRAM: "wolfram",
-	WREN: "wren",
-	XEORA: "xeora",
-	XML_DOC: "xml-doc",
-	XOJO: "xojo",
-	XQUERY: "xquery",
-	YAML: "yaml",
-	YANG: "yang",
-	ZIG: "zig",
-} as const;
-export type Language = (typeof Language)[keyof typeof Language];
-
 type Props = {
 	language: string;
 	class?: string;
+	dark?: boolean;
 	withLineNumbers?: boolean;
 } & ComponentProps<"code">;
 
@@ -354,13 +50,42 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 		}),
 	);
 
+	const handleCopyToClipboard = () => {
+		if (props.innerHTML) {
+			navigator.clipboard.writeText(props.innerHTML);
+		} else if (props.children) {
+			navigator.clipboard.writeText(props.children.toString());
+		}
+
+		toast.success("Copié dans le presse-papier", {
+			duration: 2000,
+			position: "top-right",
+		});
+	};
+
 	return (
 		<div
 			class={clsx(
-				"rounded-xl shadow-lg flex items-start px-4 py-2 w-full",
+				"group relative flex items-start px-4 py-2 w-full",
 				props.class,
 			)}
 		>
+			<button
+				class="absolute cursor-pointer top-0 right-2 text-slate-500 bg-slate-200/10 rounded-md hover:bg-linear-to-r hover:from-violet-400/30 hover:via-violet-400 hover:to-violet-400/30 p-px hover:text-violet-300"
+				type="button"
+				onClick={handleCopyToClipboard}
+			>
+				<span
+					class={clsx(
+						props.dark ? "hover:bg-slate-800" : "hover:bg-white",
+						"p-2 block rounded-md",
+					)}
+				>
+					<span class="sr-only">Copier l'extrait de code</span>
+					<Icon path={clipboard} class="w-5 h-5" />
+				</span>
+			</button>
+
 			{props.withLineNumbers && props.children?.toString() && (
 				<div
 					aria-hidden="true"
diff --git a/app/components/Snippet.tsx b/app/components/Snippet.tsx
index 238ca02..cbeec3b 100644
--- a/app/components/Snippet.tsx
+++ b/app/components/Snippet.tsx
@@ -1,4 +1,4 @@
-import type { JSX, Accessor, Setter } from "solid-js";
+import type { JSX } from "solid-js";
 
 import { For, createSignal } from "solid-js";
 import { Highlight } from "./Highlight";
@@ -24,6 +24,7 @@ type SnippetProps = {
 	children?: JSX.Element;
 	class?: string;
 	snippets: SnippetTab[];
+	dark?: boolean;
 };
 
 export function Snippet(props: SnippetProps) {
@@ -40,7 +41,8 @@ export function Snippet(props: SnippetProps) {
 	return (
 		<div
 			class={clsx(
-				"relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur-sm",
+				"relative rounded-2xl ring-1 ring-white/10 backdrop-blur-sm",
+				props.dark ? "bg-[#0A101F]/80" : "bg-slate-50",
 				props.class,
 			)}
 		>
@@ -48,6 +50,7 @@ export function Snippet(props: SnippetProps) {
 			<div class="absolute right-20 -bottom-px left-11 h-px bg-linear-to-r from-purple-400/0 via-purple-400 to-purple-400/0" />
 			<div class="pt-4 pl-4">
 				<TrafficLightsIcon class="h-2.5 w-auto stroke-slate-500/30" />
+
 				<div class="mt-4 flex space-x-2 text-xs">
 					<For each={props.snippets}>
 						{(tab) => (
@@ -56,15 +59,22 @@ export function Snippet(props: SnippetProps) {
 									"flex h-6 rounded-full",
 									{ "cursor-pointer": tab.codeLanguage && !isActive(tab) },
 									isActive(tab)
-										? "bg-linear-to-r from-violet-400/30 via-violet-400 to-violet-400/30 p-px font-medium text-violet-300"
-										: "text-slate-500",
+										? clsx(
+												"bg-linear-to-r from-violet-400/30 via-violet-400 to-violet-400/30 p-px font-medium",
+												props.dark ? "text-violet-300" : "text-violet-600",
+											)
+										: props.dark
+											? "text-slate-400"
+											: "text-slate-500",
 								)}
 							>
 								<button
 									type="button"
 									class={clsx(
 										"flex items-center rounded-full px-2.5",
-										isActive(tab) && "bg-slate-800",
+										isActive(tab) && props.dark
+											? "bg-slate-800"
+											: "bg-violet-100",
 									)}
 									disabled={!tab.codeLanguage}
 									onClick={() => selectTab(tab.name)}
@@ -79,7 +89,10 @@ export function Snippet(props: SnippetProps) {
 				{selectedTab() && (
 					<div class="mt-6">
 						<Highlight
-							class="dark !pt-0 !px-1"
+							class={clsx(
+								"!pt-0 !px-1 max-h-96 overflow-auto",
+								props.dark && "dark text-white",
+							)}
 							language={selectedTab().codeLanguage}
 							withLineNumbers
 						>
diff --git a/app/layouts/prism.css b/app/layouts/prism.css
index 69fe39b..2947fda 100644
--- a/app/layouts/prism.css
+++ b/app/layouts/prism.css
@@ -1,195 +1,80 @@
-code[class*="language-"],
-pre[class*="language-"] {
-  color: #383a42;
-  background: none;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-pre[class*="language-"]::selection,
-pre[class*="language-"] ::selection,
-code[class*="language-"]::selection,
-code[class*="language-"] ::selection,
-pre[class*="language-"]::-moz-selection,
-pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection {
-  background: #DDE3EA;
-  text-shadow: none;
-}
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-:not(pre) > code[class*="language-"] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #a0a1a7;
-}
-.token.plain-text,
-.token.punctuation {
-  color: #383a42;
-}
-.token.selector,
-.token.tag {
-  color: #e45649;
-}
-.token.property,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.attr-name,
-.token.deleted {
-  color: #e1aa76;
-}
-.token.string,
-.token.char,
-.token.attr-value,
-.token.builtin,
-.token.inserted {
-  color: #50a14f;
-}
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #46a6b2;
-}
-.token.function {
-  color: #4078f2;
-}
-.token.atrule,
-.token.keyword,
-.token.regex,
-.token.important,
-.token.variable {
-  color: #a626a4;
-}
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
+.token.comment {
   font-style: italic;
 }
-.token.entity {
-  cursor: help;
-}
-pre.line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-}
-pre.line-numbers > code {
-  position: relative;
-}
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em;
-  letter-spacing: -1px;
-  border-right: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.line-numbers-rows > span {
-  pointer-events: none;
-  display: block;
-  counter-increment: linenumber;
-}
-.line-numbers-rows > span:before {
-  content: counter(linenumber);
-  color: #b5b9c2;
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
-}
-code.language-css,
-pre.languagecss {
-  color: #E45649;
-}
-code.language-javascript,
-pre.languagejavascript {
-  color: #E45649;
-}
-code.language-js,
-pre.languagejs {
-  color: #E45649;
-}
-code.language-jsx,
-pre.languagejsx {
-  color: #E45649;
-}
-code.language-sass,
-pre.languagesass {
-  color: #E45649;
-}
-code.language-scss,
-pre.languagescss {
-  color: #E45649;
-}
-code.language-ts,
-pre.languagets {
-  color: #E45649;
-}
-code.language-tsx,
-pre.languagetsx {
-  color: #E45649;
-}
-code.language-typescript,
-pre.languagetypescript {
-  color: #E45649;
-}
 
-.dark pre[class*="language-"] {
-  color: var(--color-slate-50);
-}
-.dark .token.module {
-  color: var(--color-pink-400)!important;
-}
+.dark .token.module,
 .dark .token.attr-name,
 .dark .token.keyword,
 .dark .token.rule,
 .dark .token.pseudo-class,
 .dark .token.important {
-  color: var(--color-slate-300);
+  color: #CB5FDE;
 }
+
 .dark .token.comment,
 .dark .token.operator,
 .dark .token.combinator {
   color: var(--color-slate-400);
 }
+
 .dark .token.punctuation,
 .dark .token.attr-equals {
   color: var(--color-slate-500);
 }
+
 .dark .token.attr-value,
 .dark .token.class,
-.dark .token.string,
-.dark .token.property {
-  color: var(--color-sky-300);
+.dark .token.string {
+  color: #89CA6C;
+}
+
+.dark .token.property,
+.dark .token.tag {
+  color: #E3596F;
+}
+
+.dark .token.function-variable {
+  color: #61AFEF;
+}
+
+/** Light mode */
+
+.token.attr-value,
+.token.class,
+.token.string {
+  color: #50A14F;
+}
+
+.token.function-variable,
+.token.generic-function,
+.token.function {
+  color: #4078F2;
+}
+
+.token.module,
+.token.attr-name,
+.token.keyword,
+.token.rule,
+.token.pseudo-class,
+.token.important {
+  color: #A626A4;
+}
+
+.token.property,
+.token.tag {
+  color: #E55649;
+}
+
+.token.generic,
+.token.class-name {
+  color: #C18401;
+}
+
+.token.comment,
+.token.combinator {
+  color: #A0A1A7;
+}
+.token.operator,
+.token.builtin {
+  color: #0184BC;
 }
\ No newline at end of file
diff --git a/app/pages/docs/react/tabs.tsx b/app/pages/docs/react/tabs.tsx
index 3205291..3d5edc4 100644
--- a/app/pages/docs/react/tabs.tsx
+++ b/app/pages/docs/react/tabs.tsx
@@ -1,94 +1,86 @@
-import { Highlight } from "@/components/Highlight";
-import Tabs from "@/components/Tabs";
+import { Snippet } from "@/components/Snippet";
 
-export default {
-	reactTodolist: () => {
-		return (
-			<Tabs defaultSelectedTab="app">
-				<Tabs.Item value="app" label="App.tsx">
-					<Highlight language="tsx" withLineNumbers>
-						{`import TodoList from "./TodoList";
+const reactTodoListSnippets = [
+	{
+		name: "App.tsx",
+		codeLanguage: "tsx",
+		code: `import TodoList from "./TodoList";
 import React from "react";
 
 const App = () => {
   return (
     <div>
       <h1>TodoList</h1>
-
       <TodoList />
     </div>
   );
-};`}
-					</Highlight>
-				</Tabs.Item>
+};`,
+	},
+	{
+		name: "TodoList.tsx",
+		codeLanguage: "tsx",
+		code: `import TodoListItem from "./TodoListItem";
+import React from "react";
 
-				<Tabs.Item value="todolist" label="TodoList.tsx">
-					{`
-            \`\`\`tsx showLineNumbers
-            import TodoListItem from "./TodoListItem";
-            import React from "react";
+const TodoList = () => {
+  const [items, setItems] = React.useState<string[]>([]);
+  const [inputValue, setInputValue] = React.useState<string>("");
 
-            const TodoList = () => {
-              const [items, setItems] = React.useState<string[]>([]);
-              const [inputValue, setInputValue] = React.useState<string>("");
+  const handleInputValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
 
-              const handleInputValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-                setInputValue(event.target.value);
-              };
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    // On empêche le comportement par défaut du formulaire
+    event.preventDefault();
 
-              const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-                // On empêche le comportement par défaut du formulaire
-                event.preventDefault();
+    // On ajoute un nouvel élément à la liste des tâches
+    setItems([...items, inputValue]);
 
-                // On ajoute un nouvel élément à la liste des tâches
-                setItems([...items, inputValue]);
+    // On réinitialise la valeur de l'input
+    setInputValue("");
+  };
 
-                // On réinitialise la valeur de l'input
-                setInputValue("");
-              };
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="todolist-input"></label>
 
-              return (
-                <div>
-                  <form onSubmit={handleSubmit}>
-                    <label htmlFor="todolist-input"></label>
+        <input id="todolist-input" type="text" value={inputValue} onChange={handleInputValueChange} />
+      </form>
 
-                    <input id="todolist-input" type="text" value={inputValue} onChange={handleInputValueChange} />
-                  </form>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <TodoListItem item={item} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
 
-                  <ul>
-                    {items.map((item, index) => (
-                      <li key={index}>
-                        <TodoListItem item={item} />
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              );
-            };
+export default TodoList;`,
+	},
+	{
+		name: "TodoListItem.tsx",
+		codeLanguage: "tsx",
+		code: `import React from "react";
 
-            export default TodoList;
-            \`\`\`
-          `}
-				</Tabs.Item>
+interface TodoListItemProps {
+  item: string;
+}
 
-				<Tabs.Item value="todolistitem" label="TodoListItem.tsx">
-					{`
-            \`\`\`tsx showLineNumbers
-            import React from "react";
+const TodoListItem = (props: TodoListItemProps) => {
+  return <span>{props.item}</span>;
+};
 
-            interface TodoListItemProps {
-              item: string;
-            }
+export default TodoListItem;`,
+	},
+];
 
-            const TodoListItem = (props: TodoListItemProps) => {
-              return <span>{props.item}</span>;
-            };
-
-            export default TodoListItem;
-            \`\`\`
-          `}
-				</Tabs.Item>
-			</Tabs>
-		);
+export default {
+	reactTodolist: () => {
+		return <Snippet snippets={reactTodoListSnippets} />;
 	},
 };
diff --git a/app/partials/HeroSection.tsx b/app/partials/HeroSection.tsx
index 143334c..1407142 100644
--- a/app/partials/HeroSection.tsx
+++ b/app/partials/HeroSection.tsx
@@ -97,7 +97,7 @@ export function HeroSection() {
 							<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10 blur-lg" />
 							<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10" />
 
-							<Snippet class="min-h-64" snippets={snippets} />
+							<Snippet class="min-h-64" dark snippets={snippets} />
 						</div>
 					</div>
 				</div>