diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index fe20215..1dd638a 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -1,6 +1,6 @@ -import { ActionIcon, createStyles, Group, Header, rem, TextInput } from "@mantine/core"; +import { ActionIcon, createStyles, Group, Header, rem, Text, TextInput } from "@mantine/core"; import { useForm } from "@mantine/form"; -import { IconSearch } from "@tabler/icons"; +import { Icon123, IconHome, IconSearch } from "@tabler/icons"; import { useRouter } from "next/router"; const useStyles = createStyles((theme) => ({ @@ -16,18 +16,6 @@ const useStyles = createStyles((theme) => ({ alignItems: "center", }, - links: { - [theme.fn.smallerThan("md")]: { - display: "none", - }, - }, - - search: { - [theme.fn.smallerThan("xs")]: { - display: "none", - }, - }, - link: { display: "block", lineHeight: 1, @@ -42,13 +30,14 @@ const useStyles = createStyles((theme) => ({ backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0], }, }, + linkText: { + [theme.fn.smallerThan("sm")]: { + display: "none", + }, + }, })); -interface HeaderSearchProps { - links: { link: string; label: string }[]; -} - -export function HeaderSearch({ links }: HeaderSearchProps) { +export function HeaderSearch() { const { classes } = useStyles(); const router = useRouter(); @@ -58,9 +47,23 @@ export function HeaderSearch({ links }: HeaderSearchProps) { }, }); - const items = links.map((link) => ( + const items = [ + { + link: "/", + label: "Home", + icon: , + }, + { + link: "/statistic", + label: "Statistic", + icon: , + }, + ].map((link) => ( - {link.label} + + {link.icon} + {link.label} + )); @@ -72,17 +75,12 @@ export function HeaderSearch({ links }: HeaderSearchProps) { } return ( -
+
{items}
- + diff --git a/components/ParagraphGrid/ParagraphGrid.tsx b/components/ParagraphGrid/ParagraphGrid.tsx index 5b6bd5e..313b2a4 100644 --- a/components/ParagraphGrid/ParagraphGrid.tsx +++ b/components/ParagraphGrid/ParagraphGrid.tsx @@ -1,4 +1,4 @@ -import { Button, Container, Grid, Group, Pagination, Title } from "@mantine/core"; +import { Button, Container, Grid, Group, Pagination, ScrollArea, Title } from "@mantine/core"; import { useDocumentTitle } from "@mantine/hooks"; import { Paragraph } from "@prisma/client"; import { IconArrowBack } from "@tabler/icons"; @@ -39,33 +39,35 @@ export default function ParagraphGrid({ } return ( - - - {title} Page {page} - - - {titleAction} - - - - {paragraphs.map((paragraph) => { - return ( - - - - ); - })} - - - - - + + + + {title} Page {page} + + + {titleAction} + + + + {paragraphs.map((paragraph) => { + return ( + + + + ); + })} + + + + + + ); } diff --git a/pages/_app.tsx b/pages/_app.tsx index 192ffab..07ecf21 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -27,18 +27,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) { - + diff --git a/pages/paragraph/[id].tsx b/pages/paragraph/[id].tsx index 3ac27e1..ec28ffa 100644 --- a/pages/paragraph/[id].tsx +++ b/pages/paragraph/[id].tsx @@ -24,8 +24,8 @@ export default function ParagraphPage({ paragraph }: { paragraph: Paragraph }) { const router = useRouter(); return ( - - + + {paragraph.title} diff --git a/pages/statistic.tsx b/pages/statistic.tsx index 008d1fe..3f2d463 100644 --- a/pages/statistic.tsx +++ b/pages/statistic.tsx @@ -100,9 +100,9 @@ export default function StatisticPage({ data }: StatsGroupProps) {
)); return ( - + Statistic - +