On intègre le design system ! Figma, Tailwind CSS & Shadcn UI

00:00 Dans les deux premières vidéos de cette série, nous avons configuré ensemble notre Monory Pro. On a donc configuré notre application Remix, notre application Nest JS. On a ensuite configuré une image docker pour pouvoir les déployer. Et maintenant, c'est le cas. On n'a presque plus rien à configurer.

00:15 On peut maintenant se lancer dans le développement de ce projet. Nous allons donc maintenant configurer Tailwind CSS. J'en profite aussi pour vous montrer le design système qu'on va utiliser pour notre application Coup de pouce. Nous avons donc les écrans ici et on peut voir que cette application était prévue à la base comme étant une application mobile. Ce qu'on va faire, c'est qu'on va adapter ce design pour qu'il soit compatible en tant qu'application web.

00:38 Nous allons donc configurer Tellwin CSS et créer notre thème en enregistrant chacune des codes couleurs ici, ainsi que les tailles de police. Pour ce faire, on va donc se rendre sur le repository du projet, qui s'appelle donc remix tiret net j s tiret mono repos et nous allons l'installer sur notre ordinateur comme ceci. Le projet est déjà installé de mon côté Ce que je vais faire, c'est que je vais créer une nouvelle branche que je vais appeler zéro trois styding comme ceci. Maintenant, on va lancer la commande NPM run dev comme ceci pour exécuter notre projet qui est maintenant disponible sur le localhost trois mille comme ceci. C'est donc une application remix et on a envie de pouvoir configurer Tailwind.

01:15 On va donc se rendre sur le site de Tailwind css point com ici pour comprendre ce que Tailwind nous permet de faire. Effectivement Tailwind nous permet de définir des designs système comme ceci assez facilement. Nous allons donc tout le site cliquer sur get started ici et nous allons cliquer sur framework give comme ceci et nous allons sélectionner le framework remix ici. Nous sommes donc à la deuxième partie, c'est-à-dire installer telwin css, poste CSS et auto préfixeur. On va donc copier cette commande dans notre terminal.

01:45 On va donc kill notre terminal et nous allons faire un cd de frontend pour installer Tailwind dans notre dossier frontend. On va donc coller cette commande comme ceci et maintenant nous allons lancer la commande suivante un NPX de Tailwind CFS init tiret tiret t s tiret p. On la colle donc dans notre terminal comme ceci et on peut voir que ça a créé une configuration css nommée tailwin point config point t s. Maintenant qu'on a créé notre fichier de configuration tailwin, nous allons l'ouvrir comme ceci. Le fichier s'appelle donc tailwin point config point t s.

02:18 La commande a également créé un fichier post css qui s'appelle post css ou config point g s ici et qui exporte un plugin pour auto préfixeeur et un autre plugin pour Tailwind. Maintenant, nous allons suivre les dernières étapes de la documentation de Tailwind, c'est-à-dire rajouter ici la clé content. On retourne donc dans v s code et nous remplaçons le tableau vide de contenu par un chemin vers nos routes et nos composants React, effectivement, nous allons créer tous nos composants dans le dossier app ici. Et enfin, pour terminer, il nous suffit maintenant de créer un fichier css qui va importer les trois directives de Tailwind. On retourne donc dans notre dossier app ici et nous allons créer un nouveau fichier que nous allons appeler global point css et nous allons copier à l'intérieur les trois directives de Tailwind.

03:05 La dernière chose que nous allons faire, c'est copier ce code-là dans notre fichier root point TFX, ce qui va importer le fichier css sur chacune de nos routes. On va donc retourner dans notre fichier root point TFX et tout en haut, nous allons coller le code que nous venons de copier. On va également importer le type links function depuis remix run slash nod et nous allons remplacer le chemin ici qui est un chemin et lwind par notre fichier global point css et on n'oublie pas de rajouter le point d'interrogation url comme ceci. Maintenant nous avons une erreur avec Typescript qui ne reconnaît pas ce chemin, nous allons donc remplacer ce symbole là par un point comme ceci. Effectivement le fichier root est dans le même dossier que le fichier global point css.

03:49 Pour vérifier que ça marche, nous allons maintenant dans notre fichier et nous allons dans notre body ici, rajouter un propre place name qui aura comme valeur b g sky sept cents comme ceci. Si Tellwin a bien été configuré, le fond de notre application sera en bleu foncé. Nous allons donc ouvrir le terminal ici et nous sommes toujours dans le dossier frontend et nous allons lancer la commande npm run old dev. Si on retourne dans le package design de notre frontend, on peut voir que la commande old tiret dev est équivalente à cette commande là. Nous allons juste lancer cette commande pour vérifier que la configuration Tillwin s'est bien effectuée.

04:24 Ça lance donc notre application remix et uniquement notre application remix sur le Lucalost cinquante-et-un soixante-treize. Et si on ouvre cette application, on peut voir que le fond est de la bonne couleur. Ça veut dire que CleanWin est bien configuré. On peut même inspecter l'élément ici, on peut voir que la classe est bien configurée. Et si on ouvre l'onglet Network et qu'on rafraîchit la page, on peut voir en sélectionnant le filtre CSS que notre fichier global point css a bien été détecté.

04:48 Maintenant que c'est fait, nous allons pouvoir scinder nos deux fenêtres comme ceci pour éviter de tout le temps switcher entre les deux. Nous allons donc pile le terminal et faire un cd double point pour retourner à la racine de notre dossier comme ceci. Nous allons également fermer cet onglet et retourner sur le localhost trois mille. Si maintenant on lance sa commande NPM rundev comme ceci et qu'on rafraîchit la page de notre projet, on peut voir que le fichier css n'a pas été importé. Et si on inspecte la page et qu'on retourne dans network et qu'on rafraîchit la page, si on sélectionne le filtre css, on peut voir que ça détecte bien un fichier nommé global point css, mais si on clique dessus, on peut voir qu'il est entièrement vide.

05:26 Ça veut dire que ça n'a même pas compilé ce fichier. Si on inspecte la structure, on peut voir qu'on a bien la classe b g sky, sel cent, mais le style n'est plus appliqué à notre body quand on lance le projet depuis le mono-ripo. Et c'est normal, c'est parce que net. Js n'arrive pas à lire le fichier Ewind. On va donc retourner sur notre fichier de configuration ELLWIND.

05:47 Config et on peut voir que ce fichier est déjà en exporte par défault, donc il utilise le format ESM. Sauf que NSJS ne sait reconnaître que le CJS. Nous allons donc tout de suite corriger ce problème. On va donc d'abord remplacer le nom du fichier telwinconfig point t s l'extension sera maintenant CGS comme ceci. Maintenant on peut voir qu'on a quelques erreurs ici dans notre fichier comme on ne peut plus importer des types.

06:11 Mais il y a une manière de continuer de bénéficier de l'inférence des types. Ici on peut voir qu'on importe le type config depuis la librairie twin css, mais dans un fichier CGS, c'est possible de le faire en rajoutant cette ligne-ci. Maintenant on va donc supprimer l'import de la config et nous allons remplacer aussi l'export default par un module point export est égal à notre objet qui est l'unique manière de permettre à Nestor. Js de détecter notre fichier de configuration Eloïse. Maintenant, nous allons faire exactement la même chose pour notre deuxième fichier ici qui s'appelle post css point config point g s.

06:49 Nous allons donc le renommer en post css point config point CJS comme ceci et nous pouvons rajouter l'autocompléter en apportant son type, mais surtout, nous remplaçons l'export default par un module point export est égal à cet objet de configuration. Mais ce n'est pas fini. Effectivement, le projet, il est lancé depuis le Molo Ripo. Donc, si on ferme nos deux dossiers, il est lancé depuis cette racine-là. Donc, nous allons devoir paramétrer le chemin vers la configuration Ewind dans ce fichier de configuration post CSS et nous y parvenons en rajoutant cette instruction.

07:25 On rajoute donc une clé config qui prendra comme valeur le dossier actuel et le nom de notre fichier tailwin point config point CGS comme ceci. Nous allons donc importer le pass en utilisant require comme ceci et ensuite dans notre configuration tailwind config, nous allons également remplacer ce chemin-là qui ne sera pas détecté par Ewind. Pour ce faire, nous allons donc faire la même chose, nous allons importer le pass avec un require comme ceci et nous allons utiliser la méthode pass. Join avec comme paramètre le chemin qu'on a défini, mais d'abord, nous allons ajouter le chemin absolu de notre application en utilisant la variable double underscore dear name, comme ceci. Maintenant que ces deux fichiers ont été configurés, on peut kill le terminal et le relancer et on peut voir que le fichier twind a été détecté en temps réel.

08:14 C'est super, on va donc retourner dans le root point TFX et nous allons retirer le background bleu. Nous allons à la place rajouter la classe min h fool pour dire que la hauteur minimum du body sera égale à la hauteur totale de la page. Maintenant, dans notre balise html, nous allons également rajouter une classe avec un class name et nous allons mettre que la hauteur minimum est égale à screen comme ceci. Maintenant, on peut accéder à la route index ici et nous allons supprimer tout ce code pour laisser le titre de notre application coup de pouce comme ceci. Et nous allons également supprimer ces instructions et on peut également supprimer le tag meta.

08:52 Maintenant que c'est fait, on peut retourner sur figma ici et nous allons importer chacune de ces couleurs dans notre application. Pour ce faire, nous allons les importer une par une en les copiant comme ceci et nous allons retourner dans notre configuration et lwind. Et à l'intérieur de la clé externe du thème, nous allons rajouter la clé color qui est un objet et nous allons rajouter chacune des couleurs de notre application. On va commencer par la couleur Khmer Query ici, on va donc la nommer Khmer curie et elle prendrait comme valeur la valeur hexadécimal que nous venons de copier et nous allons faire la même chose pour chacune des couleurs. Et voilà, nous avons importé toutes les couleurs que nous allons utiliser pour ce projet.

09:31 Maintenant, nous allons mettre en place la navbar de notre application. Donc, cette barre qui sera présente sur toutes nos pages et nous allons également sauvegarder ce logo. On va donc le sauvegarder au format PNG comme ceci et nous allons l'exporter en taille fois deux et nous allons l'appeler logo ou de pouce dark comme ceci. On copie maintenant ce fichier dans un nouveau dossier que nous allons appeler underscore asepse et que nous allons créer à l'intérieur de notre dossier root comme ceci. On va donc coller notre logo, logo coup de pouce d'arc en png et on peut maintenant copier le chemin vers ce dossier-là et nous allons l'importer dans notre composant root.

10:09 Nous allons donc importer le logo depuis le dossier root slashunderscore asset slash logo Coup de Pouce. Ensuite, il nous suffit de rajouter un composant de navigation et de rajouter un composant d'image avec comme SRC notre logo que nous venons d'importer. Et on peut voir qu'il a tout de suite été reconnu par l'application Remix. Si on regarde sur l'intégration, on peut voir qu'on aura donc trois icônes. On aura le porte-monnaie, les notifications et le profil client.

10:36 On ne va pas encore télécharger les icônes, mais on peut placer chacun de ces liens en rajoutant une balise link comme celle-ci qui va rediriger vers l'accueil pour le moment et un de ces liens va rediriger vers le porte monnaie, le deuxième lien redirigera vers les notifications et le troisième lien vers le profil comme ceci. Maintenant, on va dire que le parent de notre navigation va utiliser un flex et un Justifier between et il va prendre la couleur qu'on a définie, donc le bleu et le texte sera en blanc comme ceci. Si on regarde maintenant sur le figma, on peut voir que la largeur est à pixels et la hauteur maximum est de vingt-huit. Donc, nous allons dans notre application mettre un wheels full, une hauteur automatique pour conserver les proportions et nous allons mettre une largeur maximale de trois cents pixels. On va plutôt mettre cent quatre-vingts pixels pour le moment et nous allons rajouter le padding ici.

11:30 Donc on a trente-trois pixels de padding horizontal et environ trente pixels de padding vertical on part d'ici et si on compare avec des autres icônes, donc nous allons mettre un p x de 6 et un p y de huit comme ceci. Évidemment, comme cette fenêtre est zoomée, il n'utilise que la moitié de l'écran, le rendu n'est pas terrible, mais ce n'est qu'un premier jet. On va donc modifier, on va mettre un p x de trois et un p y de deux comme ceci et nous allons également centrer les liens au milieu de l'écran ici en utilisant la classe items center. Maintenant, on peut voir sur le design que les trois icônes sont rabattues vers la droite et le logo, il est rabattu vers la gauche. C'est ce que nous avons essayé de faire en utilisant Just kiffé be twin, mais nous allons devoir englober nos trois liens dans un div ici.

12:14 Et ce div utilisera également Flex avec un gap de deux. Ça me semble plutôt pas mal pour commencer. Alors pour y voir plus clair, nous allons copier ce composant-là et en faire un composant dans notre dossier app. On va donc créer un nouveau dossier qu'on va appeler components et dans lequel nous allons ajouter un fichier qu'on va appeler navvar point tfx comme ceci. Et nous allons ensuite importer notre composant en rajoutant un export const navbar est égal à ce composant-là, nous allons renvoyer notre navbar comme ceci et nous allons ajouter le logo comme étant improps au lieu de l'importer directement dans ce composant-là.

12:49 On retourne maintenant dans route et on peut supprimer notre Navarre et importer le composant. Navarre, il prendra comme logo le logo que nous avons importé dans ce composant et on peut voir que le rendu est exactement le même. Maintenant, si on retourne sur figma, on peut voir qu'il y a plusieurs types de boutons. Par exemple, me connecter, créer un compte et nous allons les mettre en place tout de suite en utilisant la librairie chat CNUY. On cherche donc cette librairie sur Google et on clique sur chaque CN UI point com et ensuite on va cliquer sur get started puis sur installation ici et nous allons l'installer avec remix.

13:23 La première étape est déjà faite donc on peut passer à la deuxième étape comme ceci nous allons l'installer avec NPM et nous allons qu'il de nouveau le projet nous allons faire un cd dans le dossier frontend et nous allons lancer la commande NPX shap c n tiret u I arobase latest init. On va accepter ce qu'il nous demande, par exemple d'utiliser le thème lipscript et le thème par défaut et le fichier global point css n'est pas dans app slash global point css, mais global est écrit au singulier. Donc on va devoir réécrire le chemin qui est égal à app slash global point css et on va accepter cette dernière option. Enfin le chemin vers notre configuration t-le-wind qui s'appelle donc t-le-wind point config point CGS comme ceci. Enfin comme alias nous allons définir ce symbole là et pour la méthode UTILCE, nous allons définir ce symbole-là.

14:11 On n'utilise pas les React Server Component et on souhaite sauvegarder cette configuration dans le fichier Component. Json. Alors qu'est-ce qui s'est passé Déjà, ça a rajouté plein de variables dans le fichier global css ainsi que les bordures et les layers. Ensuite ça a créé un dossier lib qui va contenir la méthode c m qui utilise donc twin merge et CLSX pour éviter de dupliquer les variables et ça a aussi créé un fichier de configuration qui s'appelle compenens point json et en dernier ça a reconfiguré notre fichier twin config point CGS en modifiant le contenu et en modifiant les couleurs. C'est vraiment dommage parce que je n'ai pas sauvegardé les couleurs et le chemin précédent.

14:53 Donc malheureusement, on va devoir tout réimporter sinon ça ne va pas marcher. On va commencer par importer la librairie pass depuis pass comme ceci et nous allons faire un joint de dear name et de celui-ci là. On peut maintenant supprimer les autres chemins et nous devons rajouter toutes les couleurs du design sur figma. Et voilà, on a réimporté chacune de nos variables. On peut maintenant ouvrir de nouveau le terminal, faire un cd double point et relancer le projet en faisant un npm rundev.

15:22 Maintenant, sur chaque scène new oeil, nous voulons installer le composant bouton ici. Donc, nous allons lancer cette commande dans le terminal en ouvrant une deuxième fenêtre. On n'oublie pas de faire un CD frontend et nous allons ensuite taper la commande pour créer notre composant de boutons. Le composant a été créé ici, donc on n'oublie pas de réparer les imports, ils n'ont pas l'air de fonctionner. On va l'importer comme ceci.

15:45 On a un petit problème ici au niveau de l'import, ils disent que le fichier n'est pas retrouvé, mais nous propose quand même l'autocompletion. Donc, on va retourner dans le fichier index point tsx ici et nous allons importer notre composant de boutons depuis et nous allons l'appeler créer un compte. Et si on retourne sur le localhost trois mille, on peut voir que le bouton est bien designé. Ça a donc bien fonctionné. On peut commencer à créer le design pour chacun de nos boutons.

16:11 Ce premier bouton a l'air de représenter l'action principale, donc nous allons l'appeler primarrer. Pour ce faire, il suffit de retourner dans notre composant bouton ici et on pouvoir que Chelsea new wave a défini plein de variations. Nous allons donc copier la variation par défaut et nous allons l'appeler primary comme ceci et à la place de b g-primary, nous allons mettre b g-bleu pour reprendre les couleurs de notre intégration. Le texte sera en blanc comme ceci et au survol le bouton sera en bleu à 80 d'opacité. Maintenant si on retourne dans l'index on peut modifier le variant et mettre on va prendre le variant primari comme ceci et on peut voir dans notre application que le thème du bouton a changé.

16:52 Il utilise maintenant la couleur qui colle bien avec notre bleu. Maintenant, nous allons créer ce deuxième bouton que nous allons appeler pour le moment, second arrêt et on va regarder des couleurs qu'il utilise. Il utilise donc un bleu qu'on n'a pas encore défini dans nos couleurs ici, donc nous allons le sauvegarder dans notre configuration Halloween. Nous allons l'appeler bleu clair comme ceci. On retourne donc dans notre projet et nous allons ajouter une clé que nous allons appeler secondary comme ceci et nous pouvons commenter la couleur secondary de chaque scène UI et nous allons mettre le background en bleu clair et le texte en curry comme ceci.

17:28 Et on va dire qu'au survol, ça fait exactement le même effet, c'est-à-dire que ça éclaircit un petit peu la couleur du bleu clair. Si on duplique maintenant notre bouton et qu'on essaye le variant secondaire, on peut voir qu'il a bien pris la couleur qu'on a définie. On peut voir qu'on a encore d'autres boutons. Par exemple, on a un bouton qui utilise la couleur verte définissant une action positive et qui n'a pas de couleur de fond et nous avons un bouton qui utilise du rouge sans couleur de fond ici et nous avons également un bouton qui utilise le bleu également sans couleur de fond. Nous allons donc dupliquer nos boutons et nous allons appeler ce premier bouton green outline comme ceci.

18:01 Le deuxième, nous allons l'appeler Red outline et le dernier Blue Outline. Et nous allons mettre tout ça dans un flex call avec un gap comme ceci. Et on va maintenant créer chacune de ces variations. La variation green Outline aura donc comme background rien. Donc on va mettre background transparent comme ceci et le texte sera la valeur texte vert.

18:23 Pour le red outline, le texte sera la valeur tuerie et pour le blue outline, la valeur sera bleue comme ceci. Et là, on peut voir que chacun de nos boutons est bien représenté. Ce qu'on peut faire, c'est qu'on peut même copier ces valeurs et mettre que au survol, donc au over, on va reprendre les mêmes couleurs avec quatre-vingts pour cent d'opacité pour quand même montrer qu'il se passe quelque chose quand on met la souris dessus. Le dernier bouton, c'est celui-là, c'est m'inscrire avec un email et ça utilise du gris sur du bleu et le bouton possède également une icône ici. Nous allons donc tout de suite le créer et comme ce bouton est lié à la connexion différents réseaux sociaux et que je ne suis pas inspiré pour le nommer, je vais l'appeler OOS comme ceci et ça va donc prendre notre bleu clair et comme texte Dark Iron et au survol on va mettre que ça va prendre par exemple la couleur bleue.

19:11 On va maintenant rajouter ce bouton qu'on appelle au os et on peut voir que si on passe la souris dessus, il prend bien la couleur bleue que nous avons définie. Ça marche très bien et ce qui est cool avec chaque CNUI si on se rend dans le package en JSON ici, c'est qu'il y a une librairie qui s'appelle Lucid React et cette librairie est en fait une librairie d'icônes. Ça tombe bien parce qu'on avait besoin d'icônes pour notre projet. Si on fait une recherche Lucid React sur Google et qu'on se rend sur la page d'accueil, on va par exemple rechercher le wallet ou alors money et l'une des icônes, c'était un billet avec le symbole euro comme ici. Alors nous avons deux manières de l'importer, soit on peut l'exporter depuis le fichier figma et l'importer en tant qu'image dans notre projet, soit on peut essayer de regarder si lucide possède cette icône et on peut voir qu'il ne la possède pas.

19:59 Si je tape par exemple euro, on a quand même trois icônes qui pourraient ressembler par exemple resipte euro ici et pour le moment nous allons l'utiliser. On va donc importer ce composant dans notre fichier navbar à la place du texte porte-monnaie et on l'importe depuis Lucid React comme ceci. Si on retourne maintenant sur notre projet, on peut voir que l'icône apparaît bien ici. Et on peut voir qu'elle utilise un contour blanc et qu'elle est remplie de bleu. Et si on regarde le figma, peut voir qu'elle est plutôt remplie de blanc ici.

20:27 Donc ce qu'on peut tester de faire, c'est utiliser la classe fil et la couleur white comme ceci et text bleu comme ceci. Et là, on peut voir qu'on a inversé les couleurs, mais ça ne ressemble à rien. Si on utilisait par exemple le rouge, on voit très bien que le contour est maintenant en rouge sur du bleu. Donc pour le moment, on ne va pas modifier les couleurs de cette icône. On va regarder s'il y a une autre icône pour les notifications et on peut voir qu'on a donc notre icône de notification, ça s'appelle comme ceci et on peut voir qu'on a exactement la même problématique ici.

21:01 On a une icône, mais on n'a que son contour. On va pouvoir essayer de faire un fil white comme ceci et ça nous voit plutôt bien, c'est ce qu'on nous avait donné dans la maquette sans le petit chapeau ici. Pour terminer, la troisième icône c'est une icône de profil, donc on va regarder, on va taper user ici et ce qui nous intéresse c'est cette icône là ça s'appelle user round on va donc importer user round comme ceci et contrairement à nos deux autres icônes, cette icône c'est juste un tracé, le personnage n'est pas rempli donc ça nous va très bien, on n'a rien à modifier. En taille quand l'écran est très petit. Maintenant, on va encore une fois baisser la taille de notre logo comme ceci et ça me paraît pas mal pour une barre de navigation de départ.

21:52 On peut voir sur chacune de nos pages ou sur la plupart quoi nous avons une sorte de padding et que les pages sont centrées au milieu effet. Et ce n'est pas le cas sur toutes les pages, mais ça serait sympa de pouvoir configurer ce layout sur chacun de nos composants. Heureusement, c'est possible de le faire. Et pour ce faire, nous allons retourner dans nos fichiers ici et nous allons rajouter un fichier qu'on va appeler layout point TFX. Ce fichier va exporter une fonction par défaut.

22:17 On va appeler layout et ça va renvoyer pour le moment un composant main et un composant outlet à l'intérieur. Et pour vérifier que ça fonctionne bien, on va rajouter une place en mettant un padding de huit et un background noir. Et j'ai l'impression que le layout n'est pas détecté par notre application. Notre composant de layout n'a pas l'air de s'afficher sur notre page et j'ai l'impression que c'est parce qu'il ne s'affiche pas sur l'index f x. Pour en avoir le coeur net, nous allons créer un nouveau dossier que nous allons appeler underscore public et nous allons mettre un plus comme ceci.

22:50 Pour rappel le underscore avant public signifie que le nom public ne va pas apparaître dans l'url si on essaye d'accéder aux pages qui sont déclarées dans ces dossiers. Et le symbole plus est une configuration de notre configuration. Vite ici avec un plugin que nous utilisons pour redéfinir les routes. Le plugin s'appelle remix tiret flat tiret route et ce plugin est excellent pour déclarer les routes car il nous donne beaucoup plus de contrôle et il nous permet de les optimiser en ajoutant par exemple la colocation. Ce que le symbole plus signifie au final, c'est qu'il va indiquer à remix que dans ce dossier, nous voulons définir des routes.

23:30 Par exemple, si nous ajoutons un nouveau fichier qu'on va appeler home point TFX qui va contenir le contenu de la page d'accueil comme ceci et qu'on essaye maintenant d'accéder à la page home, on peut voir que ça fonctionne très bien. On a donc notre page home et si on efface les boutons, on peut voir que ça rafraîchit la page en live. Mais si on n'avait pas mis le plus comme ceci, la route n'aurait pas été détectée. Vous allez me dire dans quel cas on ne met pas le plus dans les dossiers qu'on crée dans le fichier root. C'est pour créer des méthodes utilitaires, par exemple contacter l'API, on va créer une méthode par exemple annonce point serveur point t s et ce fichier-là, nous allons par exemple l'importer dans l'index et bien au lieu de faire un import en utilisant des doubles points, des doubles points et encore des doubles points, c'est-à-dire si on a une architecture avec des dizaines de dossiers, nous plaçons le dossier annonce serveur tout près dans le file system pour qu'on ait juste un seul dossier à remonter avant de pouvoir y accéder.

24:28 C'est ce qu'on appelle en quelque sorte la colocation. C'est pour éviter par exemple de créer notre logique serveur ici ou ici. Mais dans notre cas, ça sera très rare de définir des méthodes utilitaires dans notre application en mix, vu que le principe du mono repos, c'est d'utiliser la stack NSJS. Donc, nous allons rajouter le plus. Ici, nous allons supprimer le fichier serveur.

24:49 Dans notre fichier public, nous avons créé une nouvelle page qui s'appelle home point TFX et nous allons maintenant ajouter notre layout dans cette page et on peut voir qu'on a maintenant un layout partagé pour toutes les routes de cette application. Effectivement, ce que le layout va faire, c'est qu'il va rajouter, il va englober toutes les routes qu'on déclare dans le dossier public par ce composant-là. Donc, il va rajouter un main, un padding de huit et un background black. Si on retire le background black et qu'on met un padding de quatre, on peut voir que c'est plutôt sympa et ça peut être très intéressant pour ne pas avoir à recopier cette logique sur chacune de nos pages ici, en rajoutant par exemple un composant main et pour conserver une sémantique. Ça nous va très bien, mais qu'en est-il de ce footer qui est présent dans l'intégration sur figma Qu'est-ce qu'on fait Est-ce qu'on le place en bas ou est-ce qu'on le place à droite en tant que sidebar Eh bien, nous pouvons le placer en bas pour commencer et pour regarder à quoi ça ressemble.

25:43 On va donc retourner dans le fichier root. TFX et en dessous de notre nav var et de nos pages qui sont donc présentes en tant que children, nous allons rajouter un footer comme ceci et nous allons rajouter un lien qui prendra comme nom footer pour le moment et nous allons rajouter un lien vers la page d'accueil. Et on peut voir que le footer n'est pas vers le bas ici comme on souhaiterait qu'il le soit. C'est-à-dire que si on rajoute le style à notre footer comme ceci, donc on va dire que c'est du turquoise, on aimerait que notre footer soit collé à la navigation pour les cas où les pages possèdent très peu de contenu. On peut voir ici qu'on a donc une balise body avec une neuve bar, des children et un footer.

26:20 Et ce qu'on a envie de faire au final, c'est de rajouter un flex et un flex colonne dire que ça prend des colonnes et ce qu'on aimerait maintenant, c'est que nos children prennent toute la hauteur de la page et qu'ils poussent le footer vers le bas comme ceci. Pour ce faire, nous avons qu'une solution, c'est d'englober les children dans un div et de dire que le div va vers un et la classe c'est donc un flex, ça veut dire que le div, il va prendre tout l'espace disponible à la verticale. Il prend l'espace à la verticale parce qu'on l'a mis dans un comme ceci. Je viens de m'aider d'un article sur Google parce que j'ai oublié la syntaxe, mais en fait, on était très proche du but. Ce qu'il faut faire au lieu d'utiliser min edge on doit utiliser comme ceci.

27:07 Et notre html peut tout simplement être un comme ceci. Et là, on peut voir que le footer, il est vraiment centré tout en bas de notre page. Sauf qu'on a ce div ici qui utilise un gros et je crois qu'il y a une autre manière d'arriver au même résultat sans ajouter ce div et c'est de rajouter une classe à notre footer on va rajouter la classe margin top auto comme ceci et on peut voir comme l'utilise flex il va se plaquer tout en bas comme ceci et avoir le résultat que l'on espérait. On a donc plusieurs types de liens, on a une barre de recherche, les offreurs, les demandes, les favoris les messages. On va donc conserver chacun de ces liens.

27:43 On va donc ajouter rechercher, offreurs, demandes, favoris et messages comme ceci. Ensuite, nous allons chercher les icônes sur Lucid, par exemple l'icône de recherche. Les offresurs, je n'ai pas réussi à trouver une icône similaire. Donc pour le moment, on va utiliser les users, users. Ensuite, les demandes, c'est un plus.

28:02 Donc nous allons utiliser le plus. Les favoris, c'est une étoile. Donc on va ajouter stars et les messages, c'est une enveloppe. Donc nous allons mettre par exemple mail et si on retourne sur notre application, l'icône d'étoile n'est pas très fidèle. On va regarder s'il n'y a pas de meilleures étoiles.

28:19 Là, par exemple, il y a star au singulier que nous allons emporter. Nous allons maintenant rajouter une classe. Nous allons mettre flex et flex colonnes et nous allons également centrer ces icônes et nous allons mettre que la taille, ça sera pour le moment du s m comme ceci. Et enfin, nous allons utiliser flex et les centrer comme ceci avec un gap de quatre par exemple. On va ensuite rajouter un petit peu de padding comme sur la navbar et enfin ici on peut voir que le footer il sort de l'écran et il élargit notre application donc nous suffit de rajouter la classe overflow x poto pour rajouter plutôt une barre de scroll à l'intérieur de notre footer va nous permettre de ne pas dépasser les contraintes de taille de notre application.

29:01 Quand on élargit la taille de l'écran, on peut voir que les icônes restent taquées à gauche. Ce qu'on pourrait faire, c'est de rajouter par exemple un Justifier Between comme ceci qui voudrait dire qu'elle prendrait vraiment tout l'espace et qu'elle serait harmonieusement centrée. Maintenant, on va pouvoir copier cette logique et en faire un autre composant que nous allons appeler footer point TFX. On va donc coller notre composant et nous allons l'exporter en l'appelant footer et en n'oubliant pas d'importer chacun de ces liens. Si on veut aller encore plus loin, on va également créer un footer link item, il prendra comme argument nos icônes et notre label.

29:37 Par exemple, il va prendre une icône qui sera donc un react point react node et un label qui sera un string. Nous pouvons maintenant copier un lien à l'intérieur et nous allons mettre ici à la place de l'icône notre icône et nous allons mettre notre label dans un spam comme ceci. Comme ce sont des liens, il ne faut pas oublier de rajouter le link ou plutôt le href, il sera également un string et comme ce sont des liens de navigation, nous allons en fait transformer ce link en nav link. Et le nav link, on va l'importer depuis la librairie remix run React comme ceci, et on ne va pas oublier de faire un return de ce composant. Maintenant, pourquoi on utilise un composant Navlink C'est parce que ce composant a conscience en quelque sorte de s'il est actif ou pas.

30:21 Donc là, nous allons rajouter les brackets comme ceci et le neuf link prend une méthode de call back qui possède une variable qu'on va appeler is active et nous allons donc renvoyer notre classe, mais nous allons rajouter un morceau de logique si la page est active, alors on a envie que le texte soit en vert par exemple. Sinon, on est satisfait d'avoir le texte en bleu comme ceci. Maintenant, nous allons remplacer chacun de nos liens par ce composant-là comme ceci. Ils prennent donc un HRS, une icône et un label. Et voilà, nous avons réutilisé notre composant de liens plusieurs fois et maintenant, on peut importer le footer et supprimer ce composant là.

30:58 On importe donc notre footer comme ceci et nous avons oublié de renvoyer le contenu du footer. Peut également effacer ces deux lignes et maintenant on peut voir que nous avons notre footer qui fonctionne très bien et il n'y a aucune icône qui est au vert parce qu'aucune icône n'est active sur la route slash home. Si je remplace par exemple la demande par la page home comme ceci, on peut voir que la page home devient maintenant active. Pour rester cohérent avec le design, nous allons mettre que seules les icônes deviennent actives et nous allons mettre que le spam reste de couleur bleue comme ceci. Et voilà, on a terminé de configurer Tailwind CSS et la librairie Shad CN YA.

31:37 Il nous reste évidemment énormément de travail pour intégrer tous les écrans qu'on nous a donné. Dans la prochaine vidéo, on va configurer l'authentification et on va mettre en place la base de données et l'ORM Prisema. À bientôt.