pixelize-design-library 2.1.6 → 2.1.8

package/dist/Components/Trail/TrailWorks.js

@@ -1,262 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var TrailWorks = function () {
-    var data = [
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-    ];
-    var columns = [
-        {
-            Header: "Contact",
-            accessor: "contact",
-        },
-        {
-            Header: "Type",
-            accessor: "type",
-        },
-        {
-            Header: "Deals",
-            accessor: "deals",
-        },
-        {
-            Header: "Phone",
-            accessor: "phone",
-        },
-        {
-            Header: "Email",
-            accessor: "email",
-        },
-    ];
-    var renderRow = function (row, index) {
-        return (react_2.default.createElement(react_1.Tr, { key: index, border: "1px solid #bbbbbb" },
-            react_2.default.createElement(react_1.Td, { border: "1px solid #bbbbbb", padding: "5px" },
-                react_2.default.createElement(react_1.Checkbox, null)),
-            columns.map(function (column, index) {
-                return (react_2.default.createElement(react_1.Td, { key: index, border: "1px solid #bbbbbb" }, row[column.accessor]));
-            })));
-    };
-    return (react_2.default.createElement(react_1.Box, { width: "100%", overflowX: "auto" },
-        react_2.default.createElement(react_1.Table, { variant: "simple", size: "md", border: "1px solid #bbbbbb" },
-            react_2.default.createElement(react_1.Thead, { border: "1px solid #bbbbbb" },
-                react_2.default.createElement(react_1.Tr, { border: "1px solid #bbbbbb" },
-                    react_2.default.createElement(react_1.Th, { border: "1px solid #bbbbbb", padding: "5px" },
-                        react_2.default.createElement(react_1.Checkbox, null)),
-                    columns.map(function (column, index) {
-                        return (react_2.default.createElement(react_1.Th, { key: index, border: "1px solid #bbbbbb" }, column.Header));
-                    }))),
-            react_2.default.createElement(react_1.Tbody, { border: "1px solid #bbbbbb" }, data.map(function (row, index) { return renderRow(row, index); })))));
-};
-exports.default = TrailWorks;
-// import React, { useState } from "react";
-// import {
-//   Box,
-//   Table,
-//   Thead,
-//   Tr,
-//   Th,
-//   Tbody,
-//   Td,
-//   Checkbox,
-//   IconButton,
-//   Input,
-//   Button,
-//   HStack,
-//   Flex,
-//   Text,
-// } from "@chakra-ui/react";
-// import { DeleteIcon, AddIcon, CloseIcon } from "@chakra-ui/icons";
-// import { Row, Column, initialColumns, initialRows } from "./data";
-// import { EditableCell } from "./EditableCell";
-// import { SelectAllCheckbox } from "./SelectAllCheckbox";
-// const TrailWorks: React.FC = () => {
-//   const [rows, setRows] = useState<Row[]>(initialRows);
-//   const [columns, setColumns] = useState<Column[]>(initialColumns);
-//   const [newColumnName, setNewColumnName] = useState<string>("");
-//   const [isAddingColumn, setIsAddingColumn] = useState<boolean>(false);
-//   const [editableCell, setEditableCell] = useState<{
-//     rowId: number;
-//     columnId: number;
-//   } | null>(null);
-//   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
-//   const addRow = () => {
-//     const newRow: Row = {
-//       id: rows.length + 1,
-//       project: `Project ${String.fromCharCode(65 + rows.length)}`,
-//       owner: `Owner ${String.fromCharCode(65 + rows.length)}`,
-//       status: "New",
-//       priority: "Low",
-//       dueDate: "2023-12-31",
-//     };
-//     setRows([...rows, newRow]);
-//   };
-//   const addColumn = () => {
-//     if (newColumnName) {
-//       const newColumn = { id: columns.length + 1, label: newColumnName };
-//       setColumns([...columns, newColumn]);
-//       setRows(
-//         rows.map((row) => ({ ...row, [newColumnName]: "Default Value" }))
-//       );
-//       setNewColumnName("");
-//       setIsAddingColumn(false);
-//     }
-//   };
-//   const handleCellClick = (rowId: number, columnId: number) => {
-//     setEditableCell({ rowId, columnId });
-//   };
-//   const handleCellChange = (rowId: number, columnLabel: string, value: any) => {
-//     setRows(
-//       rows.map((row) =>
-//         row.id === rowId ? { ...row, [columnLabel]: value } : row
-//       )
-//     );
-//     setEditableCell(null);
-//   };
-//   const handleRowSelect = (rowId: number) => {
-//     const newSelectedRows = new Set(selectedRows);
-//     if (newSelectedRows.has(rowId)) {
-//       newSelectedRows.delete(rowId);
-//     } else {
-//       newSelectedRows.add(rowId);
-//     }
-//     setSelectedRows(newSelectedRows);
-//   };
-//   const handleSelectAll = () => {
-//     if (selectedRows.size === rows.length) {
-//       setSelectedRows(new Set());
-//     } else {
-//       setSelectedRows(new Set(rows.map((row) => row.id)));
-//     }
-//   };
-//   const handleDeleteSelected = () => {
-//     setRows(rows.filter((row) => !selectedRows.has(row.id)));
-//     setSelectedRows(new Set());
-//   };
-//   const handleCloseFooter = () => {
-//     setSelectedRows(new Set());
-//   };
-//   const isAllSelected = selectedRows.size === rows.length;
-//   const isIndeterminate =
-//     selectedRows.size > 0 && selectedRows.size < rows.length;
-//   return (
-//     <Box width="100%" overflowX="auto" p={5}>
-//       <Table variant="simple" size="md">
-//         <Thead>
-//           <Tr>
-//             <Th>
-//               <SelectAllCheckbox
-//                 isAllSelected={isAllSelected}
-//                 isIndeterminate={isIndeterminate}
-//                 handleSelectAll={handleSelectAll}
-//               />
-//             </Th>
-//             {columns.map((column) => (
-//               <Th key={column.id}>{column.label}</Th>
-//             ))}
-//             <Th>
-//               {isAddingColumn ? (
-//                 <HStack>
-//                   <Input
-//                     placeholder="New column name"
-//                     value={newColumnName}
-//                     onChange={(e) => setNewColumnName(e.target.value)}
-//                   />
-//                   <Button onClick={addColumn}>Add</Button>
-//                 </HStack>
-//               ) : (
-//                 <IconButton
-//                   aria-label="Add column"
-//                   icon={<AddIcon />}
-//                   size="sm"
-//                   onClick={() => setIsAddingColumn(true)}
-//                 />
-//               )}
-//             </Th>
-//           </Tr>
-//         </Thead>
-//         <Tbody>
-//           {rows.map((row) => (
-//             <Tr key={row.id}>
-//               <Td>
-//                 <Checkbox
-//                   isChecked={selectedRows.has(row.id)}
-//                   onChange={() => handleRowSelect(row.id)}
-//                 />
-//               </Td>
-//               {columns.map((column) => (
-//                 <Td key={column.id}>
-//                   <EditableCell
-//                     row={row}
-//                     column={column}
-//                     isEditable={Boolean(
-//                       editableCell &&
-//                         editableCell.rowId === row.id &&
-//                         editableCell.columnId === column.id
-//                     )}
-//                     handleCellClick={handleCellClick}
-//                     handleCellChange={handleCellChange}
-//                   />
-//                 </Td>
-//               ))}
-//             </Tr>
-//           ))}
-//         </Tbody>
-//       </Table>
-//       <Button
-//         leftIcon={<AddIcon />}
-//         colorScheme="teal"
-//         variant="solid"
-//         onClick={addRow}
-//         mt={4}
-//       >
-//         Add Row
-//       </Button>
-//       {selectedRows.size > 0 && (
-//         <Flex
-//           position="fixed"
-//           bottom="0"
-//           left="10%"
-//           width="80%"
-//           p={4}
-//           justifyContent="space-between"
-//           alignItems="center"
-//           boxShadow="md"
-//         >
-//           <Text>{selectedRows.size} row(s) selected</Text>
-//           <HStack>
-//             <Button
-//               leftIcon={<DeleteIcon />}
-//               colorScheme="red"
-//               variant="solid"
-//               onClick={handleDeleteSelected}
-//             >
-//               Delete Selected
-//             </Button>
-//             <IconButton
-//               aria-label="Close"
-//               icon={<CloseIcon />}
-//               onClick={handleCloseFooter}
-//             />
-//           </HStack>
-//         </Flex>
-//       )}
-//     </Box>
-//   );
-// };
-// export default TrailWorks;

package/dist/Components/Trail/data.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialRows = exports.initialColumns = void 0;
-exports.initialColumns = [
-    { id: 1, label: "project" },
-    { id: 2, label: "owner" },
-    { id: 3, label: "status" },
-    { id: 4, label: "priority" },
-    { id: 5, label: "dueDate" },
-];
-exports.initialRows = [
-    {
-        id: 1,
-        project: "Project A",
-        owner: "Owner A",
-        status: "In Progress",
-        priority: "High",
-        dueDate: "2023-12-31",
-    },
-    {
-        id: 2,
-        project: "Project B",
-        owner: "Owner B",
-        status: "Completed",
-        priority: "Medium",
-        dueDate: "2023-11-30",
-    },
-    // Add more initial rows as needed
-];

package/dist/Constants/Sidebar.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cssForScrollBar = exports.FlexCss = void 0;
-exports.FlexCss = {
-    "&::-webkit-scrollbar": {
-        width: "0.188rem",
-    },
-    "&::-webkit-scrollbar-track": {
-        background: "transparent",
-    },
-    "&::-webkit-scrollbar-thumb": {
-        background: "transparent",
-        transition: "background 0.5s",
-    },
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: "#9A4FE5",
-    },
-};
-var cssForScrollBar = function (theme) { return ({
-    "&::-webkit-scrollbar": {
-        width: "0.125rem",
-    },
-    "&::-webkit-scrollbar-track": {
-        background: theme.colors.sidebar.background[500],
-    },
-    "&::-webkit-scrollbar-thumb": {
-        background: "transparent",
-        borderRadius: "0.5rem",
-    },
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: theme.colors.primary[500],
-    },
-    "&:hover::-webkit-scrollbar-thumb:hover": {
-        background: theme.colors.primary[700],
-    },
-    scrollbarWidth: "none",
-    "&:hover": {
-        scrollbarWidth: "thin",
-        scrollbarColor: "".concat(theme.colors.primary[500], " ").concat(theme.colors.sidebar.background[500]),
-    },
-}); };
-exports.cssForScrollBar = cssForScrollBar;

package/dist/Hooks/usePreferences.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSavePreferences = exports.useGetPreferences = void 0;
-var react_1 = require("react");
-var constructUrl = function (_a) {
-    var baseUrl = _a.baseUrl, key = _a.key, page = _a.page, name = _a.name;
-    var params = new URLSearchParams();
-    if (page) {
-        params.append("page", page);
-    }
-    if (key) {
-        params.append("key", key);
-    }
-    if (name) {
-        params.append("name", name);
-    }
-    var queryString = params.toString();
-    return "".concat(baseUrl).concat(queryString ? "?".concat(queryString) : "");
-};
-var useGetPreferences = function (_a) {
-    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f;
-    var _g = (0, react_1.useState)([]), preferences = _g[0], setPreferences = _g[1];
-    var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
-    (0, react_1.useEffect)(function () {
-        if (!baseUrl) {
-            return;
-        }
-        setLoading(true);
-        var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name });
-        fetch(url, {
-            headers: {
-                Authorization: authToken,
-            },
-        })
-            .then(function (response) { return response.json(); })
-            .then(function (data) { return setPreferences(data); })
-            .catch(function (error) { return console.error(error); })
-            .finally(function () { return setLoading(false); });
-        /* eslint-disable */
-    }, [baseUrl]);
-    return { preferences: preferences, loading: loading };
-};
-exports.useGetPreferences = useGetPreferences;
-var useSavePreferences = function (_a) {
-    var _b = _a.baseUrl, baseUrl = _b === void 0 ? "" : _b, _c = _a.key, key = _c === void 0 ? "" : _c, _d = _a.page, page = _d === void 0 ? "" : _d, _e = _a.name, name = _e === void 0 ? "" : _e, _f = _a.authToken, authToken = _f === void 0 ? "" : _f;
-    var _g = (0, react_1.useState)(false), loading = _g[0], setLoading = _g[1];
-    var _h = (0, react_1.useState)(null), error = _h[0], setError = _h[1];
-    var savePreferences = function (data) {
-        if (data === void 0) { data = {}; }
-        if (!baseUrl)
-            return;
-        setLoading(true);
-        fetch(baseUrl, {
-            method: "POST",
-            headers: {
-                Authorization: authToken,
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                key: key,
-                page: page,
-                name: name,
-                json: data,
-            }),
-        })
-            .then(function (response) { return response.json(); })
-            .then(function (data) { return console.log(data); })
-            .catch(function (error) { return setError(error); })
-            .finally(function () { return setLoading(false); });
-    };
-    return { savePreferences: savePreferences, loading: loading, error: error };
-};
-exports.useSavePreferences = useSavePreferences;

package/dist/Layout.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const Layout: () => React.JSX.Element;
-export default Layout;

package/dist/Layout.js

@@ -1,250 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importStar(require("react"));
-var accordion_1 = __importDefault(require("./Pages/accordion"));
-var searchSelect_1 = __importDefault(require("./Pages/searchSelect"));
-var search_1 = __importDefault(require("./Pages/search"));
-var timeline_1 = __importDefault(require("./Pages/timeline"));
-var datePick_1 = __importDefault(require("./Pages/datePick"));
-var multiSelect_1 = __importDefault(require("./Pages/multiSelect"));
-var drawer_1 = __importDefault(require("./Pages/drawer"));
-var verifyEmail_1 = __importDefault(require("./Pages/verifyEmail"));
-var editor_1 = __importDefault(require("./Pages/editor"));
-var dropdown_1 = __importDefault(require("./Pages/dropdown"));
-var noteArea_1 = __importDefault(require("./Pages/noteArea"));
-var switch_1 = __importDefault(require("./Pages/switch"));
-var photoViewer_1 = __importDefault(require("./Pages/photoViewer"));
-var chart_1 = __importDefault(require("./Pages/chart"));
-var tooltip_1 = __importDefault(require("./Pages/tooltip"));
-var card_1 = __importDefault(require("./Pages/card"));
-var pinInputs_1 = __importDefault(require("./Pages/pinInputs"));
-var numberInput_1 = __importDefault(require("./Pages/numberInput"));
-var progressbar_1 = __importDefault(require("./Pages/progressbar"));
-var button_1 = __importDefault(require("./Pages/button"));
-var radioButton_1 = __importDefault(require("./Pages/radioButton"));
-var skeleton_1 = __importDefault(require("./Pages/skeleton"));
-var textArea_1 = __importDefault(require("./Pages/textArea"));
-var select_1 = __importDefault(require("./Pages/select"));
-var modal_1 = __importDefault(require("./Pages/modal"));
-var checkbox_1 = __importDefault(require("./Pages/checkbox"));
-var toster_1 = __importDefault(require("./Pages/toster"));
-var input_1 = __importDefault(require("./Pages/input"));
-var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
-var productCaard_1 = __importDefault(require("./Pages/productCaard"));
-var table_1 = require("./Pages/table");
-var TInput_1 = __importDefault(require("./Pages/TInput"));
-var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
-var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
-var lucide_react_1 = require("lucide-react");
-var Header_1 = __importDefault(require("./Components/Header/Header"));
-var fileUpload_1 = require("./Pages/fileUpload");
-var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
-var Layout = function () {
-    var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
-    var navigate = function (path) {
-        window.history.pushState({}, "", path);
-        setCurrentPath(path);
-    };
-    (0, react_2.useEffect)(function () {
-        var handlePopState = function () {
-            setCurrentPath(window.location.pathname);
-        };
-        window.addEventListener("popstate", handlePopState);
-        return function () {
-            window.removeEventListener("popstate", handlePopState);
-        };
-    }, []);
-    var switchTheme = function (themeName) {
-        document.documentElement.setAttribute("data-theme", themeName);
-    };
-    var renderPage = function () {
-        switch (currentPath) {
-            case "/alertdialog":
-                return react_2.default.createElement(alertdialog_1.default, null);
-            case "/accordion":
-                return react_2.default.createElement(accordion_1.default, null);
-            case "/searchSelect":
-                return react_2.default.createElement(searchSelect_1.default, null);
-            case "/selectSearch":
-                return react_2.default.createElement(selectSearch_1.default, null);
-            case "/timeline":
-                return react_2.default.createElement(timeline_1.default, null);
-            case "/search":
-                return react_2.default.createElement(search_1.default, null);
-            case "/datepicker":
-                return react_2.default.createElement(datePick_1.default, null);
-            case "/multiselect":
-                return react_2.default.createElement(multiSelect_1.default, null);
-            case "/drawer":
-                return react_2.default.createElement(drawer_1.default, null);
-            case "/verifyEmail":
-                return react_2.default.createElement(verifyEmail_1.default, null);
-            case "/editor":
-                return react_2.default.createElement(editor_1.default, null);
-            case "/dropdown":
-                return react_2.default.createElement(dropdown_1.default, null);
-            case "/notearea":
-                return react_2.default.createElement(noteArea_1.default, null);
-            case "/switch":
-                return react_2.default.createElement(switch_1.default, null);
-            case "/photoViewer":
-                return react_2.default.createElement(photoViewer_1.default, null);
-            case "/charts":
-                return react_2.default.createElement(chart_1.default, null);
-            case "/tooltip":
-                return react_2.default.createElement(tooltip_1.default, null);
-            case "/card":
-                return react_2.default.createElement(card_1.default, null);
-            case "/pininput":
-                return react_2.default.createElement(pinInputs_1.default, null);
-            case "/numberinput":
-                return react_2.default.createElement(numberInput_1.default, null);
-            case "/progressbar":
-                return react_2.default.createElement(progressbar_1.default, null);
-            case "/button":
-                return react_2.default.createElement(button_1.default, null);
-            case "/radio":
-                return react_2.default.createElement(radioButton_1.default, null);
-            case "/skeleton":
-                return react_2.default.createElement(skeleton_1.default, null);
-            case "/textarea":
-                return react_2.default.createElement(textArea_1.default, null);
-            case "/select":
-                return react_2.default.createElement(select_1.default, null);
-            case "/modal":
-                return react_2.default.createElement(modal_1.default, null);
-            case "/checkbox":
-                return react_2.default.createElement(checkbox_1.default, null);
-            case "/toster":
-                return react_2.default.createElement(toster_1.default, null);
-            case "/InputPage":
-                return react_2.default.createElement(input_1.default, null);
-            case "/table":
-                return react_2.default.createElement(table_1.TableExample, null);
-            case "/tinput":
-                return react_2.default.createElement(TInput_1.default, null);
-            case "/kanban":
-                return react_2.default.createElement(kanbanboard_1.default, null);
-            case "/header":
-                return (react_2.default.createElement(Header_1.default, { logo: react_2.default.createElement(react_1.Box, { fontSize: "xl", fontWeight: "bold" }, "MyApp"), 
-                    // colorScheme="gray"
-                    active: "/", menuItems: [
-                        { label: "Home", href: "/" },
-                        {
-                            label: "Products",
-                            // badge: {
-                            //   label: "new",
-                            //   colorScheme: "red",
-                            // },
-                            children: [
-                                {
-                                    label: "AI Tools",
-                                    href: "/products/ai",
-                                    badge: {
-                                        label: "new",
-                                        colorScheme: "blackAlpha",
-                                    },
-                                },
-                                {
-                                    label: "APIs",
-                                    href: "/products/apis",
-                                    badge: { label: "coming soon", colorScheme: "green" },
-                                },
-                            ],
-                        },
-                        {
-                            label: "Docs",
-                            href: "/docs",
-                            badge: { label: "updated", colorScheme: "yellow" },
-                        },
-                    ], rightSlot: react_2.default.createElement(react_2.default.Fragment, null,
-                        react_2.default.createElement(react_1.Button, { variant: "ghost", colorScheme: "purple" }, "Login"),
-                        react_2.default.createElement(react_1.Button, { colorScheme: "purple" }, "Sign Up")) }));
-            case "/upload":
-                return react_2.default.createElement(fileUpload_1.FileUploader, null);
-            case "/productCard":
-                return react_2.default.createElement(productCaard_1.default, null);
-            case "/tag":
-                return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", colorScheme: "gray", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
-            case "/":
-            default:
-        }
-    };
-    return (react_2.default.createElement("div", null,
-        react_2.default.createElement("nav", null,
-            react_2.default.createElement(react_1.HStack, { spacing: 3, flexWrap: "wrap", alignItems: "center" },
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline", size: "sm" }, "Home"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline", size: "sm" }, "AlertDialog"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline", size: "sm" }, "Accordion"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectsearch"); }, variant: "outline", size: "sm" }, "Selectsearch"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/searchSelect"); }, variant: "outline" }, "searchSelect"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectSearch"); }, variant: "outline" }, "selectSearch"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline", size: "sm" }, "Timeline"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline", size: "sm" }, "Search"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline", size: "sm" }, "Datepicker"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); }, variant: "outline", size: "sm" }, "Multiselect"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); }, variant: "outline", size: "sm" }, "Drawer"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); }, variant: "outline", size: "sm" }, "VerifyEmail"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); }, variant: "outline", size: "sm" }, "Editor"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); }, variant: "outline", size: "sm" }, "Dropdown"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); }, variant: "outline", size: "sm" }, "Notearea"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); }, variant: "outline", size: "sm" }, "Switch"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); }, variant: "outline", size: "sm" }, "PhotoViewer"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); }, variant: "outline", size: "sm" }, "Charts"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); }, variant: "outline", size: "sm" }, "Tooltip"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); }, variant: "outline", size: "sm" }, "Card"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); }, variant: "outline", size: "sm" }, "PinInputs"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); }, variant: "outline", size: "sm" }, "NumberInput"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); }, variant: "outline", size: "sm" }, "Progressbar"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); }, variant: "outline", size: "sm" }, "Button"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); }, variant: "outline", size: "sm" }, "RadioButton"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); }, variant: "outline", size: "sm" }, "Skeleton"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); }, variant: "outline", size: "sm" }, "Textarea"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); }, variant: "outline", size: "sm" }, "Select"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); }, variant: "outline", size: "sm" }, "Modal"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline", size: "sm" }, "Checkbox"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline", size: "sm" }, "Toster"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline", size: "sm" }, "Input"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline", size: "sm" }, "Table"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline", size: "sm" }, "Kanban"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline", size: "sm" }, "Tag"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/header"); }, variant: "outline", size: "sm" }, "Header"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "sm" }, "File Upload"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productCard"); }, variant: "outline" }, "Product Card")),
-            react_2.default.createElement("br", null),
-            react_2.default.createElement("br", null),
-            react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline", size: "sm" }, "Input"),
-            react_2.default.createElement("button", { onClick: function () { return switchTheme("theme2"); } }, "Switch to Theme 2")),
-        react_2.default.createElement("br", null),
-        react_2.default.createElement("br", null),
-        renderPage()));
-};
-exports.default = Layout;