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

[questions][feat] update landing page

Browse Source
pull/547/head
Yangshun Tay 2 years ago
parent 65beeb87b4
commit b7f5bc004c
2 changed files with 97 additions and 95 deletions
Show Stats Download Patch File Download Diff File

190
apps/portal/src/components/questions/LandingComponent.tsx
Unescape View File

@ -4,6 +4,8 @@ import type { QuestionsQuestionType } from '@prisma/client';
import type { TypeaheadOption } from '@tih/ui'; import type { TypeaheadOption } from '@tih/ui';
import { Button, Select } from '@tih/ui'; import { Button, Select } from '@tih/ui';
import Container from '~/components/shared/Container';
import { companyOptionToSlug } from '~/utils/questions/companySlug'; import { companyOptionToSlug } from '~/utils/questions/companySlug';
import { QUESTION_TYPES } from '~/utils/questions/constants'; import { QUESTION_TYPES } from '~/utils/questions/constants';
import { locationOptionToSlug } from '~/utils/questions/locationSlug'; import { locationOptionToSlug } from '~/utils/questions/locationSlug';
@ -65,100 +67,100 @@ export default function LandingComponent({ onLanded }: LandingComponentProps) {
}, [defaultLocation, location]); }, [defaultLocation, location]);
return ( return (
<main className="flex flex-1 flex-col items-center overflow-y-auto bg-white"> <div className="relative pt-6 pb-16 sm:pb-24">
<div className="flex flex-1 flex-col items-start justify-center gap-12 px-4"> <main className="mt-8 sm:mt-16">
<header className="flex flex-col items-start gap-16"> <Container>
<div className="flex flex-col items-center"> <div className="lg:grid lg:grid-cols-12 lg:gap-8">
<img <div className="px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:items-center lg:text-left">
alt="Question Bank" <div>
className="h-40 w-40" <h1 className="text-primary-600 mt-4 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
src="/logos/bank-logo.png" Tech Interview Question Bank
/> </h1>
<h1 className="text-primary-700 text-center text-5xl font-bold"> <p className="mt-3 text-base text-slate-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Tech Interview Question Bank Discover the latest tech interview questions asked by top
</h1> companies. Learn from answers by others.
</div> </p>
<p className="mb-2 max-w-lg text-4xl font-semibold text-slate-900 sm:max-w-3xl"> </div>
Know the{' '} </div>
<span className="text-primary-700"> <div className="mt-16 sm:mt-24 lg:col-span-6 lg:mt-0">
latest SWE interview questions <div className="bg-white shadow sm:mx-auto sm:w-full sm:max-w-md sm:overflow-hidden sm:rounded-lg">
</span>{' '} <div className="px-4 py-8 sm:px-10">
asked by top companies. <div>
</p> <Button
</header> display="block"
<div className="flex flex-col items-start gap-3 text-xl font-semibold text-slate-900"> href="/questions/browse"
<p className="text-3xl">Find questions</p> label="Explore All Questions"
<div className="grid grid-cols-[auto_auto] items-baseline gap-x-4 gap-y-2"> variant="primary"
<p className="text-slate-600">about</p> />
<Select </div>
isLabelHidden={true} <div className="relative mt-6">
label="Type" <div
options={QUESTION_TYPES} aria-hidden="true"
value={questionType} className="absolute inset-0 flex items-center">
onChange={(value) => { <div className="w-full border-t border-gray-300" />
handleChangeType(value.toUpperCase() as QuestionsQuestionType); </div>
}} <div className="relative flex justify-center text-sm">
/> <span className="bg-white px-2 text-gray-500">Or</span>
<p className="text-slate-600">from</p> </div>
<CompanyTypeahead </div>
isLabelHidden={true} <div className="mt-6">
value={company} <p className="text-lg">Find questions</p>
onSelect={(value) => { <div className="mt-4 grid grid-cols-[auto_auto] items-baseline gap-x-4 gap-y-2">
handleChangeCompany(value); <p className="text-slate-600">about</p>
}} <Select
/> isLabelHidden={true}
<p className="text-slate-600">in</p> label="Type"
<LocationTypeahead options={QUESTION_TYPES}
isLabelHidden={true} value={questionType}
value={location} onChange={(value) => {
onSelect={(value) => { handleChangeType(
handleChangeLocation(value); value.toUpperCase() as QuestionsQuestionType,
}} );
/> }}
</div> />
<div className="flex items-center gap-2"> <p className="text-slate-600">from</p>
<Button <CompanyTypeahead
addonPosition="end" isLabelHidden={true}
icon={ArrowSmallRightIcon} value={company}
label="Go" onSelect={(value) => {
size="md" handleChangeCompany(value);
variant="primary" }}
onClick={() => { />
if (company !== undefined && location !== undefined) { <p className="text-slate-600">in</p>
onLanded({ <LocationTypeahead
companySlug: companyOptionToSlug(company), isLabelHidden={true}
location: locationOptionToSlug(location), value={location}
questionType, onSelect={(value) => {
}); handleChangeLocation(value);
} }}
}} />
/> </div>
<Button <div className="mt-4 flex items-center">
addonPosition="end" <Button
icon={ArrowSmallRightIcon} addonPosition="end"
label="View all questions" display="block"
size="md" icon={ArrowSmallRightIcon}
variant="secondary" label="Go"
onClick={() => { size="md"
onLanded(null); variant="secondary"
}} onClick={() => {
/> if (company !== undefined && location !== undefined) {
onLanded({
companySlug: companyOptionToSlug(company),
location: locationOptionToSlug(location),
questionType,
});
}
}}
/>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </Container>
<div className="flex justify-center"> </main>
<iframe </div>
height={30}
src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=tech-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
title="GitHub Stars"
width={160}
/>
</div>
<div>
<p className="py-20 text-center text-white ">
TODO questions Carousel
</p>
</div>
</div>
</main>
); );
} }

2
apps/portal/src/components/questions/QuestionsNavigation.tsx
Unescape View File

@ -19,7 +19,7 @@ const config = {
), ),
navigation, navigation,
showGlobalNav: false, showGlobalNav: false,
title: 'Questions Bank', title: 'Tech Interview Question Bank',
titleHref: '/questions', titleHref: '/questions',
}; };

Write Preview
Loading…
Cancel
Save