126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
"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"
|
|
|
|
interface InventoryItem {
|
|
id: number
|
|
name: string
|
|
price: number
|
|
quantity: number
|
|
}
|
|
|
|
async function fetchBlob(url: string) {
|
|
const response = await fetch(url)
|
|
return response.blob()
|
|
}
|
|
|
|
export default function InventoryPage() {
|
|
const theme = useMantineTheme()
|
|
const [items, setItems] = useState<InventoryItem[]>([])
|
|
const [name, setName] = useState('')
|
|
const [price, setPrice] = useState('')
|
|
const [quantity, setQuantity] = useState('')
|
|
|
|
const addItem = () => {
|
|
setItems([
|
|
...items,
|
|
{
|
|
id: items.length + 1,
|
|
name,
|
|
price: parseFloat(price),
|
|
quantity: parseInt(quantity),
|
|
},
|
|
])
|
|
setName('')
|
|
setPrice('')
|
|
setQuantity('')
|
|
}
|
|
|
|
const [imageSourceUrl, setImageSourceUrl] = React.useState("")
|
|
|
|
const downloadImageAndSetSource = async (imageUrl: any) => {
|
|
const image = await fetchBlob(imageUrl)
|
|
setImageSourceUrl(URL.createObjectURL(image))
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Container size="md" >
|
|
{/* <Paper >
|
|
<Table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Price</th>
|
|
<th>Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((item) => (
|
|
<tr key={item.id}>
|
|
<td>{item.id}</td>
|
|
<td>{item.name}</td>
|
|
<td>{item.price}</td>
|
|
<td>{item.quantity}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
</Paper> */}
|
|
|
|
{/* use a grid */}
|
|
|
|
<Flex gap="md" style={{ marginTop: theme.spacing.md }}>
|
|
<TextInput
|
|
label="Item name"
|
|
placeholder="Enter item name"
|
|
value={name}
|
|
onChange={(event) => setName(event.currentTarget.value)}
|
|
/>
|
|
<TextInput
|
|
label="Price"
|
|
placeholder="Enter item price"
|
|
value={price}
|
|
onChange={(event) => setPrice(event.currentTarget.value)}
|
|
/>
|
|
<TextInput
|
|
label="Quantity"
|
|
placeholder="Enter item quantity"
|
|
value={quantity}
|
|
onChange={(event) => setQuantity(event.currentTarget.value)}
|
|
/>
|
|
<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 */}
|
|
</Box>
|
|
)
|
|
}
|