React QR Code

pertama kamu harus install react-qr-code

npm i react-qr-code

fungsi ini untuk membuat qr code yang ngelooping dari angka berapa sampai angka berapa

import { Box, Button, Flex, Heading, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, SimpleGrid, Spacer, Stack, Text } from '@chakra-ui/react'
import React, { useCallback, useEffect, useState } from 'react'
import { FcPlus } from 'react-icons/fc';
import QRCode from 'react-qr-code';


function TablesPage() {
	
	const [data, setData] = useState([])
	const [tableInput, setTableInput] = useState(0)
	const [tableAmount, setTableAmount] = useState(20)


	const getBarcode = () => {
		const data = [];
		const outletId = param.id
		const numberOfTables = tableAmount; // Jumlah tabel yang diinginkan

		for (let table = 1; table <= numberOfTables; table++) {
			data.push({ table, outletId });
		}

		setData(data);
	};

	const handleTableBarcode = () => {
		const data = [];
		const outletId = param.id
		const numberOfTables = tableInput; // Jumlah tabel yang diinginkan

		for (let table = 1; table <= numberOfTables; table++) {
			data.push({ table, outletId });
		}
		setData(data);
		setAddModal(false)
	}

	useEffect(() => {
		getBarcode();

		return () => {
			// Cleanup function
		};
	}, []);



	return (
		<Stack p={[1, 1, 5]} spacing={10}>


			<HStack>
				<BackButtons />
				<Spacer />

				<Heading size={'md'}>
					Tables Barcode
				</Heading>
				<Stack>
					<Button onClick={() => setAddModal(true)} bgColor={'white'} shadow='md' variant='outline' borderColor='#F05A28' color='#F05A28'>
						<HStack>
							<FcPlus />
							<Text>Table</Text>
						</HStack>
					</Button>
				</Stack>
			</HStack>
			<SimpleGrid columns={[2, 2, 4]} gap={5}>
				{data.map((x) =>
					<Stack spacing={2} alignItems='center' justifyContent={'center'}>
						<Heading size={'md'}>
							Table : {x.table}
						</Heading>
						<QRCode
							size={256}
							style={{ height: "auto", maxWidth: "100px" }}
							value={`https://rms.deoapp.com/orders/${x.outletId}/${x.table}`}
							viewBox={`0 0 256 256`}
						/>

					</Stack>

				)}
			</SimpleGrid>

			<Modal isOpen={addModal} onClose={() => setAddModal(false)}>
				<ModalOverlay />

				<ModalContent>
					<ModalHeader>Table</ModalHeader>

					<ModalCloseButton />

					<ModalBody>
						<Input
							type="text"
							placeholder="Table Amount"
							size={'sm'}
							onChange={(e) => setTableInput(e.target.value)}
						/>
					</ModalBody>

					<ModalFooter>
						<Button colorScheme="blue" mr={3} onClick={() => handleTableBarcode()}>
							Add
						</Button>
					</ModalFooter>
				</ModalContent>
			</Modal>
		</Stack>
	)
}

export default TablesPage