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

tweak again

Browse Source
pull/445/head
Yangshun Tay 3 years ago
parent 67144b9d5c
commit 10e735a6bd
6 changed files with 102 additions and 66 deletions
Show Stats Download Patch File Download Diff File

6
apps/portal/src/components/global/ProductNavigation.tsx
Unescape View File

@ -30,7 +30,11 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
className="hover:text-primary-700 flex items-center gap-2 text-base font-medium" className="hover:text-primary-700 flex items-center gap-2 text-base font-medium"
href={titleHref}> href={titleHref}>
{titleHref !== '/' && ( {titleHref !== '/' && (
<img alt="TIH" className="h-8 w-auto" src="/logo.svg" /> <img
alt="Tech Interview Handbook"
className="h-8 w-auto"
src="/logo.svg"
/>
)} )}
{title} {title}
</Link> </Link>

14
apps/portal/src/components/offers/table/OffersRow.tsx
Unescape View File

@ -1,3 +1,4 @@
import clsx from 'clsx';
import Link from 'next/link'; import Link from 'next/link';
import type { JobTitleType } from '~/components/shared/JobTitles'; import type { JobTitleType } from '~/components/shared/JobTitles';
@ -14,12 +15,8 @@ export default function OfferTableRow({
row: { company, id, income, monthYearReceived, profileId, title, totalYoe }, row: { company, id, income, monthYearReceived, profileId, title, totalYoe },
}: OfferTableRowProps) { }: OfferTableRowProps) {
return ( return (
<tr <tr key={id} className="divide-x divide-slate-200 border-b bg-white">
key={id} <th className="whitespace-nowrap py-4 px-6 font-medium" scope="row">
className="border-b bg-white hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-600">
<th
className="whitespace-nowrap py-4 px-6 font-medium text-slate-900 dark:text-white"
scope="row">
{company.name} {company.name}
</th> </th>
<td className="py-4 px-6"> <td className="py-4 px-6">
@ -28,7 +25,10 @@ export default function OfferTableRow({
<td className="py-4 px-6">{totalYoe}</td> <td className="py-4 px-6">{totalYoe}</td>
<td className="py-4 px-6">{convertMoneyToString(income)}</td> <td className="py-4 px-6">{convertMoneyToString(income)}</td>
<td className="py-4 px-6">{formatDate(monthYearReceived)}</td> <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
<td className="space-x-4 py-4 px-6"> <td
className={clsx(
'sticky right-0 bg-white py-4 px-6 drop-shadow md:drop-shadow-none',
)}>
<Link <Link
className="text-primary-600 dark:text-primary-500 font-medium hover:underline" className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
href={`/offers/profile/${profileId}`}> href={`/offers/profile/${profileId}`}>

132
apps/portal/src/components/offers/table/OffersTable.tsx
Unescape View File

@ -1,5 +1,6 @@
import clsx from 'clsx';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { HorizontalDivider, Select, Spinner, Tabs } from '@tih/ui'; import { DropdownMenu, Spinner } from '@tih/ui';
import OffersTablePagination from '~/components/offers/table/OffersTablePagination'; import OffersTablePagination from '~/components/offers/table/OffersTablePagination';
import { import {
@ -71,55 +72,84 @@ export default function OffersTable({
}, },
); );
function renderTabs() {
return (
<div className="flex justify-center">
<div className="w-fit">
<Tabs
label="Table Navigation"
tabs={OfferTableTabOptions}
value={selectedTab}
onChange={(value) => setSelectedTab(value)}
/>
</div>
</div>
);
}
function renderFilters() { function renderFilters() {
return ( return (
<div className="m-4 flex items-center justify-between"> <div className="m-4 flex items-center justify-between">
<div className="justify-left flex items-center space-x-2"> <DropdownMenu
<span>All offers in</span> align="start"
<CurrencySelector label={
handleCurrencyChange={(value: string) => setCurrency(value)} OfferTableTabOptions.filter(
selectedCurrency={currency} ({ value: itemValue }) => itemValue === selectedTab,
/> )[0].label
}
size="inherit">
{OfferTableTabOptions.map(({ label: itemLabel, value }) => (
<DropdownMenu.Item
key={value}
isSelected={value === selectedTab}
label={itemLabel}
onClick={() => {
setSelectedTab(value);
}}
/>
))}
</DropdownMenu>
<div className="divide-x-slate-200 flex items-center space-x-4 divide-x">
<div className="justify-left flex items-center space-x-2">
<span>All offers in</span>
<CurrencySelector
handleCurrencyChange={(value: string) => setCurrency(value)}
selectedCurrency={currency}
/>
</div>
<div className="pl-4">
<DropdownMenu
align="end"
label={
OfferTableFilterOptions.filter(
({ value: itemValue }) => itemValue === selectedFilter,
)[0].label
}
size="inherit">
{OfferTableFilterOptions.map(({ label: itemLabel, value }) => (
<DropdownMenu.Item
key={value}
isSelected={value === selectedFilter}
label={itemLabel}
onClick={() => {
setSelectedFilter(value);
}}
/>
))}
</DropdownMenu>
</div>
</div> </div>
<Select
isLabelHidden={true}
label=""
options={OfferTableFilterOptions}
value={selectedFilter}
onChange={(value) => setSelectedFilter(value)}
/>
</div> </div>
); );
} }
function renderHeader() { function renderHeader() {
const columns = [
'Company',
'Title',
'YOE',
selectedTab === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'Annual TC',
'Date Offered',
'Actions',
];
return ( return (
<thead className="bg-slate-50 text-xs uppercase text-slate-700"> <thead className="text-slate-700">
<tr> <tr className="divide-x divide-slate-200">
{[ {columns.map((header, index) => (
'Company', <th
'Title', key={header}
'YOE', className={clsx(
selectedTab === YOE_CATEGORY.INTERN ? 'Monthly Salary' : 'TC/year', 'bg-slate-100 py-3 px-6',
'Date offered', // Make last column sticky.
'Actions', index === columns.length - 1 &&
].map((header) => ( 'sticky right-0 drop-shadow md:drop-shadow-none',
<th key={header} className="py-3 px-6" scope="col"> )}
scope="col">
{header} {header}
</th> </th>
))} ))}
@ -136,23 +166,23 @@ export default function OffersTable({
return ( return (
<div className="w-5/6"> <div className="w-5/6">
{renderTabs()} <div className="relative w-full border border-slate-200">
<HorizontalDivider />
<div className="relative w-full overflow-x-auto shadow-md sm:rounded-lg">
{renderFilters()} {renderFilters()}
{offersQuery.isLoading ? ( {offersQuery.isLoading ? (
<div className="col-span-10 pt-4"> <div className="col-span-10 pt-4">
<Spinner display="block" size="lg" /> <Spinner display="block" size="lg" />
</div> </div>
) : ( ) : (
<table className="w-full text-left text-sm text-slate-500"> <div className="overflow-x-auto">
{renderHeader()} <table className="w-full divide-y divide-slate-200 border-y border-slate-200 text-left text-slate-600">
<tbody> {renderHeader()}
{offers.map((offer) => ( <tbody>
<OffersRow key={offer.id} row={offer} /> {offers.map((offer) => (
))} <OffersRow key={offer.id} row={offer} />
</tbody> ))}
</table> </tbody>
</table>
</div>
)} )}
<OffersTablePagination <OffersTablePagination
endNumber={ endNumber={

1
apps/portal/src/components/shared/CompaniesTypeahead.tsx
Unescape View File

@ -45,6 +45,7 @@ export default function CompaniesTypeahead({
} }
placeholder={placeHolder} placeholder={placeHolder}
required={required} required={required}
textSize="inherit"
onQueryChange={setQuery} onQueryChange={setQuery}
onSelect={onSelect} onSelect={onSelect}
/> />

1
apps/portal/src/components/shared/JobTitlesTypahead.tsx
Unescape View File

@ -41,6 +41,7 @@ export default function JobTitlesTypeahead({
options={options} options={options}
placeholder={placeHolder} placeholder={placeHolder}
required={required} required={required}
textSize="inherit"
onQueryChange={setQuery} onQueryChange={setQuery}
onSelect={onSelect} onSelect={onSelect}
/> />

14
apps/portal/src/pages/offers/browse.tsx
Unescape View File

@ -12,28 +12,28 @@ export default function OffersHomePage() {
return ( return (
<main className="flex-1 overflow-y-auto"> <main className="flex-1 overflow-y-auto">
<Banner> <Banner size="sm">
⭐ Check if your offer is competitive by submitting it{' '} ⭐ Check if your offer is competitive by submitting it{' '}
<Link className="underline" href="/offers/submit"> <Link className="underline" href="/offers/submit">
here here
</Link> </Link>
. ⭐ . ⭐
</Banner> </Banner>
<div className="space-y-6 bg-stone-100 py-16"> <div className="bg-slate-100 py-16 px-4">
<div> <div>
<div> <div>
<h1 className="text-primary-600 text-center text-6xl font-bold"> <h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
Tech Offers Repo Tech Offers Repo
</h1> </h1>
</div> </div>
<div className="mt-4 text-center text-3xl text-slate-600"> <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 Find out how good your offer is. Discover how others got their
offers. offers.
</div> </div>
</div> </div>
<div className="flex items-start justify-center"> <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-base text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
<div className="mt-4 flex items-center space-x-4 text-lg text-slate-500"> <span>Viewing offers for</span>
<span>Viewing offers for</span> <div className="flex items-center space-x-4">
<JobTitlesTypeahead <JobTitlesTypeahead
isLabelHidden={true} isLabelHidden={true}
placeHolder="Software Engineer" placeHolder="Software Engineer"

Write Preview
Loading…
Cancel
Save