@dmsi/wedgekit-react 0.0.2

package/src/components/DataTable.tsx

@@ -0,0 +1,835 @@
+"use client";
+import React, {
+  createContext,
+  CSSProperties,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+import {
+  Cell,
+  Column,
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Header,
+  PaginationState,
+  // RowData,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import clsx from "clsx";
+
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+} from "@dnd-kit/sortable";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Switch } from "@headlessui/react";
+
+export interface DataTableProps {
+  data: OrderRow[];
+}
+
+export type OrderRow = {
+  orderId: string;
+  poId: string;
+  jobId: string;
+  reference: string;
+  reference1: string;
+  reference12: string;
+  reference13: string;
+  reference14: string;
+  reference15: string;
+  reference16: string;
+  reference17: string;
+  reference18: string;
+  reference19: string;
+  reference10: string;
+  reference11: string;
+  shipToStatus: string;
+  orderedDate: string;
+};
+
+const columns: ColumnDef<OrderRow>[] = [
+  {
+    header: "Order ID",
+    accessorKey: "orderId",
+    id: "orderId",
+    meta: {
+      sticky: true,
+    },
+  },
+  {
+    header: "Actions",
+    id: "actions",
+    cell: () => {
+      const items = [
+        {
+          label: "Release",
+          icon: <i className="w-3 h-3" />,
+        },
+        { label: "XML", icon: <i className="w-3 h-3" /> },
+        { label: "Copy", icon: <i className="w-3 h-3" /> },
+        { label: "Quote", icon: <i className="w-3 h-3" /> },
+        { label: "Retail", icon: <i className="w-3 h-3" /> },
+      ];
+      return (
+        <div className="flex flex-row gap-3">
+          {items.map((item, index) => (
+            <div
+              className="flex flex-col items-center justify-center gap-1"
+              key={index}
+            >
+              {item.icon}
+              <span className="text-[0.6rem] block text-neutral-500 font-semibold">
+                {item.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      );
+    },
+  },
+  {
+    header: "PO ID",
+    accessorKey: "poId",
+    id: "poId",
+  },
+  {
+    header: "Job ID",
+    accessorKey: "jobId",
+    id: "jobId",
+  },
+  {
+    header: "Reference",
+    accessorKey: "reference",
+    id: "reference",
+    meta: {
+      className: "hidden md:table-cell",
+    },
+  },
+  {
+    header: "Status",
+    accessorKey: "shipToStatus",
+    id: "shipToStatus",
+    meta: {
+      filterVariant: "select",
+    },
+  },
+  {
+    header: "Ordered date",
+    accessorKey: "orderedDate",
+    id: "orderedDate",
+  },
+  {
+    header: "Reference 1",
+    accessorKey: "reference1",
+    id: "reference1",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 12",
+    accessorKey: "reference12",
+    id: "reference12",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 13",
+    accessorKey: "reference13",
+    id: "reference13",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 14",
+    accessorKey: "reference14",
+    id: "reference14",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 15",
+    accessorKey: "reference15",
+    id: "reference15",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 16",
+    accessorKey: "reference16",
+    id: "reference16",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 17",
+    accessorKey: "reference17",
+    id: "reference17",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 18",
+    accessorKey: "reference18",
+    id: "reference18",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 19",
+    accessorKey: "reference19",
+    id: "reference19",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 10",
+    accessorKey: "reference10",
+    id: "reference10",
+    meta: { className: "hidden md:table-cell" },
+  },
+  {
+    header: "Reference 11",
+    accessorKey: "reference11",
+    id: "reference11",
+    meta: { className: "hidden md:table-cell" },
+  },
+];
+
+const EditingContext = createContext<{
+  data: OrderRow[];
+  setValue: (row: number, key: string, value: string) => void;
+}>({
+  data: [],
+  setValue: (row: number, key: string, value: string) => {
+    console.log(row, key, value);
+  },
+});
+
+type EditingProviderProps = PropsWithChildren<{ data: OrderRow[] }>;
+
+export const EditingProvider = ({ data, children }: EditingProviderProps) => {
+  const [actual, setData] = useState(data);
+  useEffect(() => console.log("data changed"), [actual]);
+  const context = {
+    data: actual,
+    setValue: (row: number, key: string, value: string) => {
+      setData((prev) => {
+        const newData = [...prev];
+        newData[row] = {
+          ...newData[row],
+          [key]: value,
+        };
+        return newData;
+      });
+    },
+  };
+  return <EditingContext value={context}>{children}</EditingContext>;
+};
+export const DataTable = ({ data }: DataTableProps) => {
+  return (
+    <EditingProvider data={data}>
+      <DataTableInternals />
+    </EditingProvider>
+  );
+};
+
+const DraggableTableHeader = ({
+  header,
+}: {
+  header: Header<OrderRow, unknown>;
+}) => {
+  const { attributes, isDragging, listeners, setNodeRef, transform } =
+    useSortable({
+      id: header.column.id,
+    });
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    <th
+      colSpan={header.colSpan}
+      ref={setNodeRef}
+      style={style}
+      className={clsx(
+        header.column.columnDef.meta?.className,
+        "px-3 py-3.5 text-left text-sm font-semibold text-dmsi-white bg-dmsi-red ",
+        {
+          "sticky left-0": header.column.columnDef.meta?.sticky ?? false,
+        },
+      )}
+    >
+      {header.isPlaceholder ? null : (
+        <div className="flex space-x-1 justify-start items-center">
+          <button
+            className="cursor-grab shrink-0"
+            {...attributes}
+            {...listeners}
+          >
+            <i className="w-3 h-3" />
+          </button>
+
+          <div
+            className={clsx(
+              "grow",
+              header.column.getCanSort() ? "cursor-pointer select-none" : "",
+              "flex flex-col gap-1 justify-between items-start",
+            )}
+            title={
+              header.column.getCanSort()
+                ? header.column.getNextSortingOrder() === "asc"
+                  ? "Sort ascending"
+                  : header.column.getNextSortingOrder() === "desc"
+                    ? "Sort descending"
+                    : "Clear sort"
+                : undefined
+            }
+          >
+            <div>
+              {flexRender(header.column.columnDef.header, header.getContext())}
+            </div>
+            <div>
+              {header.column.getCanFilter() ? (
+                <Filter column={header.column} />
+              ) : (
+                <div className="invisible">
+                  <Filter column={header.column} />
+                </div>
+              )}
+            </div>
+          </div>
+          <div
+            className="shrink-0 cursor-pointer"
+            onClick={header.column.getToggleSortingHandler()}
+          >
+            {{
+              asc: <i className="w-3 h-3" />,
+              desc: <i className="w-3 h-3" />,
+            }[header.column.getIsSorted() as string] ?? (
+              <i className="w-3 h-3" />
+            )}
+          </div>
+        </div>
+      )}
+    </th>
+  );
+};
+
+const DragAlongCell = ({
+  cell,
+  setValue,
+}: {
+  cell: Cell<OrderRow, unknown>;
+  setValue: (row: number, key: string, value: string) => void;
+}) => {
+  const { isDragging, setNodeRef, transform } = useSortable({
+    id: cell.column.id,
+  });
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    width: cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    <EditCell
+      ref={setNodeRef}
+      style={style}
+      cell={cell}
+      className={clsx(
+        cell.column.columnDef.meta?.className ?? "",
+        "text-sm whitespace-nowrap text-gray-900  bg-neutral-100",
+        {
+          "sticky left-0": cell.column.columnDef.meta?.sticky ?? false,
+        },
+      )}
+      setValue={setValue}
+    />
+  );
+};
+
+const DataTableInternals = () => {
+  // use state client bullshit
+
+  const { data, setValue } = useContext(EditingContext);
+  const [columnOrder, setColumnOrder] = React.useState<string[]>(() =>
+    columns.map((c) => c.id!),
+  );
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [columnVisibility, setColumnVisibility] = useState(
+    columns.reduce(
+      (acc, column) => {
+        if ("accessorKey" in column) {
+          acc[column.accessorKey as string] = true;
+        }
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    ),
+  );
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); // can set initial column filter state here
+  const table = useReactTable<OrderRow>({
+    columns,
+    data,
+    debugAll: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
+    state: {
+      sorting,
+      columnFilters,
+      pagination,
+      columnVisibility,
+      columnOrder,
+    },
+  });
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((columnOrder) => {
+        const oldIndex = columnOrder.indexOf(active.id as string);
+        const newIndex = columnOrder.indexOf(over.id as string);
+        return arrayMove(columnOrder, oldIndex, newIndex);
+      });
+    }
+  }
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {}),
+  );
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      modifiers={[restrictToHorizontalAxis]}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+    >
+      <div>
+        <div className="border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0">
+          <p className="mb-3 font-semibold">Show/Hide Columns</p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
+            {table.getAllColumns().map((column) => (
+              <label
+                className="cursor-pointer flex flex-row items-center space-x-1"
+                key={column.id}
+              >
+                <Toggle
+                  enabled={column.getIsVisible()}
+                  onToggle={(checked) =>
+                    column.getToggleVisibilityHandler()({
+                      target: { checked },
+                    })
+                  }
+                />
+
+                <span className="block">
+                  {column.columnDef.header as ReactNode}
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <div className="overflow-x-scroll scrollbar-thin">
+          <table className="min-w-full divide-x divide-neutral-500">
+            <thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  <SortableContext
+                    items={columnOrder}
+                    strategy={horizontalListSortingStrategy}
+                  >
+                    {headerGroup.headers.map((header) => (
+                      <DraggableTableHeader key={header.id} header={header} />
+                    ))}
+                  </SortableContext>
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => (
+                <tr
+                  key={row.id}
+                  className="bg-neutral-100 divide-y divide-neutral-200"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <SortableContext
+                      key={cell.id}
+                      items={columnOrder}
+                      strategy={horizontalListSortingStrategy}
+                    >
+                      <DragAlongCell
+                        key={cell.id}
+                        cell={cell}
+                        setValue={setValue}
+                      />
+                    </SortableContext>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2">
+          <div className="flex flex-row items-center">
+            <button
+              className={clsx(
+                "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 rounded-r-none",
+                {
+                  "pointer-events-none": !table.getCanPreviousPage(),
+                },
+              )}
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <i className="w-4 h-4 group-disabled:stroke-gray-400" />
+            </button>
+            <button
+              className={clsx(
+                "-mr-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                {
+                  "pointer-events-none": !table.getCanPreviousPage(),
+                },
+              )}
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <i className="w-4 h-4 group-disabled:stroke-gray-400" />
+            </button>
+            {Array.from({ length: Math.min(5, table.getPageCount()) }).map(
+              (_, i) => {
+                const current = table.getState().pagination.pageIndex;
+                const index = current - 2 + i;
+                const active = index === current;
+                if (index < 0) return;
+                if (index > table.getPageCount() - 1) return;
+                return (
+                  <button
+                    key={i}
+                    className={clsx(
+                      "group h-8 w-8 border-y border-gray-500/50 text-gray-700 p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer  flex items-center justify-center",
+                      {
+                        "bg-neutral-200 border-x": active,
+                        "border-r-0": !active,
+                      },
+                    )}
+                    onClick={() => table.setPageIndex(index)}
+                  >
+                    <span className={clsx({})}>{index + 1}</span>
+                  </button>
+                );
+              },
+            )}
+            <button
+              className={clsx(
+                "-ml-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 group",
+                {
+                  "pointer-events-none": !table.getCanNextPage(),
+                },
+              )}
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <i className="w-4 h-4 group-disabled:stroke-gray-400 " />
+            </button>
+            <button
+              className={clsx(
+                "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded rounded-l-none p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
+                {
+                  "pointer-events-none": !table.getCanNextPage(),
+                },
+              )}
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <i className="w-4 h-4  group-disabled:stroke-gray-400" />
+            </button>
+          </div>
+          <div className="flex flex-row items-center gap-6">
+            <span className="flex items-center gap-1">
+              <div>Page</div>
+              <strong>
+                {table.getState().pagination.pageIndex + 1} of{" "}
+                {table.getPageCount()}
+              </strong>
+            </span>
+            <span className="flex items-center gap-2">
+              Page:
+              <input
+                type="number"
+                min="1"
+                max={table.getPageCount()}
+                defaultValue={table.getState().pagination.pageIndex + 1}
+                onChange={(e) => {
+                  const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                  table.setPageIndex(page);
+                }}
+                className="border border-gray-500 px-2 py-1 rounded w-16"
+              />
+            </span>
+          </div>
+          <select
+            className="border border-gray-500 px-2 py-1 rounded"
+            value={table.getState().pagination.pageSize}
+            onChange={(e) => {
+              table.setPageSize(Number(e.target.value));
+            }}
+          >
+            {[10, 20, 30, 40, 50].map((pageSize) => (
+              <option key={pageSize} value={pageSize}>
+                Show {pageSize}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </DndContext>
+  );
+};
+
+function EditCell({
+  className,
+  cell,
+  setValue,
+  style,
+  ref,
+}: {
+  className?: string;
+  cell: Cell<OrderRow, unknown>;
+  setValue: (row: number, key: string, value: string) => void;
+  style: CSSProperties;
+  ref: (node: HTMLElement | null) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const value = cell.getValue();
+  const isString = typeof value === "string";
+  const [editedValue, setEditedValue] = useState<string>(isString ? value : "");
+  const onStartEdit = () => {
+    if (isString) {
+      setEditing(true);
+    }
+  };
+  const onEditValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditedValue(e.target.value);
+  };
+  const onStopEdit = () => {
+    setValue(cell.row.index, cell.column.id, editedValue);
+    setEditing(false);
+  };
+  const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      onStopEdit();
+    }
+  };
+
+  return (
+    <td
+      key={cell.id}
+      className={clsx(
+        className,
+        cell.column.columnDef.meta?.className ?? "",
+        "px-2 py-3 text-sm whitespace-nowrap text-gray-500",
+      )}
+      style={style}
+      ref={ref}
+    >
+      {isString && editing && (
+        <div className="flex flex-row gap-1">
+          <input
+            type="text"
+            value={editedValue}
+            onChange={onEditValue}
+            onKeyUp={onKeyUp}
+            onBlur={onStopEdit}
+            className="border px-2 py-0.5 rounded inline min-w-0 shrink border-neutral-400 focus:outline-neutral-300 bg-white"
+          />
+          <button
+            onClick={onStopEdit}
+            className="border cursor-pointer px-2 py-0.5 rounded flex items-center justify-center w-12 border-dmsi-blue text-dmsi-blue bg-white"
+          >
+            Save
+          </button>
+        </div>
+      )}
+      {!editing && (
+        <div
+          onClick={onStartEdit}
+          className="px-2 py-1 flex flex-row items-center"
+        >
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          <div className="w-16"></div>
+        </div>
+      )}
+    </td>
+  );
+}
+
+function Filter({ column }: { column: Column<OrderRow> }) {
+  const columnFilterValue = column.getFilterValue();
+
+  const { filterVariant } = column.columnDef.meta ?? {};
+
+  return filterVariant === "range" ? (
+    <div>
+      <div className="flex space-x-2">
+        {/* See faceted column filters example for min max values functionality */}
+        <input
+          className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
+          type="number"
+          value={(columnFilterValue as [number, number])?.[0] ?? ""}
+          onChange={(e) =>
+            column.setFilterValue((old: [number, number]) => [
+              e.target.value,
+              old?.[1],
+            ])
+          }
+          autoComplete="off"
+          placeholder={`Min`}
+        />
+        <input
+          className="block  w-full rounded-md bg-white px-3 py-0.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
+          type="number"
+          value={(columnFilterValue as [number, number])?.[1] ?? ""}
+          onChange={(e) =>
+            column.setFilterValue((old: [number, number]) => [
+              old?.[0],
+              e.target.value,
+            ])
+          }
+          autoComplete="off"
+          placeholder={`Max`}
+        />
+      </div>
+      <div className="h-1" />
+    </div>
+  ) : filterVariant === "select" ? (
+    <select
+      className="block min-w-36 w-full rounded-md bg-white px-2 py-2 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
+      onChange={(e) => column.setFilterValue(e.target.value)}
+      value={columnFilterValue?.toString()}
+    >
+      {/* See faceted column filters example for dynamic select options */}
+      <option value="">Status: All</option>
+      <option value="cancelled">Status: Cancelled</option>
+      <option value="pending">Status: Pending</option>
+      <option value="shipped">Status: Shipped</option>
+    </select>
+  ) : (
+    <input
+      className="block min-w-36 w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
+      onChange={(e) => column.setFilterValue(e.target.value)}
+      placeholder={column.columnDef.header?.toString() ?? "..."}
+      type="text"
+      autoComplete="off"
+      value={(columnFilterValue ?? "") as string}
+    />
+    // See faceted column filters example for datalist search suggestions
+  );
+}
+
+// // A typical debounced input react component
+// // This debounce is not working correctly?
+// function DebouncedInput({
+//   value: initialValue,
+//   onChange,
+//   debounce = 500,
+//   ...props
+// }: {
+//   value: string | number;
+//   onChange: (value: string | number) => void;
+//   debounce?: number;
+// } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
+//   const [value, setValue] = React.useState(initialValue);
+
+//   React.useEffect(() => {
+//     if (value !== initialValue) {
+//       setValue(initialValue);
+//     }
+//   }, [initialValue, setValue, value]);
+
+//   React.useEffect(() => {
+//     if (value === initialValue) {
+//       return;
+//     }
+
+//     const timeout = setTimeout(() => {
+//       onChange(value);
+//     }, debounce);
+
+//     return () => clearTimeout(timeout);
+//   }, [value, debounce, onChange, initialValue]);
+
+//   return (
+//     <input
+//       {...props}
+//       value={value}
+//       onChange={(e) => setValue(e.target.value)}
+//     />
+//   );
+// }
+
+Switch.displayName = "Switch";
+
+export default function Toggle({
+  enabled,
+  onToggle,
+}: {
+  enabled: boolean;
+  onToggle: (enabled: boolean) => void;
+}) {
+  return (
+    <Switch
+      checked={enabled}
+      onChange={onToggle}
+      className="group relative flex h-4 w-7 cursor-pointer rounded-full   p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white bg-neutral-900/10 data-[checked]:bg-dmsi-blue"
+    >
+      <span
+        aria-hidden="true"
+        className="pointer-events-none inline-block size-3 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-3  group-data-[checked]:shadow-lg"
+      />
+    </Switch>
+  );
+}
+
+Toggle.displayName = "Toggle";