fly talks groups component

apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.module.scss

@@ -0,0 +1,129 @@
+.page {
+    background-color: $primary-black;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    font-family: Inter;
+
+    header {
+      width: 100%;
+
+      p{
+        color: $primary-white;
+        font-size: 24px;
+        font-weight: 500;
+        margin: 64px 0 24px 24px ;
+      }
+    }
+
+    main {
+      width: 100%;
+      height: 100%;
+      background-color: $primary-background;
+      border-radius: 12px 12px 0px 0px;
+      padding: 20px;
+      z-index: 1;
+
+      .listInfoText{
+        margin-top: 24px;
+        color: var(--Primary-Black, #171615);
+        font-family: Inter;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+        letter-spacing: -0.16px;
+      }
+
+      .groupsList{
+        margin-top: 24px;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 24px;
+
+        .group{
+            width: 100%;
+            border-radius: 8px;
+
+            .groupHeader{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 5px;
+                margin-top: 24px;
+                padding: 10px;
+                border-radius: 8px 8px 0px 0px;
+                background: #EDDFCB;
+
+                div{
+                    background-color: var(--Succes-Green, #5FB728);
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 100%;
+                }
+
+                p{
+                    color: var(--Black-90, #2D2C2C);
+                    font-feature-settings: 'ss12' on;
+                    font-family: "PP Neue Machina";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 18px;
+                    letter-spacing: -0.14px;
+                    text-transform: uppercase;
+                }
+            }
+
+            .groupDuration{
+                text-align: center;
+                color: var(--Black-90, #2D2C2C);
+                font-family: "PP Neue Montreal Mono";
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 18px;
+                background: var(--Beige, #F5EDE1);
+                padding: 12px;
+            }
+
+            .companiesList{
+                padding: 0 24px 24px;
+                background: var(--White, #F5F5F5);
+                border-radius: 0px 0px 8px 8px;
+
+                .company{
+                    display: flex;
+                    gap: 20px;
+                    padding-top: 20px;
+                    padding-bottom: 16px;
+                    position: relative;
+                    align-items: center;
+
+                    p{
+                        color: var(--Black-30, #B3B3B2);
+                        font-family: "PP Neue Montreal Mono";
+                        font-size: 14px;
+                        font-style: normal;
+                        font-weight: 500;
+                        line-height: 16px;
+                    }
+
+                    .divider {
+                        position: absolute;
+                        bottom: 0;
+                        @include dottedBreak;
+                    }
+                }
+
+                .applyButton{
+                    margin-top: 32px;
+                    width: 100%;
+                }
+            }
+        }
+      }
+    }
+  }
+

apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import Tab from '../../components/Tab';
+import TabGroup from '../../components/TabGroup';
+import c from './FlyTalksListPage.module.scss';
+import Button from '../../components/Button';
+
+const FirstDayGroupsMock = [
+  {
+    start: '10:30',
+    end: '11:30',
+    participantsNumber: 10,
+    companies: ['venio', 'profico', 'travelSoft', 'hrCloud'],
+    hasUserApplied: true,
+  },
+  {
+    start: '11:30',
+    end: '12:30',
+    participantsNumber: 10,
+    companies: ['venio', 'profico', 'travelSoft', 'hrCloud'],
+    hasUserApplied: false,
+  },
+];
+
+const SecondDayGroupsMock = [
+  {
+    start: '10:30',
+    end: '11:30',
+    participantsNumber: 10,
+    companies: ['venio', 'profico', 'travelSoft', 'hrCloud'],
+    hasUserApplied: false,
+  },
+  {
+    start: '11:30',
+    end: '12:30',
+    participantsNumber: 10,
+    companies: ['venio', 'profico', 'travelSoft', 'hrCloud'],
+    hasUserApplied: false,
+  },
+];
+
+const FlyTalksListPage = () => {
+  enum Tabs {
+    first_day,
+    second_day,
+  }
+  const [selectedTab, setSelectedTab] = useState<string | number>(
+    Tabs.first_day,
+  );
+
+  const handleTabChange = (tab: string) => {
+    setSelectedTab(tab);
+  };
+
+  return (
+    <div className={c.page}>
+      <header>
+        <p>Fly Talks</p>
+      </header>
+      <main>
+        <TabGroup setter={handleTabChange}>
+          <Tab id={Tabs.first_day}>23.05</Tab>
+          <Tab id={Tabs.second_day}>24.05</Tab>
+        </TabGroup>
+        <p className={c.listInfoText}>
+          Nakon prijave obavezno ostavi link na GitHub ili LinkedIn, te
+          predstavi se u kratkim crtama što bolje možeš. Na temelju tog opisa i
+          projekata na GitHubu firme ce odabrati kandidate za razgovor.
+        </p>
+        <div className={c.groupsList}>
+          {selectedTab === Tabs.first_day &&
+            FirstDayGroupsMock.map((group, i) => (
+              <FlyTalksGroup key={i} group={group} />
+            ))}
+          {selectedTab === Tabs.second_day &&
+            SecondDayGroupsMock.map((group, i) => (
+              <FlyTalksGroup key={i} group={group} />
+            ))}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+interface FlyTalksGroupProps {
+  key: number;
+  group: {
+    start: string;
+    end: string;
+    participantsNumber: number;
+    companies: string[];
+    hasUserApplied: boolean;
+  };
+}
+
+const FlyTalksGroup: React.FC<FlyTalksGroupProps> = ({ key, group }) => {
+  return (
+    <div className={c.group} key={key}>
+      <div className={c.groupHeader}>
+        <div></div>
+        <p>{group.participantsNumber}/25 PRIJAVLJENIH</p>
+      </div>
+      <p className={c.groupDuration}>
+        {group.start} - {group.end}
+      </p>
+      <div className={c.companiesList}>
+        {group.companies.map((company, i) => (
+          <div key={i} className={c.company}>
+            <p>0{i + 1}</p>
+            <div>{company}</div>
+            {i !== 3 && <div className={c.divider}></div>}
+          </div>
+        ))}
+        <Button variant='orange' className={c.applyButton}>
+          Prijavi
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default FlyTalksListPage;

apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss

@@ -43,7 +43,6 @@
                 font-weight: 500;
                 color: $primary-black;
             }
-
         }
 
         .copyParagraph{

apps/app/src/pages/FlyTalksPage/FlyTalksPage.tsx

@@ -2,8 +2,14 @@ import c from './FlyTalksPage.module.scss';
 import removeIcon from '../../assets/icons/remove.svg';
 import Button from '../../components/Button/Button';
 import FlyTalksDuckImage from '../../assets/images/fly-talks-duck.png';
+import { useNavigate } from 'react-router-dom';
 
 const FlyTalksPage = () => {
+  const navigate = useNavigate();
+
+  const handleNextButtonClick = () => {
+    navigate('/app/flyTalksList');
+  };
   return (
     <div className={c.page}>
       <header className={c.header}>
@@ -33,7 +39,10 @@ const FlyTalksPage = () => {
             <br />
             Prijavi se i pokaži zašto si baš ti najbolji izbor za njih!
           </p>
-          <Button variant='orange' className={c.nextButton}>
+          <Button
+            variant='orange'
+            className={c.nextButton}
+            onClick={handleNextButtonClick}>
             Dalje
           </Button>
         </div>

apps/app/src/router/Router.tsx

@@ -18,6 +18,7 @@ import { ShoppingPage } from '../pages/ShoppingPage';
 import { NavigationLayout } from '../layout';
 import Home from '../pages/Home';
 import TestPage from '../pages/TestPage/TestPage';
+import FlyTalksListPage from '../pages/FlyTalksListPage/FlyTalksListPage';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -31,6 +32,7 @@ const router = createBrowserRouter(
         <Route path={RouteNames.COMPANIES} element={<CompaniesPage />} />
         <Route path={RouteNames.SCHEDULE} element={<SchedulePage />} />
         <Route path={RouteNames.FLY_TALKS} element={<FlyTalksPage />} />
+        <Route path={RouteNames.FLY_TALKS_LIST} element={<FlyTalksListPage />} />
         <Route path={RouteNames.SHOPPING} element={<ShoppingPage />} />
       </Route>
       <Route path='/app/test' element={<TestPage />} />

apps/app/src/router/routes.ts

@@ -28,6 +28,7 @@ export enum RouteNames {
   COMPANIES = '/app/companies',
   SCHEDULE = '/app/schedule',
   FLY_TALKS = '/app/flyTalks',
+  FLY_TALKS_LIST = '/app/flyTalksList',
   SHOPPING = '/app/shopping',
 }