msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[offers][feat] add header for pages

Browse Source
pull/526/head
Zhang Ziqing 3 years ago
parent a79e132161
commit d21e4ff7b8
11 changed files with 509 additions and 442 deletions
Show Stats Download Patch File Download Diff File

2
apps/portal/src/components/offers/OffersNavigation.tsx
Unescape View File

@ -8,7 +8,7 @@ const navigation: ProductNavigationItems = [
const navigationAuthenticated: ProductNavigationItems = [ const navigationAuthenticated: ProductNavigationItems = [
{ href: '/offers/submit', name: 'Analyze your offers' }, { href: '/offers/submit', name: 'Analyze your offers' },
{ href: '/offers/dashboard', name: 'Your dashboard' }, { href: '/offers/dashboard', name: 'My dashboard' },
{ href: '/offers/features', name: 'Features' }, { href: '/offers/features', name: 'Features' },
{ href: '/offers/about', name: 'About' }, { href: '/offers/about', name: 'About' },
]; ];

2
apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
Unescape View File

@ -41,7 +41,7 @@ export default function OffersProfileSave({
{ profileId, userId: session?.user?.id }, { profileId, userId: session?.user?.id },
]); ]);
showToast({ showToast({
title: `Saved to your dashboard!`, title: `Saved to my dashboard!`,
variant: 'success', variant: 'success',
}); });
}, },

137
apps/portal/src/pages/offers/about.tsx
Unescape View File

@ -1,3 +1,5 @@
import Head from 'next/head';
import Container from '~/components/shared/Container'; import Container from '~/components/shared/Container';
const people = [ const people = [
@ -29,75 +31,80 @@ const people = [
export default function AboutPage() { export default function AboutPage() {
return ( return (
<div className="lg:py-18 bg-white py-12"> <>
<Container variant="xs"> <Head>
<div className="space-y-12"> <title>About us - Tech Offers Repo</title>
<div className="space-y-6"> </Head>
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl"> <div className="lg:py-18 bg-white py-12">
About Tech Offers Repo <Container variant="xs">
</h1> <div className="space-y-12">
<p className="text-lg text-slate-500"> <div className="space-y-6">
Tech Offers Repo, a project under the series of Tech Interview <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
Handbook (TIH), reveals the stories behind offers by focusing on About Tech Offers Repo
the profiles of the offer receivers. It helps job seekers </h1>
benchmark and analyse their anonymous offers with more context and <p className="text-lg text-slate-500">
encourages discussions around offer profiles. Tech Offers Repo, a project under the series of Tech Interview
</p> Handbook (TIH), reveals the stories behind offers by focusing on
</div> the profiles of the offer receivers. It helps job seekers
{/* Feedback */} benchmark and analyse their anonymous offers with more context
<div className="space-y-6"> and encourages discussions around offer profiles.
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl"> </p>
Feedback to Us </div>
</h2> {/* Feedback */}
<div className="space-y-6">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
Feedback to Us
</h2>
<p className="text-lg text-slate-500"> <p className="text-lg text-slate-500">
Thank you for using our platform! Feel free to submit your Thank you for using our platform! Feel free to submit your
feedback / feature request / bug report feedback / feature request / bug report
<a <a
className="text-primary-600 hover:text-primary-500 ml-1" className="text-primary-600 hover:text-primary-500 ml-1"
href="https://forms.gle/6zV5yimPyiByKqDy8" href="https://forms.gle/6zV5yimPyiByKqDy8"
rel="noreferrer" rel="noreferrer"
target="_blank"> target="_blank">
here here
</a> </a>
. .
</p> </p>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl"> <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
Meet the Team Meet the Team
</h2> </h2>
<ul <ul
className="grid grid-cols-2 items-start gap-8 md:grid-cols-1 md:items-start md:space-y-0" className="grid grid-cols-2 items-start gap-8 md:grid-cols-1 md:items-start md:space-y-0"
role="list"> role="list">
{people.map((person) => ( {people.map((person) => (
<li key={person.name}> <li key={person.name}>
<div className="space-y-4 sm:grid sm:grid-cols-4 sm:gap-6 sm:space-y-0 lg:gap-8"> <div className="space-y-4 sm:grid sm:grid-cols-4 sm:gap-6 sm:space-y-0 lg:gap-8">
<div className="aspect-w-2 aspect-h-2 h-0"> <div className="aspect-w-2 aspect-h-2 h-0">
<img <img
alt={person.name} alt={person.name}
className="rounded-lg object-cover shadow-lg" className="rounded-lg object-cover shadow-lg"
src={person.imageUrl} src={person.imageUrl}
/> />
</div> </div>
<div className="sm:col-span-3"> <div className="sm:col-span-3">
<div className="space-y-4"> <div className="space-y-4">
<div className="text-md space-y-1 font-medium leading-6 sm:text-lg"> <div className="text-md space-y-1 font-medium leading-6 sm:text-lg">
<h3>{person.name}</h3> <h3>{person.name}</h3>
<p className="text-primary-600">{person.role}</p> <p className="text-primary-600">{person.role}</p>
</div> </div>
<div className="text-sm sm:text-lg"> <div className="text-sm sm:text-lg">
<p className="text-slate-500">{person.bio}</p> <p className="text-slate-500">{person.bio}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </li>
</li> ))}
))} </ul>
</ul> </div>
</div> </div>
</div> </Container>
</Container> </div>
</div> </>
); );
} }

91
apps/portal/src/pages/offers/dashboard.tsx
Unescape View File

@ -1,3 +1,4 @@
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { signIn, useSession } from 'next-auth/react'; import { signIn, useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
@ -45,53 +46,63 @@ export default function ProfilesDashboard() {
if (userProfiles.length === 0) { if (userProfiles.length === 0) {
return ( return (
<div className="flex w-full"> <>
<div className="w-full justify-center space-y-8 py-16 text-xl"> <Head>
<div className="flex w-full flex-row justify-center"> <title>My Dashboard - Tech Offers Repo</title>
<h2>You have not saved any offer profiles yet.</h2> </Head>
</div> <div className="flex w-full">
<div className="flex flex-row justify-center"> <div className="w-full justify-center space-y-8 py-16 text-xl">
<Button <div className="flex w-full flex-row justify-center">
label="Submit your offers now!" <h2>You have not saved any offer profiles yet.</h2>
size="lg" </div>
variant="primary" <div className="flex flex-row justify-center">
onClick={() => router.push('/offers/submit')} <Button
/> label="Submit your offers now!"
size="lg"
variant="primary"
onClick={() => router.push('/offers/submit')}
/>
</div>
</div> </div>
</div> </div>
</div> </>
); );
} }
return ( return (
<Container variant="xs"> <>
{userProfilesQuery.isLoading && ( <Head>
<div className="flex h-screen"> <title>My Dashboard - Tech Offers Repo</title>
<div className="m-auto mx-auto w-full justify-center"> </Head>
<Spinner className="m-10" display="block" size="lg" /> <Container variant="xs">
{userProfilesQuery.isLoading && (
<div className="flex h-screen">
<div className="m-auto mx-auto w-full justify-center">
<Spinner className="m-10" display="block" size="lg" />
</div>
</div> </div>
</div> )}
)} {!userProfilesQuery.isLoading && (
{!userProfilesQuery.isLoading && ( <div className="overflow-y-auto py-8">
<div className="overflow-y-auto py-8"> <h1 className="mx-auto mb-4 text-start text-4xl font-bold text-slate-900">
<h1 className="mx-auto mb-4 text-start text-4xl font-bold text-slate-900"> My dashboard
Your dashboard </h1>
</h1> <p className="mt-4 text-xl leading-8 text-slate-500">
<p className="mt-4 text-xl leading-8 text-slate-500"> Save your offer profiles to your dashboard to easily access and
Save your offer profiles to your dashboard to easily access and edit edit them later.
them later. </p>
</p> <div className="mt-8 flex justify-center">
<div className="mt-8 flex justify-center"> <ul className="w-full space-y-4" role="list">
<ul className="w-full space-y-4" role="list"> {userProfiles?.map((profile) => (
{userProfiles?.map((profile) => ( <li key={profile.id}>
<li key={profile.id}> <DashboardProfileCard key={profile.id} profile={profile} />
<DashboardProfileCard key={profile.id} profile={profile} /> </li>
</li> ))}
))} </ul>
</ul> </div>
</div> </div>
</div> )}
)} </Container>
</Container> </>
); );
} }

309
apps/portal/src/pages/offers/features.tsx
Unescape View File

@ -1,3 +1,4 @@
import Head from 'next/head';
import type { SVGProps } from 'react'; import type { SVGProps } from 'react';
import { import {
BookmarkSquareIcon, BookmarkSquareIcon,
@ -82,176 +83,182 @@ const footerNavigation = {
export default function LandingPage() { export default function LandingPage() {
return ( return (
<div className="mx-auto w-full overflow-y-auto bg-white"> <>
<main> <Head>
{/* Hero section */} <title>Features - Tech Offers Repo</title>
<div className="relative h-full"> </Head>
<div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8"> <div className="mx-auto w-full overflow-y-auto bg-white">
<img <main>
alt="Tech Offers Repo" {/* Hero section */}
className="mx-auto mb-8 w-auto" <div className="relative h-full">
src="/logos/offers-logo.svg" <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
/> <img
<h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"> alt="Tech Offers Repo"
<span>Choosing offers </span> className="mx-auto mb-8 w-auto"
<span className="from-primary-600 -mb-1 mr-2 bg-gradient-to-r to-purple-500 bg-clip-text pb-1 pr-4 italic text-transparent"> src="/logos/offers-logo.svg"
made easier />
</span> <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
</h1> <span>Choosing offers </span>
<p className="mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl"> <span className="from-primary-600 -mb-1 mr-2 bg-gradient-to-r to-purple-500 bg-clip-text pb-1 pr-4 italic text-transparent">
Analyze your offers using profiles from fellow software engineers. made easier
</p> </span>
<div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center"> </h1>
<div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-1 sm:gap-5 sm:space-y-0"> <p className="mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
<a Analyze your offers using profiles from fellow software
className="border-grey-600 flex items-center justify-center rounded-md border bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8" engineers.
href={HOME_URL}> </p>
Get started <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
</a> <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-1 sm:gap-5 sm:space-y-0">
{/* <a <a
className="border-grey-600 flex items-center justify-center rounded-md border bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
href={HOME_URL}>
Get started
</a>
{/* <a
className="bg-primary-500 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8" className="bg-primary-500 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
href="#"> href="#">
Live demo Live demo
</a> */} </a> */}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Alternating Feature Sections */} {/* Alternating Feature Sections */}
<div className="relative overflow-hidden pt-16 pb-32"> <div className="relative overflow-hidden pt-16 pb-32">
<div <div
aria-hidden="true" aria-hidden="true"
className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100" className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100"
/>
<div className="relative">
<LeftTextCard
buttonLabel="View offers"
description="Filter relevant offers by job title, company, submission date, salary and more."
icon={
<TableCellsIcon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
}
imageAlt="Browse page"
imageSrc={offersBrowse}
title="Stay informed of recent offers"
url={HOME_URL}
/>
</div>
<div className="mt-36">
<RightTextCard
buttonLabel="Analyse offers"
description="With our offer engine analysis, you can benchmark your offers against other offers on the market and make an informed decision."
icon={
<ChartBarSquareIcon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
}
imageAlt="Offers analysis page"
imageSrc={offersAnalysis}
title="Better understand your offers"
url={OFFERS_SUBMIT_URL}
/>
</div>
<div className="mt-36">
<LeftTextCard
buttonLabel="View offer profiles"
description="An offer profile includes not only offers that a person received in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contextualize offers."
icon={
<InformationCircleIcon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
}
imageAlt="Offer profile page"
imageSrc={offersProfile}
title="Choosing an offer needs context"
url={HOME_URL}
/> />
<div className="relative">
<LeftTextCard
buttonLabel="View offers"
description="Filter relevant offers by job title, company, submission date, salary and more."
icon={
<TableCellsIcon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
}
imageAlt="Browse page"
imageSrc={offersBrowse}
title="Stay informed of recent offers"
url={HOME_URL}
/>
</div>
<div className="mt-36">
<RightTextCard
buttonLabel="Analyse offers"
description="With our offer engine analysis, you can benchmark your offers against other offers on the market and make an informed decision."
icon={
<ChartBarSquareIcon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
}
imageAlt="Offers analysis page"
imageSrc={offersAnalysis}
title="Better understand your offers"
url={OFFERS_SUBMIT_URL}
/>
</div>
<div className="mt-36">
<LeftTextCard
buttonLabel="View offer profiles"
description="An offer profile includes not only offers that a person received in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contextualize offers."
icon={
<InformationCircleIcon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
}
imageAlt="Offer profile page"
imageSrc={offersProfile}
title="Choosing an offer needs context"
url={HOME_URL}
/>
</div>
</div> </div>
</div>
{/* Gradient Feature Section */} {/* Gradient Feature Section */}
<div className="to-primary-600 bg-gradient-to-r from-purple-800"> <div className="to-primary-600 bg-gradient-to-r from-purple-800">
<div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:px-8 lg:pt-24"> <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:px-8 lg:pt-24">
<h2 className="flex justify-center text-4xl font-bold tracking-tight text-white"> <h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
Your privacy is our priority. Your privacy is our priority.
</h2> </h2>
<p className="text-primary-100 mt-4 flex flex-row justify-center text-lg"> <p className="text-primary-100 mt-4 flex flex-row justify-center text-lg">
All offer profiles are anonymized and we do not store information All offer profiles are anonymized and we do not store
about your personal identity. information about your personal identity.
</p> </p>
<div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16"> <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
{features.map((feature) => ( {features.map((feature) => (
<div key={feature.name}> <div key={feature.name}>
<div> <div>
<span className="flex h-12 w-12 items-center justify-center rounded-md bg-white bg-opacity-10"> <span className="flex h-12 w-12 items-center justify-center rounded-md bg-white bg-opacity-10">
<feature.icon <feature.icon
aria-hidden="true" aria-hidden="true"
className="h-6 w-6 text-white" className="h-6 w-6 text-white"
/> />
</span> </span>
</div> </div>
<div className="mt-6"> <div className="mt-6">
<h3 className="text-lg font-medium text-white"> <h3 className="text-lg font-medium text-white">
{feature.name} {feature.name}
</h3> </h3>
<p className="text-primary-100 mt-2 text-base"> <p className="text-primary-100 mt-2 text-base">
{feature.description} {feature.description}
</p> </p>
</div>
</div> </div>
</div> ))}
))} </div>
</div> </div>
</div> </div>
</div>
{/* CTA Section */} {/* CTA Section */}
<div className="bg-white"> <div className="bg-white">
<div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8"> <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
<h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl"> <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span className="block">Ready to get started?</span> <span className="block">Ready to get started?</span>
<span className="to-primary-600 -mb-1 block bg-gradient-to-r from-purple-600 bg-clip-text pb-1 text-transparent"> <span className="to-primary-600 -mb-1 block bg-gradient-to-r from-purple-600 bg-clip-text pb-1 text-transparent">
Create your own offer profile today. Create your own offer profile today.
</span> </span>
</h2> </h2>
<div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5"> <div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
<a <a
className="to-primary-500 flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700" className="to-primary-500 flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
href={OFFERS_SUBMIT_URL}> href={OFFERS_SUBMIT_URL}>
Get Started Get Started
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </main>
</main>
<footer aria-labelledby="footer-heading" className="bg-gray-50"> <footer aria-labelledby="footer-heading" className="bg-gray-50">
<h2 className="sr-only" id="footer-heading"> <h2 className="sr-only" id="footer-heading">
Footer Footer
</h2> </h2>
<div className="mx-auto max-w-7xl px-4 pt-0 pb-8 sm:px-6 lg:px-8"> <div className="mx-auto max-w-7xl px-4 pt-0 pb-8 sm:px-6 lg:px-8">
<div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16"> <div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
<div className="flex space-x-6 md:order-2"> <div className="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => ( {footerNavigation.social.map((item) => (
<a <a
key={item.name} key={item.name}
className="text-gray-400 hover:text-gray-500" className="text-gray-400 hover:text-gray-500"
href={item.href}> href={item.href}>
<span className="sr-only">{item.name}</span> <span className="sr-only">{item.name}</span>
<item.icon aria-hidden="true" className="h-6 w-6" /> <item.icon aria-hidden="true" className="h-6 w-6" />
</a> </a>
))} ))}
</div>
<p className="mt-8 text-base text-gray-400 md:order-1 md:mt-0">
&copy; 2022 Tech Offers Repo. All rights reserved.
</p>
</div> </div>
<p className="mt-8 text-base text-gray-400 md:order-1 md:mt-0">
&copy; 2022 Tech Offers Repo. All rights reserved.
</p>
</div> </div>
</div> </footer>
</footer> </div>
</div> </>
); );
} }

220
apps/portal/src/pages/offers/index.tsx
Unescape View File

@ -1,3 +1,4 @@
import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import { useState } from 'react'; import { useState } from 'react';
import { MapPinIcon } from '@heroicons/react/24/outline'; import { MapPinIcon } from '@heroicons/react/24/outline';
@ -27,118 +28,123 @@ export default function OffersHomePage() {
useSearchParamSingle<JobTitleType | null>('jobTitleId'); useSearchParamSingle<JobTitleType | null>('jobTitleId');
return ( return (
<main className="flex-1 overflow-y-auto"> <>
<Banner size="sm"> <Head>
⭐ Check if your offer is competitive by submitting it{' '} <title>Home - Tech Offers Repo</title>
<Link className="underline" href="/offers/submit"> </Head>
here <main className="flex-1 overflow-y-auto">
</Link> <Banner size="sm">
. ⭐ ⭐ Check if your offer is competitive by submitting it{' '}
</Banner> <Link className="underline" href="/offers/submit">
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg"> here
<span> </Link>
<MapPinIcon className="flex h-7 w-7" /> . ⭐
</span> </Banner>
<CountriesTypeahead <div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
isLabelHidden={true} <span>
placeholder="All Countries" <MapPinIcon className="flex h-7 w-7" />
onSelect={(option) => { </span>
if (option) { <CountriesTypeahead
setCountryFilter(option.value); isLabelHidden={true}
gaEvent({ placeholder="All Countries"
action: `offers.table_filter_country_${option.value}`, onSelect={(option) => {
category: 'engagement', if (option) {
label: 'Filter by country', setCountryFilter(option.value);
}); gaEvent({
} else { action: `offers.table_filter_country_${option.value}`,
setCountryFilter(''); category: 'engagement',
} label: 'Filter by country',
}} });
/> } else {
</div> setCountryFilter('');
<div className="bg-slate-100 py-16 px-4"> }
<div> }}
/>
</div>
<div className="bg-slate-100 py-16 px-4">
<div> <div>
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl"> <div>
Tech Offers Repo <h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
</h1> Tech Offers Repo
</div> </h1>
<div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl"> </div>
Find out how good your offer is. Discover how others got their <div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
offers. Find out how good your offer is. Discover how others got their
offers.
</div>
</div> </div>
</div> <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
<div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg"> <span>Viewing offers for</span>
<span>Viewing offers for</span> <div className="flex items-center space-x-4">
<div className="flex items-center space-x-4"> <JobTitlesTypeahead
<JobTitlesTypeahead isLabelHidden={true}
isLabelHidden={true} placeholder="All Job Titles"
placeholder="All Job Titles" textSize="inherit"
textSize="inherit" value={
value={ selectedJobTitleId
selectedJobTitleId ? {
? { id: selectedJobTitleId,
id: selectedJobTitleId, label: getLabelForJobTitleType(
label: getLabelForJobTitleType( selectedJobTitleId as JobTitleType,
selectedJobTitleId as JobTitleType, ),
), value: selectedJobTitleId,
value: selectedJobTitleId, }
} : null
: null
}
onSelect={(option) => {
if (option) {
setSelectedJobTitleId(option.id as JobTitleType);
gaEvent({
action: `offers.table_filter_job_title_${option.value}`,
category: 'engagement',
label: 'Filter by job title',
});
} else {
setSelectedJobTitleId(null);
} }
}} onSelect={(option) => {
/> if (option) {
<span>in</span> setSelectedJobTitleId(option.id as JobTitleType);
<CompaniesTypeahead gaEvent({
isLabelHidden={true} action: `offers.table_filter_job_title_${option.value}`,
placeholder="All Companies" category: 'engagement',
textSize="inherit" label: 'Filter by job title',
value={ });
selectedCompanyName } else {
? { setSelectedJobTitleId(null);
id: selectedCompanyId, }
label: selectedCompanyName, }}
value: selectedCompanyId, />
} <span>in</span>
: null <CompaniesTypeahead
} isLabelHidden={true}
onSelect={(option) => { placeholder="All Companies"
if (option) { textSize="inherit"
setSelectedCompanyId(option.id); value={
setSelectedCompanyName(option.label); selectedCompanyName
gaEvent({ ? {
action: `offers.table_filter_company_${option.value}`, id: selectedCompanyId,
category: 'engagement', label: selectedCompanyName,
label: 'Filter by company', value: selectedCompanyId,
}); }
} else { : null
setSelectedCompanyId('');
setSelectedCompanyName('');
} }
}} onSelect={(option) => {
/> if (option) {
setSelectedCompanyId(option.id);
setSelectedCompanyName(option.label);
gaEvent({
action: `offers.table_filter_company_${option.value}`,
category: 'engagement',
label: 'Filter by company',
});
} else {
setSelectedCompanyId('');
setSelectedCompanyName('');
}
}}
/>
</div>
</div> </div>
</div> </div>
</div> <Container className="pb-20 pt-10">
<Container className="pb-20 pt-10"> <OffersTable
<OffersTable companyFilter={selectedCompanyId}
companyFilter={selectedCompanyId} companyName={selectedCompanyName}
companyName={selectedCompanyName} countryFilter={countryFilter}
countryFilter={countryFilter} jobTitleFilter={selectedJobTitleId ?? ''}
jobTitleFilter={selectedJobTitleId ?? ''} />
/> </Container>
</Container> </main>
</main> </>
); );
} }

68
apps/portal/src/pages/offers/profile/[offerProfileId].tsx
Unescape View File

@ -1,4 +1,5 @@
import Error from 'next/error'; import Error from 'next/error';
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
import { useState } from 'react'; import { useState } from 'react';
@ -201,42 +202,49 @@ export default function OfferProfile() {
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-full divide-x lg:flex"> <>
<div className="divide-y lg:w-2/3"> <Head>
<div className="h-fit"> <title>
<ProfileHeader {background?.profileName ? background.profileName : 'View profile'}
background={background} </title>
handleDelete={handleDelete} </Head>
isEditable={isEditable} <div className="w-full divide-x lg:flex">
isLoading={getProfileQuery.isLoading} <div className="divide-y lg:w-2/3">
selectedTab={selectedTab} <div className="h-fit">
setSelectedTab={setSelectedTab} <ProfileHeader
/> background={background}
handleDelete={handleDelete}
isEditable={isEditable}
isLoading={getProfileQuery.isLoading}
selectedTab={selectedTab}
setSelectedTab={setSelectedTab}
/>
</div>
<div>
<ProfileDetails
analysis={analysis}
background={background}
isEditable={isEditable}
isLoading={getProfileQuery.isLoading}
offers={offers}
profileId={offerProfileId as string}
selectedTab={selectedTab}
/>
</div>
</div> </div>
<div> <div
<ProfileDetails className="bg-white lg:fixed lg:right-0 lg:bottom-0 lg:w-1/3"
analysis={analysis} style={{ top: 64 }}>
background={background} <ProfileComments
isDisabled={deleteMutation.isLoading}
isEditable={isEditable} isEditable={isEditable}
isLoading={getProfileQuery.isLoading} isLoading={getProfileQuery.isLoading}
offers={offers}
profileId={offerProfileId as string} profileId={offerProfileId as string}
selectedTab={selectedTab} profileName={background?.profileName}
token={token as string}
/> />
</div> </div>
</div> </div>
<div </>
className="bg-white lg:fixed lg:right-0 lg:bottom-0 lg:w-1/3"
style={{ top: 64 }}>
<ProfileComments
isDisabled={deleteMutation.isLoading}
isEditable={isEditable}
isLoading={getProfileQuery.isLoading}
profileId={offerProfileId as string}
profileName={background?.profileName}
token={token as string}
/>
</div>
</div>
); );
} }

4
apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx
Unescape View File

@ -1,4 +1,5 @@
import Error from 'next/error'; import Error from 'next/error';
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useState } from 'react'; import { useState } from 'react';
import { JobType } from '@prisma/client'; import { JobType } from '@prisma/client';
@ -88,6 +89,9 @@ export default function OffersEditPage() {
return ( return (
<> <>
<Head>
<title>Edit profile</title>
</Head>
{getProfileResult.isError && ( {getProfileResult.isError && (
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<Error statusCode={404} title="Requested profile does not exist" /> <Error statusCode={404} title="Requested profile does not exist" />

11
apps/portal/src/pages/offers/submit.tsx
Unescape View File

@ -1,5 +1,14 @@
import Head from 'next/head';
import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm'; import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm';
export default function OffersSubmissionPage() { export default function OffersSubmissionPage() {
return <OffersSubmissionForm />; return (
<>
<Head>
<title>Analyze your offers</title>
</Head>
<OffersSubmissionForm />
</>
);
} }

11
apps/portal/src/pages/offers/submit/index.tsx
Unescape View File

@ -1,5 +1,14 @@
import Head from 'next/head';
import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm'; import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm';
export default function OffersSubmissionPage() { export default function OffersSubmissionPage() {
return <OffersSubmissionForm />; return (
<>
<Head>
<title>Analyze your offers</title>
</Head>
<OffersSubmissionForm />
</>
);
} }

94
apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
Unescape View File

@ -1,4 +1,5 @@
import Error from 'next/error'; import Error from 'next/error';
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
@ -92,52 +93,57 @@ export default function OffersSubmissionResult() {
title="You do not have permissions to access this page" title="You do not have permissions to access this page"
/> />
) : ( ) : (
<div ref={pageRef} className="w-full"> <>
<div className="flex justify-center"> <Head>
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10"> <title>View the result</title>
<div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8"> </Head>
<Breadcrumbs <div ref={pageRef} className="w-full">
currentStep={step} <div className="flex justify-center">
setStep={setStep} <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
steps={breadcrumbSteps} <div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
/> <Breadcrumbs
</div> currentStep={step}
<div className="bg-white p-6 sm:p-10"> setStep={setStep}
{steps[step]} steps={breadcrumbSteps}
{step === 0 && ( />
<div className="flex justify-end"> </div>
<Button <div className="bg-white p-6 sm:p-10">
disabled={false} {steps[step]}
icon={ArrowRightIcon} {step === 0 && (
label="Next" <div className="flex justify-end">
variant="primary" <Button
onClick={() => setStep(step + 1)} disabled={false}
/> icon={ArrowRightIcon}
</div> label="Next"
)} variant="primary"
{step === 1 && ( onClick={() => setStep(step + 1)}
<div className="flex items-center justify-between"> />
<Button </div>
addonPosition="start" )}
icon={ArrowLeftIcon} {step === 1 && (
label="Previous" <div className="flex items-center justify-between">
variant="secondary" <Button
onClick={() => setStep(step - 1)} addonPosition="start"
/> icon={ArrowLeftIcon}
<Button label="Previous"
href={getProfilePath( variant="secondary"
offerProfileId as string, onClick={() => setStep(step - 1)}
token as string, />
)} <Button
icon={EyeIcon} href={getProfilePath(
label="View your profile" offerProfileId as string,
variant="primary" token as string,
/> )}
</div> icon={EyeIcon}
)} label="View your profile"
variant="primary"
/>
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </>
); );
} }
Write Preview
Loading…
Cancel
Save