diff --git a/apps/app/src/assets/icons/add.svg b/apps/app/src/assets/icons/add.svg new file mode 100644 index 00000000..6e96cba6 --- /dev/null +++ b/apps/app/src/assets/icons/add.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/app/src/assets/icons/bin.svg b/apps/app/src/assets/icons/bin.svg new file mode 100644 index 00000000..a20981aa --- /dev/null +++ b/apps/app/src/assets/icons/bin.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/app/src/assets/images/fly-talks-duck.png b/apps/app/src/assets/images/fly-talks-duck.png index 6358c0c3..9ad97b7b 100644 Binary files a/apps/app/src/assets/images/fly-talks-duck.png and b/apps/app/src/assets/images/fly-talks-duck.png differ diff --git a/apps/app/src/components/Input/Input.module.scss b/apps/app/src/components/Input/Input.module.scss index ae4774bc..f8b890c2 100644 --- a/apps/app/src/components/Input/Input.module.scss +++ b/apps/app/src/components/Input/Input.module.scss @@ -15,7 +15,6 @@ .inputWrapper { position: relative; width: 100%; - background-color: aqua; } .input { diff --git a/apps/app/src/pages/FlyTalksApplyPage/FlyTalksApplyPage.module.scss b/apps/app/src/pages/FlyTalksApplyPage/FlyTalksApplyPage.module.scss new file mode 100644 index 00000000..0a3078a3 --- /dev/null +++ b/apps/app/src/pages/FlyTalksApplyPage/FlyTalksApplyPage.module.scss @@ -0,0 +1,130 @@ +.page { + background-color: $primary-black; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + font-family: Inter; + overflow: hidden; + align-items: center; + + .header { + width: 100%; + height: 200px; + + p { + color: $primary-white; + font-size: 24px; + font-weight: 500; + margin: 64px 0 0 24px; + } + } + + .main { + width: 100%; + height: 100%; + background-color: $primary-background; + border-radius: 12px 12px 0px 0px; + padding: 20px; + z-index: 1; + + .mainContent { + max-width: 500px; + margin: auto; + + .timeContainer { + display: flex; + padding: 16px 10px; + flex-direction: column; + align-items: center; + gap: 10px; + border-radius: 12px; + background: var(--Primary-Beige, #f5ede1); + + .dateParagraph { + color: var(--Black-50, #868685); + text-align: center; + font-feature-settings: 'ss12' on; + font-family: 'PP Neue Machina'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.16px; + text-transform: uppercase; + } + + .timeParagraph { + color: var(--Black-90, #2d2c2c); + text-align: center; + + font-family: 'PP Neue Montreal Mono'; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 18px; + } + } + + .infoParagraph { + margin-top: 24px; + color: var(--Primary-Black, #171615); + font-family: Inter; + font-size: 16px; + } + + .applyStepsParagraph { + color: var(--Primary-Black, #171615); + font-feature-settings: 'ss12' on; + margin-top: 35px; + font-family: 'PP Neue Machina'; + font-size: 16px; + + span { + color: var(--Black-50, #868685); + font-feature-settings: 'ss12' on; + } + } + + input { + margin-top: 32px; + } + + .aboutLettersCounter { + color: var(--Primary-Black, #171615); + text-align: right; + font-family: 'PP Neue Montreal Mono'; + font-size: 14px; + justify-self: end; + margin-top: 16px; + } + + .fileUploadContainer { + margin-top: 20px; + border-radius: 6px; + border: 1px solid var(--Black-10, #e0e0df); + background: var(--Black-5, #ebebeb); + display: flex; + padding: 12px 16px; + justify-content: space-between; + align-items: center; + height: 56px; + + p { + color: var(--Primary-Black, #171615); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 22px; + text-transform: uppercase; + } + + button{ + background: none; + border: none; + } + } + } + } +} diff --git a/apps/app/src/pages/FlyTalksApplyPage/FlyTalksApplyPage.tsx b/apps/app/src/pages/FlyTalksApplyPage/FlyTalksApplyPage.tsx new file mode 100644 index 00000000..eadd9837 --- /dev/null +++ b/apps/app/src/pages/FlyTalksApplyPage/FlyTalksApplyPage.tsx @@ -0,0 +1,195 @@ +import { useEffect, useRef, useState } from 'react'; +import c from './FlyTalksApplyPage.module.scss'; +import { useLocation } from 'react-router-dom'; +import { Input } from '../../components/Input'; +import addSvg from '../../assets/icons/add.svg'; +import binSvg from '../../assets/icons/bin.svg'; + +const groupsMock = [ + { + id: 1, + start: '10:30', + end: '11:30', + day: 1, + participantsNumber: 10, + companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], + hasUserApplied: true, + }, + { + id: 2, + start: '11:30', + end: '12:30', + day: 1, + participantsNumber: 10, + companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], + hasUserApplied: false, + }, + { + id: 3, + start: '11:30', + end: '12:30', + day: 1, + participantsNumber: 25, + companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], + hasUserApplied: false, + }, + { + id: 4, + start: '10:30', + end: '11:30', + day: 2, + participantsNumber: 10, + companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], + hasUserApplied: false, + }, + { + id: 5, + start: '11:30', + end: '12:30', + day: 2, + participantsNumber: 10, + companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], + hasUserApplied: false, + }, +]; + +const FlyTalksApplyPage = () => { + const location = useLocation(); + const [group, setGroup] = useState<(typeof groupsMock)[0] | undefined>( + undefined, + ); + const [linkedIn, setLinkedIn] = useState(''); + const [github, setGithub] = useState(''); + const [portfolio, setPortfolio] = useState(''); + const [about, setAbout] = useState(''); + const [wordCount, setWordCount] = useState(0); + const [file, setFile] = useState(undefined); + + const fileInputRef = useRef(null); + + const handleFileUploadClick = () => { + if (fileInputRef.current && !file) { + fileInputRef.current.click(); + } + else{ + setFile(undefined); + } + }; + + const handleFileChange = (event: React.ChangeEvent) => { + const uploadedFile = event.target.files?.[0]; + if (uploadedFile && uploadedFile.size < 5 * 1024 * 1024) { + setFile(uploadedFile); + } + }; + + useEffect(() => { + const queryParams = new URLSearchParams(location.search); + const groupId = queryParams.get('id'); + + if (groupId) { + const foundGroup = groupsMock.find( + (group) => group.id === Number(groupId), + ); + setGroup(foundGroup); + } + }, [location.search]); + + const handleLinkedInChange = (event: React.ChangeEvent) => { + setLinkedIn(event.target.value); + }; + + const handleGithubChange = (event: React.ChangeEvent) => { + setGithub(event.target.value); + }; + + const handlePortfolioChange = ( + event: React.ChangeEvent, + ) => { + setPortfolio(event.target.value); + }; + + const handleAboutChange = (event: React.ChangeEvent) => { + const value = event.target.value; + setAbout(value); + const wordCount = value + .trim() + .split(/\s+/) + .filter((word) => word.length > 0).length; + setWordCount(wordCount); + }; + + console.log(file); + + return ( +
+
+

PRIJE PRIJAVE...

+
+
+
+
+

+ {group?.day === 1 ? '23.5 // CETVRTAK' : '24.5 //PETAK'} +

+

+ {group?.start} - {group?.end} +

+
+

+ Predobro bi bilo da odgovoriš na dva pitanja koja će bit obavezna + kako bi firme mogle bolje te prosudit i odbit te na temelju toga. +

+

+ 01 LINKOVI +

+ + + +

+ 02 UPLOADAJ CV +

+
+

{file ? file.name : 'priloži životopis'}

+ + +
+

+ 03 PREDSTAVI SE... +

+ +

{wordCount}/70

+
+
+
+ ); +}; + +export default FlyTalksApplyPage; diff --git a/apps/app/src/pages/FlyTalksApplyPage/index.ts b/apps/app/src/pages/FlyTalksApplyPage/index.ts new file mode 100644 index 00000000..6e7b531f --- /dev/null +++ b/apps/app/src/pages/FlyTalksApplyPage/index.ts @@ -0,0 +1,3 @@ +import FlyTalksApplyPage from "./FlyTalksApplyPage"; + +export default FlyTalksApplyPage; \ No newline at end of file diff --git a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx index 8e708819..d4b9b257 100644 --- a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx +++ b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx @@ -5,42 +5,50 @@ import c from './FlyTalksListPage.module.scss'; import Button from '../../components/Button'; import star from '../../assets/icons/star.svg'; import warning from '../../assets/images/warning.png'; +import { useNavigate } from 'react-router-dom'; -const FirstDayGroupsMock = [ +const groupsMock = [ { + id: 1, start: '10:30', end: '11:30', + day: 1, participantsNumber: 10, companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], hasUserApplied: true, }, { + id: 2, start: '11:30', end: '12:30', + day: 1, participantsNumber: 10, companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], hasUserApplied: false, }, { + id: 3, start: '11:30', end: '12:30', + day: 1, participantsNumber: 25, companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], hasUserApplied: false, }, -]; - -const SecondDayGroupsMock = [ { + id: 4, start: '10:30', end: '11:30', + day: 2, participantsNumber: 10, companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], hasUserApplied: false, }, { + id: 5, start: '11:30', end: '12:30', + day: 2, participantsNumber: 10, companies: ['venio', 'profico', 'travelSoft', 'hrCloud'], hasUserApplied: false, @@ -79,13 +87,13 @@ const FlyTalksListPage = () => {

{selectedTab === Tabs.first_day && - FirstDayGroupsMock.map((group, i) => ( - - ))} + groupsMock + .filter((group) => group.day === 1) + .map((group, i) => )} {selectedTab === Tabs.second_day && - SecondDayGroupsMock.map((group, i) => ( - - ))} + groupsMock + .filter((group) => group.day === 2) + .map((group, i) => )}
@@ -95,6 +103,7 @@ const FlyTalksListPage = () => { interface FlyTalksGroupProps { key: number; group: { + id: number; start: string; end: string; participantsNumber: number; @@ -104,6 +113,14 @@ interface FlyTalksGroupProps { } const FlyTalksGroup: React.FC = ({ key, group }) => { + const navigate = useNavigate(); + + const handleApplyClick = () => { + if (!group.hasUserApplied) { + navigate(`/app/fly-talks-apply?id=${group.id}`); + } + }; + return (
= ({ key, group }) => { {i !== 3 &&
}
))} - diff --git a/apps/app/src/pages/FlyTalksListPage/index.ts b/apps/app/src/pages/FlyTalksListPage/index.ts new file mode 100644 index 00000000..983c92b1 --- /dev/null +++ b/apps/app/src/pages/FlyTalksListPage/index.ts @@ -0,0 +1,3 @@ +import FlyTalksListPage from "./FlyTalksListPage"; + +export default FlyTalksListPage; \ No newline at end of file diff --git a/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss b/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss index 800eb20f..9f04d47f 100644 --- a/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss +++ b/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss @@ -1,117 +1,114 @@ .page { - background-color: $primary-black; + background-color: $primary-black; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + font-family: Inter; + overflow: hidden; + align-items: center; + + .header { width: 100%; - height: 100vh; - display: flex; - flex-direction: column; - font-family: Inter; - overflow: hidden; - align-items: center; - - .header { - width: 100%; - height: 300px; + height: 400px; - p{ - color: $primary-white; - font-size: 24px; - font-weight: 500; - margin: 64px 0 0 24px ; - } + p { + color: $primary-white; + font-size: 24px; + font-weight: 500; + margin: 64px 0 0 24px; } - - .main { - width: 100%; - height: 100%; - background-color: $primary-background; - border-radius: 12px 12px 0px 0px; - padding: 20px; - z-index: 1; + } - .mainContent{ - max-width: 700px; - margin: auto; + .main { + width: 100%; + height: 100%; + background-color: $primary-background; + border-radius: 12px 12px 0px 0px; + padding: 20px; + z-index: 1; - .mainHeader{ - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 24px; - gap: 24px; - font-family: 'PP Neue Machina'; + .mainContent { + max-width: 700px; + margin: auto; - p{ - font-size: 24px; - font-weight: 500; - color: $primary-black; - } - } + .mainHeader { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 24px; + gap: 24px; + font-family: 'PP Neue Machina'; - .copyParagraph{ - margin-top: 16px; - font-size: 16px; - color: $primary-black; - line-height: 22px; - font-weight: 400; + p { + font-size: 24px; + font-weight: 500; + color: $primary-black; } + } - .nextButton{ - margin-top: 24px; - width: 100%; - } - } + .copyParagraph { + margin-top: 16px; + font-size: 16px; + color: $primary-black; + line-height: 22px; + font-weight: 400; + } + + .nextButton { + margin-top: 24px; + width: 100%; + } } - .duckImage{ - height: 300px; - position: absolute; - top: 0; - right: 0; + } + .duckImage { + width: 200px; + position: absolute; + top: 110px; + right: 0; + } + + @media screen and (min-width: 420px) { + .header { + height: 100px; + p { + margin: 24px 0 0 0; + text-transform: uppercase; + text-align: center; + font-size: 30px; + margin: 48px 0 0 24px; } + } + .duckImage { + position: relative; + height: 300px; + top: 30px; + margin-bottom: -10px; + margin-right: -50px; + } - @media screen and (min-width: 420px){ - .header{ - height: 200px; - p{ - margin-left: 0; - text-transform: uppercase; - text-align: center; - font-size: 30px; - margin: 48px 0 0 24px; - } - } - .duckImage{ - position: relative; - height: 400px; - max-width: 500px; - margin-bottom: -100px; - margin-right: -150px; - } - - .main{ - .mainContent{ - max-width: 450px; + .main { + .mainContent { + max-width: 450px; - .mainHeader{ - justify-content: center; + .mainHeader { + justify-content: center; - p{ - font-size: 30px; - text-align: center; - } + p { + font-size: 30px; + text-align: center; + } - img{ - display: none; - } - } - .copyParagraph{ - margin-top: 25px; - font-size:16px; - text-align: center; - } + img { + display: none; } } + .copyParagraph { + margin-top: 25px; + font-size: 16px; + text-align: center; + } } + } + } } - - - \ No newline at end of file diff --git a/apps/app/src/pages/FlyTalksPage/FlyTalksPage.tsx b/apps/app/src/pages/FlyTalksPage/FlyTalksPage.tsx index 15db8fa1..776788f7 100644 --- a/apps/app/src/pages/FlyTalksPage/FlyTalksPage.tsx +++ b/apps/app/src/pages/FlyTalksPage/FlyTalksPage.tsx @@ -8,7 +8,7 @@ const FlyTalksPage = () => { const navigate = useNavigate(); const handleNextButtonClick = () => { - navigate('/app/flyTalksList'); + navigate('/app/fly-talks-list'); }; return (
diff --git a/apps/app/src/router/Router.tsx b/apps/app/src/router/Router.tsx index 051c658e..c15e2f4b 100644 --- a/apps/app/src/router/Router.tsx +++ b/apps/app/src/router/Router.tsx @@ -19,6 +19,7 @@ import { NavigationLayout } from '../layout'; import Home from '../pages/Home'; import TestPage from '../pages/TestPage/TestPage'; import FlyTalksListPage from '../pages/FlyTalksListPage/FlyTalksListPage'; +import FlyTalksApplyPage from '../pages/FlyTalksApplyPage'; const router = createBrowserRouter( createRoutesFromElements( @@ -33,6 +34,7 @@ const router = createBrowserRouter( } /> } /> } /> + } /> } /> } /> diff --git a/apps/app/src/router/routes.ts b/apps/app/src/router/routes.ts index 77b49522..7592751d 100644 --- a/apps/app/src/router/routes.ts +++ b/apps/app/src/router/routes.ts @@ -27,8 +27,9 @@ export enum RouteNames { PROFILE = '/app/profile', COMPANIES = '/app/companies', SCHEDULE = '/app/schedule', - FLY_TALKS = '/app/flyTalks', - FLY_TALKS_LIST = '/app/flyTalksList', + FLY_TALKS = '/app/fly-talks', + FLY_TALKS_LIST = '/app/fly-talks-list', + FLY_TALKS_APPLY = '/app/fly-talks-apply', SHOPPING = '/app/shopping', }