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

[questions][ui] add page titles

Browse Source
pull/411/head
Jeff Sieu 3 years ago
parent d5f024f872
commit 1361c5bfab
8 changed files with 423 additions and 363 deletions
Show Stats Download Patch File Download Diff File

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

@ -67,7 +67,7 @@ export default function QuestionAggregateBadge({
<li <li
key={key} key={key}
className="flex justify-between gap-x-4 rtl:flex-row-reverse"> className="flex justify-between gap-x-4 rtl:flex-row-reverse">
<span className="flex text-start font-bold">{key}</span> <span className="flex text-start font-semibold">{key}</span>
<span className="float-end">{value}</span> <span className="float-end">{value}</span>
</li> </li>
))} ))}

165
apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
Unescape View File

@ -1,3 +1,4 @@
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline'; import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
@ -7,6 +8,7 @@ import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem'
import FullAnswerCard from '~/components/questions/card/FullAnswerCard'; import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
import FullScreenSpinner from '~/components/questions/FullScreenSpinner'; import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
import { APP_TITLE } from '~/utils/questions/constants';
import { useFormRegister } from '~/utils/questions/useFormRegister'; import { useFormRegister } from '~/utils/questions/useFormRegister';
import { trpc } from '~/utils/trpc'; import { trpc } from '~/utils/trpc';
@ -64,91 +66,98 @@ export default function QuestionPage() {
} }
return ( return (
<div className="flex w-full flex-1 items-stretch pb-4"> <>
<div className="flex items-baseline gap-2 py-4 pl-4"> <Head>
<Button <title>
addonPosition="start" {answer.content} - {APP_TITLE}
display="inline" </title>
href={`/questions/${router.query.questionId}/${router.query.questionSlug}`} </Head>
icon={ArrowSmallLeftIcon} <div className="flex w-full flex-1 items-stretch pb-4">
label="Back" <div className="flex items-baseline gap-2 py-4 pl-4">
variant="secondary" <Button
/> addonPosition="start"
</div> display="inline"
<div className="flex w-full justify-center overflow-y-auto py-4 px-5"> href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}
<div className="flex max-w-7xl flex-1 flex-col gap-2"> icon={ArrowSmallLeftIcon}
<FullAnswerCard label="Back"
answerId={answer.id} variant="secondary"
authorImageUrl={answer.userImage}
authorName={answer.user}
content={answer.content}
createdAt={answer.createdAt}
upvoteCount={answer.numVotes}
/> />
<div className="mx-2"> </div>
<form <div className="flex w-full justify-center overflow-y-auto py-4 px-5">
className="mb-2" <div className="flex max-w-7xl flex-1 flex-col gap-2">
onSubmit={handleCommentSubmit(handleSubmitComment)}> <FullAnswerCard
<TextArea answerId={answer.id}
{...commentRegister('commentContent', { authorImageUrl={answer.userImage}
minLength: 1, authorName={answer.user}
required: true, content={answer.content}
})} createdAt={answer.createdAt}
label="Post a comment" upvoteCount={answer.numVotes}
required={true} />
resize="vertical" <div className="mx-2">
rows={2} <form
/> className="mb-2"
<div className="my-3 flex justify-between"> onSubmit={handleCommentSubmit(handleSubmitComment)}>
<div className="flex items-baseline gap-2"> <TextArea
<span aria-hidden={true} className="text-sm"> {...commentRegister('commentContent', {
Sort by: minLength: 1,
</span> required: true,
<Select })}
display="inline" label="Post a comment"
isLabelHidden={true} required={true}
label="Sort by" resize="vertical"
options={[ rows={2}
{ />
label: 'Most recent', <div className="my-3 flex justify-between">
value: 'most-recent', <div className="flex items-baseline gap-2">
}, <span aria-hidden={true} className="text-sm">
{ Sort by:
label: 'Most upvotes', </span>
value: 'most-upvotes', <Select
}, display="inline"
]} isLabelHidden={true}
value="most-recent" label="Sort by"
onChange={(value) => { options={[
// eslint-disable-next-line no-console {
console.log(value); label: 'Most recent',
}} value: 'most-recent',
},
{
label: 'Most upvotes',
value: 'most-upvotes',
},
]}
value="most-recent"
onChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}
/>
</div>
<Button
disabled={!isCommentDirty || !isCommentValid}
label="Post"
type="submit"
variant="primary"
/> />
</div> </div>
</form>
<Button {(comments ?? []).map((comment) => (
disabled={!isCommentDirty || !isCommentValid} <AnswerCommentListItem
label="Post" key={comment.id}
type="submit" answerCommentId={comment.id}
variant="primary" authorImageUrl={comment.userImage}
authorName={comment.user}
content={comment.content}
createdAt={comment.createdAt}
upvoteCount={comment.numVotes}
/> />
</div> ))}
</form> </div>
{(comments ?? []).map((comment) => (
<AnswerCommentListItem
key={comment.id}
answerCommentId={comment.id}
authorImageUrl={comment.userImage}
authorName={comment.user}
content={comment.content}
createdAt={comment.createdAt}
upvoteCount={comment.numVotes}
/>
))}
</div> </div>
</div> </div>
</div> </div>
</div> </>
); );
} }

275
apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
Unescape View File

@ -1,3 +1,4 @@
import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline'; import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
@ -8,6 +9,7 @@ import FullQuestionCard from '~/components/questions/card/question/FullQuestionC
import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard'; import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
import FullScreenSpinner from '~/components/questions/FullScreenSpinner'; import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
import { APP_TITLE } from '~/utils/questions/constants';
import createSlug from '~/utils/questions/createSlug'; import createSlug from '~/utils/questions/createSlug';
import { useFormRegister } from '~/utils/questions/useFormRegister'; import { useFormRegister } from '~/utils/questions/useFormRegister';
import { trpc } from '~/utils/trpc'; import { trpc } from '~/utils/trpc';
@ -112,57 +114,125 @@ export default function QuestionPage() {
} }
return ( return (
<div className="flex w-full flex-1 items-stretch pb-4"> <>
<div className="flex items-baseline gap-2 py-4 pl-4"> <Head>
<Button <title>
addonPosition="start" {question.content} - {APP_TITLE}
display="inline" </title>
href="/questions" </Head>
icon={ArrowSmallLeftIcon} <div className="flex w-full flex-1 items-stretch pb-4">
label="Back" <div className="flex items-baseline gap-2 py-4 pl-4">
variant="secondary" <Button
/> addonPosition="start"
</div> display="inline"
<div className="flex w-full justify-center overflow-y-auto py-4 px-5"> href="/questions"
<div className="flex max-w-7xl flex-1 flex-col gap-2"> icon={ArrowSmallLeftIcon}
<FullQuestionCard label="Back"
{...question} variant="secondary"
companies={aggregatedEncounters?.companyCounts ?? {}}
locations={aggregatedEncounters?.locationCounts ?? {}}
questionId={question.id}
receivedCount={undefined}
roles={aggregatedEncounters?.roleCounts ?? {}}
timestamp={question.seenAt.toLocaleDateString(undefined, {
month: 'short',
year: 'numeric',
})}
upvoteCount={question.numVotes}
onReceivedSubmit={(data) => {
addEncounter({
companyId: data.company,
location: data.location,
questionId: questionId as string,
role: data.role,
seenAt: data.seenAt,
});
}}
/> />
<div className="mx-2"> </div>
<Collapsible label={`${(comments ?? []).length} comment(s)`}> <div className="flex w-full justify-center overflow-y-auto py-4 px-5">
<form <div className="flex max-w-7xl flex-1 flex-col gap-2">
className="mb-2" <FullQuestionCard
onSubmit={handleCommentSubmit(handleSubmitComment)}> {...question}
<TextArea companies={aggregatedEncounters?.companyCounts ?? {}}
{...commentRegister('commentContent', { locations={aggregatedEncounters?.locationCounts ?? {}}
minLength: 1, questionId={question.id}
required: true, receivedCount={undefined}
})} roles={aggregatedEncounters?.roleCounts ?? {}}
label="Post a comment" timestamp={question.seenAt.toLocaleDateString(undefined, {
required={true} month: 'short',
resize="vertical" year: 'numeric',
rows={2} })}
/> upvoteCount={question.numVotes}
<div className="my-3 flex justify-between"> onReceivedSubmit={(data) => {
addEncounter({
companyId: data.company,
location: data.location,
questionId: questionId as string,
role: data.role,
seenAt: data.seenAt,
});
}}
/>
<div className="mx-2">
<Collapsible label={`${(comments ?? []).length} comment(s)`}>
<form
className="mb-2"
onSubmit={handleCommentSubmit(handleSubmitComment)}>
<TextArea
{...commentRegister('commentContent', {
minLength: 1,
required: true,
})}
label="Post a comment"
required={true}
resize="vertical"
rows={2}
/>
<div className="my-3 flex justify-between">
<div className="flex items-baseline gap-2">
<span aria-hidden={true} className="text-sm">
Sort by:
</span>
<Select
display="inline"
isLabelHidden={true}
label="Sort by"
options={[
{
label: 'Most recent',
value: 'most-recent',
},
{
label: 'Most upvotes',
value: 'most-upvotes',
},
]}
value="most-recent"
onChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}
/>
</div>
<Button
disabled={!isCommentDirty || !isCommentValid}
label="Post"
type="submit"
variant="primary"
/>
</div>
</form>
{(comments ?? []).map((comment) => (
<AnswerCommentListItem
key={comment.id}
answerCommentId={comment.id}
authorImageUrl={comment.userImage}
authorName={comment.user}
content={comment.content}
createdAt={comment.createdAt}
upvoteCount={comment.numVotes}
/>
))}
</Collapsible>
</div>
<form onSubmit={handleSubmit(handleSubmitAnswer)}>
<TextArea
{...answerRegister('answerContent', {
minLength: 1,
required: true,
})}
label="Contribute your answer"
required={true}
resize="vertical"
rows={5}
/>
<div className="mt-3 mb-1 flex justify-between">
<div className="flex items-baseline justify-start gap-2">
<p>{(answers ?? []).length} answers</p>
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<span aria-hidden={true} className="text-sm"> <span aria-hidden={true} className="text-sm">
Sort by: Sort by:
@ -188,94 +258,33 @@ export default function QuestionPage() {
}} }}
/> />
</div> </div>
<Button
disabled={!isCommentDirty || !isCommentValid}
label="Post"
type="submit"
variant="primary"
/>
</div> </div>
</form> <Button
disabled={!isDirty || !isValid}
{(comments ?? []).map((comment) => ( label="Contribute"
<AnswerCommentListItem type="submit"
key={comment.id} variant="primary"
answerCommentId={comment.id}
authorImageUrl={comment.userImage}
authorName={comment.user}
content={comment.content}
createdAt={comment.createdAt}
upvoteCount={comment.numVotes}
/> />
))}
</Collapsible>
</div>
<form onSubmit={handleSubmit(handleSubmitAnswer)}>
<TextArea
{...answerRegister('answerContent', {
minLength: 1,
required: true,
})}
label="Contribute your answer"
required={true}
resize="vertical"
rows={5}
/>
<div className="mt-3 mb-1 flex justify-between">
<div className="flex items-baseline justify-start gap-2">
<p>{(answers ?? []).length} answers</p>
<div className="flex items-baseline gap-2">
<span aria-hidden={true} className="text-sm">
Sort by:
</span>
<Select
display="inline"
isLabelHidden={true}
label="Sort by"
options={[
{
label: 'Most recent',
value: 'most-recent',
},
{
label: 'Most upvotes',
value: 'most-upvotes',
},
]}
value="most-recent"
onChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}
/>
</div>
</div> </div>
<Button </form>
disabled={!isDirty || !isValid} {(answers ?? []).map((answer) => (
label="Contribute" <QuestionAnswerCard
type="submit" key={answer.id}
variant="primary" answerId={answer.id}
authorImageUrl={answer.userImage}
authorName={answer.user}
commentCount={answer.numComments}
content={answer.content}
createdAt={answer.createdAt}
href={`${router.asPath}/answer/${answer.id}/${createSlug(
answer.content,
)}`}
upvoteCount={answer.numVotes}
/> />
</div> ))}
</form> </div>
{(answers ?? []).map((answer) => (
<QuestionAnswerCard
key={answer.id}
answerId={answer.id}
authorImageUrl={answer.userImage}
authorName={answer.user}
commentCount={answer.numComments}
content={answer.content}
createdAt={answer.createdAt}
href={`${router.asPath}/answer/${answer.id}/${createSlug(
answer.content,
)}`}
upvoteCount={answer.numVotes}
/>
))}
</div> </div>
</div> </div>
</div> </>
); );
} }

15
apps/portal/src/pages/questions/history.tsx
Unescape View File

@ -1,7 +1,16 @@
import Head from 'next/head';
import { APP_TITLE } from '~/utils/questions/constants';
export default function HistoryPage() { export default function HistoryPage() {
return ( return (
<div className="v-full flex w-full items-center justify-center"> <>
<h1 className="text-center text-4xl font-bold">History</h1> <Head>
</div> <title>History - {APP_TITLE}</title>
</Head>
<div className="v-full flex w-full items-center justify-center">
<h1 className="text-center text-4xl font-bold">History</h1>
</div>
</>
); );
} }

182
apps/portal/src/pages/questions/index.tsx
Unescape View File

@ -1,4 +1,5 @@
import { subMonths, subYears } from 'date-fns'; import { subMonths, subYears } from 'date-fns';
import Head from 'next/head';
import Router, { useRouter } from 'next/router'; import Router, { useRouter } from 'next/router';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { NoSymbolIcon } from '@heroicons/react/24/outline'; import { NoSymbolIcon } from '@heroicons/react/24/outline';
@ -13,6 +14,7 @@ import LandingComponent from '~/components/questions/LandingComponent';
import QuestionSearchBar from '~/components/questions/QuestionSearchBar'; import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
import type { QuestionAge } from '~/utils/questions/constants'; import type { QuestionAge } from '~/utils/questions/constants';
import { APP_TITLE } from '~/utils/questions/constants';
import { ROLES } from '~/utils/questions/constants'; import { ROLES } from '~/utils/questions/constants';
import { import {
COMPANIES, COMPANIES,
@ -330,94 +332,104 @@ export default function QuestionsHomePage() {
</div> </div>
); );
return !hasLanded ? ( return (
<LandingComponent onLanded={handleLandingQuery}></LandingComponent> <>
) : ( <Head>
<main className="flex flex-1 flex-col items-stretch"> <title>Home - {APP_TITLE}</title>
<div className="flex h-full flex-1"> </Head>
<section className="flex min-h-0 flex-1 flex-col items-center overflow-auto"> {!hasLanded ? (
<div className="flex min-h-0 max-w-3xl flex-1 p-4"> <LandingComponent onLanded={handleLandingQuery}></LandingComponent>
<div className="flex flex-1 flex-col items-stretch justify-start gap-4"> ) : (
<ContributeQuestionCard <main className="flex flex-1 flex-col items-stretch">
onSubmit={(data) => { <div className="flex h-full flex-1">
createQuestion({ <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
companyId: data.company, <div className="flex min-h-0 max-w-3xl flex-1 p-4">
content: data.questionContent, <div className="flex flex-1 flex-col items-stretch justify-start gap-4">
location: data.location, <ContributeQuestionCard
questionType: data.questionType, onSubmit={(data) => {
role: data.role, createQuestion({
seenAt: data.date, companyId: data.company,
}); content: data.questionContent,
}} location: data.location,
/> questionType: data.questionType,
<QuestionSearchBar role: data.role,
sortOptions={[ seenAt: data.date,
{ });
label: 'Most recent', }}
value: 'most-recent',
},
{
label: 'Most upvotes',
value: 'most-upvotes',
},
]}
sortValue="most-recent"
onFilterOptionsToggle={() => {
setFilterDrawerOpen(!filterDrawerOpen);
}}
onSortChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}
/>
<div className="flex flex-col gap-4 pb-4">
{(questions ?? []).map((question) => (
<QuestionOverviewCard
key={question.id}
answerCount={question.numAnswers}
companies={{ [question.company]: 1 }}
content={question.content}
href={`/questions/${question.id}/${createSlug(
question.content,
)}`}
locations={{ [question.location]: 1 }}
questionId={question.id}
receivedCount={question.receivedCount}
roles={{ [question.role]: 1 }}
timestamp={question.seenAt.toLocaleDateString(undefined, {
month: 'short',
year: 'numeric',
})}
type={question.type}
upvoteCount={question.numVotes}
/> />
))} <QuestionSearchBar
{questions?.length === 0 && ( sortOptions={[
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600"> {
<NoSymbolIcon className="h-6 w-6" /> label: 'Most recent',
<p>Nothing found. Try changing your search filters.</p> value: 'most-recent',
},
{
label: 'Most upvotes',
value: 'most-upvotes',
},
]}
sortValue="most-recent"
onFilterOptionsToggle={() => {
setFilterDrawerOpen(!filterDrawerOpen);
}}
onSortChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}
/>
<div className="flex flex-col gap-4 pb-4">
{(questions ?? []).map((question) => (
<QuestionOverviewCard
key={question.id}
answerCount={question.numAnswers}
companies={{ [question.company]: 1 }}
content={question.content}
href={`/questions/${question.id}/${createSlug(
question.content,
)}`}
locations={{ [question.location]: 1 }}
questionId={question.id}
receivedCount={question.receivedCount}
roles={{ [question.role]: 1 }}
timestamp={question.seenAt.toLocaleDateString(
undefined,
{
month: 'short',
year: 'numeric',
},
)}
type={question.type}
upvoteCount={question.numVotes}
/>
))}
{questions?.length === 0 && (
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
<NoSymbolIcon className="h-6 w-6" />
<p>Nothing found. Try changing your search filters.</p>
</div>
)}
</div> </div>
)} </div>
</div> </div>
</div> </section>
<aside className="hidden w-[300px] overflow-y-auto border-l bg-white py-4 lg:block">
<h2 className="px-4 text-xl font-semibold">Filter by</h2>
{filterSidebar}
</aside>
<SlideOut
className="lg:hidden"
enterFrom="end"
isShown={filterDrawerOpen}
size="sm"
title="Filter by"
onClose={() => {
setFilterDrawerOpen(false);
}}>
{filterSidebar}
</SlideOut>
</div> </div>
</section> </main>
<aside className="hidden w-[300px] overflow-y-auto border-l bg-white py-4 lg:block"> )}
<h2 className="px-4 text-xl font-semibold">Filter by</h2> </>
{filterSidebar}
</aside>
<SlideOut
className="lg:hidden"
enterFrom="end"
isShown={filterDrawerOpen}
size="sm"
title="Filter by"
onClose={() => {
setFilterDrawerOpen(false);
}}>
{filterSidebar}
</SlideOut>
</div>
</main>
); );
} }

130
apps/portal/src/pages/questions/lists.tsx
Unescape View File

@ -1,3 +1,4 @@
import Head from 'next/head';
import { useState } from 'react'; import { useState } from 'react';
import { Menu } from '@headlessui/react'; import { Menu } from '@headlessui/react';
import { import {
@ -9,6 +10,7 @@ import {
import QuestionListCard from '~/components/questions/card/question/QuestionListCard'; import QuestionListCard from '~/components/questions/card/question/QuestionListCard';
import { Button } from '~/../../../packages/ui/dist'; import { Button } from '~/../../../packages/ui/dist';
import { APP_TITLE } from '~/utils/questions/constants';
import { SAMPLE_QUESTION } from '~/utils/questions/constants'; import { SAMPLE_QUESTION } from '~/utils/questions/constants';
import createSlug from '~/utils/questions/createSlug'; import createSlug from '~/utils/questions/createSlug';
@ -103,67 +105,75 @@ export default function ListPage() {
</> </>
); );
return ( return (
<main className="flex flex-1 flex-col items-stretch"> <>
<div className="flex h-full flex-1"> <Head>
<aside className="w-[300px] overflow-y-auto border-l bg-white py-4 lg:block"> <title>My Lists - {APP_TITLE}</title>
<div className="mb-2 flex items-center justify-between"> </Head>
<h2 className="px-4 text-xl font-semibold">My Lists</h2> <main className="flex flex-1 flex-col items-stretch">
<div className="px-4"> <div className="flex h-full flex-1">
<Button <aside className="w-[300px] overflow-y-auto border-l bg-white py-4 lg:block">
icon={PlusIcon} <div className="mb-2 flex items-center justify-between">
isLabelHidden={true} <h2 className="px-4 text-xl font-semibold">My Lists</h2>
label="Create" <div className="px-4">
size="md" <Button
variant="tertiary" icon={PlusIcon}
onClick={(e) => { isLabelHidden={true}
e.preventDefault(); label="Create"
e.stopPropagation(); size="md"
}} variant="tertiary"
/> onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
/>
</div>
</div> </div>
</div> {listOptions}
{listOptions} </aside>
</aside> <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
<section className="flex min-h-0 flex-1 flex-col items-center overflow-auto"> <div className="flex min-h-0 max-w-3xl flex-1 p-4">
<div className="flex min-h-0 max-w-3xl flex-1 p-4"> <div className="flex flex-1 flex-col items-stretch justify-start gap-4">
<div className="flex flex-1 flex-col items-stretch justify-start gap-4"> {selectedList && (
{selectedList && ( <div className="flex flex-col gap-4 pb-4">
<div className="flex flex-col gap-4 pb-4"> {(questions ?? []).map((question) => (
{(questions ?? []).map((question) => ( <QuestionListCard
<QuestionListCard key={question.id}
key={question.id} companies={question.companies}
companies={question.companies} content={question.content}
content={question.content} href={`/questions/${question.id}/${createSlug(
href={`/questions/${question.id}/${createSlug( question.content,
question.content, )}`}
)}`} locations={question.locations}
locations={question.locations} questionId={question.id}
questionId={question.id} receivedCount={0}
receivedCount={0} roles={question.roles}
roles={question.roles} timestamp={question.seenAt.toLocaleDateString(
timestamp={question.seenAt.toLocaleDateString(undefined, { undefined,
month: 'short', {
year: 'numeric', month: 'short',
})} year: 'numeric',
type={question.type} },
onDelete={() => { )}
// eslint-disable-next-line no-console type={question.type}
console.log('delete'); onDelete={() => {
}} // eslint-disable-next-line no-console
/> console.log('delete');
))} }}
{questions?.length === 0 && ( />
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600"> ))}
<NoSymbolIcon className="h-6 w-6" /> {questions?.length === 0 && (
<p>You have no added any questions to your list yet.</p> <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
</div> <NoSymbolIcon className="h-6 w-6" />
)} <p>You have no added any questions to your list yet.</p>
</div> </div>
)} )}
</div>
)}
</div>
</div> </div>
</div> </section>
</section> </div>
</div> </main>
</main> </>
); );
} }

15
apps/portal/src/pages/questions/my-questions.tsx
Unescape View File

@ -1,7 +1,16 @@
import Head from 'next/head';
import { APP_TITLE } from '~/utils/questions/constants';
export default function MyQuestionsPage() { export default function MyQuestionsPage() {
return ( return (
<div className="v-full flex w-full items-center justify-center"> <>
<h1 className="text-center text-4xl font-bold">My Questions</h1> <Head>
</div> <title>My Questions - {APP_TITLE}</title>
</Head>
<div className="v-full flex w-full items-center justify-center">
<h1 className="text-center text-4xl font-bold">My Questions</h1>
</div>
</>
); );
} }

2
apps/portal/src/utils/questions/constants.ts
Unescape View File

@ -2,6 +2,8 @@ import { QuestionsQuestionType } from '@prisma/client';
import type { FilterChoices } from '~/components/questions/filter/FilterSection'; import type { FilterChoices } from '~/components/questions/filter/FilterSection';
export const APP_TITLE = 'Questions Bank';
export const COMPANIES: FilterChoices = [ export const COMPANIES: FilterChoices = [
{ {
id: 'Google', id: 'Google',

Write Preview
Loading…
Cancel
Save