feat(example-detail): example views completed

front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx

@@ -1,8 +1,13 @@
 import styles from "./{{kebabCase name}}.module.scss";
 
-type {{pascalCase name}}Props = {}
+type {{pascalCase name}}ViewProps = {
+    // query parameters
+    searchParams: { [key: string]: string | string[] | undefined }
+    // url parameters
+    params: { [key: string]: string | undefined }
+}
 
-export const {{pascalCase name}}View:React.FC<{{pascalCase name}}Props> = ({}) => {
+export const {{pascalCase name}}View:React.FC<{{pascalCase name}}ViewProps> = ({}) => {
   return (
     <div data-testid="{{{kebabCase name}}-view}" className={styles.container}></div>
   )

front/.component.tsx

@@ -0,0 +1,9 @@
+import styles from "./.module.scss";
+
+type Props = {}
+
+export const :React.FC<Props> = ({}) => {
+  return (
+    <div data-testid="{}" className={styles.container}></div>
+  )
+}

front/.module.scss

@@ -0,0 +1,2 @@
+.container {
+}

front/src/app/(home)/examples/[exampleId]/page.tsx

@@ -0,0 +1 @@
+export { ExampleDetailView as default } from "@/modules/example/views/example-detail";

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

@@ -0,0 +1,46 @@
+import { useQuery } from "@/modules/common/hooks/api/useQuery";
+import styles from "./example-detail.module.scss";
+import Image from "next/image";
+
+type ExampleDetailProps = {
+  exampleId: number;
+};
+
+type ExampleDetailType = {
+  id: number;
+  name: string;
+  description: string;
+  image: string;
+  created_at: string;
+};
+
+export const ExampleDetail: React.FC<ExampleDetailProps> = ({ exampleId }) => {
+  const result = useQuery<ExampleDetailType>({
+    url: `http://localhost:3000/example/${exampleId}`,
+    options: { headers: {} },
+    timeout: 4000,
+  });
+
+  if (result.isLoading) {
+    return <>Loading...</>;
+  }
+
+  if (result.isError) {
+    return <>Error</>;
+  }
+
+  return (
+    <div data-testid="example-detail" className={styles.container}>
+      <div className={styles["example__card"]}>
+        <Image
+          src={result.data?.image ?? ""}
+          alt="picture"
+          width={130}
+          height={130}
+        />
+        <h3>{result.data?.name}</h3>
+        <p>{result.data?.description}</p>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,35 @@
+.container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & .example__card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+
+    max-width: 250px;
+
+    padding: 2.5rem;
+
+    border-radius: 4px;
+
+    background-color: var(--color-grey-90);
+    box-shadow: 0px 2px 5px rgba(var(--color-black-rgb), 0.2);
+
+    & img {
+      border-radius: 50%;
+      box-shadow: 0px 2px 5px rgba(var(--color-black-rgb), 0.2);
+    }
+
+    & h3 {
+      font-size: 2rem;
+    }
+
+    & p {
+      font-size: 1.6rem;
+    }
+  }
+}

front/src/modules/example/components/example-detail/index.ts

@@ -0,0 +1,3 @@
+"use client"
+
+export { ExampleDetail } from "./example-detail.component";

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

@@ -20,12 +20,6 @@ export const ExampleList: React.FC<ExampleListProps> = ({}) => {
     timeout: 4000,
   });
 
-  const one = useQuery<ExampleListType>({
-    url: "http://localhost:3000/example/1",
-    options: { headers: {} },
-    timeout: 4000,
-  });
-
   if (result.isLoading) {
     return <>Loading...</>;
   }

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

@@ -3,6 +3,7 @@
   flex-direction: column;
   flex: 1;
   padding: 1.2rem;
+  padding-top: 0;
   gap: 1rem;
 
   & ul {
@@ -22,10 +23,14 @@
       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);
+      background-color: var(--color-white);
       border-radius: 0.8rem;
 
+      &:hover {
+        background-color: var(--color-primary-light);
+        box-shadow: 0 2px 4px rgba(var(--color-black-rgb), 0.2);
+      }
+
       & > img {
         border-radius: 50%;
       }

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

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  flex: 1;
+}

front/src/modules/example/views/example-detail/example-detail.view.tsx

@@ -0,0 +1,19 @@
+import { ExampleDetail } from "../../components/example-detail";
+import styles from "./example-detail.module.scss";
+
+type ExampleDetailViewProps = {
+  // query parameters
+  searchParams: { [key: string]: string | string[] | undefined };
+  // url parameters
+  params: { exampleId: string };
+};
+
+export const ExampleDetailView: React.FC<ExampleDetailViewProps> = ({
+  params,
+}) => {
+  return (
+    <div data-testid="example-detail-view" className={styles.container}>
+      <ExampleDetail exampleId={parseInt(params.exampleId)} />
+    </div>
+  );
+};

front/src/modules/example/views/example-detail/index.ts

@@ -0,0 +1 @@
+export { ExampleDetailView } from "./example-detail.view";