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 = [
{ 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/about', name: 'About' },
];

2
apps/portal/src/pages/index.tsx
Unescape View File

@ -12,7 +12,7 @@ const features = [
},
{
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',
img: '/logos/offers-logo.svg',
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';
const people = [
@ -29,75 +31,80 @@ const people = [
export default function AboutPage() {
return (
<div className="lg:py-18 bg-white py-12">
<Container variant="xs">
<div className="space-y-12">
<div className="space-y-6">
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
About Tech Offers Repo
</h1>
<p className="text-lg text-slate-500">
Tech Offers Repo, a project under the series of Tech Interview
Handbook (TIH), reveals the stories behind offers by focusing on
the profiles of the offer receivers. It helps job seekers
benchmark and analyse their anonymous offers with more context and
encourages discussions around offer profiles.
</p>
</div>
{/* Feedback */}
<div className="space-y-6">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
Feedback to Us
</h2>
<>
<Head>
<title>About us - Tech Offers Repo</title>
</Head>
<div className="lg:py-18 bg-white py-12">
<Container variant="xs">
<div className="space-y-12">
<div className="space-y-6">
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
About Tech Offers Repo
</h1>
<p className="text-lg text-slate-500">
Tech Offers Repo, a project under the series of Tech Interview
Handbook (TIH), reveals the stories behind offers by focusing on
the profiles of the offer receivers. It helps job seekers
benchmark and analyse their anonymous offers with more context
and encourages discussions around offer profiles.
</p>
</div>
{/* 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">
Thank you for using our platform! Feel free to submit your
feedback / feature request / bug report
<a
className="text-primary-600 hover:text-primary-500 ml-1"
href="https://forms.gle/6zV5yimPyiByKqDy8"
rel="noreferrer"
target="_blank">
here
</a>
.
</p>
</div>
<div className="space-y-6">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
Meet the Team
</h2>
<ul
className="grid grid-cols-2 items-start gap-8 md:grid-cols-1 md:items-start md:space-y-0"
role="list">
{people.map((person) => (
<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="aspect-w-2 aspect-h-2 h-0">
<img
alt={person.name}
className="rounded-lg object-cover shadow-lg"
src={person.imageUrl}
/>
</div>
<div className="sm:col-span-3">
<div className="space-y-4">
<div className="text-md space-y-1 font-medium leading-6 sm:text-lg">
<h3>{person.name}</h3>
<p className="text-primary-600">{person.role}</p>
</div>
<div className="text-sm sm:text-lg">
<p className="text-slate-500">{person.bio}</p>
<p className="text-lg text-slate-500">
Thank you for using our platform! Feel free to submit your
feedback / feature request / bug report
<a
className="text-primary-600 hover:text-primary-500 ml-1"
href="https://forms.gle/6zV5yimPyiByKqDy8"
rel="noreferrer"
target="_blank">
here
</a>
.
</p>
</div>
<div className="space-y-6">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
Meet the Team
</h2>
<ul
className="grid grid-cols-2 items-start gap-8 md:grid-cols-1 md:items-start md:space-y-0"
role="list">
{people.map((person) => (
<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="aspect-w-2 aspect-h-2 h-0">
<img
alt={person.name}
className="rounded-lg object-cover shadow-lg"
src={person.imageUrl}
/>
</div>
<div className="sm:col-span-3">
<div className="space-y-4">
<div className="text-md space-y-1 font-medium leading-6 sm:text-lg">
<h3>{person.name}</h3>
<p className="text-primary-600">{person.role}</p>
</div>
<div className="text-sm sm:text-lg">
<p className="text-slate-500">{person.bio}</p>
</div>
</div>
</div>
</div>
</div>
</li>
))}
</ul>
</li>
))}
</ul>
</div>
</div>
</div>
</Container>
</div>
</Container>
</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 { signIn, useSession } from 'next-auth/react';
import { useState } from 'react';
@ -45,53 +46,63 @@ export default function ProfilesDashboard() {
if (userProfiles.length === 0) {
return (
<div className="flex w-full">
<div className="w-full justify-center space-y-8 py-16 text-xl">
<div className="flex w-full flex-row justify-center">
<h2>You have not saved any offer profiles yet.</h2>
</div>
<div className="flex flex-row justify-center">
<Button
label="Submit your offers now!"
size="lg"
variant="primary"
onClick={() => router.push('/offers/submit')}
/>
<>
<Head>
<title>My Dashboard - Tech Offers Repo</title>
</Head>
<div className="flex w-full">
<div className="w-full justify-center space-y-8 py-16 text-xl">
<div className="flex w-full flex-row justify-center">
<h2>You have not saved any offer profiles yet.</h2>
</div>
<div className="flex flex-row justify-center">
<Button
label="Submit your offers now!"
size="lg"
variant="primary"
onClick={() => router.push('/offers/submit')}
/>
</div>
</div>
</div>
</div>
</>
);
}
return (
<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" />
<>
<Head>
<title>My Dashboard - Tech Offers Repo</title>
</Head>
<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>
)}
{!userProfilesQuery.isLoading && (
<div className="overflow-y-auto py-8">
<h1 className="mx-auto mb-4 text-start text-4xl font-bold text-slate-900">
Your dashboard
</h1>
<p className="mt-4 text-xl leading-8 text-slate-500">
Save your offer profiles to your dashboard to easily access and edit
them later.
</p>
<div className="mt-8 flex justify-center">
<ul className="w-full space-y-4" role="list">
{userProfiles?.map((profile) => (
<li key={profile.id}>
<DashboardProfileCard key={profile.id} profile={profile} />
</li>
))}
</ul>
)}
{!userProfilesQuery.isLoading && (
<div className="overflow-y-auto py-8">
<h1 className="mx-auto mb-4 text-start text-4xl font-bold text-slate-900">
My dashboard
</h1>
<p className="mt-4 text-xl leading-8 text-slate-500">
Save your offer profiles to your dashboard to easily access and
edit them later.
</p>
<div className="mt-8 flex justify-center">
<ul className="w-full space-y-4" role="list">
{userProfiles?.map((profile) => (
<li key={profile.id}>
<DashboardProfileCard key={profile.id} profile={profile} />
</li>
))}
</ul>
</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 {
BookmarkSquareIcon,
@ -82,176 +83,182 @@ const footerNavigation = {
export default function LandingPage() {
return (
<div className="mx-auto w-full overflow-y-auto bg-white">
<main>
{/* Hero section */}
<div className="relative h-full">
<div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
<img
alt="Tech Offers Repo"
className="mx-auto mb-8 w-auto"
src="/logos/offers-logo.svg"
/>
<h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
<span>Choosing offers </span>
<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">
made easier
</span>
</h1>
<p className="mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
Analyze your offers using profiles from fellow software engineers.
</p>
<div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
<div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-1 sm:gap-5 sm:space-y-0">
<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
<>
<Head>
<title>Features - Tech Offers Repo</title>
</Head>
<div className="mx-auto w-full overflow-y-auto bg-white">
<main>
{/* Hero section */}
<div className="relative h-full">
<div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
<img
alt="Tech Offers Repo"
className="mx-auto mb-8 w-auto"
src="/logos/offers-logo.svg"
/>
<h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
<span>Choosing offers </span>
<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">
made easier
</span>
</h1>
<p className="mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
Analyze your offers using profiles from fellow software
engineers.
</p>
<div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
<div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-1 sm:gap-5 sm:space-y-0">
<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"
href="#">
Live demo
</a> */}
</div>
</div>
</div>
</div>
</div>
{/* Alternating Feature Sections */}
<div className="relative overflow-hidden pt-16 pb-32">
<div
aria-hidden="true"
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}
{/* Alternating Feature Sections */}
<div className="relative overflow-hidden pt-16 pb-32">
<div
aria-hidden="true"
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>
</div>
</div>
{/* Gradient Feature Section */}
<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">
<h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
Your privacy is our priority.
</h2>
<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
about your personal identity.
</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">
{features.map((feature) => (
<div key={feature.name}>
<div>
<span className="flex h-12 w-12 items-center justify-center rounded-md bg-white bg-opacity-10">
<feature.icon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
</span>
</div>
<div className="mt-6">
<h3 className="text-lg font-medium text-white">
{feature.name}
</h3>
<p className="text-primary-100 mt-2 text-base">
{feature.description}
</p>
{/* Gradient Feature Section */}
<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">
<h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
Your privacy is our priority.
</h2>
<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 about your personal identity.
</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">
{features.map((feature) => (
<div key={feature.name}>
<div>
<span className="flex h-12 w-12 items-center justify-center rounded-md bg-white bg-opacity-10">
<feature.icon
aria-hidden="true"
className="h-6 w-6 text-white"
/>
</span>
</div>
<div className="mt-6">
<h3 className="text-lg font-medium text-white">
{feature.name}
</h3>
<p className="text-primary-100 mt-2 text-base">
{feature.description}
</p>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
</div>
{/* CTA Section */}
<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">
<h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<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">
Create your own offer profile today.
</span>
</h2>
<div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
<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"
href={OFFERS_SUBMIT_URL}>
Get Started
</a>
{/* CTA Section */}
<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">
<h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<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">
Create your own offer profile today.
</span>
</h2>
<div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
<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"
href={OFFERS_SUBMIT_URL}>
Get Started
</a>
</div>
</div>
</div>
</div>
</main>
</main>
<footer aria-labelledby="footer-heading" className="bg-gray-50">
<h2 className="sr-only" id="footer-heading">
Footer
</h2>
<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="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a
key={item.name}
className="text-gray-400 hover:text-gray-500"
href={item.href}>
<span className="sr-only">{item.name}</span>
<item.icon aria-hidden="true" className="h-6 w-6" />
</a>
))}
<footer aria-labelledby="footer-heading" className="bg-gray-50">
<h2 className="sr-only" id="footer-heading">
Footer
</h2>
<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="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a
key={item.name}
className="text-gray-400 hover:text-gray-500"
href={item.href}>
<span className="sr-only">{item.name}</span>
<item.icon aria-hidden="true" className="h-6 w-6" />
</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>
<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>
</footer>
</div>
</footer>
</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 { useState } from 'react';
import { MapPinIcon } from '@heroicons/react/24/outline';
@ -27,118 +28,123 @@ export default function OffersHomePage() {
useSearchParamSingle<JobTitleType | null>('jobTitleId');
return (
<main className="flex-1 overflow-y-auto">
<Banner size="sm">
⭐ Check if your offer is competitive by submitting it{' '}
<Link className="underline" href="/offers/submit">
here
</Link>
. ⭐
</Banner>
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
<span>
<MapPinIcon className="flex h-7 w-7" />
</span>
<CountriesTypeahead
isLabelHidden={true}
placeholder="All Countries"
onSelect={(option) => {
if (option) {
setCountryFilter(option.value);
gaEvent({
action: `offers.table_filter_country_${option.value}`,
category: 'engagement',
label: 'Filter by country',
});
} else {
setCountryFilter('');
}
}}
/>
</div>
<div className="bg-slate-100 py-16 px-4">
<div>
<>
<Head>
<title>Home - Tech Offers Repo</title>
</Head>
<main className="flex-1 overflow-y-auto">
<Banner size="sm">
⭐ Check if your offer is competitive by submitting it{' '}
<Link className="underline" href="/offers/submit">
here
</Link>
. ⭐
</Banner>
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
<span>
<MapPinIcon className="flex h-7 w-7" />
</span>
<CountriesTypeahead
isLabelHidden={true}
placeholder="All Countries"
onSelect={(option) => {
if (option) {
setCountryFilter(option.value);
gaEvent({
action: `offers.table_filter_country_${option.value}`,
category: 'engagement',
label: 'Filter by country',
});
} else {
setCountryFilter('');
}
}}
/>
</div>
<div className="bg-slate-100 py-16 px-4">
<div>
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
Tech Offers Repo
</h1>
</div>
<div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
Find out how good your offer is. Discover how others got their
offers.
<div>
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
Tech Offers Repo
</h1>
</div>
<div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
Find out how good your offer is. Discover how others got their
offers.
</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">
<span>Viewing offers for</span>
<div className="flex items-center space-x-4">
<JobTitlesTypeahead
isLabelHidden={true}
placeholder="All Job Titles"
textSize="inherit"
value={
selectedJobTitleId
? {
id: selectedJobTitleId,
label: getLabelForJobTitleType(
selectedJobTitleId as JobTitleType,
),
value: selectedJobTitleId,
}
: 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);
<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>
<div className="flex items-center space-x-4">
<JobTitlesTypeahead
isLabelHidden={true}
placeholder="All Job Titles"
textSize="inherit"
value={
selectedJobTitleId
? {
id: selectedJobTitleId,
label: getLabelForJobTitleType(
selectedJobTitleId as JobTitleType,
),
value: selectedJobTitleId,
}
: null
}
}}
/>
<span>in</span>
<CompaniesTypeahead
isLabelHidden={true}
placeholder="All Companies"
textSize="inherit"
value={
selectedCompanyName
? {
id: selectedCompanyId,
label: selectedCompanyName,
value: selectedCompanyId,
}
: null
}
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('');
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);
}
}}
/>
<span>in</span>
<CompaniesTypeahead
isLabelHidden={true}
placeholder="All Companies"
textSize="inherit"
value={
selectedCompanyName
? {
id: selectedCompanyId,
label: selectedCompanyName,
value: selectedCompanyId,
}
: null
}
}}
/>
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>
<Container className="pb-20 pt-10">
<OffersTable
companyFilter={selectedCompanyId}
companyName={selectedCompanyName}
countryFilter={countryFilter}
jobTitleFilter={selectedJobTitleId ?? ''}
/>
</Container>
</main>
<Container className="pb-20 pt-10">
<OffersTable
companyFilter={selectedCompanyId}
companyName={selectedCompanyName}
countryFilter={countryFilter}
jobTitleFilter={selectedJobTitleId ?? ''}
/>
</Container>
</main>
</>
);
}

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

@ -1,4 +1,5 @@
import Error from 'next/error';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import { useState } from 'react';
@ -201,42 +202,49 @@ export default function OfferProfile() {
</div>
</div>
) : (
<div className="w-full divide-x lg:flex">
<div className="divide-y lg:w-2/3">
<div className="h-fit">
<ProfileHeader
background={background}
handleDelete={handleDelete}
isEditable={isEditable}
isLoading={getProfileQuery.isLoading}
selectedTab={selectedTab}
setSelectedTab={setSelectedTab}
/>
<>
<Head>
<title>
{background?.profileName ? background.profileName : 'View profile'}
</title>
</Head>
<div className="w-full divide-x lg:flex">
<div className="divide-y lg:w-2/3">
<div className="h-fit">
<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>
<ProfileDetails
analysis={analysis}
background={background}
<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}
offers={offers}
profileId={offerProfileId as string}
selectedTab={selectedTab}
profileName={background?.profileName}
token={token as string}
/>
</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 Head from 'next/head';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { JobType } from '@prisma/client';
@ -88,6 +89,9 @@ export default function OffersEditPage() {
return (
<>
<Head>
<title>Edit profile</title>
</Head>
{getProfileResult.isError && (
<div className="flex w-full justify-center">
<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';
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';
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 Head from 'next/head';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/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"
/>
) : (
<div ref={pageRef} className="w-full">
<div className="flex justify-center">
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
<div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
<Breadcrumbs
currentStep={step}
setStep={setStep}
steps={breadcrumbSteps}
/>
</div>
<div className="bg-white p-6 sm:p-10">
{steps[step]}
{step === 0 && (
<div className="flex justify-end">
<Button
disabled={false}
icon={ArrowRightIcon}
label="Next"
variant="primary"
onClick={() => setStep(step + 1)}
/>
</div>
)}
{step === 1 && (
<div className="flex items-center justify-between">
<Button
addonPosition="start"
icon={ArrowLeftIcon}
label="Previous"
variant="secondary"
onClick={() => setStep(step - 1)}
/>
<Button
href={getProfilePath(
offerProfileId as string,
token as string,
)}
icon={EyeIcon}
label="View your profile"
variant="primary"
/>
</div>
)}
<>
<Head>
<title>View the result</title>
</Head>
<div ref={pageRef} className="w-full">
<div className="flex justify-center">
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
<div className="flex justify-center bg-slate-100 px-4 py-4 sm:px-6 lg:px-8">
<Breadcrumbs
currentStep={step}
setStep={setStep}
steps={breadcrumbSteps}
/>
</div>
<div className="bg-white p-6 sm:p-10">
{steps[step]}
{step === 0 && (
<div className="flex justify-end">
<Button
disabled={false}
icon={ArrowRightIcon}
label="Next"
variant="primary"
onClick={() => setStep(step + 1)}
/>
</div>
)}
{step === 1 && (
<div className="flex items-center justify-between">
<Button
addonPosition="start"
icon={ArrowLeftIcon}
label="Previous"
variant="secondary"
onClick={() => setStep(step - 1)}
/>
<Button
href={getProfilePath(
offerProfileId as string,
token as string,
)}
icon={EyeIcon}
label="View your profile"
variant="primary"
/>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</>
);
}
}

Write Preview
Loading…
Cancel
Save