Compare commits
3 Commits
df25ca2b35
...
0fca348270
| Author | SHA1 | Date |
|---|---|---|
Jason Qin
|
0fca348270 | |
|
Jason Qin
|
9447d4522f | |
|
Jason Qin
|
71a3519720 |
|
|
@ -0,0 +1,5 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
|
|
@ -1,8 +1,9 @@
|
||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core'
|
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid, Space, Divider } from '@mantine/core'
|
||||||
import Example from './query'
|
import NextImage from 'next/image'
|
||||||
|
import Prawn from "../images/aussietigerprawns.jpg"
|
||||||
|
|
||||||
interface InventoryItem {
|
interface InventoryItem {
|
||||||
id: number
|
id: number
|
||||||
|
|
@ -13,9 +14,6 @@ interface InventoryItem {
|
||||||
|
|
||||||
async function fetchBlob(url: string) {
|
async function fetchBlob(url: string) {
|
||||||
const response = await fetch(url)
|
const response = await fetch(url)
|
||||||
|
|
||||||
// Here is the significant part
|
|
||||||
// reading the stream as a blob instead of json
|
|
||||||
return response.blob()
|
return response.blob()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -51,7 +49,7 @@ export default function InventoryPage() {
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
<Container size="md" >
|
<Container size="md" >
|
||||||
<Paper >
|
{/* <Paper >
|
||||||
<Table>
|
<Table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -72,9 +70,11 @@ export default function InventoryPage() {
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
</Paper>
|
</Paper> */}
|
||||||
|
|
||||||
<Flex style={{ marginTop: theme.spacing.md }}>
|
{/* use a grid */}
|
||||||
|
|
||||||
|
<Flex gap="md" style={{ marginTop: theme.spacing.md }}>
|
||||||
<TextInput
|
<TextInput
|
||||||
label="Item name"
|
label="Item name"
|
||||||
placeholder="Enter item name"
|
placeholder="Enter item name"
|
||||||
|
|
@ -96,20 +96,30 @@ export default function InventoryPage() {
|
||||||
<Button onClick={addItem}>Add item</Button>
|
<Button onClick={addItem}>Add item</Button>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Container>
|
</Container>
|
||||||
<Flex
|
|
||||||
id="GRID OF ITEMS"
|
<Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 'xl' }}>
|
||||||
mih={50}
|
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
||||||
bg="rgba(0, 0, 0, .3)"
|
<NextImage width={150} src={Prawn} alt="ITEM" />
|
||||||
gap="md"
|
</Grid.Col>
|
||||||
justify="flex-start"
|
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
||||||
align="flex-start"
|
<NextImage width={150} src={Prawn} alt="ITEM" />
|
||||||
direction="row"
|
</Grid.Col>
|
||||||
wrap="wrap"
|
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
||||||
>
|
<NextImage width={150} src={Prawn} alt="ITEM" />
|
||||||
{/* would fetch the source from axios */}
|
</Grid.Col>
|
||||||
<Image src="x.png" alt="ITEM" />
|
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
||||||
<Example />
|
<NextImage width={150} src={Prawn} alt="ITEM" />
|
||||||
</Flex>
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* <Grid>
|
||||||
|
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col>
|
||||||
|
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col>
|
||||||
|
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col>
|
||||||
|
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
|
||||||
|
</Grid> */}
|
||||||
|
|
||||||
|
{/* why is there a scroll area on the grid */}
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
// "use client"
|
|
||||||
|
|
||||||
import '@mantine/core/styles.css'
|
import '@mantine/core/styles.css'
|
||||||
import {
|
import {
|
||||||
hydrate,
|
hydrate,
|
||||||
|
|
@ -7,7 +5,6 @@ import {
|
||||||
QueryClientProvider,
|
QueryClientProvider,
|
||||||
} from '@tanstack/react-query'
|
} from '@tanstack/react-query'
|
||||||
import { ColorSchemeScript, MantineProvider } from '@mantine/core'
|
import { ColorSchemeScript, MantineProvider } from '@mantine/core'
|
||||||
// import { useState } from 'react'
|
|
||||||
import Providers from './query-provider'
|
import Providers from './query-provider'
|
||||||
import Search from './search'
|
import Search from './search'
|
||||||
|
|
||||||
|
|
@ -16,30 +13,23 @@ export const metadata = {
|
||||||
description: 'I have followed setup instructions carefully',
|
description: 'I have followed setup instructions carefully',
|
||||||
}
|
}
|
||||||
|
|
||||||
// const queryClient = new QueryClient()
|
import "./global.css"
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
// const [queryClient] = useState(() => new QueryClient())
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<ColorSchemeScript />
|
<ColorSchemeScript />
|
||||||
</head>
|
</head>
|
||||||
{/* <header> */}
|
|
||||||
{/* <Search /> */}
|
|
||||||
{/* </header> */}
|
|
||||||
<body>
|
<body>
|
||||||
{/* can add a theme */}
|
|
||||||
{/* <QueryClientProvider client={queryClient}> */}
|
|
||||||
<Providers>
|
<Providers>
|
||||||
<MantineProvider>{children}</MantineProvider>
|
<MantineProvider>{children}</MantineProvider>
|
||||||
</Providers>
|
</Providers>
|
||||||
{/* </QueryClientProvider> */}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|
|
||||||