Compare commits
No commits in common. "0fca34827075115f11c37beb32ca1b2e35322e07" and "df25ca2b35a6d3a961ec66aaf4a4f24b017da3cd" have entirely different histories.
0fca348270
...
df25ca2b35
|
|
@ -1,5 +0,0 @@
|
||||||
html,
|
|
||||||
body {
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid, Space, Divider } from '@mantine/core'
|
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core'
|
||||||
import NextImage from 'next/image'
|
import Example from './query'
|
||||||
import Prawn from "../images/aussietigerprawns.jpg"
|
|
||||||
|
|
||||||
interface InventoryItem {
|
interface InventoryItem {
|
||||||
id: number
|
id: number
|
||||||
|
|
@ -14,6 +13,9 @@ 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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -49,7 +51,7 @@ export default function InventoryPage() {
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
<Container size="md" >
|
<Container size="md" >
|
||||||
{/* <Paper >
|
<Paper >
|
||||||
<Table>
|
<Table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -70,11 +72,9 @@ export default function InventoryPage() {
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
</Paper> */}
|
</Paper>
|
||||||
|
|
||||||
{/* use a grid */}
|
<Flex style={{ marginTop: theme.spacing.md }}>
|
||||||
|
|
||||||
<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,30 +96,20 @@ export default function InventoryPage() {
|
||||||
<Button onClick={addItem}>Add item</Button>
|
<Button onClick={addItem}>Add item</Button>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Container>
|
</Container>
|
||||||
|
<Flex
|
||||||
<Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 'xl' }}>
|
id="GRID OF ITEMS"
|
||||||
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
mih={50}
|
||||||
<NextImage width={150} src={Prawn} alt="ITEM" />
|
bg="rgba(0, 0, 0, .3)"
|
||||||
</Grid.Col>
|
gap="md"
|
||||||
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
justify="flex-start"
|
||||||
<NextImage width={150} src={Prawn} alt="ITEM" />
|
align="flex-start"
|
||||||
</Grid.Col>
|
direction="row"
|
||||||
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
wrap="wrap"
|
||||||
<NextImage width={150} src={Prawn} alt="ITEM" />
|
>
|
||||||
</Grid.Col>
|
{/* would fetch the source from axios */}
|
||||||
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
|
<Image src="x.png" alt="ITEM" />
|
||||||
<NextImage width={150} src={Prawn} alt="ITEM" />
|
<Example />
|
||||||
</Grid.Col>
|
</Flex>
|
||||||
</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,3 +1,5 @@
|
||||||
|
// "use client"
|
||||||
|
|
||||||
import '@mantine/core/styles.css'
|
import '@mantine/core/styles.css'
|
||||||
import {
|
import {
|
||||||
hydrate,
|
hydrate,
|
||||||
|
|
@ -5,6 +7,7 @@ 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'
|
||||||
|
|
||||||
|
|
@ -13,23 +16,30 @@ export const metadata = {
|
||||||
description: 'I have followed setup instructions carefully',
|
description: 'I have followed setup instructions carefully',
|
||||||
}
|
}
|
||||||
|
|
||||||
import "./global.css"
|
// const queryClient = new QueryClient()
|
||||||
|
|
||||||
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>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
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 |