-
- Amuse toi avec Next.js et{' '}
- Tailwindcss !
-
-
Dashboard
+
+
+
+
Bienvenu sur
+
+
+
+
Dashboard
+
+
+
+
+
+
+ Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en
+ page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis
+ les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
+ réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq
+ siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu
+ n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles
+ Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion
+ dans des applications de mise en page de texte, comme Aldus PageMaker.
+
+
);
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c9..9ed3a33 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer components {
+ .console {
+ @apply relative top-0.5 inline-block;
+ /* make it hidden then visible every seconde */
+ }
+}
diff --git a/ui/Console.tsx b/ui/Console.tsx
new file mode 100644
index 0000000..9dc2823
--- /dev/null
+++ b/ui/Console.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+
+export default function Console({ text, className }: { text: string; className?: string }) {
+ const [message, setMessage] = useState('');
+ const [typingIndex, setTypingIndex] = useState(0);
+
+ const typingDelay = 400; // The delay between each character being typed, in milliseconds
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ setTypingIndex((prevIndex) => prevIndex + 1);
+ }, typingDelay);
+
+ return () => clearInterval(intervalId);
+ }, [text]);
+
+ useEffect(() => {
+ if (typingIndex <= text.length) {
+ setMessage(text.slice(0, typingIndex));
+ }
+ }, [typingIndex, text]);
+
+ return (
+
+ );
+}