feat(example): example list page done

front/src/modules/common/layouts/home/home.module.scss

@@ -1,3 +1,6 @@
 .container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background-color: var(--color-background);
 }

front/src/modules/example/components/example-list/example-list.component.tsx

@@ -1,5 +1,7 @@
 import { useQuery } from "@/modules/common/hooks/api/useQuery";
 import styles from "./example-list.module.scss";
+import Image from "next/image";
+import Link from "next/link";
 
 type ExampleListProps = {};
 
@@ -24,11 +26,35 @@ export const ExampleList: React.FC<ExampleListProps> = ({}) => {
     timeout: 4000,
   });
 
+  if (result.isLoading) {
+    return <>Loading...</>;
+  }
+
+  if (result.isError) {
+    return <>Error</>;
+  }
+
   return (
-    <div data-testid="{example-list}" className={styles.container}>
-      {JSON.stringify(result.data)}
-      {one.isError && <h1>ERROR</h1>}
-      <h1>ONE{JSON.stringify(one.data)}</h1>
+    <div data-testid="example-list" className={styles.container}>
+      <ul>
+        {result.data?.map((example) => {
+          return (
+            <Link href={`/examples/${example.id}`}>
+              <li key={example.id}>
+                <Image
+                  src={example.image}
+                  alt="picture"
+                  width={30}
+                  height={30}
+                />
+                <span>{example.name}</span>
+                <span>{example.description}</span>
+              </li>
+            </Link>
+          );
+        })}
+      </ul>
+      <div>This could be the pagination...</div>
     </div>
   );
 };

front/src/modules/example/components/example-list/example-list.module.scss

@@ -1,2 +1,34 @@
 .container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1.2rem;
+  gap: 1rem;
+
+  & ul {
+    flex: 1;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0.8rem;
+    background-color: var(--color-grey-90);
+    border-radius: 0.8rem;
+
+    & a > li {
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-columns: 1fr 1fr 1fr;
+      align-items: center;
+      padding: 0.3rem 1.4rem;
+      width: 100%;
+      background-color: var(--color-primary-light);
+      box-shadow: 0 2px 4px rgba(var(--color-black-rgb), 0.2);
+      border-radius: 0.8rem;
+
+      & > img {
+        border-radius: 50%;
+      }
+    }
+  }
 }

front/src/modules/example/views/example-list/example-list.module.scss

@@ -1,2 +1,5 @@
 .container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }