Skip to content

Commit fc201b5

Browse files
poppyseedDevpoppyseedDev
committed
adding tailwind, change header
1 parent 4f98300 commit fc201b5

File tree

8 files changed

+367
-134
lines changed

8 files changed

+367
-134
lines changed

‎lib/FooterLinks/FooterLinks.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { Text, Container, ActionIcon, Group, rem } from '@mantine/core';
1+
import { Text, Container, ActionIcon, Group, rem, Title } from '@mantine/core';
22
import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons-react';
33
import { MantineLogo } from '@mantinex/mantine-logo';
44
import classes from './FooterLinks.module.css';
5+
import Logo from '../../public/log.svg';
6+
import Image from 'next/image';
57

68
const data = [
79
{
@@ -59,16 +61,29 @@ export function FooterLinks() {
5961
<footer className={classes.footer}>
6062
<Container className={classes.inner}>
6163
<div className={classes.logo}>
62-
<MantineLogo size={30} />
64+
<Title mb='10' order={1} style={{fontWeight: 900, fontSize: '1.5rem', textAlign: 'center', display: 'flex', justifyContent: 'center'}}>
65+
<Image src={Logo} alt="Logo" width={28} />
66+
<Text
67+
component="span"
68+
inherit
69+
ml={5}
70+
variant="gradient"
71+
gradient={{ from: '#3EADEC', to: '#236286' }}
72+
73+
>
74+
Octagon AI
75+
</Text>
76+
77+
</Title>
6378
<Text size="xs" c="dimmed" className={classes.description}>
64-
Build fully functional accessible web applications faster than ever
79+
Where your AI project lives.
6580
</Text>
6681
</div>
6782
<div className={classes.groups}>{groups}</div>
6883
</Container>
6984
<Container className={classes.afterFooter}>
7085
<Text c="dimmed" size="sm">
71-
© 2020 mantine.dev. All rights reserved.
86+
© 2024 Octagon AI. All rights reserved.
7287
</Text>
7388

7489
<Group gap={0} className={classes.social} justify="flex-end" wrap="nowrap">

‎lib/HeaderMegaMenu/HeaderMegaMenu.tsx‎

Lines changed: 62 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,18 @@ import {
3131
IconChevronDown,
3232
} from '@tabler/icons-react';
3333
import classes from './HeaderMegaMenu.module.css';
34-
import { IconOctagon, IconOctagonFilled, IconOctagonMinus, IconOctagonMinus2 } from '@tabler/icons-react';
34+
import {
35+
IconOctagon,
36+
IconOctagonFilled,
37+
IconOctagonMinus,
38+
IconOctagonMinus2,
39+
} from '@tabler/icons-react';
3540
import Logo from '../../public/log.svg';
41+
import {
42+
DynamicContextProvider,
43+
DynamicWidget,
44+
} from '@dynamic-labs/sdk-react-core';
45+
import Link from 'next/link';
3646

3747
const mockdata = [
3848
{
@@ -68,15 +78,19 @@ const mockdata = [
6878
];
6979

7080
export function HeaderMegaMenu() {
71-
const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
81+
const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] =
82+
useDisclosure(false);
7283
const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
7384
const theme = useMantineTheme();
7485

7586
const links = mockdata.map((item) => (
7687
<UnstyledButton className={classes.subLink} key={item.title}>
7788
<Group wrap="nowrap" align="flex-start">
7889
<ThemeIcon size={34} variant="default" radius="md">
79-
<item.icon style={{ width: rem(22), height: rem(22) }} color={theme.colors.blue[6]} />
90+
<item.icon
91+
style={{ width: rem(22), height: rem(22) }}
92+
color={theme.colors.blue[6]}
93+
/>
8094
</ThemeIcon>
8195
<div>
8296
<Text size="sm" fw={500}>
@@ -91,81 +105,55 @@ export function HeaderMegaMenu() {
91105
));
92106

93107
return (
94-
<Box pb={0}>
108+
<Box p={10}>
95109
<header className={classes.header}>
96-
<Group justify="space-between" h="100%">
97-
<div style={{display: 'flex'}}>
98-
<Image src={Logo} alt="Logo" width={40} height={40} />
99-
<Text variant="gradient" style={{alignContent: 'space-evenly'}}
100-
gradient={{ from: '#E22732', to: '#FFFFFF' }}
101-
> <Title ml={15} order={2} style={{ fontWeight: 900, textAlign: 'right'}}>Octagon AI</Title>
102-
103-
104-
</Text>
105-
</div>
106-
<Group h="100%" gap={0} visibleFrom="sm">
107-
<a href="#" className={classes.link}>
108-
Home
109-
</a>
110-
<HoverCard width={600} position="bottom" radius="md" shadow="md" withinPortal>
111-
<HoverCard.Target>
112-
<a href="#" className={classes.link}>
113-
<Center inline>
114-
<Box component="span" mr={5}>
115-
Features
116-
</Box>
117-
<IconChevronDown
118-
style={{ width: rem(16), height: rem(16) }}
119-
color={theme.colors.blue[6]}
120-
/>
121-
</Center>
122-
</a>
123-
</HoverCard.Target>
124-
125-
<HoverCard.Dropdown style={{ overflow: 'hidden' }}>
126-
<Group justify="space-between" px="md">
127-
<Text fw={500}>Features</Text>
128-
<Anchor href="#" fz="xs">
129-
View all
130-
</Anchor>
131-
</Group>
132-
133-
<Divider my="sm" />
110+
<div className="p-10">
111+
<Group justify="space-between" h="100%">
112+
<div
113+
style={{ display: 'flex', cursor: 'pointer' }}
114+
onClick={() => (window.location.href = '/')}
115+
>
116+
<Image src={Logo} alt="Logo" width={40} height={40} />
117+
<Title
118+
ml={10}
119+
order={2}
120+
style={{
121+
fontWeight: 900,
122+
textAlign: 'right',
123+
alignContent: 'space-evenly',
124+
fontSize: '1.5rem',
125+
}}
126+
>
127+
<Text
128+
inherit
129+
variant="gradient"
130+
gradient={{ from: '#3EADEC', to: '#236286' }}
131+
size="inherit"
132+
>
133+
Octagon AI
134+
</Text>
135+
</Title>
136+
</div>
137+
<Group h="100%" gap={0} visibleFrom="sm">
138+
<Link href="/" className={classes.link}>
139+
Home
140+
</Link>
141+
<Link href="/problems" className={classes.link}>
142+
Problems
143+
</Link>
144+
</Group>
134145

135-
<SimpleGrid cols={2} spacing={0}>
136-
{links}
137-
</SimpleGrid>
146+
<Group visibleFrom="sm">
147+
<DynamicWidget />
148+
</Group>
138149

139-
<div className={classes.dropdownFooter}>
140-
<Group justify="space-between">
141-
<div>
142-
<Text fw={500} fz="sm">
143-
Get started
144-
</Text>
145-
<Text size="xs" c="dimmed">
146-
Their food sources have decreased, and their numbers
147-
</Text>
148-
</div>
149-
<Button variant="default">Get started</Button>
150-
</Group>
151-
</div>
152-
</HoverCard.Dropdown>
153-
</HoverCard>
154-
<a href="#" className={classes.link}>
155-
Learn
156-
</a>
157-
<a href="#" className={classes.link}>
158-
Academy
159-
</a>
150+
<Burger
151+
opened={drawerOpened}
152+
onClick={toggleDrawer}
153+
hiddenFrom="sm"
154+
/>
160155
</Group>
161-
162-
<Group visibleFrom="sm">
163-
<Button variant="default">Log in</Button>
164-
<Button>Sign up</Button>
165-
</Group>
166-
167-
<Burger opened={drawerOpened} onClick={toggleDrawer} hiddenFrom="sm" />
168-
</Group>
156+
</div>
169157
</header>
170158

171159
<Drawer

‎lib/TableReviews/TableReviews.tsx‎

Lines changed: 42 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,46 @@
1-
import { Table, Progress, Anchor, Text, Group } from '@mantine/core';
1+
import {
2+
Table,
3+
Progress,
4+
Anchor,
5+
Text,
6+
Group,
7+
LoadingOverlay,
8+
Button,
9+
} from '@mantine/core';
210
import classes from './TableReviews.module.css';
11+
import Link from 'next/link';
12+
import { useEffect } from 'react';
313

4-
const data = [
5-
{
6-
title: 'Foundation',
7-
author: 'Isaac Asimov',
8-
year: 1951,
9-
reviews: { positive: 2223, negative: 259 },
10-
},
11-
{
12-
title: 'Frankenstein',
13-
author: 'Mary Shelley',
14-
year: 1818,
15-
reviews: { positive: 5677, negative: 1265 },
16-
},
17-
{
18-
title: 'Solaris',
19-
author: 'Stanislaw Lem',
20-
year: 1961,
21-
reviews: { positive: 3487, negative: 1845 },
22-
},
23-
{
24-
title: 'Dune',
25-
author: 'Frank Herbert',
26-
year: 1965,
27-
reviews: { positive: 8576, negative: 663 },
28-
},
29-
{
30-
title: 'The Left Hand of Darkness',
31-
author: 'Ursula K. Le Guin',
32-
year: 1969,
33-
reviews: { positive: 6631, negative: 993 },
34-
},
35-
{
36-
title: 'A Scanner Darkly',
37-
author: 'Philip K Dick',
38-
year: 1977,
39-
reviews: { positive: 8124, negative: 1847 },
40-
},
41-
];
42-
43-
export function TableReviews() {
44-
const rows = data.map((row) => {
45-
const totalReviews = row.reviews.negative + row.reviews.positive;
46-
const positiveReviews = (row.reviews.positive / totalReviews) * 100;
47-
const negativeReviews = (row.reviews.negative / totalReviews) * 100;
14+
export function TableReviews({
15+
services,
16+
isLoading,
17+
}: {
18+
services: any;
19+
isLoading: boolean;
20+
}) {
21+
const rows = services?.map((row: any) => {
22+
const best_accuracy = parseFloat(row.best_accuracy) || 0;
23+
const positiveReviews = best_accuracy;
24+
const negativeReviews = 100 - best_accuracy;
4825

4926
return (
50-
<Table.Tr key={row.title}>
27+
<Table.Tr key={row.name}>
5128
<Table.Td>
5229
<Anchor component="button" fz="sm">
53-
{row.title}
30+
{row.name}
5431
</Anchor>
5532
</Table.Td>
56-
<Table.Td>{row.year}</Table.Td>
33+
<Table.Td>
34+
<Link href={'asd'}>View ({row.total_models})</Link>
35+
</Table.Td>
5736
<Table.Td>
5837
<Anchor component="button" fz="sm">
59-
{row.author}
38+
{row.description}
6039
</Anchor>
6140
</Table.Td>
62-
<Table.Td>{Intl.NumberFormat().format(totalReviews)}</Table.Td>
41+
<Table.Td>
42+
<Link href={row.data_url}>Download</Link>
43+
</Table.Td>
6344
<Table.Td>
6445
<Group justify="space-between">
6546
<Text fz="xs" c="teal" fw={700}>
@@ -75,28 +56,33 @@ export function TableReviews() {
7556
value={positiveReviews}
7657
color="teal"
7758
/>
78-
7959
<Progress.Section
8060
className={classes.progressSection}
8161
value={negativeReviews}
8262
color="red"
8363
/>
8464
</Progress.Root>
8565
</Table.Td>
66+
<Table.Td>
67+
<Button>
68+
<Link href={`problems/${row.id}`}>View Problem</Link>
69+
</Button>
70+
</Table.Td>
8671
</Table.Tr>
8772
);
8873
});
8974

9075
return (
9176
<Table.ScrollContainer minWidth={800}>
77+
<LoadingOverlay visible={isLoading} />
9278
<Table verticalSpacing="xs">
9379
<Table.Thead>
9480
<Table.Tr>
95-
<Table.Th>Book title</Table.Th>
96-
<Table.Th>Year</Table.Th>
97-
<Table.Th>Author</Table.Th>
98-
<Table.Th>Reviews</Table.Th>
99-
<Table.Th>Reviews distribution</Table.Th>
81+
<Table.Th>Name</Table.Th>
82+
<Table.Th>Models</Table.Th>
83+
<Table.Th>Description</Table.Th>
84+
<Table.Th>Dataset</Table.Th>
85+
<Table.Th>Current Best Result</Table.Th>
10086
</Table.Tr>
10187
</Table.Thead>
10288
<Table.Tbody>{rows}</Table.Tbody>

‎lib/TableReviewsModel/TableReviews.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.progressSection {
2+
&:not(:first-of-type) {
3+
border-left: rem(3px) solid light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
4+
}
5+
}

‎lib/TableReviewsModel/TableReviews.story.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import attributes from './attributes.json';
2+
import { StoryWrapper } from '../../components/StoryWrapper/StoryWrapper';
3+
import { TableReviews } from './TableReviews';
4+
5+
export default { title: 'TableReviews' };
6+
7+
export function Usage() {
8+
return <StoryWrapper attributes={attributes} component={TableReviews} />;
9+
}

0 commit comments

Comments
 (0)