Merge pull request #7 from Gimnath-Perera/feat/dummy-data-generation

feat: row count change handled
gimnathperera · Aug 28, 2023 · f94a184 · f94a184
2 parents dc69f30 + 7e52ab1
commit f94a184
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -17,18 +17,26 @@ interface Person {
 
 const Home: FC = () => {
   const [code, setCode] = useState<string>(DEFAULT_INTERFACE);
+  const [selectedKeys, setSelectedKeys] = useState(new Set(['10']));
 
   const handleOnGenerate = (): void => {
     console.log('*********', code);
   };
 
+  const handleOnRowCountChange = (newRowCount: any): void => {
+    setSelectedKeys(newRowCount);
+  };
   const handleOnCodeChange = (newCode: string): void => {
     setCode(newCode);
   };
 
   return (
     <section className='h-full'>
-      <Header onGenerate={handleOnGenerate} />
+      <Header
+        onGenerate={handleOnGenerate}
+        selectedKeys={selectedKeys}
+        onRowCountChange={handleOnRowCountChange}
+      />
       <div className='flex justify-center gap-6 h-[calc(100vh-12rem)]'>
         <CodeEditor onCodeChange={handleOnCodeChange} initialCode={code} />
         <Result />

diff --git a/components/header/index.tsx b/components/header/index.tsx
@@ -1,27 +1,51 @@
 import React, { FC } from 'react';
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from '@nextui-org/react';
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+  Selection,
+} from '@nextui-org/react';
 
 type Props = {
   onGenerate: () => void;
+  onRowCountChange: (rowCount: Selection) => void;
+  selectedKeys: any;
 };
 
-const Header: FC<Props> = ({ onGenerate }) => {
+const Header: FC<Props> = ({ onGenerate, onRowCountChange, selectedKeys }) => {
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(', ').replaceAll('_', ' '),
+    [selectedKeys],
+  );
+
   return (
     <div className='pb-6 text-center flex items-center justify-between'>
       <h1 className='tracking-tight inline font-semibold text-[2.3rem] lg:text-3xl'>
         Generate Fake Data
       </h1>
       <div className='flex items-center gap-4'>
-        <Dropdown backdrop='blur'>
+        <Dropdown>
           <DropdownTrigger>
-            <Button variant='bordered'>#️⃣ Scale [Number of rows]</Button>
+            <Button variant='bordered' className='capitalize'>
+              {`#️⃣ Scale [${selectedValue} of rows]`}
+            </Button>
           </DropdownTrigger>
-          <DropdownMenu variant='faded' aria-label='Static Actions'>
-            <DropdownItem key='new'>10</DropdownItem>
-            <DropdownItem key='copy'>50</DropdownItem>
-            <DropdownItem key='edit'>100</DropdownItem>
+          <DropdownMenu
+            aria-label='Single selection example'
+            variant='flat'
+            disallowEmptySelection
+            selectionMode='single'
+            selectedKeys={selectedKeys}
+            onSelectionChange={onRowCountChange}
+          >
+            <DropdownItem key='10'>10</DropdownItem>
+            <DropdownItem key='50'>50</DropdownItem>
+            <DropdownItem key='100'>100</DropdownItem>
           </DropdownMenu>
         </Dropdown>
+
         <Button color='primary' variant='shadow' onClick={onGenerate}>
           🪄 Generate
         </Button>