gorrion-io · wrzchwc · Apr 21, 2022 · Apr 21, 2022 · Apr 21, 2022 · Apr 21, 2022
diff --git a/lib/users.ts b/lib/users.ts
@@ -20,7 +20,7 @@ const userSchema = z.object({
   images: z.array(z.string().url()),
 });
 
-type User = z.infer<typeof userSchema>;
+export type User = z.infer<typeof userSchema>;
 
 export async function getAllUsers(): Promise<User[]> {
   return [];

diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,29 +1,29 @@
-import type { NextPage } from "next";
+import type {NextPage} from "next";
 import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Gorrion Summer Camp 2022 - recruitment task</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.png" />
-      </Head>
+    return (
+        <div className={styles.container}>
+            <Head>
+                <title>Gorrion Summer Camp 2022 - recruitment task</title>
+                <meta name="description" content="Generated by create next app"/>
+                <link rel="icon" href="/favicon.png"/>
+            </Head>
 
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          <a href="https://gorrion.io">Gorrion</a> Summer Camp 2022
-        </h1>
+            <main className={styles.main}>
+                <h1 className={styles.title}>
+                    <a href="https://gorrion.io">Gorrion</a> Summer Camp 2022
+                </h1>
 
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-      </main>
-    </div>
-  );
+                <p className={styles.description}>
+                    Get started by editing{" "}
+                    <code className={styles.code}>pages/index.tsx</code>
+                </p>
+            </main>
+        </div>
+    );
 };
 
 export default Home;
diff --git a/pages/users.tsx b/pages/users.tsx
@@ -1,7 +1,63 @@
-import { NextPage } from "next";
+import {NextPage} from "next";
+import {useEffect, useState} from "react";
+import styles from '../styles/Users.module.css';
+import UserCard from "../src/components/user-card/UserCard";
+import {User} from "../lib/users";
+import {getAllUsers} from "../lib/users";
 
 const Users: NextPage = () => {
-  return <h1>Not implemented</h1>;
+    const [users, setUsers] = useState<User[]>([]);
+    const [user, setUser] = useState<User>()
+
+    useEffect(() => {
+        document.body.classList.add(styles.background);
+
+        async function users() {
+            const allUsers = await getAllUsers()
+            setUsers(allUsers);
+            setUser(allUsers[0]);
+        }
+
+        users()
+    }, [])
+
+    const handleNext = () => {
+        if (lastUser()) return;
+        setUser(users[users.indexOf(user as User) + 1]);
+    }
+
+    const handlePrevious = () => {
+        if (firstUser()) return;
+        setUser(users[users.indexOf(user as User) - 1]);
+    }
+
+    const firstUser = () => {
+        return users.indexOf(user as User) === 0;
+    }
+
+    const lastUser = () => {
+        return users.indexOf(user as User) + 1 === users.length;
+    }
+
+    return (
+        <div className={styles.mainContainer}>
+            <img
+                src={'/assets/arrowInvert.svg'}
+                alt={'previous user'}
+                className={`${styles.arrow}`}
+                style={firstUser() || !users.length ? {opacity: 0} : undefined}
+                onClick={handlePrevious}
+            />
+            {user ? <UserCard user={user}/> : 'loading ...'}
+            <img
+                src={'/assets/arrow.svg'}
+                alt={'previous user'}
+                className={styles.arrow}
+                onClick={handleNext}
+                style={lastUser() ? {opacity: 0} : undefined}
+            />
+        </div>
+    );
 };
 
 export default Users;
diff --git a/public/assets/arrow.svg b/public/assets/arrow.svg
diff --git a/public/assets/arrowInvert.svg b/public/assets/arrowInvert.svg
diff --git a/src/components/address-detail/AddressDetail.module.css b/src/components/address-detail/AddressDetail.module.css
@@ -0,0 +1,19 @@
+.value, .label {
+    font-family: "Public Sans";
+    margin-block-start: 0;
+    margin-block-end: 0;
+    font-style: normal;
+    line-height: 20px;
+    font-weight: 600;
+}
+
+.value{
+    color: #303030;
+    font-size: 14px;
+}
+.label{
+    text-transform: uppercase;
+    font-size: 12px;
+    color: #888888;
+    letter-spacing: 0.1em;
+}
diff --git a/src/components/address-detail/AddressDetail.tsx b/src/components/address-detail/AddressDetail.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import {AddressDetailProps} from "./AddressDetailProps";
+import styles from './AddressDetail.module.css';
+
+const AddressDetail: React.FC<AddressDetailProps> = (props) => {
+    return (
+        <>
+            <div>
+                <h5 className={styles.value}>{props.value}</h5>
+                <span className={styles.label}>{props.label}</span>
+            </div>
+        </>
+    );
+}
+
+export default AddressDetail;
diff --git a/src/components/address-detail/AddressDetailProps.ts b/src/components/address-detail/AddressDetailProps.ts
@@ -0,0 +1,4 @@
+export interface AddressDetailProps {
+    label: string;
+    value: string
+}
diff --git a/src/components/chip/Chip.module.css b/src/components/chip/Chip.module.css
@@ -0,0 +1,15 @@
+.container {
+    font-family: "Public Sans";
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 20px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    display: flex;
+    padding: 6px 12px;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 1px;
+    height: 32px;
+}
diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import {ChipProps} from "./ChipProps";
+import styles from './Chip.module.css';
+
+
+const Chip: React.FC<ChipProps> = (props) => {
+    return (
+        <div className={styles.container} style={props.chipStyle}>
+            <span>{props.value}</span>
+        </div>
+    );
+}
+
+export default Chip;
diff --git a/src/components/chip/ChipProps.ts b/src/components/chip/ChipProps.ts
@@ -0,0 +1,7 @@
+import React from "react";
+import {ChipStyle} from "./ChipStyle";
+
+export interface ChipProps {
+    value: number | "Male" | "Female";
+    chipStyle: ChipStyle
+}
diff --git a/src/components/chip/ChipStyle.ts b/src/components/chip/ChipStyle.ts
@@ -0,0 +1,6 @@
+export interface ChipStyle {
+    borderColor: string;
+    color: string;
+    backgroundColor: string;
+    margin?: string;
+}
diff --git a/src/components/user-card/UserCard.module.css b/src/components/user-card/UserCard.module.css
@@ -0,0 +1,108 @@
+.mainContainer {
+    width: 320px;
+    height: 392px;
+    background-color: #FFF;
+    border: 1px solid #E6E6F8;
+    border-radius: 16px;
+    box-shadow: 0 8px 16px rgba(48, 48, 48, 0.16);
+}
+
+.topContainer {
+    padding: 16px 16px 24px;
+    width: 320px;
+    height: 340px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bottomContainer {
+    background-color: #6D6EF6;
+    height: 52px;
+    width: 320px;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.verticalDivider {
+    background-color: #FFF;
+    height: 100%;
+    width: 1px;
+}
+
+.bottomLabel{
+    color: #FFF;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    font-style: normal;
+    font-family: "Public Sans";
+}
+
+.credentialsContainer{
+    height: 90px;
+    width: 100%;
+    display: inherit;
+    justify-content: space-between;
+    align-items: start;
+}
+
+.addressContainer{
+    height: 186px;
+    width: 100%;
+    display: inherit;
+    flex-direction: inherit;
+    justify-content: space-between;
+}
+
+.horizontalDivider{
+    width: 100%;
+    height: 1px;
+    background-color: #E9E9E9;
+}
+
+.avatar{
+    border-radius: 50%;
+    border: 1px solid #E9E9E9;
+    box-sizing: border-box;
+}
+
+.credentialsRightContainer{
+    width: 216px;
+    height: 90px;
+}
+
+.username,
+.email{
+    margin-block-start: 0;
+    margin-block-end: 0;
+    font-family: "Public Sans";
+    font-style: normal;
+}
+
+.username{
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #303030;
+}
+
+.email{
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 20px;
+    color: #888;
+}
+
+.chipsContainer{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+}
+
+