diff --git a/README.md b/README.md
index 71db02c..4d27247 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
+# Galsen UI
-# GalsenUI
-
-**GalsenUI** est une bibliothèque de composants **Tailwind CSS** et **CSS pur** réutilisables, conçue pour la communauté des développeurs du Sénégal. Ce projet **made in Senegal** a pour but de partager des éléments UI modernes et flexibles pour aider les développeurs à accélérer la création de projets et renforcer les initiatives de la communauté **Galsen Dev**.
+**Galsen UI** est une bibliothèque de composants **Tailwind CSS** et **CSS pur** réutilisables, conçue pour la communauté des développeurs du Sénégal. Ce projet **made in Senegal** a pour but de partager des éléments UI modernes et flexibles pour aider les développeurs à accélérer la création de projets.
+Ce projet vient renforcer les projets et activités de la communauté **Galsen DEV**.
## Sommaire
-- [GalsenUI](#galsenui)
+- [Galsen UI](#galsen-ui)
- [Sommaire](#sommaire)
- [Aperçu du projet](#aperçu-du-projet)
- [Prérequis](#prérequis)
@@ -17,15 +17,29 @@
## Aperçu du projet
-**GalsenUI** propose une collection de composants UI prêts à l'emploi, faciles à intégrer dans vos projets. Conçus avec **Tailwind CSS** et **CSS pur**, ces composants sont entièrement personnalisables, réactifs, et adaptés aux besoins des développeurs modernes.
+**Galsen UI** propose une collection de composants UI prêts à l'emploi, faciles à intégrer dans vos projets. Conçus avec **Tailwind CSS** et **CSS** pur, ces composants sont entièrement personnalisables, réactifs, et adaptés aux besoins des développeurs modernes.
L’objectif est de fournir aux développeurs une base solide pour créer des applications élégantes et accessibles, en s'appuyant sur les meilleures pratiques de développement front-end.
+
+
+
+
+
+
+---
+
+
+
+🚧 Si vous souhaitez contribuer à ce projet, veuillez lire **[CONTRIBUTING.md](../CONTRIBUTING.md)** d'abord !
+
+---
+
## Prérequis
-Avant de commencer, assurez-vous d’avoir les éléments suivants installés :
+Avant de commencer, assurez-vous d'avoir les éléments suivants installés :
-- **Node.js** (version 20.x ou supérieure recommandée) - [Télécharger Node.js](https://nodejs.org)
+- Node.js (Version 20.x ou supérieure recommandée) : [Télécharger Node.js](https://nodejs.org)
## Installation
@@ -65,7 +79,7 @@ Une fois le projet lancé, ouvrez votre navigateur et accédez à [http://localh
## Contribuer
-Les contributions sont les bienvenues ! Pour contribuer à **GalsenUI**, suivez les étapes ci-dessous :
+Les contributions sont les bienvenues ! Pour contribuer à **Galsen UI**, suivez les étapes ci-dessous :
1. **Fork** le dépôt.
2. **Créez une branche** pour votre fonctionnalité (`git checkout -b fonctionnalité/ma-fonctionnalité`).
@@ -79,4 +93,5 @@ Nous vous invitons également à consulter notre [Code de Conduite](CODE_OF_COND
Ce projet est sous licence [MIT](LICENSE.md). Vous êtes libre de l'utiliser et de le modifier selon vos besoins.
-Merci d'utiliser **GalsenUI** et de soutenir la communauté Galsen Dev ! Pour toute question, suggestion ou amélioration, n'hésitez pas à nous contacter.
\ No newline at end of file
+Merci d'utiliser **Galsen UI** et de soutenir la communauté Galsen DEV !
+Pour toute question, suggestion ou amélioration, n'hésitez pas à nous contacter.
diff --git a/app/components/[componentName]/page.tsx b/app/components/[componentName]/page.tsx
index 804112a..5e74923 100644
--- a/app/components/[componentName]/page.tsx
+++ b/app/components/[componentName]/page.tsx
@@ -1,45 +1,53 @@
// "use client";
import { promises as fs } from "fs";
-import { serialize } from 'next-mdx-remote/serialize'
+import { serialize } from "next-mdx-remote/serialize";
import RemoteMdxWrapper from "@/components/Mdx/RemoteMdxWrapper";
-import RenderHTMLFiles from '@/components/galsenUiComponents/RenderHTMLFiles';
+import RenderHTMLFiles from "@/components/galsenUiComponents/RenderHTMLFiles";
import H1 from "@/components/Mdx/H1";
+import ErrorMessage from "@/components/Error/ErrorMessage";
import Link from "next/link";
-
type PageProps = {
params: { componentName: string };
};
// TODO: I'll be back to refactor: Because components should not handle logic
export default async function Page({ params }: PageProps) {
-
//
+ // console.log('Message fermé')}
+ // className="my-8"
+ // />
+
// TODO: recuperer les titres et description de chaque composant
const componentsData = await fs.readFile(
- process.cwd() + `/src/data/components/galsen-ui-${params.componentName}.mdx`,
+ process.cwd() +
+ `/src/data/components/galsen-ui-${params.componentName}.mdx`,
"utf8"
- )
+ );
const mdxSource = await serialize(componentsData, { parseFrontmatter: true });
const componentHTMLFiles = await fs.readdir(
process.cwd() + `/public/components/${params.componentName}`,
"utf8"
- )
+ );
const mdxScope = {
files: componentHTMLFiles,
componentSlug: params.componentName,
- components: mdxSource.frontmatter.components
- }
+ components: mdxSource.frontmatter.components,
+ };
return (
+ RenderHTMLFiles,
+ }}
+ />
);
diff --git a/components/Error/ErrorMessage.tsx b/components/Error/ErrorMessage.tsx
index 6511c9b..72a477c 100644
--- a/components/Error/ErrorMessage.tsx
+++ b/components/Error/ErrorMessage.tsx
@@ -1,14 +1,95 @@
-import React from 'react'
+import React from "react";
-type PropsType = {
- message: string
+interface ErrorMessageProps {
+ message: string;
+ title?: string;
+ className?: string;
+ dismissible?: boolean;
+ onDismiss?: () => void;
}
-const ErrorMessage = ({ message }: PropsType) => {
+const ErrorMessage = ({
+ message,
+ title,
+ className = "",
+ dismissible = false,
+ onDismiss,
+}: ErrorMessageProps) => {
+ const [isVisible, setIsVisible] = React.useState(true);
+
+ const handleDismiss = React.useCallback(() => {
+ setIsVisible(false);
+ onDismiss?.();
+ }, [onDismiss]);
+
+ if (!isVisible) return null;
+
return (
- // TODO: this components must be redesigned
-
{message}
- )
-}
+
+
+
+
+
+
+
+ {title && (
+
{title}
+ )}
+
+ {message}
+
+
+ {dismissible && (
+
+ )}
+
+
+ );
+};
-export default ErrorMessage
\ No newline at end of file
+export default ErrorMessage;
diff --git a/components/TheFooter.tsx b/components/TheFooter.tsx
index 6e58b04..d33a64d 100644
--- a/components/TheFooter.tsx
+++ b/components/TheFooter.tsx
@@ -2,18 +2,29 @@ export default function TheFooter() {
return (
);
diff --git a/public/components/switchs/1.html b/public/components/switchs/1.html
new file mode 100644
index 0000000..61353da
--- /dev/null
+++ b/public/components/switchs/1.html
@@ -0,0 +1,8 @@
+
+
+
diff --git a/public/components/switchs/2.html b/public/components/switchs/2.html
new file mode 100644
index 0000000..ac521f5
--- /dev/null
+++ b/public/components/switchs/2.html
@@ -0,0 +1,8 @@
+
+
+
diff --git a/public/components/switchs/3.html b/public/components/switchs/3.html
new file mode 100644
index 0000000..7894a31
--- /dev/null
+++ b/public/components/switchs/3.html
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/public/svgs/madeinsenegal.svg b/public/svgs/madeinsenegal.svg
new file mode 100644
index 0000000..0c90903
--- /dev/null
+++ b/public/svgs/madeinsenegal.svg
@@ -0,0 +1,29 @@
+
+
+
diff --git a/src/data/components/galsen-ui-switchs.mdx b/src/data/components/galsen-ui-switchs.mdx
new file mode 100644
index 0000000..01cf31c
--- /dev/null
+++ b/src/data/components/galsen-ui-switchs.mdx
@@ -0,0 +1,20 @@
+---
+title: Buttons
+emoji: 🔄
+container: p-6 max-w-md mx-auto
+wrapper: h-[300px]
+seo:
+ title: Switch Components
+ description: Swicth components created with Tailwind CSS
+components:
+ 1:
+ title: Standard
+ 2:
+ title: Rounded
+ 3:
+ title: Compact
+---
+
+# Swicth Components
+
+