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"
|
||||
|
||||
import React, { useState } from 'react'
|
||||
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"
|
||||
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core'
|
||||
import Example from './query'
|
||||
|
||||
interface InventoryItem {
|
||||
id: number
|
||||
|
|
@ -14,6 +13,9 @@ 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()
|
||||
}
|
||||
|
||||
|
|
@ -49,7 +51,7 @@ export default function InventoryPage() {
|
|||
return (
|
||||
<Box>
|
||||
<Container size="md" >
|
||||
{/* <Paper >
|
||||
<Paper >
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -70,11 +72,9 @@ export default function InventoryPage() {
|
|||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Paper> */}
|
||||
</Paper>
|
||||
|
||||
{/* use a grid */}
|
||||
|
||||
<Flex gap="md" style={{ marginTop: theme.spacing.md }}>
|
||||
<Flex style={{ marginTop: theme.spacing.md }}>
|
||||
<TextInput
|
||||
label="Item name"
|
||||
placeholder="Enter item name"
|
||||
|
|
@ -96,30 +96,20 @@ export default function InventoryPage() {
|
|||
<Button onClick={addItem}>Add item</Button>
|
||||
</Flex>
|
||||
</Container>
|
||||
|
||||
<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 */}
|
||||
<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>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// "use client"
|
||||
|
||||
import '@mantine/core/styles.css'
|
||||
import {
|
||||
hydrate,
|
||||
|
|
@ -5,6 +7,7 @@ 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'
|
||||
|
||||
|
|
@ -13,23 +16,30 @@ export const metadata = {
|
|||
description: 'I have followed setup instructions carefully',
|
||||
}
|
||||
|
||||
import "./global.css"
|
||||
// const queryClient = new QueryClient()
|
||||
|
||||
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>
|
||||
)
|
||||
|
|
|
|||
|
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 |