[questions][ui] add page titles

pull/411/head
Jeff Sieu 3 years ago
parent d5f024f872
commit 1361c5bfab

@ -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>
))} ))}

@ -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,6 +66,12 @@ export default function QuestionPage() {
} }
return ( return (
<>
<Head>
<title>
{answer.content} - {APP_TITLE}
</title>
</Head>
<div className="flex w-full flex-1 items-stretch pb-4"> <div className="flex w-full flex-1 items-stretch pb-4">
<div className="flex items-baseline gap-2 py-4 pl-4"> <div className="flex items-baseline gap-2 py-4 pl-4">
<Button <Button
@ -150,5 +158,6 @@ export default function QuestionPage() {
</div> </div>
</div> </div>
</div> </div>
</>
); );
} }

@ -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,6 +114,12 @@ export default function QuestionPage() {
} }
return ( return (
<>
<Head>
<title>
{question.content} - {APP_TITLE}
</title>
</Head>
<div className="flex w-full flex-1 items-stretch pb-4"> <div className="flex w-full flex-1 items-stretch pb-4">
<div className="flex items-baseline gap-2 py-4 pl-4"> <div className="flex items-baseline gap-2 py-4 pl-4">
<Button <Button
@ -277,5 +285,6 @@ export default function QuestionPage() {
</div> </div>
</div> </div>
</div> </div>
</>
); );
} }

@ -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 (
<>
<Head>
<title>History - {APP_TITLE}</title>
</Head>
<div className="v-full flex w-full items-center justify-center"> <div className="v-full flex w-full items-center justify-center">
<h1 className="text-center text-4xl font-bold">History</h1> <h1 className="text-center text-4xl font-bold">History</h1>
</div> </div>
</>
); );
} }

@ -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,7 +332,12 @@ export default function QuestionsHomePage() {
</div> </div>
); );
return !hasLanded ? ( return (
<>
<Head>
<title>Home - {APP_TITLE}</title>
</Head>
{!hasLanded ? (
<LandingComponent onLanded={handleLandingQuery}></LandingComponent> <LandingComponent onLanded={handleLandingQuery}></LandingComponent>
) : ( ) : (
<main className="flex flex-1 flex-col items-stretch"> <main className="flex flex-1 flex-col items-stretch">
@ -384,10 +391,13 @@ export default function QuestionsHomePage() {
questionId={question.id} questionId={question.id}
receivedCount={question.receivedCount} receivedCount={question.receivedCount}
roles={{ [question.role]: 1 }} roles={{ [question.role]: 1 }}
timestamp={question.seenAt.toLocaleDateString(undefined, { timestamp={question.seenAt.toLocaleDateString(
undefined,
{
month: 'short', month: 'short',
year: 'numeric', year: 'numeric',
})} },
)}
type={question.type} type={question.type}
upvoteCount={question.numVotes} upvoteCount={question.numVotes}
/> />
@ -419,5 +429,7 @@ export default function QuestionsHomePage() {
</SlideOut> </SlideOut>
</div> </div>
</main> </main>
)}
</>
); );
} }

@ -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,6 +105,10 @@ export default function ListPage() {
</> </>
); );
return ( return (
<>
<Head>
<title>My Lists - {APP_TITLE}</title>
</Head>
<main className="flex flex-1 flex-col items-stretch"> <main className="flex flex-1 flex-col items-stretch">
<div className="flex h-full flex-1"> <div className="flex h-full flex-1">
<aside className="w-[300px] overflow-y-auto border-l bg-white py-4 lg:block"> <aside className="w-[300px] overflow-y-auto border-l bg-white py-4 lg:block">
@ -141,10 +147,13 @@ export default function ListPage() {
questionId={question.id} questionId={question.id}
receivedCount={0} receivedCount={0}
roles={question.roles} roles={question.roles}
timestamp={question.seenAt.toLocaleDateString(undefined, { timestamp={question.seenAt.toLocaleDateString(
undefined,
{
month: 'short', month: 'short',
year: 'numeric', year: 'numeric',
})} },
)}
type={question.type} type={question.type}
onDelete={() => { onDelete={() => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
@ -165,5 +174,6 @@ export default function ListPage() {
</section> </section>
</div> </div>
</main> </main>
</>
); );
} }

@ -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 (
<>
<Head>
<title>My Questions - {APP_TITLE}</title>
</Head>
<div className="v-full flex w-full items-center justify-center"> <div className="v-full flex w-full items-center justify-center">
<h1 className="text-center text-4xl font-bold">My Questions</h1> <h1 className="text-center text-4xl font-bold">My Questions</h1>
</div> </div>
</>
); );
} }

@ -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',

Loading…
Cancel
Save