cswine
/
point-of-sales
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

autocommit 15-06-2024-22-25

This commit is contained in:
Jason Qin 2024-06-15 22:25:44 +10:00
parent 71a3519720
commit 9447d4522f
1 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
pos-frontend/app/inventory/page.tsx
View File

@ -1,10 +1,10 @@
"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 } from '@mantine/core'
import Example from './query' import Example from './query'
// import { Image as NextImage } from 'next/image' // import { Image as NextImage } from 'next/image'
import NextImage from 'next/image'; import NextImage from 'next/image'
import Prawn from "../images/aussietigerprawns.jpg" import Prawn from "../images/aussietigerprawns.jpg"
// import Prawn from "/aussietigerprawns.jpg" // import Prawn from "/aussietigerprawns.jpg"
@ -101,6 +101,50 @@ export default function InventoryPage() {
<Button onClick={addItem}>Add item</Button> <Button onClick={addItem}>Add item</Button>
</Flex> </Flex>
</Container> </Container>
{/* <Grid>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
</Grid> */}
{/* maybe instead, do 4 items on small. And double each time To 8 or 16 */}
<Grid>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
<NextImage width={150} sizes="(max-width: 768px) 100vw, 33vw" src={Prawn} alt="ITEM" />
{/* <NextImage width={500} src={Prawn} alt="ITEM" />
<NextImage width={500} src={Prawn} alt="ITEM" />
<NextImage width={500} src={Prawn} alt="ITEM" /> */}
</Grid.Col>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
{/* <NextImage width={500} src={Prawn} alt="ITEM" /> */}
{/* <img src="../images/aussietigerprawns.jpg" alt="hi"/> */}
</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>
<Flex <Flex
id="GRID OF ITEMS" id="GRID OF ITEMS"
mih={50} mih={50}
@ -112,6 +156,7 @@ export default function InventoryPage() {
wrap="wrap" wrap="wrap"
> >
{/* would fetch the source from axios */} {/* would fetch the source from axios */}
{/* <NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" /> <NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" /> <NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" /> <NextImage src={Prawn} alt="ITEM" />
@ -120,8 +165,7 @@ export default function InventoryPage() {
<NextImage src={Prawn} alt="ITEM" /> <NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" /> <NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" /> <NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" /> <NextImage src={Prawn} alt="ITEM" /> */}
<NextImage src={Prawn} alt="ITEM" />
{/* <Example /> */} {/* <Example /> */}
{/* <Image component={NextImage} src={Prawn} alt="TIGER PRAWNS" /> */} {/* <Image component={NextImage} src={Prawn} alt="TIGER PRAWNS" /> */}