From 92d5035e4edb813b4bf81a3d58be2936fa7de2d7 Mon Sep 17 00:00:00 2001 From: dqnid Date: Tue, 3 Sep 2024 20:54:23 +0200 Subject: [PATCH] feat(example-detail): example views completed --- .../__kebabCase_name__.view.tsx | 9 +++- front/.component.tsx | 9 ++++ front/.module.scss | 2 + .../app/(home)/examples/[exampleId]/page.tsx | 1 + .../example-detail.component.tsx | 46 +++++++++++++++++++ .../example-detail/example-detail.module.scss | 35 ++++++++++++++ .../components/example-detail/index.ts | 3 ++ .../example-list/example-list.component.tsx | 6 --- .../example-list/example-list.module.scss | 9 +++- .../example-detail/example-detail.module.scss | 4 ++ .../example-detail/example-detail.view.tsx | 19 ++++++++ .../example/views/example-detail/index.ts | 1 + 12 files changed, 134 insertions(+), 10 deletions(-) create mode 100644 front/.component.tsx create mode 100644 front/.module.scss create mode 100644 front/src/app/(home)/examples/[exampleId]/page.tsx create mode 100644 front/src/modules/example/components/example-detail/example-detail.component.tsx create mode 100644 front/src/modules/example/components/example-detail/example-detail.module.scss create mode 100644 front/src/modules/example/components/example-detail/index.ts create mode 100644 front/src/modules/example/views/example-detail/example-detail.module.scss create mode 100644 front/src/modules/example/views/example-detail/example-detail.view.tsx create mode 100644 front/src/modules/example/views/example-detail/index.ts diff --git a/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx b/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx index 74aad59..9f7bb25 100644 --- a/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx +++ b/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 (
) diff --git a/front/.component.tsx b/front/.component.tsx new file mode 100644 index 0000000..42b6add --- /dev/null +++ b/front/.component.tsx @@ -0,0 +1,9 @@ +import styles from "./.module.scss"; + +type Props = {} + +export const :React.FC = ({}) => { + return ( +
+ ) +} diff --git a/front/.module.scss b/front/.module.scss new file mode 100644 index 0000000..4851408 --- /dev/null +++ b/front/.module.scss @@ -0,0 +1,2 @@ +.container { +} diff --git a/front/src/app/(home)/examples/[exampleId]/page.tsx b/front/src/app/(home)/examples/[exampleId]/page.tsx new file mode 100644 index 0000000..eb3b60e --- /dev/null +++ b/front/src/app/(home)/examples/[exampleId]/page.tsx @@ -0,0 +1 @@ +export { ExampleDetailView as default } from "@/modules/example/views/example-detail"; diff --git a/front/src/modules/example/components/example-detail/example-detail.component.tsx b/front/src/modules/example/components/example-detail/example-detail.component.tsx new file mode 100644 index 0000000..4ae126e --- /dev/null +++ b/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 = ({ exampleId }) => { + const result = useQuery({ + url: `http://localhost:3000/example/${exampleId}`, + options: { headers: {} }, + timeout: 4000, + }); + + if (result.isLoading) { + return <>Loading...; + } + + if (result.isError) { + return <>Error; + } + + return ( +
+
+ picture +

{result.data?.name}

+

{result.data?.description}

+
+
+ ); +}; diff --git a/front/src/modules/example/components/example-detail/example-detail.module.scss b/front/src/modules/example/components/example-detail/example-detail.module.scss new file mode 100644 index 0000000..c70de62 --- /dev/null +++ b/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; + } + } +} diff --git a/front/src/modules/example/components/example-detail/index.ts b/front/src/modules/example/components/example-detail/index.ts new file mode 100644 index 0000000..01b8d3a --- /dev/null +++ b/front/src/modules/example/components/example-detail/index.ts @@ -0,0 +1,3 @@ +"use client" + +export { ExampleDetail } from "./example-detail.component"; diff --git a/front/src/modules/example/components/example-list/example-list.component.tsx b/front/src/modules/example/components/example-list/example-list.component.tsx index 80a471a..48a0acd 100644 --- a/front/src/modules/example/components/example-list/example-list.component.tsx +++ b/front/src/modules/example/components/example-list/example-list.component.tsx @@ -20,12 +20,6 @@ export const ExampleList: React.FC = ({}) => { timeout: 4000, }); - const one = useQuery({ - url: "http://localhost:3000/example/1", - options: { headers: {} }, - timeout: 4000, - }); - if (result.isLoading) { return <>Loading...; } diff --git a/front/src/modules/example/components/example-list/example-list.module.scss b/front/src/modules/example/components/example-list/example-list.module.scss index 0603104..03b133a 100644 --- a/front/src/modules/example/components/example-list/example-list.module.scss +++ b/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%; } diff --git a/front/src/modules/example/views/example-detail/example-detail.module.scss b/front/src/modules/example/views/example-detail/example-detail.module.scss new file mode 100644 index 0000000..7571898 --- /dev/null +++ b/front/src/modules/example/views/example-detail/example-detail.module.scss @@ -0,0 +1,4 @@ +.container { + display: flex; + flex: 1; +} diff --git a/front/src/modules/example/views/example-detail/example-detail.view.tsx b/front/src/modules/example/views/example-detail/example-detail.view.tsx new file mode 100644 index 0000000..28ceb63 --- /dev/null +++ b/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 = ({ + params, +}) => { + return ( +
+ +
+ ); +}; diff --git a/front/src/modules/example/views/example-detail/index.ts b/front/src/modules/example/views/example-detail/index.ts new file mode 100644 index 0000000..2be7ee6 --- /dev/null +++ b/front/src/modules/example/views/example-detail/index.ts @@ -0,0 +1 @@ +export { ExampleDetailView } from "./example-detail.view";