LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(i18n): modals, Hero, Nav

Browse Source
This commit is contained in:
ManishMadan2882
2024-05-28 20:50:07 +05:30
parent 4fcc80719e
commit 99952a393f
10 changed files with 237 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/Hero.tsx
View File

@@ -1,28 +1,15 @@
import DocsGPT3 from './assets/cute_docsgpt3.svg';
const demos: { header: string; query: string }[] = [
{
header: 'Learn about DocsGPT',
query: 'What is DocsGPT?',
},
{
header: 'Summarise documentation',
query: 'Summarise current context',
},
{
header: 'Write Code',
query: 'Write code for api request to /api/answer',
},
{
header: 'Learning Assistance',
query: 'Write potential questions for context',
},
];
import { useTranslation } from 'react-i18next';
export default function Hero({
handleQuestion,
}: {
handleQuestion: (question: string) => void;
}) {
const { t } = useTranslation();
const demos = t('demo', { returnObjects: true }) as Array<{
header: string;
query: string;
}>;
return (
<div
className={`mt-14 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
@@ -36,19 +23,23 @@ export default function Hero({
<div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
</div>
<div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:text-sm lg:grid-cols-2">
{demos.map((demo) => (
<>
<button
onClick={() => handleQuestion(demo.query)}
className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
>
<p className="mb-1 font-semibold text-black dark:text-silver">
{demo.header}
</p>
<span className="text-gray-400">{demo.query}</span>
</button>
</>
))}
{demos?.map(
(demo: { header: string; query: string }) =>
demo.header &&
demo.query && (
<>
<button
onClick={() => handleQuestion(demo.query)}
className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
>
<p className="mb-1 font-semibold text-black dark:text-silver">
{demo.header}
</p>
<span className="text-gray-400">{demo.query}</span>
</button>
</>
),
)}
</div>
</div>
);