Beaucoup trop de chose

- Ajout création, édition, suppression catégories & liens
- Ajout auth google
- Ajout/modification style pour catégories & liens
- Ajout component générique pour bouton, inputs, checkbox & selector
- Gestion des messages d'erreur/succès/infos via component dédié
- Ajout component FormLayout pour les pages création, édition, suppression catégories & liens
- Page custom 404, 500 & signin
- Modification schéma DB

components/Links/Links.tsx

@@ -1,8 +1,12 @@
 import LinkTag from 'next/link';
 
-import styles from '../../styles/home/links.module.scss';
 import { Category, Link } from '../../types';
 
+import EditSVG from '../../public/icons/edit.svg';
+import RemoveSVG from '../../public/icons/remove.svg';
+
+import styles from '../../styles/home/links.module.scss';
+
 export default function Links({ category }: { category: Category; }) {
     if (category === null) {
         return (<div className={styles['no-category']}>
@@ -25,7 +29,7 @@ export default function Links({ category }: { category: Category; }) {
 
     return (<div className={styles['links-wrapper']}>
         <h2>{name}<span className={styles['links-count']}> — {links.length}</span></h2>
-        <ul className={styles['links']}>
+        <ul className={styles['links']} key={Math.random()}>
             {links.map((link, key) => (
                 <LinkItem key={key} link={link} />
             ))}
@@ -34,42 +38,58 @@ export default function Links({ category }: { category: Category; }) {
 }
 
 function LinkItem({ link }: { link: Link; }) {
-    const { name, url, category } = link;
-    const { origin, pathname, search } = new URL(url);
-
+    const { id, name, url, category } = link;
     return (
-        <li className={styles['link']} key={Math.random()}>
+        <li className={styles['link']} key={id}>
             <a href={url} target={'_blank'} rel={'noreferrer'}>
                 <span className={styles['link-name']}>
                     {name}<span className={styles['link-category']}> — {category.name}</span>
                 </span>
-                <LinkItemURL
-                    origin={origin}
-                    pathname={pathname}
-                    search={search}
-                />
+                <LinkItemURL url={url} />
             </a>
+            <div className={styles['controls']}>
+                <LinkTag href={`/link/edit/${id}`}>
+                    <a className={styles['edit']}>
+                        <EditSVG />
+                    </a>
+                </LinkTag>
+                <LinkTag href={`/link/remove/${id}`}>
+                    <a className={styles['remove']}>
+                        <RemoveSVG />
+                    </a>
+                </LinkTag>
+            </div>
         </li>
     );
 }
 
-function LinkItemURL({ origin, pathname, search }) {
-    let text = '';
+function LinkItemURL({ url }: { url: string; }) {
+    try {
+        const { origin, pathname, search } = new URL(url);
+        let text = '';
 
-    if (pathname !== '/') {
-        text += pathname;
-    }
-
-    if (search !== '') {
-        if (text === '') {
-            text += '/';
+        if (pathname !== '/') {
+            text += pathname;
         }
-        text += search;
-    }
 
-    return (
-        <span className={styles['link-url']}>
-            {origin}<span className={styles['url-pathname']}>{text}</span>
-        </span>
-    )
+        if (search !== '') {
+            if (text === '') {
+                text += '/';
+            }
+            text += search;
+        }
+
+        return (
+            <span className={styles['link-url']}>
+                {origin}<span className={styles['url-pathname']}>{text}</span>
+            </span>
+        )
+    } catch (error) {
+        console.error('error', error);
+        return (
+            <span className={styles['link-url']}>
+                {url}
+            </span>
+        )
+    }
 }