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