feat: add an opsional <Dialog> component for handling the create new group form

src/components/ui/DataTable.tsx

@@ -19,13 +19,26 @@ import {
 } from '@/components/ui/table';
 import { useState } from 'react';
 import { Input } from './input';
+import { Button } from './button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from './dialog';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
 }
 
-export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  createGroup
+}: DataTableProps<TData, TValue> & { createGroup?: () => void }) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const table = useReactTable({
     data,
@@ -40,13 +53,19 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
 
   return (
     <div>
-      <div className="flex items-center py-4">
+      <div className="flex items-center py-4 justify-between">
         <Input
           placeholder="Search"
           value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
           onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
           className="max-w-sm"
         />
+
+        {createGroup && (
+          <Button variant="outline" onClick={createGroup}>
+            Create Group
+          </Button>
+        )}
       </div>
       <div className="rounded-md border">
         <Table>