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 (#526)

Browse Source 
* [offers][feat] add header for pages

* [offers][fix] fix pronoun for toast

* [offers][feat] fix index page description
pull/527/head
Zhang Ziqing 2 years ago committed by GitHub
parent a79e132161
commit d1956ca12a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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/pages/index.tsx
Unescape View File

@ -12,7 +12,7 @@ const features = [
}, },
{ {
description: description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 'Reveal stories behind offers. Help job seekers benchmark and analyse their anonymous offers with more context. Encourage discussions around offer profiles.',
href: '/offers', href: '/offers',
img: '/logos/offers-logo.svg', img: '/logos/offers-logo.svg',
name: 'Tech Offers', name: 'Tech Offers',

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 />
</>
);
} }

96
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