[ { "path": ".eslintrc.cjs", "content": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plugin:react/recommended',\n 'plugin:react/jsx-runtime',\n 'plugin:react-hooks/recommended',\n ],\n ignorePatterns: ['dist', '.eslintrc.cjs'],\n parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },\n settings: { react: { version: '18.2' } },\n plugins: ['react-refresh'],\n rules: {\n 'react-refresh/only-export-components': [\n 'warn',\n { allowConstantExport: true },\n ],\n },\n}\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n" }, { "path": "README.md", "content": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n" }, { "path": "index.html", "content": "\n\n \n \n \n \n React Components\n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-components\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --open\",\n \"build\": \"vite build\",\n \"lint\": \"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@gsap/react\": \"^2.1.0\",\n \"framer-motion\": \"^11.0.18\",\n \"gsap\": \"^3.13.0\",\n \"rc-slider\": \"^10.6.2\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-draggable\": \"^4.4.6\",\n \"react-dropzone\": \"^14.3.5\",\n \"react-router-dom\": \"^6.22.3\",\n \"react-toastify\": \"^11.0.5\",\n \"react-xarrows\": \"^2.0.2\",\n \"swiper\": \"^11.1.4\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.2.43\",\n \"@types/react-dom\": \"^18.2.17\",\n \"@vitejs/plugin-react\": \"^4.2.1\",\n \"eslint\": \"^8.55.0\",\n \"eslint-plugin-react\": \"^7.33.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.5\",\n \"vite\": \"^5.0.8\"\n }\n}\n" }, { "path": "src/App.jsx", "content": "import { createBrowserRouter, RouterProvider } from \"react-router-dom\";\nimport { Layout } from \"./Layout\";\nimport { routes } from \"./routes\";\n\nconst router = createBrowserRouter([\n {\n path: \"/\",\n element: ,\n },\n ...routes,\n]);\n\nfunction App() {\n return ;\n}\n\nexport default App;\n" }, { "path": "src/Layout.css", "content": ".layout {\n background: #222129;\n color: #f5f3f9;\n margin: 0;\n height: 100vh;\n font-size: 16px;\n}\n\n.layout-table-wrapper {\n overflow: auto;\n position: relative;\n z-index: 2;\n max-height: 60vh;\n}\n\n.layout-header {\n position: relative;\n overflow: hidden;\n margin: 0 0 18px;\n}\n\n.layout-header .content {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 240px;\n max-width: 1000px;\n margin: 0 auto;\n padding: 0 70px 60px;\n}\n\n.layout-header::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n translate: -50% 0;\n z-index: 0;\n background: #5926fc;\n width: 500vw;\n aspect-ratio: 1/1;\n border-radius: 50%;\n}\n\n.layout-header button {\n font-family: inherit;\n background: rgb(0 0 0 / 16%);\n color: inherit;\n border: 0;\n border-radius: 8px;\n padding: 12px 18px 12px 20px;\n font-size: 13.5px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.layout-header button span {\n font-size: 16px;\n translate: 0 -1px;\n}\n\n.layout-header h2 {\n font-size: 24px;\n font-weight: 400;\n display: flex;\n align-items: center;\n}\n\n.layout-header h2 i {\n margin-right: 8px;\n background: rgb(0 0 0 / 16%);\n display: grid;\n place-items: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n}\n\n.layout-card {\n max-width: 1000px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n background: #1a191e;\n border-radius: 8px;\n box-shadow: 0 30px 40px rgb(0 0 0 / 12%);\n padding: 10px 18px 18px;\n font-size: 12px;\n margin: -100px auto 30px;\n}\n\n@media (width < 706px) {\n .layout-table {\n margin: -100px 50px 30px;\n }\n}\n\n.layout-table {\n border-collapse: collapse;\n text-align: left;\n width: 100%;\n}\n\n.layout-table thead {\n position: sticky;\n top: 0;\n left: 0;\n z-index: 1;\n background: #1a191e;\n}\n\n.layout-table thead tr th:not(:last-child) {\n width: 120px;\n max-width: 120px;\n}\n\n.layout-table :is(th, td) {\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n padding: 0 6px;\n height: 60px;\n font-size: 16px;\n}\n\n.layout-table th {\n font-weight: 500;\n user-select: none;\n text-transform: capitalize;\n color: #706d84;\n height: 56px;\n cursor: pointer;\n vertical-align: middle;\n transition: 0.3s;\n}\n\n.layout-table th i {\n font-size: 11px;\n translate: 0 -1px;\n margin-left: 6px;\n}\n\n.layout-table th:is(.active, :hover) {\n color: inherit;\n}\n\n.layout-table td {\n opacity: 0.65;\n transition: opacity 0.3s;\n}\n\n.layout-table td a {\n color: inherit;\n text-decoration: none;\n}\n\n.layout-table tbody tr:hover td {\n opacity: 1;\n}\n\n.layout-table tr {\n cursor: pointer;\n border-bottom: 1px solid #34323c;\n}\n\n.layout-table tbody tr:last-child {\n border: 0;\n}\n\n.layout-table tbody tr:nth-child(odd) {\n background: #1e1d25;\n}\n" }, { "path": "src/Layout.jsx", "content": "import { Link, useNavigate } from \"react-router-dom\";\nimport { routes } from \"./routes\";\nimport \"./Layout.css\";\n\nexport const Layout = () => {\n const sortedRoutes = routes.sort((a, b) => {\n const regex = /^([a-zA-Z]+)(\\d*)$/;\n\n const matchA = a.name.match(regex);\n const matchB = b.name.match(regex);\n\n const textA = matchA ? matchA[1] : a.name;\n const textB = matchB ? matchB[1] : b.name;\n const numA = matchA && matchA[2] ? parseInt(matchA[2], 10) : 0;\n const numB = matchB && matchB[2] ? parseInt(matchB[2], 10) : 0;\n\n const textCompare = textA.localeCompare(textB);\n if (textCompare !== 0) return textCompare;\n\n return numA - numB;\n });\n\n const navigate = useNavigate();\n\n return (\n
\n
\n
\n

\n {/* */}\n React Components\n

\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n {sortedRoutes.map((route) => (\n navigate(route.path)} key={route.path}>\n \n \n ))}\n \n
Name
\n {route.name}\n
\n
\n
\n
\n );\n};\n" }, { "path": "src/components/accordions/Accordion1/Accordion1.jsx", "content": "import { useState } from \"react\";\nimport \"./styles.css\";\n\nexport const Accordion1 = ({ items }) => {\n const [active, setActive] = useState(0);\n\n const handleToggle = (index) => setActive(index);\n\n return (\n
\n \n
\n {items.map((item, index) => {\n const isActive = active === index ? \"active\" : \"\";\n return (\n handleToggle(index)}\n >\n \n
\n photo_camera\n
\n

{item.header}

\n

{item.text}

\n
\n
\n
\n );\n })}\n \n
\n );\n};\n" }, { "path": "src/components/accordions/Accordion1/Accordion1Example.jsx", "content": "import { Accordion1 } from \"./Accordion1\";\nimport image1 from \"./6.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 from \"./3.jpg\";\nimport image4 from \"./4.jpg\";\nimport image5 from \"./5.jpg\";\n\nconst coolImages = [\n {\n header: \"Canada\",\n image: image1,\n text: `Image description`,\n },\n\n {\n header: \"New Zealand\",\n image: image2,\n text: `Image description`,\n },\n {\n header: \"Indonesia\",\n image: image3,\n text: `Image description`,\n },\n {\n header: \"South Africa\",\n image: image2,\n text: `Image description`,\n },\n {\n header: \"Spain\",\n image: image5,\n text: `Image description`,\n },\n];\n\nexport const Accordion1Example = () => ;\n" }, { "path": "src/components/accordions/Accordion1/styles.css", "content": ".page.image-accordion-page {\n background: #141415;\n}\n\n.page.image-accordion-page .bg {\n background-size: cover;\n position: fixed;\n width: 100vh;\n min-width: 100vh;\n max-width: 100vh;\n height: 100vh;\n min-height: 100vh;\n max-height: 100vh;\n top: 0;\n left: 0;\n filter: grayscale(5);\n transition: background 0.5s;\n}\n\n.page.image-accordion-page .bg::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgb(0 0 0 / 80%);\n backdrop-filter: blur(16px);\n}\n\n.image-accordion-item {\n position: relative;\n overflow: hidden;\n background: #ffffff;\n width: 64px;\n height: 500px;\n border-radius: 36px;\n display: flex;\n align-items: flex-end;\n opacity: 0.25;\n cursor: pointer;\n transition: 0.5s;\n}\n\n.image-accordion-item:hover {\n opacity: 0.5;\n}\n\nh2,\np {\n margin: 0;\n}\n\n.image-accordion {\n display: flex;\n gap: 12px;\n}\n\n.image-accordion-item {\n cursor: pointer;\n}\n\n.image-accordion-item h2 {\n font-size: 24px;\n font-weight: 400;\n color: rgb(255 255 255 / 96%);\n}\n\n.image-accordion-item p {\n color: rgb(255 255 255 / 66%);\n}\n\n.image-accordion-item.active {\n width: 400px;\n opacity: 1;\n}\n\n.image-accordion-item .material-symbols-outlined {\n display: grid;\n place-items: center;\n width: 50px;\n height: 50px;\n background: rgb(255 255 255 / 20%);\n border-radius: 50%;\n font-size: 28px;\n}\n\n.image-accordion-item .content {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 400px;\n z-index: 1;\n opacity: 0;\n visibility: hidden;\n padding: 100px 0 20px 20px;\n display: flex;\n align-items: center;\n gap: 14px;\n background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%));\n transition: 0.25s;\n}\n\n.image-accordion-item.active .content {\n opacity: 1;\n visibility: visible;\n}\n\n.image-accordion-item img {\n position: absolute;\n z-index: 0;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n height: 150%;\n filter: grayscale(0.5);\n}\n" }, { "path": "src/components/accordions/Accordion2/Accordion2.css", "content": ".accordion-2 {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.accordion-2-item h2 {\n display: flex;\n align-items: center;\n height: 48px;\n padding: 0 10px 0 20px;\n border-radius: 8px;\n cursor: pointer;\n background: #2d2f3c;\n margin: 0 0 10px;\n color: #f8f8f8;\n font-size: 16px;\n font-weight: 400;\n transition: 0.3s;\n opacity: 0.7;\n}\n\n.accordion-2-item h2:hover {\n background: #303341;\n opacity: 1;\n}\n\n.accordion-2-item h2.active {\n background: #3472ff;\n opacity: 1;\n}\n\n.accordion-2-item h2.active > span:last-child {\n rotate: -180deg;\n}\n\n.accordion-2-item p {\n padding: 0 20px 10px;\n line-height: 1.7;\n font-size: 14px;\n margin: 0;\n opacity: 0.65;\n cursor: pointer;\n}\n\n.accordion-2-item > h2 > span {\n transition: 0.3s;\n}\n\n.accordion-2-content {\n position: relative;\n height: 0;\n overflow: hidden;\n transition: height 0.5s ease;\n}\n" }, { "path": "src/components/accordions/Accordion2/Accordion2.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./Accordion2.css\";\n\nconst AccordionItem = (props) => {\n const contentEl = useRef(null);\n const { handleToggle, active, item, index } = props;\n const { header, content } = item;\n\n return (\n
  • \n handleToggle(index)}\n >\n {header}\n expand_more\n \n \n

    {content}

    \n \n
    • \n );\n};\n\nexport const Accordion2 = ({ items }) => {\n const [active, setActive] = useState(null);\n\n const handleToggle = (index) => setActive(active === index ? null : index);\n\n return (\n
      \n {items.map((item, index) => {\n return (\n \n );\n })}\n
    \n );\n};\n" }, { "path": "src/components/accordions/Accordion2/Accordion2Example.css", "content": ".page.accordion-2-page {\n display: grid;\n place-items: center;\n height: 100vh;\n color: #ffffff;\n background: #141316;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.accordion-2-card {\n background: #22252f;\n width: 400px;\n padding: 24px;\n border-radius: 12px;\n cursor: pointer;\n}\n\n.accordion-2-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-right: auto;\n}\n\n.accordion-2-header > span {\n font-size: 20px;\n}\n" }, { "path": "src/components/accordions/Accordion2/Accordion2Example.jsx", "content": "import { Accordion2 } from \"./Accordion2\";\nimport \"./Accordion2Example.css\";\n\nconst faqs = [\n {\n header: (\n
    \n mail Delivery\n
    \n ),\n content: `We process and ship all orders within 1–2 business days. Standard delivery takes 3–7 business days. Express shipping is available. Tracking information will be emailed to you once your order has been dispatched.`,\n },\n {\n header: (\n
    \n credit_card Returns &\n Refunds\n
    \n ),\n content: `Returns are accepted within 30 days for unworn, unwashed items with original tags. Use our Returns Portal to begin. Refunds are issued within 5–10 business days after we receive and inspect the returned item.`,\n },\n {\n header: (\n
    \n warning Order Issues\n
    \n ),\n content: `If your order is incorrect, missing items, or arrived damaged, contact our support team within 7 days. Include your order number and any photos so we can resolve the issue as quickly as possible.`,\n },\n {\n header: (\n
    \n package_2 Products &\n Stock\n
    \n ),\n content: `We restock popular products regularly. If something is sold out, use the “Notify Me” feature for updates. Each product page includes a size guide to help you choose the best possible fit.`,\n },\n];\n\nexport const Accordion2Example = () => (\n
    \n
    \n \n
    \n
    \n);\n" }, { "path": "src/components/accordions/Accordion3/Accordion3.css", "content": ".page.accordion-3-page {\n background: #141415;\n}\n\n.page.accordion-3-page .bg {\n background-size: cover;\n position: fixed;\n width: 100vh;\n min-width: 100vh;\n max-width: 100vh;\n height: 100vh;\n min-height: 100vh;\n max-height: 100vh;\n top: 0;\n left: 0;\n filter: grayscale(5);\n transition: background 0.5s;\n}\n\n.page.accordion-3-page .bg::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgb(0 0 0 / 80%);\n backdrop-filter: blur(16px);\n}\n\n.accordion-3-item:hover {\n opacity: 0.5;\n}\n\n.accordion-3 :is(h2, p) {\n margin: 0;\n}\n\n.accordion-3 {\n display: flex;\n gap: 12px;\n}\n\n.accordion-3-item {\n position: relative;\n overflow: hidden;\n background: #ffffff;\n width: 64px;\n height: 500px;\n border-radius: 36px;\n display: flex;\n align-items: flex-end;\n opacity: 0.25;\n cursor: pointer;\n transition: 0.5s;\n}\n\n.accordion-3-item h2 {\n font-size: 24px;\n font-weight: 400;\n color: rgb(255 255 255 / 96%);\n}\n\n.accordion-3-item p {\n color: rgb(255 255 255 / 66%);\n}\n\n.accordion-3-item.active {\n width: 400px;\n opacity: 1;\n}\n\n.accordion-3-item .material-symbols-outlined.icon {\n display: grid;\n place-items: center;\n width: 50px;\n height: 50px;\n background: rgb(255 255 255 / 20%);\n border-radius: 50%;\n font-size: 28px;\n}\n\n.accordion-3-item .content {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 400px;\n z-index: 1;\n opacity: 0;\n visibility: hidden;\n padding: 100px 0 20px 20px;\n display: flex;\n align-items: center;\n gap: 14px;\n background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%));\n transition: 0.25s;\n}\n\n.accordion-3-item.active .content {\n opacity: 1;\n visibility: visible;\n}\n\n.accordion-3-item img {\n position: absolute;\n z-index: 0;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n height: 150%;\n filter: grayscale(0.5);\n}\n" }, { "path": "src/components/accordions/Accordion3/Accordion3.jsx", "content": "import { useState } from \"react\";\nimport \"./Accordion3.css\";\n\nexport const Accordion3 = ({ items }) => {\n const [active, setActive] = useState(0);\n\n const handleToggle = (index) => setActive(index);\n\n return (\n
    \n \n
    \n {items.map((item, index) => {\n const isActive = active === index ? \"active\" : \"\";\n return (\n handleToggle(index)}\n >\n \n
    \n \n photo_camera\n \n
    \n

    {item.header}

    \n

    {item.text}

    \n
    \n
    \n
    \n );\n })}\n \n
    \n );\n};\n" }, { "path": "src/components/accordions/Accordion3/Accordion3Example.jsx", "content": "import { Accordion3 } from \"./Accordion3\";\nimport image1 from \"./6.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 from \"./3.jpg\";\nimport image4 from \"./4.jpg\";\nimport image5 from \"./5.jpg\";\n\nconst coolImages = [\n {\n header: \"Canada\",\n image: image4,\n text: `Image description`,\n },\n {\n header: \"New Zealand\",\n image: image1,\n text: `Image description`,\n },\n {\n header: \"Indonesia\",\n image: image3,\n text: `Image description`,\n },\n {\n header: \"South Africa\",\n image: image2,\n text: `Image description`,\n },\n {\n header: \"Spain\",\n image: image5,\n text: `Image description`,\n },\n];\n\nexport const Accordion3Example = () => ;\n" }, { "path": "src/components/accordions/index.js", "content": "export * from \"./Accordion1/Accordion1\";\nexport * from \"./Accordion1/Accordion1Example\";\nexport * from \"./Accordion2/Accordion2Example\";\nexport * from \"./Accordion3/Accordion3Example\";\n" }, { "path": "src/components/buttons/DeleteButton/DeleteButton.jsx", "content": "import { useState } from \"react\";\nimport \"./styles.css\";\n\nexport const DeleteButton = () => {\n const [isDeleting, setIsDeleting] = useState(false);\n const [isDeleted, setIsDeleted] = useState(false);\n\n const handleClick = () => {\n setIsDeleting(true);\n // do something async\n setTimeout(() => {\n setIsDeleting(false);\n setIsDeleted(true);\n setTimeout(() => {\n setIsDeleted(false);\n }, 1250);\n }, 2500);\n };\n\n return (\n
    \n \n \n {isDeleting || isDeleted ? \"Deleting\" : \"Delete\"}\n \n \n \n \n \n \n \n \n \n
    \n );\n};\n" }, { "path": "src/components/buttons/DeleteButton/styles.css", "content": ".page.delete-button-page {\n background: #141414;\n}\n\n.delete-button {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 18px;\n border: 0;\n background: #fc3b51;\n font-size: 24px;\n font-weight: 400;\n font-family: \"Euclid Circular A\";\n color: #f9f9f9;\n padding: 0 10px 0 32px;\n height: 74px;\n text-align: left;\n cursor: pointer;\n outline: none;\n transition: 0.3s;\n}\n\n.delete-button .button-text {\n display: block;\n text-align: center;\n min-width: 94px;\n}\n\n.delete-button .animation {\n position: relative;\n overflow: hidden;\n display: grid;\n place-items: center;\n width: 64px;\n height: 74px;\n flex: 0 0 64px;\n min-width: 0;\n}\n\n.delete-button .can {\n overflow: hidden;\n position: relative;\n translate: 0 2px;\n width: 20px;\n height: 22px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n border: 2px solid #ffffff;\n border-top: 0;\n}\n\n@keyframes lid-open {\n 0% {\n rotate: 0;\n }\n 15%,\n 90% {\n rotate: -75deg;\n translate: -70% -20%;\n width: 20px;\n }\n}\n\n.delete-button .lid {\n position: absolute;\n top: 24px;\n left: 50%;\n translate: -50% 0;\n transform-origin: 0% 0%;\n width: 24px;\n height: 2px;\n background: #ffffff;\n}\n\n@keyframes balls-drop {\n 0%,\n 20% {\n translate: -50% 0;\n }\n 40% {\n scale: 1 1;\n }\n 40%,\n 100% {\n translate: -50% 72px;\n }\n\n 50%,\n 100% {\n scale: 2.1 1;\n }\n}\n\n.delete-button .balls {\n position: absolute;\n top: -32px;\n left: 50%;\n translate: -50% 0;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: #ffffff;\n}\n\n@keyframes fill {\n 0%,\n 20% {\n translate: 0 0;\n }\n 50%,\n 70% {\n translate: 0 -50%;\n }\n 90%,\n 100% {\n translate: 0 -100%;\n }\n}\n\n.delete-button .filler {\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -32px;\n width: 64px;\n height: 120%;\n background: #ffffff;\n}\n\n.delete-button:disabled {\n cursor: not-allowed;\n}\n\n.delete-button.deleting .balls {\n animation: balls-drop 2 linear 1.25s;\n}\n\n.delete-button.deleting .filler {\n animation: fill 2.5s both;\n}\n\n.delete-button.deleting .lid {\n animation: lid-open 2.5s both;\n}\n" }, { "path": "src/components/buttons/FabButton/FabButton.css", "content": ".page.fab-button-page {\n background: #16151b;\n}\n\n.fab {\n position: fixed;\n right: 30px;\n bottom: 38px;\n border-radius: 50%;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n}\n\n.fab button {\n cursor: pointer;\n border: 0;\n background: transparent;\n}\n\n.fab > button {\n position: relative;\n z-index: 1;\n display: grid;\n place-items: center;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n border: 0;\n background: #e952de;\n border: 0;\n color: #f9f9f9;\n transition: 0.2s;\n rotate: 0deg;\n}\n\n.fab > button > span {\n font-size: 36px;\n}\n\n.fab-menu {\n position: absolute;\n z-index: 0;\n top: 50%;\n left: 50%;\n width: 360px;\n height: 360px;\n translate: -50% -50%;\n border: 80px solid #282633;\n border-radius: 50%;\n rotate: -220deg;\n scale: 0.7;\n opacity: 0;\n transition: 0.4s ease-out;\n}\n\n.fab.open > button {\n rotate: 45deg;\n}\n\n.fab.open .fab-menu {\n rotate: 0deg;\n scale: 1;\n opacity: 1;\n}\n\n.fab-menu > button {\n position: absolute;\n color: #e0e0e0;\n transition: 0.4s;\n}\n\n.fab-menu > button:hover {\n scale: 1.2;\n color: #f9f9f9;\n}\n\n.fab .material-symbols-outlined {\n font-size: 36px;\n}\n\n.fab-menu > button:nth-child(1) {\n left: 78px;\n top: -58px;\n}\n\n.fab-menu > button:nth-child(2) {\n left: -16px;\n top: -16px;\n}\n\n.fab-menu > button:nth-child(3) {\n left: -58px;\n top: 78px;\n}\n" }, { "path": "src/components/buttons/FabButton/FabButton.jsx", "content": "import { useState } from \"react\";\nimport \"./FabButton.css\";\n\nconst Icon = ({ children }) => (\n {children}\n);\n\nexport const FabButton = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n
    \n
    \n \n
    \n \n \n \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/buttons/TrashButton/TrashButton.css", "content": ".page.trash-button-page {\n background: #141414;\n}\n\n.trash-button {\n --color-icon: #f9f9f9;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border: 0;\n background: #fc3b51;\n font-size: 22px;\n font-weight: 400;\n font-family: \"Euclid Circular B\";\n color: var(--color-icon);\n padding: 0 0 0 20px;\n opacity: 0.85;\n width: 160px;\n height: 64px;\n text-align: left;\n cursor: pointer;\n transition: 0.3s;\n}\n\n@keyframes loader-move {\n 0% {\n transform: scaleX(0);\n }\n 100% {\n transform: scaleX(1);\n }\n}\n\n.trash-button .loader {\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 4px;\n background: rgb(0 0 0 / 24%);\n opacity: 0;\n transition: 0.3s;\n}\n\n.trash-button.deleting .loader {\n opacity: 1;\n}\n\n.trash-button .loader::after {\n content: \"\";\n position: inherit;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform-origin: 0% 50%;\n background: #f9f9f9;\n}\n\n.trash-button.deleting .loader::after {\n animation: loader-move 1.5s linear both;\n}\n\n.trash-button:hover {\n opacity: 1;\n}\n\n.trash-button .button-text {\n flex: 0 0 66px;\n width: 66px;\n}\n\n.trash-button .animation {\n position: relative;\n overflow: hidden;\n display: grid;\n place-items: center;\n width: 64px;\n height: 64px;\n scale: 1;\n}\n\n.trash-button .can {\n overflow: hidden;\n position: relative;\n translate: 0 3px;\n width: 20px;\n height: 22px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n border: 2px solid var(--color-icon);\n}\n\n.trash-button .lid {\n position: absolute;\n top: 20px;\n left: 50%;\n translate: -50% 0;\n width: 22px;\n height: 2px;\n background: var(--color-icon);\n}\n\n@keyframes move {\n 75%,\n 100% {\n translate: 0 88px;\n }\n}\n\n.trash-button :is(.paper-wrapper, .shredded-wrapper) {\n overflow: hidden;\n position: absolute;\n display: flex;\n top: -20px;\n}\n\n.trash-button .paper-wrapper {\n height: 40px;\n}\n\n.trash-button .shredded-wrapper {\n top: 24px;\n height: 20px;\n}\n\n.trash-button :is(.paper, .shredded) {\n height: 18px;\n}\n\n.trash-button .shredded {\n margin-top: -40px;\n}\n\n@keyframes fill {\n 0%,\n 20% {\n translate: 0 0;\n }\n 40%,\n 70% {\n translate: 0 -50%;\n }\n 90%,\n 100% {\n translate: 0 -100%;\n }\n}\n\n.trash-button .filler {\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -32px;\n width: 64px;\n height: 120%;\n background: var(--color-icon);\n}\n\n.trash-button:disabled {\n cursor: not-allowed;\n}\n\n.trash-button.deleting :is(.paper, .shredded) {\n animation: move 1s linear 2 both;\n}\n\n.trash-button.deleting .filler {\n animation: fill 2s both;\n}\n" }, { "path": "src/components/buttons/TrashButton/TrashButton.jsx", "content": "import { useState } from \"react\";\nimport \"./TrashButton.css\";\nimport paper from \"./paper.svg\";\nimport shredded from \"./shredded.svg\";\n\nexport const TrashButton = () => {\n const [isDeleting, setIsDeleting] = useState(false);\n\n const handleClick = () => {\n setIsDeleting(true);\n // do something async\n setTimeout(() => {\n setIsDeleting(false);\n }, 2500);\n };\n\n return (\n
    \n \n \n Delete\n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n};\n" }, { "path": "src/components/buttons/index.js", "content": "export * from \"./DeleteButton/DeleteButton\";\nexport * from \"./TrashButton/TrashButton\";\nexport * from \"./FabButton/FabButton\";\n" }, { "path": "src/components/cards/Card1/Card1.jsx", "content": "import \"./styles.css\";\n\nconst cards = [\n {\n name: \"summary\",\n total: 21,\n description: \"Due Tasks\",\n footer: \"Completed: 13\",\n more: \"More Information\",\n },\n {\n name: \"overdue\",\n total: 17,\n description: \"Projects\",\n footer: \"Yesterday: 9\",\n more: \"More Information\",\n },\n {\n name: \"features\",\n total: 38,\n description: \"Proposals\",\n footer: \"Implemented: 6\",\n more: \"More Information\",\n },\n];\n\nexport const Card1 = () => {\n return (\n
    \n
    \n {cards.map((card) => (\n \n ))}\n
    \n
    \n );\n};\n" }, { "path": "src/components/cards/Card1/styles.css", "content": ".page.card-1-page {\n margin: 0;\n height: 100vh;\n display: grid;\n place-items: center;\n color: #f7f7f7;\n background: #121212;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.card-1-page h2,\n.card-1-page h3,\n.card-1-page h4 {\n margin: 0;\n font-weight: 500;\n}\n\n.card-1-page .cards {\n display: flex;\n gap: 30px;\n}\n\n.card-1-page .card {\n position: relative;\n perspective: 1000px;\n width: 300px;\n height: 300px;\n}\n\n.card-1-page .card header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 40px;\n margin-bottom: 26px;\n}\n\n.card-1-page .card header h2 {\n font-size: 20px;\n text-transform: capitalize;\n}\n\n.card-1-page .card .front,\n.card-1-page .card .back {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n backface-visibility: hidden;\n background: #1e1e1e;\n border-radius: 10px;\n padding: 36px 36px 44px 44px;\n transition: 0.6s;\n cursor: pointer;\n}\n\n.card-1-page .back {\n transform: rotateY(180deg);\n}\n\n.card-1-page input {\n position: absolute;\n scale: 0;\n}\n\n.card-1-page input:checked ~ .card .back {\n transform: rotateY(0);\n}\n\n.card-1-page input:checked ~ .card .front {\n transform: rotateY(-180deg);\n}\n\n.card-1-page .card var {\n font-style: normal;\n font-size: 80px;\n line-height: 1;\n}\n\n.card-1-page .card h3 {\n margin: 0 0 30px;\n font-weight: 500;\n}\n\n.card-1-page #summary :is(var, h3) {\n color: #3b82f6;\n}\n\n.card-1-page #overdue :is(var, h3) {\n color: #e56363;\n}\n\n.card-1-page #features :is(var, h3) {\n color: #25b697;\n}\n\n.card-1-page .card :is(h4, p) {\n opacity: 0.6;\n font-size: 20px;\n}\n\n.card-1-page .card p {\n margin-top: 76px;\n}\n" }, { "path": "src/components/cards/Card2/Card2.css", "content": ".page.card-2-example-page {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n height: 100vh;\n background: linear-gradient(45deg, #0cd2d1, #0857c0);\n color: #fdfcfd;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.card-2 {\n display: flex;\n align-items: center;\n width: 75vw;\n max-width: 650px;\n padding: 50px 30px 50px 20px;\n background: #121017;\n border-radius: 24px;\n box-shadow: 0 80px 60px rgb(0 0 0 / 12%);\n}\n\n.card-2 img {\n max-width: 280px;\n width: 32vw;\n height: 300px;\n object-fit: cover;\n margin-left: -60px;\n margin-right: 30px;\n border-radius: inherit;\n box-shadow: 0 60px 40px rgb(0 0 0 / 12%);\n transition: border-radius 0.3s;\n}\n\n.card-2 h2 {\n font-size: 26px;\n font-weight: 400;\n margin-top: 0;\n margin-right: 30px;\n margin-bottom: 6px;\n}\n\n.card-2 h3 {\n font-size: 16px;\n font-weight: 400;\n margin: 0 0 12px;\n opacity: 0.66;\n}\n\n.card-2 p {\n font-size: 14px;\n font-weight: 400;\n margin-bottom: 30px;\n opacity: 0.42;\n}\n\n.card-2 .buttons {\n display: flex;\n gap: 12px;\n}\n\n.card-2 button {\n border: 1px solid #f8f8f8;\n background: transparent;\n color: #f8f8f8;\n width: 40%;\n min-width: 100px;\n text-align: center;\n font-family: inherit;\n padding: 12px 26px;\n font-size: 16px;\n border-radius: 40px;\n}\n\n.card-2 button.primary {\n background: #ffffff;\n color: #121017;\n}\n\n@media (width <= 600px) {\n .card-2 {\n margin: 0 40px;\n padding-left: 50px;\n padding-right: 50px;\n padding-bottom: 60px;\n width: 100%;\n text-align: center;\n flex-direction: column;\n }\n\n .card-2 .buttons {\n justify-content: center;\n }\n\n .card-2 .buttons button {\n width: 50%;\n }\n\n .card-2 h2 {\n margin-right: 0;\n font-size: 26px;\n }\n\n .card-2 img {\n margin: -100px 0 30px 0;\n width: 100%;\n max-width: 1000px;\n height: 250px;\n }\n\n .card-2 p {\n max-width: 400px;\n }\n}\n\n@media (width <= 420px) {\n .card-2 img {\n height: 50vw;\n width: 50vw;\n border-radius: 50%;\n margin: -140px 0 30px 0;\n }\n}\n" }, { "path": "src/components/cards/Card2/Card2.jsx", "content": "import \"./Card2.css\";\n\nexport const Card2 = ({\n image,\n title,\n subtitle,\n description,\n onProfile,\n onFollow,\n}) => (\n
    \n \n
    \n

    {title}

    \n

    {subtitle}

    \n

    {description}

    \n
    \n \n \n
    \n
    \n
    \n);\n" }, { "path": "src/components/cards/Card2/Card2Example.jsx", "content": "import { Card2 } from \"./Card2\";\nimport image from \"./image.jpg\";\n\nexport const Card2Example = () => {\n const handleProfile = () => {\n // goto profile\n };\n\n const handleFollow = () => {\n // follow account\n };\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/cards/Card3/Card3.css", "content": ".card-3 {\n --color-primary: #356aff;\n --color-muted: #9895a2;\n --color-highlight: #242328;\n --border: 1px solid #2f2e32;\n position: relative;\n border-radius: 24px;\n width: clamp(200px, 80vw, 500px);\n padding-top: 30px;\n background: #1c1b20;\n}\n\n.card-3 > img {\n position: absolute;\n top: 0;\n left: 50%;\n translate: -50% -50%;\n width: 92px;\n aspect-ratio: 1/1;\n border-radius: 50%;\n background: var(--color-highlight);\n padding: 20px;\n box-shadow: 0 20px 150px rgb(0 0 0 / 8%);\n}\n\n.card-3 .main {\n padding: 24px 24px 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n}\n\n.card-3 :is(h2, h3, h4, h5) {\n font-weight: 400;\n margin: 0;\n}\n\n.card-3 em {\n font-style: normal;\n color: var(--color-primary);\n}\n\n.card-3 h2 {\n font-weight: 600;\n font-size: 20px;\n margin-top: 18px;\n margin-bottom: 18px;\n}\n\n.card-3 h3 {\n font-weight: 300;\n font-size: clamp(16px, 4vw, 20px);\n color: var(--color-muted);\n}\n\n.card-3 h4 {\n font-weight: 500;\n font-size: clamp(22px, 5.5vw, 26px);\n margin-bottom: 6px;\n}\n\n.card-3 h5 {\n color: var(--color-muted);\n font-size: clamp(14px, 4vw, 16px);\n margin-bottom: 40px;\n}\n\n.card-3 .details {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px;\n margin-bottom: 20px;\n font-size: clamp(14px, 4vw, 16px);\n}\n\n.card-3 .salary em {\n color: var(--color-muted);\n}\n\n.card-3 .date {\n color: var(--color-muted);\n}\n\n.card-3 .footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 16px 24px;\n border-top: var(--border);\n}\n\n.card-3 .footer button {\n background: transparent;\n border: var(--border);\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n color: inherit;\n}\n\n.card-3 .footer button span {\n font-size: 22px;\n}\n\n.card-3 .badge {\n display: inline-flex;\n margin-right: auto;\n align-items: center;\n gap: 12px;\n padding-right: 20px;\n font-size: 14px;\n border-radius: 50px;\n background: var(--color-highlight);\n}\n\n.card-3 .badge .text {\n display: none;\n}\n\n.card-3 .badge img {\n width: 40px;\n}\n\n.card-3 .badge p {\n color: var(--color-muted);\n}\n\n@media (width >= 430px) {\n .card-3 {\n padding-top: 0;\n }\n\n .card-3 > img {\n position: absolute;\n top: 20px;\n right: 20px;\n left: auto;\n translate: 0;\n width: clamp(68px, 12vw, 80px);\n padding: 16px;\n border-color: transparent;\n box-shadow: none;\n }\n\n .card-3 .main {\n text-align: left;\n }\n\n .card-3 .badge .text {\n display: inline;\n }\n\n .card-3 h5 {\n margin-bottom: 28px;\n }\n}\n" }, { "path": "src/components/cards/Card3/Card3.jsx", "content": "import logo from \"./logo.svg\";\nimport avatar from \"./avatar.png\";\nimport \"./Card3.css\";\n\nexport const Card3 = ({\n company,\n level,\n role,\n location,\n isRemote,\n salary,\n when,\n profileMatch,\n onShare,\n onSave,\n}) => (\n
    \n \n
    \n

    {company}

    \n

    {level}

    \n

    {role}

    \n
    \n {location} {isRemote && (Remote)}\n
    \n
    \n
    \n \n {\" \"}\n {salary}\n /month{\" \"}\n \n {when}\n
    \n
    \n
    \n \n

    \n {profileMatch}% \n profile match\n

    \n
    \n \n \n
    \n
    \n);\n" }, { "path": "src/components/cards/Card3/Card3Example.css", "content": ".page.card-3-page {\n background: #111116;\n color: #ffffff;\n height: 100vh;\n margin: 0;\n display: grid;\n place-items: center;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n" }, { "path": "src/components/cards/Card3/Card3Example.jsx", "content": "import { Card3 } from \"./Card3\";\nimport \"./Card3Example.css\";\n\nexport const Card3Example = () => {\n const onShare = () => console.log(\"share\");\n const onSave = () => console.log(\"share\");\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/cards/Card4/Card4.css", "content": ".card-4 {\n display: flex;\n align-items: center;\n width: 75vw;\n max-width: 650px;\n padding: 24px 30px 24px 20px;\n background: rgba(0, 0, 0, 20%);\n backdrop-filter: blur(30px);\n border-radius: 24px;\n}\n\n.card-4 img {\n max-width: 280px;\n width: 36vw;\n height: 340px;\n object-fit: cover;\n margin-left: -60px;\n margin-right: 30px;\n border-radius: inherit;\n box-shadow: 0 20px 40px rgb(0 0 0 / 16%);\n transition: border-radius 0.3s;\n}\n\n.card-4 h2 {\n font-size: 24px;\n font-weight: 400;\n margin-top: 0;\n margin-right: 30px;\n margin-bottom: 10px;\n}\n\n.card-4 h3 {\n font-size: 16px;\n font-weight: 400;\n margin: 0 0 10px;\n opacity: 0.75;\n}\n\n.card-4 p {\n font-size: 14px;\n font-weight: 400;\n margin-bottom: 30px;\n opacity: 0.5;\n}\n\n.card-4-socials {\n display: flex;\n align-items: center;\n gap: 18px;\n}\n\n.card-4-socials > button {\n position: relative;\n border: 0;\n background: transparent;\n color: #f8f8f8;\n padding: 0;\n}\n\n.card-4-socials > button > i {\n position: relative;\n z-index: 1;\n display: grid;\n place-items: center;\n font-size: 24px;\n height: 50px;\n}\n\n@media (width <= 600px) {\n .card-4 {\n margin: 0 40px;\n padding-left: 50px;\n padding-right: 50px;\n padding-bottom: 60px;\n width: 100%;\n text-align: center;\n flex-direction: column;\n }\n\n .card-4 h2 {\n margin-right: 0;\n font-size: 26px;\n }\n\n .card-4 img {\n margin: -100px 0 30px 0;\n width: 100%;\n max-width: 1000px;\n height: 250px;\n }\n\n .card-4 p {\n max-width: 360px;\n }\n\n .card-4-socials {\n justify-content: center;\n }\n}\n\n@media (width <= 440px) {\n .card-4 img {\n height: 50vw;\n width: 50vw;\n border-radius: 50%;\n border: 12px solid var(--card);\n box-shadow: none;\n margin: -140px 0 30px 0;\n }\n}\n" }, { "path": "src/components/cards/Card4/Card4.jsx", "content": "import image from \"./image.jpg\";\nimport \"./Card4.css\";\n\nexport const Card4 = ({ name, role, bio, socials, onSocialClick }) => (\n
    \n \n
    \n

    {name}

    \n

    {role}

    \n

    {bio}

    \n
    \n {socials.map((social) => (\n \n ))}\n
    \n
    \n
    \n);\n" }, { "path": "src/components/cards/Card4/Card4Example.css", "content": ".page.card-4-page {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n height: 100vh;\n background: linear-gradient(45deg, #3727a9, #4a1c40);\n color: #fdfcfd;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n" }, { "path": "src/components/cards/Card4/Card4Example.jsx", "content": "import { Card4 } from \"./Card4\";\nimport \"./Card4Example.css\";\n\nexport const Card4Example = () => {\n const handleSocialClick = (type) => {\n console.log(\"handleSocialClick\", type);\n };\n\n const socials = [\"facebook\", \"discord\", \"pinterest\", \"dribbble\"];\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/cards/Card5/Card5.css", "content": ".card-5 {\n background: #ffffff;\n border-radius: 28px;\n padding: 24px;\n width: 400px;\n box-shadow: 0 40px 80px rgba(128, 87, 216, 0.1);\n}\n\n.card-5 label {\n color: #a39fb2;\n font-size: 15px;\n}\n\n.card-5-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.card-5-header h2 {\n font-weight: 500;\n color: #4f4664;\n}\n\n.card-5-chart {\n display: flex;\n height: 220px;\n}\n\n.card-5-chart-y-axis {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: 20px;\n padding-bottom: 32px;\n}\n\n.card-5-chart-y-axis label {\n height: 25%;\n display: flex;\n align-items: flex-end;\n translate: 0 6px;\n}\n\n.card-5-chart-bars {\n display: flex;\n flex: 1 1 auto;\n margin: 0 0 0 12px;\n opacity: 0.8;\n background-size: 1px 52px;\n background-position: -32px;\n background-image: repeating-linear-gradient(\n 0deg,\n #ebecfa,\n #ebecfa 1px,\n #fff 1px,\n #fff\n );\n}\n\n.card-5-chart-bar-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n width: 33.33%;\n}\n\n.card-5-chart-bar-wrapper label {\n height: 32px;\n display: flex;\n align-items: flex-end;\n}\n\n.card-5-chart-bar {\n position: relative;\n background: linear-gradient(rgb(199 194 253 / 100%), rgb(199 194 253 / 4%));\n height: 60px;\n width: 40px;\n border-radius: 20px;\n cursor: pointer;\n transition: 0.5s ease-in-out;\n}\n\n.card-5-chart-bar::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: #c7c2fd;\n border-radius: inherit;\n transition: 0.3s;\n opacity: 0;\n}\n\n.card-5-chart-bar:hover::after {\n opacity: 1;\n}\n\n.card-5-chart-tooltip {\n opacity: 0;\n position: absolute;\n left: calc(50% + 24px);\n bottom: 89px;\n transition: 0.3s;\n}\n\n.card-5-chart-tooltip::after,\n.card-5-chart-tooltip::before {\n content: \"\";\n position: absolute;\n background: #8a54ff;\n}\n\n.card-5-chart-tooltip::before {\n right: 0;\n bottom: -6px;\n width: 63px;\n height: 2px;\n}\n\n.card-5-chart-tooltip::after {\n right: 63px;\n bottom: -8px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n}\n\n.card-5-chart-tooltip h3 {\n font-size: 12px;\n font-weight: 500;\n}\n\n.card-5-chart-tooltip var {\n font-style: normal;\n font-size: 11px;\n white-space: nowrap;\n color: #8f8b9c;\n}\n\n.card-5-chart-bar:hover ~ .card-5-chart-tooltip {\n opacity: 1;\n}\n" }, { "path": "src/components/cards/Card5/Card5.jsx", "content": "import { useState } from \"react\";\nimport \"./Card5.css\";\nimport { Dropdown } from \"./Dropdown\";\n\nconst days = [\"today\", \"yesterday\"];\n\nconst yValues = [300, 200, 100, 0];\n\nconst data = [\n {\n name: \"today\",\n values: [\n {\n name: \"Protein\",\n value: 180,\n energy: 420,\n },\n {\n name: \"Fat\",\n value: 260,\n energy: 560,\n },\n {\n name: \"Carbs\",\n value: 200,\n energy: 490,\n },\n ],\n },\n {\n name: \"yesterday\",\n values: [\n {\n name: \"Protein\",\n value: 250,\n energy: 503,\n },\n {\n name: \"Fat\",\n value: 150,\n energy: 450,\n },\n {\n name: \"Carbs\",\n value: 240,\n energy: 652,\n },\n ],\n },\n];\n\nexport const Card5 = ({ title }) => {\n const [day, setDay] = useState(\"today\");\n\n const activeData = data.find((d) => d.name === day);\n\n const handleDayChanged = (nextDay) => setDay(nextDay);\n\n return (\n
    \n
    \n

    {title}

    \n \n
    \n
    \n
    \n {yValues.map((v) => (\n \n ))}\n
    \n
    \n {activeData.values.map((v) => (\n
    \n
    \n \n
    \n

    Energy

    \n {v.energy} kcal\n
    \n
    \n ))}\n
    \n
    \n \n );\n};\n" }, { "path": "src/components/cards/Card5/Card5Example.css", "content": ".page.card-5-page {\n background: linear-gradient(135deg, #dfd0ff, #ffffff);\n color: #1f1b29;\n}\n" }, { "path": "src/components/cards/Card5/Card5Example.jsx", "content": "import { Card5 } from \"./Card5\";\nimport \"./Card5Example.css\";\n\nexport const Card5Example = () => (\n
    \n \n
    \n);\n" }, { "path": "src/components/cards/Card5/Dropdown.css", "content": ".card-5-dropdown {\n position: relative;\n}\n\n.card-5-dropdown button {\n cursor: pointer;\n font-family: inherit;\n padding: 8px 12px;\n text-transform: capitalize;\n background: transparent;\n border: 0;\n}\n\n.card-5-dropdown > button {\n display: flex;\n gap: 8px;\n background: #eeeef5;\n color: #736a88;\n border-radius: 9px;\n opacity: 0.8;\n padding-left: 12px;\n padding-right: 8px;\n transition: 0.3s;\n}\n\n.card-5-dropdown > button:hover {\n opacity: 1;\n}\n\n.card-5-menu {\n position: absolute;\n overflow: hidden;\n z-index: 10;\n top: 40px;\n right: 0;\n width: max-content;\n background: #fff;\n box-shadow: 0 0 40px rgba(128, 87, 216, 0.2);\n border-radius: 7px;\n opacity: 0;\n visibility: hidden;\n display: grid;\n transition: 0.3s;\n}\n\n.card-5-menu > button {\n text-align: left;\n opacity: 0.7;\n transition: 0.3s;\n color: #645a79;\n}\n\n.card-5-menu > button.active {\n color: #8a54ff;\n opacity: 1;\n cursor: default;\n}\n\n.card-5-menu > button:hover {\n background: #fbf9ff;\n opacity: 1;\n}\n\n.card-5-menu.open {\n opacity: 1;\n visibility: visible;\n}\n" }, { "path": "src/components/cards/Card5/Dropdown.jsx", "content": "import { useState } from \"react\";\nimport \"./Dropdown.css\";\n\nexport const Dropdown = ({ items, selectedItem, onSelect }) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const handleSelect = (item) => {\n setIsOpen(false);\n onSelect(item);\n };\n\n return (\n
    \n \n
    \n {items.map((item) => (\n handleSelect(item)}\n >\n {item}\n \n ))}\n
    \n
    \n );\n};\n" }, { "path": "src/components/cards/Card6/Card6.css", "content": ".card-6 {\n --color-muted: rgb(255 255 255 / 50%);\n position: relative;\n background: rgb(0 0 0 / 25%);\n border-radius: 24px;\n width: 85%;\n max-width: 580px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n box-shadow: 0 40px 60px rgba(58, 71, 72, 0.16);\n}\n\n.card-6-hero {\n position: relative;\n display: grid;\n place-items: center;\n border-radius: 22px;\n padding: 48px 24px;\n background: linear-gradient(#712ff6, #8d10f9);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.card-6-content {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 24px 24px 28px;\n text-align: center;\n}\n\n.card-6 img {\n height: 13.5vw;\n min-height: 72px;\n max-height: 84px;\n border-radius: 50%;\n box-shadow: 0 20px 80px rgb(0 0 0 / 56%);\n border: 2px solid rgb(255 255 255 / 16%);\n padding: 2px;\n}\n\n.card-6 var {\n font-style: normal;\n}\n\n.card-6 ul {\n list-style: none;\n display: flex;\n gap: 8px;\n}\n\n.card-6 .tags {\n margin-bottom: 16px;\n}\n\n.card-6 .tags li {\n background: rgb(255 255 255 / 12%);\n font-size: 12px;\n height: 28px;\n color: var(--color-muted);\n padding: 6px 8px;\n border-radius: 32px;\n}\n\n.card-6 .stats {\n gap: 0;\n margin-bottom: 16px;\n width: 90%;\n}\n\n.card-6 .stats li {\n width: 33.33%;\n display: flex;\n flex-direction: column;\n font-size: clamp(18px, 4vw, 24px);\n min-width: 0;\n}\n\n.card-6 .stats label {\n color: var(--color-muted);\n font-size: 13px;\n}\n\n.card-6 :is(h2, h3, h4) {\n font-weight: 400;\n}\n\n.card-6 h2 {\n margin-bottom: 3px;\n}\n\n.card-6 h3 {\n margin: 0 0 12px;\n color: var(--color-muted);\n font-size: 16px;\n}\n\n.card-6 button {\n color: inherit;\n font-family: inherit;\n border-radius: 28px;\n}\n\n.card-6 .actions {\n display: flex;\n gap: 8px;\n width: 100%;\n}\n\n.card-6 .contact-btn,\n.card-6 .save-btn {\n height: 48px;\n box-shadow: 0 10px 80px rgb(0 0 0 / 12%);\n background: rgb(255 255 255 / 5%);\n border: 0;\n backdrop-filter: blur(20px);\n}\n\n.card-6 .contact-btn {\n flex: 1 1 auto;\n font-size: 16px;\n background: #f9f9f9;\n color: #1f1e21;\n}\n\n.card-6 .save-btn {\n width: 48px;\n height: 48px;\n}\n\n.card-6 .share-btn {\n background: transparent;\n border: 0;\n position: absolute;\n top: 24px;\n right: 24px;\n z-index: 1;\n display: grid;\n place-items: center;\n}\n\n.card-6 .share-btn i {\n font-size: 18px;\n}\n\n.card-6 i {\n font-size: 18px;\n}\n\n@media (width >= 400px) {\n .card-6 {\n padding: 5px;\n }\n\n .card-6-content {\n align-items: flex-start;\n text-align: left;\n padding: 24px;\n }\n\n .card-6-hero {\n border-bottom-left-radius: 22px;\n border-bottom-right-radius: 22px;\n }\n\n .card-6 .stats {\n width: auto;\n gap: 6vw;\n }\n}\n\n@media (width >= 520px) {\n .card-6 {\n min-height: 300px;\n flex-direction: row;\n }\n\n .card-6-hero {\n flex: 1 1 45%;\n min-width: 45%;\n }\n\n .card-6 .tags {\n margin-bottom: 0;\n }\n\n .card-6-content {\n flex: 1 1 55%;\n max-width: 55%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 32px;\n }\n\n .card-6 .stats {\n gap: 3vw;\n height: 60px;\n align-items: center;\n }\n\n .card-6 .actions {\n margin-top: auto;\n }\n}\n" }, { "path": "src/components/cards/Card6/Card6.jsx", "content": "import \"./Card6.css\";\n\nexport const Card6 = ({ name, role, tags, img, stats }) => {\n return (\n
    \n
    \n \n \n
    \n
    \n
    \n

    {name}

    \n

    {role}

    \n\n
      \n {tags.map((tag) => (\n
    • {tag}
      • \n ))}\n
    \n
    \n
      \n {stats.map((stat, index) => (\n
    • {stat}
      • \n ))}\n
    \n
    \n \n \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/cards/Card6/Card6Example.css", "content": ".page.card-6-page {\n background: #2b2a2f;\n color: #f9f9f9;\n}\n\n.card-6-rating {\n}\n" }, { "path": "src/components/cards/Card6/Card6Example.jsx", "content": "import { Card6 } from \"./Card6\";\nimport \"./Card6Example.css\";\nimport avatar from \"./avatar.png\";\n\nconst tags = [\"Figma\", \"UX Design\"];\n\nconst Rating = () => 4.58;\n\nconst stats = [\n <>\n \n \n ,\n <>\n $15k\n \n ,\n <>\n 32h\n \n ,\n];\n\nexport const Card6Example = () => (\n
    \n \n
    \n);\n" }, { "path": "src/components/cards/Card7/Card7.css", "content": ".card-7 {\n --card: #272524;\n display: flex;\n align-items: center;\n width: 75vw;\n max-width: 650px;\n padding: 44px 30px 44px 20px;\n background: var(--card);\n border-radius: 24px;\n}\n\n.card-7 img {\n max-width: 280px;\n width: 36vw;\n height: 300px;\n object-fit: cover;\n margin-left: -60px;\n margin-right: 30px;\n border-radius: inherit;\n box-shadow: 0 60px 40px rgb(0 0 0 / 8%);\n transition: border-radius 0.3s;\n}\n\n.card-7 h2 {\n font-size: 22px;\n font-weight: 400;\n margin-top: 0;\n margin-right: 30px;\n margin-bottom: 10px;\n}\n\n.card-7 h3 {\n font-size: 14px;\n font-weight: 400;\n margin: 0 0 12px;\n opacity: 0.75;\n}\n\n.card-7 p {\n font-size: 13px;\n font-weight: 400;\n margin-bottom: 30px;\n opacity: 0.5;\n}\n\n.card-7 .socials {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.card-7 .socials > button {\n position: relative;\n border: 0;\n background: transparent;\n color: #f8f8f8;\n padding: 0;\n}\n\n.card-7 .socials > button:first-child::before {\n content: \"\";\n position: absolute;\n z-index: 0;\n top: 50%;\n left: 50%;\n width: 52px;\n height: 52px;\n translate: -50% -50%;\n border-radius: 50%;\n background: linear-gradient(45deg, #ff7c7d, #ffda67);\n transition: 0.3s;\n transform: translateY(0);\n}\n\n.card-7 .socials > button > i {\n position: relative;\n z-index: 1;\n border: 4px solid var(--card);\n background: #3f3b39;\n display: grid;\n place-items: center;\n font-size: 24px;\n width: 50px;\n height: 50px;\n border-radius: 40px;\n}\n\n@media (width <= 600px) {\n .card-7 {\n margin: 0 40px;\n padding-left: 50px;\n padding-right: 50px;\n padding-bottom: 60px;\n width: 100%;\n text-align: center;\n flex-direction: column;\n }\n\n .card-7 h2 {\n margin-right: 0;\n font-size: 26px;\n }\n\n .card-7 img {\n margin: -100px 0 30px 0;\n width: 100%;\n max-width: 1000px;\n height: 250px;\n }\n\n .card-7 p {\n max-width: 360px;\n }\n\n .card-7 .socials {\n justify-content: center;\n }\n}\n\n@media (width <= 440px) {\n .card-7 img {\n height: 50vw;\n width: 50vw;\n border-radius: 50%;\n border: 12px solid var(--card);\n box-shadow: none;\n margin: -140px 0 30px 0;\n }\n}\n" }, { "path": "src/components/cards/Card7/Card7.jsx", "content": "import \"./Card7.css\";\n\nexport const Card7 = ({ name, image, role, bio, socials }) => {\n return (\n
    \n \n
    \n

    {name}

    \n

    {role}

    \n

    {bio}

    \n
    \n {socials.map((social) => (\n \n ))}\n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/cards/Card7/Card7Example.css", "content": ".page.card-7-page {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n height: 100vh;\n background: linear-gradient(45deg, #ff7c7d, #ffda67);\n color: #fdfcfd;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n" }, { "path": "src/components/cards/Card7/Card7Example.jsx", "content": "import { Card7 } from \"./Card7\";\nimport image from \"./image.jpg\";\nimport \"./Card7Example.css\";\n\nconst socials = [\"dribbble\", \"pinterest\", \"codepen\"];\n\nexport const Card7Example = () => (\n
    \n \n
    \n);\n" }, { "path": "src/components/cards/index.js", "content": "export * from \"./Card1/Card1\";\nexport * from \"./Card2/Card2Example\";\nexport * from \"./Card3/Card3Example\";\nexport * from \"./Card4/Card4Example\";\nexport * from \"./Card5/Card5Example\";\nexport * from \"./Card6/Card6Example\";\nexport * from \"./Card7/Card7Example\";\n" }, { "path": "src/components/carousels/Carousel1/Carousel1.jsx", "content": "import { Swiper, SwiperSlide } from \"swiper/react\";\nimport { EffectCoverflow, Pagination } from \"swiper/modules\";\nimport \"./styles.css\";\nimport \"swiper/css\";\nimport \"swiper/css/navigation\";\nimport \"swiper/css/pagination\";\n\nimport image1 from \"./1.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 from \"./3.jpg\";\nimport image4 from \"./4.jpg\";\nimport image5 from \"./5.jpg\";\n\nconst slides = [\n {\n title: \"1 Series\",\n image: image1,\n },\n {\n title: \"2 Series\",\n image: image2,\n },\n {\n title: \"3 Series\",\n image: image3,\n },\n {\n title: \"4 Series\",\n image: image4,\n },\n {\n title: \"5 Series\",\n image: image5,\n },\n];\n\nexport const Carousel1 = () => {\n return (\n
    \n \n {slides.map((slide) => (\n \n
    \n
    \n

    {slide.title}

    \n explore\n
    \n
    \n \n ))}\n \n
    \n );\n};\n" }, { "path": "src/components/carousels/Carousel1/styles.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.page.carousel-1-page {\n position: relative;\n display: flex;\n align-items: center;\n gap: 50px;\n padding: 0 8vw;\n background: linear-gradient(45deg, #2c3d46, #0c0f13);\n color: #f9f9f9;\n}\n\n.carousel-1-page .swiper a {\n display: inline-block;\n text-decoration: none;\n text-transform: uppercase;\n color: #717171;\n font-weight: 500;\n background: #fff;\n border-radius: 3.125rem;\n margin: 0 auto;\n padding: 10px 26px;\n font-size: 0.9rem;\n transition: 0.3s ease-in-out;\n}\n\n.carousel-1-page .swiper {\n width: 100%;\n max-width: 800px;\n height: 440px;\n}\n\n.carousel-1-page .swiper-slide {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: end;\n align-items: center;\n filter: grayscale(0.6);\n background-size: cover;\n background-position: center;\n}\n\n.carousel-1-page .swiper-slide h2 {\n color: #fff;\n font-weight: 100;\n font-size: 20px;\n line-height: 1.4;\n margin-bottom: 0.625rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n text-align: center;\n}\n\n.carousel-1-page .swiper-slide a:hover {\n color: #005baa;\n}\n\n.carousel-1-page .swiper-slide div {\n position: absolute;\n z-index: 1;\n inset: 0;\n background: linear-gradient(rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 80%));\n transition: 0.25s;\n opacity: 0;\n align-self: stretch;\n padding-bottom: 70px;\n height: 100%;\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: flex-end;\n}\n\n.carousel-1-page .swiper-slide-active div {\n opacity: 1;\n}\n\n.carousel-1-page .swiper-slide > div > div {\n translate: 0 100px;\n transition: 0.3s;\n}\n\n.carousel-1-page .swiper-slide-active > div > div {\n translate: 0;\n}\n\n.carousel-1-page .swiper-pagination-bullet,\n.carousel-1-page .swiper-pagination-bullet-active {\n background: #fff !important;\n}\n\n.carousel-1-page .swiper-pagination {\n bottom: 10px !important;\n transform: scale(1.3);\n}\n" }, { "path": "src/components/carousels/Carousel2/Carousel2.jsx", "content": "import { Swiper, SwiperSlide } from \"swiper/react\";\nimport { EffectCoverflow } from \"swiper/modules\";\n\nimport \"swiper/css\";\nimport \"swiper/css/effect-coverflow\";\nimport \"./styles.css\";\n\nimport image1 from \"./1.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 from \"./3.jpg\";\nimport image4 from \"./4.jpg\";\nimport image5 from \"./5.jpg\";\nimport image6 from \"./6.jpg\";\nimport image7 from \"./7.jpg\";\nimport image8 from \"./8.jpg\";\nimport image9 from \"./9.jpg\";\n\nconst slides = [image2, image3, image4, image5, image6, image7, image8, image9];\n\nexport const Carousel2 = () => {\n return (\n
    \n \n
    \n {slides.map((slide) => (\n \n ))}\n
    \n
    \n \n
    \n );\n};\n" }, { "path": "src/components/carousels/Carousel2/styles.css", "content": ".page.carousel-2-page {\n background: #010101;\n font-size: 14px;\n color: #010101;\n margin: 0;\n padding: 0;\n height: 100vh;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.carousel-2-page .swiper {\n padding-top: 50px;\n padding-bottom: 140px;\n}\n\n.carousel-2-page .swiper .swiper-slide {\n background-position: center;\n background-size: cover;\n border-radius: 10px;\n width: 300px;\n height: 250px;\n filter: saturate(1.2);\n -webkit-box-reflect: below 1px\n linear-gradient(transparent, transparent, #0006);\n}\n" }, { "path": "src/components/carousels/Carousel3/Carousel3.css", "content": ".page.carousel-3-page {\n background: linear-gradient(45deg, #8647b3, #40429c);\n font-size: 14px;\n color: #f9f9f9;\n margin: 0;\n padding: 0;\n height: 100vh;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.carousel-3-page h2 {\n font-weight: 500;\n margin: 0 0 16px;\n}\n\n.carousel-3-page p {\n opacity: 0.7;\n font-size: 18px;\n margin: 0 0 20px;\n}\n\n.carousel-3-page a {\n display: inline-block;\n text-decoration: none;\n text-transform: uppercase;\n color: #ffffff;\n font-weight: 500;\n background: transparent;\n border-radius: 3.125rem;\n border: 2px solid #ffffff;\n margin: 0 auto;\n padding: 6px 26px;\n font-size: 0.9rem;\n transition: 0.3s ease-in-out;\n}\n\n.carousel-3-page .swiper {\n height: 440px;\n margin-top: 40px;\n}\n\n.carousel-3-page .swiper-pagination-bullet,\n.carousel-3-page .swiper-pagination-bullet-active {\n background: #fff;\n}\n\n.carousel-3-page .swiper-pagination {\n bottom: 34px !important;\n transform: scale(1.3);\n}\n\n.carousel-3-page .swiper-slide {\n height: 300px;\n display: flex;\n flex-direction: column;\n justify-content: end;\n align-items: center;\n border-radius: 20px;\n background-size: cover;\n background-position: center;\n filter: grayscale(0.4) saturate(2) sepia(0.2);\n -webkit-box-reflect: below 24px\n linear-gradient(transparent, transparent, #0006);\n}\n\n.carousel-3-page .swiper-slide::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 100%));\n border-radius: inherit;\n z-index: -1;\n}\n\n.carousel-3-page .swiper-slide h2 {\n color: #fff;\n font-weight: 400;\n font-size: 1.4rem;\n line-height: 1.4;\n margin-bottom: 0.625rem;\n text-transform: uppercase;\n text-align: center;\n}\n\n.carousel-3-page .swiper-slide a:hover {\n color: #005baa;\n}\n\n.carousel-3-page .swiper-slide div {\n transition: 0.5s;\n opacity: 0;\n padding-bottom: 140px;\n}\n\n.carousel-3-page .swiper-slide-active div {\n opacity: 1;\n}\n\n.swiper-slide-shadow-coverflow {\n border-radius: 20px;\n}\n" }, { "path": "src/components/carousels/Carousel3/Carousel3.jsx", "content": "import { Swiper, SwiperSlide } from \"swiper/react\";\nimport { EffectCoverflow, Pagination } from \"swiper/modules\";\n\nimport \"swiper/css\";\nimport \"swiper/css/effect-coverflow\";\nimport \"./Carousel3.css\";\n\nimport image1 from \"./1.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 from \"./3.jpg\";\nimport image4 from \"./4.jpg\";\nimport image5 from \"./5.jpg\";\n\nconst slides = [\n {\n name: \"India\",\n src: image1,\n },\n {\n name: \"Japan\",\n src: image2,\n },\n {\n name: \"Scotland\",\n src: image3,\n },\n {\n name: \"Norway\",\n src: image4,\n },\n {\n name: \"France\",\n src: image5,\n },\n];\n\nexport const Carousel3 = () => {\n return (\n
    \n \n
    \n {slides.map((slide) => (\n \n
    \n

    {slide.name}

    \n explore\n
    \n \n ))}\n
    \n
    \n \n
    \n );\n};\n" }, { "path": "src/components/carousels/index.js", "content": "export * from \"./Carousel1/Carousel1\";\nexport * from \"./Carousel2/Carousel2\";\nexport * from \"./Carousel3/Carousel3\";\n" }, { "path": "src/components/controls/AutoSuggest/AutoSuggest.jsx", "content": "import { useEffect, useState } from \"react\";\nimport logo from \"./Joegle.svg\";\nimport \"./styles.css\";\n\nconst names = [\n \"Aarav\",\n \"Aaron\",\n \"Abdiel\",\n \"Abdullah\",\n \"Abel\",\n \"Abraham\",\n \"Abram\",\n \"Ace\",\n \"Adam\",\n \"Adan\",\n \"Aden\",\n \"Adler\",\n \"Adonis\",\n \"Adrian\",\n \"Adriel\",\n \"Adrien\",\n \"Agustin\",\n \"Ahmad\",\n \"Ahmed\",\n \"Ahmir\",\n \"Aidan\",\n \"Aiden\",\n \"Alan\",\n \"Alaric\",\n \"Albert\",\n \"Alberto\",\n \"Alden\",\n \"Aldo\",\n \"Alec\",\n \"Alejandro\",\n \"Alessandro\",\n \"Alex\",\n \"Alexander\",\n \"Alexis\",\n \"Alfonso\",\n \"Alfred\",\n \"Alfredo\",\n \"Ali\",\n \"Alijah\",\n \"Alistair\",\n \"Allan\",\n \"Allen\",\n \"Alonso\",\n \"Alonzo\",\n \"Alvaro\",\n \"Alvin\",\n \"Amari\",\n \"Ambrose\",\n \"Ameer\",\n \"Amias\",\n \"Amir\",\n \"Amiri\",\n \"Amos\",\n \"Anakin\",\n \"Ander\",\n \"Anders\",\n \"Anderson\",\n \"Andre\",\n \"Andres\",\n \"Andrew\",\n \"Andy\",\n \"Angel\",\n \"Angelo\",\n \"Anthony\",\n \"Antonio\",\n \"Apollo\",\n \"Archer\",\n \"Archie\",\n \"Ares\",\n \"Ari\",\n \"Arian\",\n \"Ariel\",\n \"Aries\",\n \"Arjun\",\n \"Arlo\",\n \"Armando\",\n \"Armani\",\n \"Aron\",\n \"Arthur\",\n \"Arturo\",\n \"Aryan\",\n \"Asa\",\n \"Asher\",\n \"Ashton\",\n \"Atharv\",\n \"Atlas\",\n \"Atreus\",\n \"Atticus\",\n \"August\",\n \"Augustine\",\n \"Augustus\",\n \"Austin\",\n \"Avery\",\n \"Avi\",\n \"Avyaan\",\n \"Axel\",\n \"Axl\",\n \"Axton\",\n \"Ayaan\",\n \"Ayan\",\n \"Ayden\",\n \"Aydin\",\n \"Azael\",\n \"Azariah\",\n \"Aziel\",\n \"Azrael\",\n \"Azriel\",\n \"Baker\",\n \"Banks\",\n \"Barrett\",\n \"Baylor\",\n \"Bear\",\n \"Beau\",\n \"Beckett\",\n \"Beckham\",\n \"Bellamy\",\n \"Ben\",\n \"Benedict\",\n \"Benicio\",\n \"Benjamin\",\n \"Bennett\",\n \"Benson\",\n \"Bentley\",\n \"Bishop\",\n \"Bjorn\",\n \"Blaine\",\n \"Blaise\",\n \"Blake\",\n \"Blaze\",\n \"Bo\",\n \"Bode\",\n \"Boden\",\n \"Bodhi\",\n \"Bodie\",\n \"Boone\",\n \"Boston\",\n \"Bowen\",\n \"Bowie\",\n \"Braden\",\n \"Bradley\",\n \"Brady\",\n \"Brandon\",\n \"Branson\",\n \"Brantley\",\n \"Braxton\",\n \"Brayan\",\n \"Brayden\",\n \"Braylen\",\n \"Braylon\",\n \"Brecken\",\n \"Brendan\",\n \"Brennan\",\n \"Brian\",\n \"Briar\",\n \"Bridger\",\n \"Briggs\",\n \"Brixton\",\n \"Brock\",\n \"Brodie\",\n \"Brody\",\n \"Bronson\",\n \"Brooks\",\n \"Bruce\",\n \"Bruno\",\n \"Bryan\",\n \"Bryant\",\n \"Bryce\",\n \"Brycen\",\n \"Bryson\",\n \"Byron\",\n \"Cade\",\n \"Caden\",\n \"Caiden\",\n \"Cain\",\n \"Cairo\",\n \"Cal\",\n \"Caleb\",\n \"Callahan\",\n \"Callan\",\n \"Callen\",\n \"Callum\",\n \"Calum\",\n \"Calvin\",\n \"Camden\",\n \"Cameron\",\n \"Camilo\",\n \"Canaan\",\n \"Cannon\",\n \"Carl\",\n \"Carlos\",\n \"Carmelo\",\n \"Carson\",\n \"Carter\",\n \"Case\",\n \"Casen\",\n \"Casey\",\n \"Cash\",\n \"Cason\",\n \"Caspian\",\n \"Cassian\",\n \"Cassius\",\n \"Castiel\",\n \"Cayden\",\n \"Cayson\",\n \"Cesar\",\n \"Chaim\",\n \"Chance\",\n \"Chandler\",\n \"Charles\",\n \"Charlie\",\n \"Chase\",\n \"Chris\",\n \"Christian\",\n \"Christopher\",\n \"Cillian\",\n \"Clark\",\n \"Clay\",\n \"Clayton\",\n \"Clyde\",\n \"Cody\",\n \"Cohen\",\n \"Colby\",\n \"Cole\",\n \"Coleson\",\n \"Colin\",\n \"Collin\",\n \"Colson\",\n \"Colt\",\n \"Colten\",\n \"Colter\",\n \"Colton\",\n \"Conner\",\n \"Connor\",\n \"Conor\",\n \"Conrad\",\n \"Cooper\",\n \"Corbin\",\n \"Corey\",\n \"Cory\",\n \"Creed\",\n \"Crew\",\n \"Cristian\",\n \"Crosby\",\n \"Cruz\",\n \"Cullen\",\n \"Curtis\",\n \"Cyrus\",\n \"Dakari\",\n \"Dakota\",\n \"Dallas\",\n \"Dalton\",\n \"Damari\",\n \"Damian\",\n \"Damien\",\n \"Damir\",\n \"Damon\",\n \"Dane\",\n \"Dangelo\",\n \"Daniel\",\n \"Danny\",\n \"Dante\",\n \"Darian\",\n \"Dariel\",\n \"Dario\",\n \"Darius\",\n \"Darren\",\n \"Dash\",\n \"Davian\",\n \"David\",\n \"Davion\",\n \"Davis\",\n \"Dawson\",\n \"Dax\",\n \"Daxton\",\n \"Deacon\",\n \"Dean\",\n \"Deandre\",\n \"Declan\",\n \"Demetrius\",\n \"Dennis\",\n \"Denver\",\n \"Derek\",\n \"Derrick\",\n \"Desmond\",\n \"Devin\",\n \"Devon\",\n \"Dexter\",\n \"Diego\",\n \"Dilan\",\n \"Dillon\",\n \"Dimitri\",\n \"Dior\",\n \"Dominic\",\n \"Dominick\",\n \"Dominik\",\n \"Donald\",\n \"Donovan\",\n \"Dorian\",\n \"Douglas\",\n \"Drake\",\n \"Drew\",\n \"Duke\",\n \"Dustin\",\n \"Dylan\",\n \"Easton\",\n \"Eddie\",\n \"Eden\",\n \"Edgar\",\n \"Edison\",\n \"Eduardo\",\n \"Edward\",\n \"Edwin\",\n \"Eithan\",\n \"Eli\",\n \"Eliam\",\n \"Elian\",\n \"Elias\",\n \"Eliel\",\n \"Elijah\",\n \"Elio\",\n \"Eliseo\",\n \"Elisha\",\n \"Elliot\",\n \"Elliott\",\n \"Ellis\",\n \"Elon\",\n \"Emanuel\",\n \"Emerson\",\n \"Emery\",\n \"Emiliano\",\n \"Emilio\",\n \"Emir\",\n \"Emmanuel\",\n \"Emmett\",\n \"Emmitt\",\n \"Emory\",\n \"Enoch\",\n \"Enrique\",\n \"Enzo\",\n \"Ephraim\",\n \"Eric\",\n \"Erick\",\n \"Erik\",\n \"Ermias\",\n \"Ernesto\",\n \"Esteban\",\n \"Ethan\",\n \"Eugene\",\n \"Evan\",\n \"Evander\",\n \"Everest\",\n \"Everett\",\n \"Ezekiel\",\n \"Ezequiel\",\n \"Ezra\",\n \"Fabian\",\n \"Felipe\",\n \"Felix\",\n \"Fernando\",\n \"Finley\",\n \"Finn\",\n \"Finnegan\",\n \"Finnley\",\n \"Fisher\",\n \"Fletcher\",\n \"Flynn\",\n \"Ford\",\n \"Forest\",\n \"Forrest\",\n \"Fox\",\n \"Francis\",\n \"Francisco\",\n \"Franco\",\n \"Frank\",\n \"Franklin\",\n \"Frederick\",\n \"Gabriel\",\n \"Gael\",\n \"Gage\",\n \"Garrett\",\n \"Gary\",\n \"Gatlin\",\n \"Gavin\",\n \"Genesis\",\n \"George\",\n \"Gerardo\",\n \"Gian\",\n \"Gianni\",\n \"Gideon\",\n \"Giovanni\",\n \"Gordon\",\n \"Grady\",\n \"Graham\",\n \"Granger\",\n \"Grant\",\n \"Graysen\",\n \"Grayson\",\n \"Gregory\",\n \"Grey\",\n \"Greyson\",\n \"Griffin\",\n \"Guillermo\",\n \"Gunnar\",\n \"Gunner\",\n \"Gustavo\",\n \"Hamza\",\n \"Hank\",\n \"Harlan\",\n \"Harlem\",\n \"Harley\",\n \"Harold\",\n \"Harrison\",\n \"Harry\",\n \"Harvey\",\n \"Hassan\",\n \"Hayden\",\n \"Hayes\",\n \"Heath\",\n \"Hector\",\n \"Hendrix\",\n \"Henrik\",\n \"Henry\",\n \"Hezekiah\",\n \"Holden\",\n \"Houston\",\n \"Howard\",\n \"Hudson\",\n \"Hugh\",\n \"Hugo\",\n \"Hunter\",\n \"Huxley\",\n \"Ian\",\n \"Ibrahim\",\n \"Idris\",\n \"Ignacio\",\n \"Iker\",\n \"Ira\",\n \"Isaac\",\n \"Isaiah\",\n \"Isaias\",\n \"Ishaan\",\n \"Ismael\",\n \"Israel\",\n \"Issac\",\n \"Ivan\",\n \"Izaiah\",\n \"Jabari\",\n \"Jace\",\n \"Jack\",\n \"Jackson\",\n \"Jacob\",\n \"Jacoby\",\n \"Jaden\",\n \"Jadiel\",\n \"Jagger\",\n \"Jaiden\",\n \"Jaime\",\n \"Jair\",\n \"Jakai\",\n \"Jakari\",\n \"Jake\",\n \"Jakob\",\n \"Jakobe\",\n \"Jalen\",\n \"Jamal\",\n \"Jamari\",\n \"James\",\n \"Jameson\",\n \"Jamie\",\n \"Jamir\",\n \"Jamison\",\n \"Jared\",\n \"Jase\",\n \"Jasiah\",\n \"Jason\",\n \"Jasper\",\n \"Javier\",\n \"Jax\",\n \"Jaxon\",\n \"Jaxson\",\n \"Jaxton\",\n \"Jaxtyn\",\n \"Jaxx\",\n \"Jaxxon\",\n \"Jay\",\n \"Jayce\",\n \"Jayceon\",\n \"Jayden\",\n \"Jaylen\",\n \"Jayson\",\n \"Jaziel\",\n \"Jedidiah\",\n \"Jefferson\",\n \"Jeffrey\",\n \"Jensen\",\n \"Jeremiah\",\n \"Jeremias\",\n \"Jeremy\",\n \"Jericho\",\n \"Jerry\",\n \"Jesiah\",\n \"Jesse\",\n \"Jesus\",\n \"Jett\",\n \"Jimmy\",\n \"Jiraiya\",\n \"Joaquin\",\n \"Joe\",\n \"Joel\",\n \"Joey\",\n \"Johan\",\n \"John\",\n \"Johnathan\",\n \"Johnny\",\n \"Jon\",\n \"Jonah\",\n \"Jonas\",\n \"Jonathan\",\n \"Jones\",\n \"Jordan\",\n \"Jorge\",\n \"Jose\",\n \"Joseph\",\n \"Joshua\",\n \"Josiah\",\n \"Josue\",\n \"Jovanni\",\n \"Joziah\",\n \"Juan\",\n \"Judah\",\n \"Jude\",\n \"Judson\",\n \"Julian\",\n \"Julien\",\n \"Julio\",\n \"Julius\",\n \"Junior\",\n \"Justice\",\n \"Justin\",\n \"Kabir\",\n \"Kace\",\n \"Kade\",\n \"Kaden\",\n \"Kai\",\n \"Kaiden\",\n \"Kairo\",\n \"Kaiser\",\n \"Kaison\",\n \"Kaleb\",\n \"Kalel\",\n \"Kamari\",\n \"Kamden\",\n \"Kamdyn\",\n \"Kameron\",\n \"Kane\",\n \"Kannon\",\n \"Kareem\",\n \"Karson\",\n \"Karsyn\",\n \"Karter\",\n \"Kartier\",\n \"Kase\",\n \"Kasen\",\n \"Kash\",\n \"Kashton\",\n \"Kason\",\n \"Kayden\",\n \"Kaysen\",\n \"Kayson\",\n \"Keanu\",\n \"Keaton\",\n \"Keegan\",\n \"Keith\",\n \"Kellan\",\n \"Kellen\",\n \"Kelvin\",\n \"Kendrick\",\n \"Kenji\",\n \"Kenneth\",\n \"Kenzo\",\n \"Kevin\",\n \"Khai\",\n \"Khalid\",\n \"Khalil\",\n \"Khari\",\n \"Kiaan\",\n \"Kian\",\n \"Kieran\",\n \"Killian\",\n \"King\",\n \"Kingsley\",\n \"Kingston\",\n \"Knox\",\n \"Koa\",\n \"Kobe\",\n \"Koda\",\n \"Kody\",\n \"Koen\",\n \"Kohen\",\n \"Kole\",\n \"Kolton\",\n \"Korbin\",\n \"Krew\",\n \"Kristian\",\n \"Kristopher\",\n \"Kye\",\n \"Kylan\",\n \"Kyle\",\n \"Kylen\",\n \"Kyler\",\n \"Kylian\",\n \"Kylo\",\n \"Kyng\",\n \"Kyree\",\n \"Kyrie\",\n \"Kyro\",\n \"Kyson\",\n \"Lachlan\",\n \"Lance\",\n \"Landen\",\n \"Landon\",\n \"Landry\",\n \"Landyn\",\n \"Lane\",\n \"Langston\",\n \"Larry\",\n \"Lawrence\",\n \"Lawson\",\n \"Layne\",\n \"Layton\",\n \"Leandro\",\n \"Ledger\",\n \"Lee\",\n \"Legacy\",\n \"Legend\",\n \"Leif\",\n \"Leighton\",\n \"Leland\",\n \"Lennon\",\n \"Lennox\",\n \"Leo\",\n \"Leon\",\n \"Leonard\",\n \"Leonardo\",\n \"Leonel\",\n \"Leonidas\",\n \"Leroy\",\n \"Levi\",\n \"Lewis\",\n \"Lian\",\n \"Lincoln\",\n \"Lionel\",\n \"Lochlan\",\n \"Logan\",\n \"Lorenzo\",\n \"Louie\",\n \"Louis\",\n \"Loyal\",\n \"Luca\",\n \"Lucas\",\n \"Lucca\",\n \"Lucian\",\n \"Luciano\",\n \"Luis\",\n \"Luka\",\n \"Lukas\",\n \"Luke\",\n \"Mac\",\n \"Mack\",\n \"Madden\",\n \"Maddox\",\n \"Magnus\",\n \"Major\",\n \"Makai\",\n \"Malachi\",\n \"Malakai\",\n \"Malcolm\",\n \"Malik\",\n \"Manuel\",\n \"Marcel\",\n \"Marcellus\",\n \"Marcelo\",\n \"Marco\",\n \"Marcos\",\n \"Marcus\",\n \"Mario\",\n \"Mark\",\n \"Marshall\",\n \"Martin\",\n \"Marvin\",\n \"Mason\",\n \"Mateo\",\n \"Mathew\",\n \"Mathias\",\n \"Matias\",\n \"Matteo\",\n \"Matthew\",\n \"Matthias\",\n \"Maurice\",\n \"Mauricio\",\n \"Maverick\",\n \"Max\",\n \"Maximilian\",\n \"Maximiliano\",\n \"Maximo\",\n \"Maximus\",\n \"Maxton\",\n \"Maxwell\",\n \"Mccoy\",\n \"Mekhi\",\n \"Melvin\",\n \"Memphis\",\n \"Messiah\",\n \"Micah\",\n \"Michael\",\n \"Miguel\",\n \"Milan\",\n \"Miles\",\n \"Miller\",\n \"Milo\",\n \"Misael\",\n \"Mitchell\",\n \"Mohamed\",\n \"Mohammad\",\n \"Mohammed\",\n \"Moises\",\n \"Mordechai\",\n \"Morgan\",\n \"Moses\",\n \"Moshe\",\n \"Muhammad\",\n \"Musa\",\n \"Mustafa\",\n \"Myles\",\n \"Mylo\",\n \"Nash\",\n \"Nasir\",\n \"Nathan\",\n \"Nathanael\",\n \"Nathaniel\",\n \"Nehemiah\",\n \"Neil\",\n \"Nelson\",\n \"Neo\",\n \"Nicholas\",\n \"Nico\",\n \"Nicolas\",\n \"Niklaus\",\n \"Niko\",\n \"Nikolai\",\n \"Nikolas\",\n \"Nixon\",\n \"Noah\",\n \"Noe\",\n \"Noel\",\n \"Nolan\",\n \"Nova\",\n \"Oakley\",\n \"Ocean\",\n \"Odin\",\n \"Oliver\",\n \"Omar\",\n \"Omari\",\n \"Onyx\",\n \"Orion\",\n \"Orlando\",\n \"Oscar\",\n \"Osiris\",\n \"Osman\",\n \"Otis\",\n \"Otto\",\n \"Owen\",\n \"Ozzy\",\n \"Pablo\",\n \"Palmer\",\n \"Parker\",\n \"Patrick\",\n \"Paul\",\n \"Paxton\",\n \"Pedro\",\n \"Peter\",\n \"Peyton\",\n \"Philip\",\n \"Phillip\",\n \"Phoenix\",\n \"Pierce\",\n \"Porter\",\n \"Preston\",\n \"Prince\",\n \"Princeton\",\n \"Quentin\",\n \"Quincy\",\n \"Quinn\",\n \"Quinton\",\n \"Rafael\",\n \"Raiden\",\n \"Ramon\",\n \"Randy\",\n \"Raphael\",\n \"Raul\",\n \"Ray\",\n \"Rayan\",\n \"Rayden\",\n \"Raylan\",\n \"Raymond\",\n \"Reece\",\n \"Reed\",\n \"Reese\",\n \"Reid\",\n \"Reign\",\n \"Remi\",\n \"Remington\",\n \"Remy\",\n \"Rene\",\n \"Reuben\",\n \"Rex\",\n \"Rey\",\n \"Rhett\",\n \"Rhys\",\n \"Ricardo\",\n \"Richard\",\n \"Ricky\",\n \"Ridge\",\n \"Riggs\",\n \"Riley\",\n \"Rio\",\n \"River\",\n \"Robert\",\n \"Roberto\",\n \"Robin\",\n \"Rocco\",\n \"Rocky\",\n \"Rodney\",\n \"Rodrigo\",\n \"Roger\",\n \"Rohan\",\n \"Roland\",\n \"Roman\",\n \"Rome\",\n \"Romeo\",\n \"Ronald\",\n \"Ronan\",\n \"Ronin\",\n \"Rory\",\n \"Rowan\",\n \"Rowen\",\n \"Roy\",\n \"Royal\",\n \"Royce\",\n \"Ruben\",\n \"Rudy\",\n \"Russell\",\n \"Ryan\",\n \"Ryder\",\n \"Ryker\",\n \"Rylan\",\n \"Ryland\",\n \"Sage\",\n \"Saint\",\n \"Salem\",\n \"Salvador\",\n \"Salvatore\",\n \"Sam\",\n \"Samir\",\n \"Samson\",\n \"Samuel\",\n \"Santana\",\n \"Santiago\",\n \"Santino\",\n \"Santos\",\n \"Saul\",\n \"Sawyer\",\n \"Scott\",\n \"Sean\",\n \"Sebastian\",\n \"Sergio\",\n \"Seth\",\n \"Seven\",\n \"Shane\",\n \"Shawn\",\n \"Shepard\",\n \"Shepherd\",\n \"Shiloh\",\n \"Silas\",\n \"Simon\",\n \"Sincere\",\n \"Skyler\",\n \"Solomon\",\n \"Sonny\",\n \"Soren\",\n \"Spencer\",\n \"Stanley\",\n \"Stefan\",\n \"Stephen\",\n \"Sterling\",\n \"Stetson\",\n \"Steven\",\n \"Sullivan\",\n \"Sutton\",\n \"Sylas\",\n \"Tadeo\",\n \"Talon\",\n \"Tanner\",\n \"Tate\",\n \"Tatum\",\n \"Taylor\",\n \"Thaddeus\",\n \"Thatcher\",\n \"Theo\",\n \"Theodore\",\n \"Thiago\",\n \"Thomas\",\n \"Timothy\",\n \"Titan\",\n \"Titus\",\n \"Tobias\",\n \"Tomas\",\n \"Tommy\",\n \"Tony\",\n \"Trace\",\n \"Travis\",\n \"Trenton\",\n \"Trevor\",\n \"Trey\",\n \"Tripp\",\n \"Tristan\",\n \"Troy\",\n \"Tru\",\n \"Truett\",\n \"Tucker\",\n \"Turner\",\n \"Ty\",\n \"Tyler\",\n \"Tyson\",\n \"Ulises\",\n \"Uriah\",\n \"Uriel\",\n \"Valentin\",\n \"Valentino\",\n \"Van\",\n \"Vance\",\n \"Vicente\",\n \"Victor\",\n \"Vihaan\",\n \"Vincent\",\n \"Vincenzo\",\n \"Wade\",\n \"Walker\",\n \"Wallace\",\n \"Walter\",\n \"Warren\",\n \"Watson\",\n \"Waylon\",\n \"Wayne\",\n \"Wells\",\n \"Wes\",\n \"Wesley\",\n \"Wesson\",\n \"Westin\",\n \"Westley\",\n \"Weston\",\n \"Wilder\",\n \"William\",\n \"Wilson\",\n \"Winston\",\n \"Wyatt\",\n \"Wylder\",\n \"Xander\",\n \"Xavier\",\n \"Yaakov\",\n \"Yadiel\",\n \"Yahir\",\n \"Yehuda\",\n \"Yisroel\",\n \"Yosef\",\n \"Yousef\",\n \"Yusuf\",\n \"Zachariah\",\n \"Zachary\",\n \"Zahir\",\n \"Zaid\",\n \"Zaiden\",\n \"Zain\",\n \"Zaire\",\n \"Zakai\",\n \"Zander\",\n \"Zane\",\n \"Zavier\",\n \"Zayd\",\n \"Zayden\",\n \"Zayn\",\n \"Zayne\",\n \"Zechariah\",\n \"Zeke\",\n \"Zev\",\n \"Zion\",\n \"Zyair\",\n \"Zyaire\",\n \"Zyon\",\n];\n\nconst useDebounce = (value, delay) => {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n};\n\nconst Header = () => ;\n\nconst Footer = () => (\n <>\n
    \n \n \n
    \n

    \n Shop final Black Friday device deals on the Joegle Store today.\n

    \n \n);\n\nconst AutoSuggest = ({ onSearch, results, search }) => (\n
    \n search\n \n
    \n
    \n {results.map((name) => (\n \n ))}\n
    \n
    \n
    \n);\n\nexport const AutoSuggestExample = () => {\n const [search, setSearch] = useState(\"\");\n\n const [results, setResults] = useState([]);\n\n const debounced = useDebounce(search, 500);\n\n const handleSearch = (e) => setSearch(e.target.value);\n\n useEffect(() => {\n const namesCopy = [...names];\n setResults(\n namesCopy.filter(\n (n, i) =>\n search === \"\" || n.toLowerCase().includes(search.toLowerCase())\n )\n );\n }, [debounced]);\n\n return (\n
    \n
    \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/AutoSuggest/styles.css", "content": ".page.auto-suggest-page {\n background: #18181b;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 50px;\n padding-top: 0;\n}\n\n.auto-suggest-page img {\n width: 240px;\n margin: 0 auto;\n}\n\n.auto-suggest-page button {\n padding: 10px 16px;\n border-radius: 4px;\n border: 0;\n background: #303134;\n color: inherit;\n font-family: inherit;\n}\n\n.auto-suggest-page p {\n margin: 0;\n font-size: 13px;\n}\n\n.auto-suggest-page p a {\n color: #8ab4f7;\n}\n\n.auto-suggest {\n position: relative;\n}\n\n.auto-suggest input {\n width: 440px;\n height: 44px;\n padding: 0 20px 0 44px;\n border-radius: 22px;\n border: 1px solid #5f6367;\n background: transparent;\n color: #e8eaed;\n font-size: 16px;\n font-family: inherit;\n outline: none;\n}\n\n.auto-suggest input:focus {\n background: #2c2e34;\n border-color: #2c2e34;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.auto-suggest span:nth-child(1) {\n position: absolute;\n top: 50%;\n left: 14px;\n translate: 0 -50%;\n}\n\n.auto-suggest-buttons {\n display: flex;\n gap: 16px;\n}\n\n.auto-suggest .menu {\n display: none;\n position: absolute;\n z-index: 1;\n overflow: hidden;\n top: 44px;\n left: 0;\n width: 100%;\n max-height: 228px;\n padding: 0 16px 6px;\n background: #2c2e34;\n border-bottom-right-radius: 22px;\n border-bottom-left-radius: 22px;\n}\n\n.auto-suggest input:focus ~ .menu,\n.auto-suggest .menu:hover {\n display: block;\n}\n\n.auto-suggest .menu > div {\n padding: 8px 0;\n border-top: 1px solid #5f6367;\n line-height: 1.8;\n}\n\n.auto-suggest .menu > div button {\n display: block;\n background: transparent;\n padding: 0;\n height: 30px;\n font-size: 16px;\n cursor: pointer;\n width: 100%;\n text-align: left;\n}\n" }, { "path": "src/components/controls/EditableText/EditableText.css", "content": ".editable-text {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.editable-text-value.is-editing ~ .editable-text-buttons {\n opacity: 1;\n visibility: visible;\n}\n\n.editable-text-buttons {\n display: flex;\n gap: 2px;\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n}\n\n.editable-text:hover .editable-text-buttons {\n opacity: 1;\n visibility: visible;\n}\n\n.editable-text-buttons button {\n cursor: pointer;\n background: transparent;\n border: 0;\n display: grid;\n place-items: center;\n color: inherit;\n opacity: 0.5;\n transition: 0.3s;\n}\n\n.editable-text-buttons button:hover {\n opacity: 0.8;\n}\n\n.editable-text-value {\n outline: none;\n}\n" }, { "path": "src/components/controls/EditableText/EditableText.jsx", "content": "import { useLayoutEffect, useRef, useState } from \"react\";\nimport \"./EditableText.css\";\n\nconst setCaret = (el) => {\n if (!el) return;\n try {\n const range = document.createRange();\n const sel = window.getSelection();\n range.setStart(el.childNodes[0], el.innerText.length);\n range.collapse(true);\n sel.removeAllRanges();\n sel.addRange(range);\n } catch (err) {\n console.log(\"Error Setting Caret: \", err);\n }\n};\n\nconst IconButton = ({ children, onClick }) => (\n \n);\n\nexport const EditableText = ({ name, defaultValue, onSave, className }) => {\n const [isEditing, setIsEditing] = useState(false);\n\n const nextValue = useRef(\"\");\n\n const spanRef = useRef(null);\n\n const handleChange = (e) => (nextValue.current = e.target.innerText);\n\n const handleSave = () => {\n toggleIsEditing();\n onSave(name, nextValue.current);\n };\n\n const toggleIsEditing = () => setIsEditing(!isEditing);\n\n useLayoutEffect(() => {\n if (isEditing) {\n spanRef.current.focus();\n setCaret(spanRef.current);\n } else {\n spanRef.current.innerText = defaultValue;\n nextValue.current = defaultValue;\n }\n }, [isEditing]);\n\n return (\n \n \n {defaultValue}\n \n \n {isEditing ? (\n <>\n check_circle\n cancel\n \n ) : (\n edit\n )}\n \n \n );\n};\n" }, { "path": "src/components/controls/EditableText/EditableTextExample.css", "content": ".page.editable-text-page {\n --gradient: linear-gradient(45deg, #ff7c7d, #ffda67);\n --card: #272524;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n height: 100vh;\n background: var(--gradient);\n color: #fdfcfd;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.editable-text-card {\n display: flex;\n align-items: center;\n width: 75vw;\n max-width: 650px;\n padding: 44px 30px 44px 20px;\n background: var(--card);\n border-radius: 24px;\n}\n\n.editable-text-card img {\n max-width: 280px;\n width: 36vw;\n height: 300px;\n object-fit: cover;\n margin-left: -60px;\n margin-right: 30px;\n border-radius: inherit;\n box-shadow: 0 60px 40px rgb(0 0 0 / 8%);\n transition: border-radius 0.3s;\n}\n\n.editable-text-card-title {\n display: block;\n font-size: 24px;\n font-weight: 400;\n margin-top: 0;\n margin-bottom: 10px;\n}\n\n.editable-text-card-role {\n display: block;\n font-size: 16px;\n font-weight: 400;\n margin: 0 0 5px;\n opacity: 0.75;\n}\n\n.editable-text-card p {\n font-size: 14px;\n font-weight: 400;\n margin-bottom: 30px;\n opacity: 0.5;\n}\n\n.editable-text-socials {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.editable-text-socials > button {\n position: relative;\n border: 0;\n background: transparent;\n color: #f8f8f8;\n padding: 0;\n}\n\n.editable-text-socials > button:first-child::before {\n content: \"\";\n position: absolute;\n z-index: 0;\n top: 50%;\n left: 50%;\n width: 52px;\n height: 52px;\n translate: -50% -50%;\n border-radius: 50%;\n border: 2px solid #ff7c7d;\n transition: 0.3s;\n transform: translateY(0);\n}\n\n.editable-text-socials > button > i {\n position: relative;\n z-index: 1;\n border: 4px solid var(--card);\n background: rgb(255 255 255 / 12%);\n display: grid;\n place-items: center;\n font-size: 24px;\n width: 50px;\n height: 50px;\n border-radius: 40px;\n}\n\n@media (width <= 600px) {\n .editable-text-card {\n margin: 0 40px;\n padding-left: 50px;\n padding-right: 50px;\n padding-bottom: 60px;\n width: 100%;\n text-align: center;\n flex-direction: column;\n }\n\n .editable-text-card h2 {\n margin-right: 0;\n font-size: 26px;\n }\n\n .editable-text-card img {\n margin: -100px 0 30px 0;\n width: 100%;\n max-width: 1000px;\n height: 250px;\n }\n\n .editable-text-card p {\n max-width: 360px;\n }\n\n .editable-text-socials {\n justify-content: center;\n }\n}\n\n@media (width <= 440px) {\n .editable-text-card img {\n height: 50vw;\n width: 50vw;\n border-radius: 50%;\n border: 12px solid var(--card);\n box-shadow: none;\n margin: -140px 0 30px 0;\n }\n}\n" }, { "path": "src/components/controls/EditableText/EditableTextExample.jsx", "content": "import image from \"./image.jpg\";\nimport \"./EditableTextExample.css\";\nimport { EditableText } from \"./EditableText\";\nimport { useState } from \"react\";\n\nexport const EditableTitleExample = () => {\n const [state, setState] = useState({\n title: \"Jill Scott\",\n role: \"Frontend Engineer\",\n });\n\n const { title, role } = state;\n\n const handleSave = (name, value) =>\n setState({\n ...state,\n [name]: value,\n });\n\n return (\n
    \n
    \n \n
    \n \n \n

    \n Transforming ideas into realities, creating interfaces that inspire\n and engage users dreams.\n

    \n
    \n \n \n \n
    \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/PasswordStrength/PasswordStrength.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst strengthLabels = [\"weak\", \"medium\", \"medium\", \"strong\"];\n\nexport const PasswordStrength = ({ placeholder, onChange }) => {\n const [strength, setStrength] = useState(\"\");\n\n const getStrength = (password) => {\n let strengthIndicator = -1;\n\n if (/[a-z]/.test(password)) strengthIndicator++;\n if (/[A-Z]/.test(password)) strengthIndicator++;\n if (/\\d/.test(password)) strengthIndicator++;\n if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;\n\n if (password.length >= 16) strengthIndicator++;\n\n return strengthLabels[strengthIndicator];\n };\n\n const handleChange = (event) => {\n setStrength(getStrength(event.target.value));\n onChange(event.target.value);\n };\n\n return (\n <>\n \n
    \n
    \n
    \n
    {strength && `${strength} password`}
    \n \n );\n};\n\nexport const PasswordStrengthExample = () => {\n const handleChange = (value) => console.log(value);\n\n return (\n
    \n
    \n \n

    Sign Up

    \n
    \n
    \n \n
    \n
    \n \n \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/PasswordStrength/styles.css", "content": "* {\n box-sizing: border-box;\n}\n\n.page.password-strength-page {\n display: grid;\n place-items: center;\n margin: 0;\n background: #000000;\n font-family: \"Euclid Circular A\", \"Poppins\";\n color: #fdfdfd;\n}\n\n.password-strength-page .login-card {\n width: 400px;\n padding: 60px 30px 30px;\n border-radius: 16px;\n background: #0e0d0d;\n text-align: center;\n}\n\n.password-strength-page .login-card > h2 {\n font-size: 36px;\n font-weight: 600;\n margin: 0 0 30px;\n}\n\n.password-strength-page .login-card img {\n width: 260px;\n margin-bottom: 20px;\n}\n\n.password-strength-page .login-form {\n width: 100%;\n margin: 0;\n display: grid;\n}\n\n.password-strength-page .login-form input.control::placeholder {\n color: #9f9d9e;\n}\n\n.password-strength-page .control {\n outline: none;\n width: 100%;\n height: 56px;\n padding: 0 16px;\n color: inherit;\n background: #181919;\n border: 0;\n border-radius: 6px;\n margin: 8px 0;\n font-family: inherit;\n font-size: 18px;\n transition: 0.4s;\n}\n\n.password-strength-page button.control {\n cursor: pointer;\n width: 100%;\n height: 56px;\n padding: 0 16px;\n background: #0079ea;\n text-align: center;\n}\n\n.password-strength-page .bars {\n margin: 8px 0;\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n gap: 8px;\n height: 6px;\n border-radius: 3px;\n background: #181919;\n}\n\n.password-strength-page .bars div {\n height: 6px;\n border-radius: 3px;\n transition: 0.4s;\n width: 0%;\n}\n\n.password-strength-page .bars.weak div {\n background: #e24c71;\n width: 33.33%;\n}\n\n.password-strength-page .bars.medium div {\n background: #f39845;\n width: 66.66%;\n}\n\n.password-strength-page .bars.strong div {\n background: #57c558;\n width: 100%;\n}\n\n.password-strength-page .strength {\n text-align: left;\n height: 30px;\n text-transform: capitalize;\n color: #868b94;\n}\n" }, { "path": "src/components/controls/PasswordStrength2/PasswordStrength2.css", "content": "* {\n box-sizing: border-box;\n}\n\n.page.password-strength-2-page {\n display: grid;\n place-items: center;\n margin: 0;\n background: #f9f6fc;\n color: #2e2c2f;\n font-family: \"Euclid Circular A\", \"Poppins\";\n --color-primary: #7b00f1;\n --color-muted: #ada5b4;\n}\n\n.password-strength-2-page .card .bars {\n margin: 8px 0;\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n gap: 8px;\n height: 6px;\n border-radius: 3px;\n background: #f4f1f7;\n}\n\n.password-strength-2-page .card .bars div {\n height: 6px;\n border-radius: 3px;\n transition: 0.4s;\n width: 0%;\n}\n\n.password-strength-2-page .card .bars.weak div {\n background: #e24c71;\n width: 33.33%;\n}\n\n.password-strength-2-page .card .bars.medium div {\n background: #f39845;\n width: 66.66%;\n}\n\n.password-strength-2-page .card .bars.strong div {\n background: #57c558;\n width: 100%;\n}\n\n.password-strength-2-page .card .strength {\n text-align: left;\n height: 20px;\n font-size: 13px;\n text-transform: capitalize;\n color: #868b94;\n}\n\n.password-strength-2-page .blob,\n.password-strength-2-page .orbit {\n position: fixed;\n z-index: 1;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n}\n\n.password-strength-2-page .blob {\n width: 85vw;\n max-width: 550px;\n\n aspect-ratio: 1 / 1;\n}\n\n@keyframes spin {\n 100% {\n rotate: 1turn;\n }\n}\n\n.password-strength-2-page .orbit {\n width: 95vw;\n max-width: 720px;\n aspect-ratio: 1 / 1;\n border: 2px solid #ffffff;\n border-radius: 50%;\n animation: spin 50s infinite linear;\n}\n\n.password-strength-2-page .orbit::before,\n.password-strength-2-page .orbit::after {\n content: \"\";\n position: absolute;\n width: 24px;\n aspect-ratio: 1 / 1;\n border-radius: inherit;\n background: #f39f1a;\n}\n\n.password-strength-2-page .orbit::before {\n top: 50%;\n width: 18px;\n left: -9px;\n}\n\n.password-strength-2-page .orbit::after {\n top: 50%;\n right: -12px;\n}\n\n.password-strength-2-page .card {\n position: relative;\n z-index: 2;\n background: #ffffff;\n border-radius: 24px;\n padding: 72px 32px 48px;\n width: 340px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n box-shadow: 0 10px 50px rgb(96 68 121 / 10%);\n}\n\n.password-strength-2-page .card img {\n width: 96px;\n margin: 0 0 32px;\n}\n\n.password-strength-2-page .card :is(h2, h3) {\n font-weight: 500;\n}\n\n.password-strength-2-page .card h2 {\n font-size: 18px;\n margin: 0 0 6px;\n}\n\n.password-strength-2-page .card h3 {\n color: var(--color-muted);\n font-size: 13px;\n margin: 0 0 32px;\n}\n\n.password-strength-2-page .card form {\n display: grid;\n gap: 12px;\n width: 100%;\n margin: 0 0 20px;\n}\n\n.password-strength-2-page .card :is(input, button) {\n height: 52px;\n font-family: inherit;\n font-size: 15px;\n padding: 0 12px;\n border: 0;\n border-radius: 8px;\n}\n\n.password-strength-2-page .card .textbox {\n position: relative;\n}\n\n.password-strength-2-page label,\n.password-strength-2-page input {\n transition: 0.3s;\n}\n\n.password-strength-2-page .textbox label {\n position: absolute;\n top: 50%;\n left: 12px;\n translate: 0 -50%;\n transform-origin: 0 50%;\n pointer-events: none;\n color: var(--color-muted);\n}\n\n.password-strength-2-page .textbox input {\n width: 100%;\n padding-top: 10px;\n background: #f4f1f7;\n outline: none;\n color: inherit;\n box-shadow: 0 0 0 2px transparent;\n}\n\n.password-strength-2-page .textbox input:focus {\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.password-strength-2-page .textbox input:is(:focus, :not(:invalid)) ~ label {\n scale: 0.725;\n translate: 0 -112%;\n}\n\n.password-strength-2-page .card button {\n color: #f9f9f9;\n background: var(--color-primary);\n}\n\n.password-strength-2-page .card a {\n font-size: 14px;\n color: var(--color-primary);\n}\n\n.password-strength-2-page .card p {\n margin: 48px 0 0;\n font-size: 14px;\n color: var(--color-muted);\n}\n" }, { "path": "src/components/controls/PasswordStrength2/PasswordStrength2.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.png\";\nimport blob from \"./blob.svg\";\nimport \"./PasswordStrength2.css\";\n\nconst strengthLabels = [\"weak\", \"medium\", \"medium\", \"strong\"];\n\nexport const PasswordStrength = ({ placeholder, onChange }) => {\n const [strength, setStrength] = useState(\"\");\n\n const getStrength = (password) => {\n let strengthIndicator = -1;\n\n if (/[a-z]/.test(password)) strengthIndicator++;\n if (/[A-Z]/.test(password)) strengthIndicator++;\n if (/\\d/.test(password)) strengthIndicator++;\n if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;\n\n if (password.length >= 16) strengthIndicator++;\n\n return strengthLabels[strengthIndicator];\n };\n\n const handleChange = (event) => {\n setStrength(getStrength(event.target.value));\n onChange(event.target.value);\n };\n\n return (\n <>\n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    {strength && `${strength} password`}
    \n
    \n \n );\n};\n\nexport const PasswordStrength2Example = () => {\n const handleChange = (value) => console.log(value);\n\n return (\n
    \n \n
    \n
    \n \n

    Welcome to Lockr!

    \n

    We keep your data locked!

    \n
    \n
    \n \n \n
    \n \n \n \n Privacy Policy\n

    \n Already have an account? Login!\n

    \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/PasswordStrength3/PasswordStrength3.css", "content": "* {\n box-sizing: border-box;\n}\n\n.page.password-strength-2-page {\n display: grid;\n place-items: center;\n margin: 0;\n background: #f9f6fc;\n color: #2e2c2f;\n font-family: \"Euclid Circular A\", \"Poppins\";\n --color-primary: #7b00f1;\n --color-muted: #ada5b4;\n}\n\n.password-strength-2-page .card .bars {\n margin: 8px 0;\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n gap: 8px;\n height: 6px;\n border-radius: 3px;\n background: #f4f1f7;\n}\n\n.password-strength-2-page .card .bars div {\n height: 6px;\n border-radius: 3px;\n transition: 0.4s;\n width: 0%;\n}\n\n.password-strength-2-page .card .bars.weak div {\n background: #e24c71;\n width: 33.33%;\n}\n\n.password-strength-2-page .card .bars.medium div {\n background: #f39845;\n width: 66.66%;\n}\n\n.password-strength-2-page .card .bars.strong div {\n background: #57c558;\n width: 100%;\n}\n\n.password-strength-2-page .card .strength {\n text-align: left;\n height: 20px;\n font-size: 13px;\n text-transform: capitalize;\n color: #868b94;\n}\n\n.password-strength-2-page .blob,\n.password-strength-2-page .orbit {\n position: fixed;\n z-index: 1;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n}\n\n.password-strength-2-page .blob {\n width: 85vw;\n max-width: 550px;\n\n aspect-ratio: 1 / 1;\n}\n\n@keyframes spin {\n 100% {\n rotate: 1turn;\n }\n}\n\n.password-strength-2-page .orbit {\n width: 95vw;\n max-width: 720px;\n aspect-ratio: 1 / 1;\n border: 2px solid #ffffff;\n border-radius: 50%;\n animation: spin 50s infinite linear;\n}\n\n.password-strength-2-page .orbit::before,\n.password-strength-2-page .orbit::after {\n content: \"\";\n position: absolute;\n width: 24px;\n aspect-ratio: 1 / 1;\n border-radius: inherit;\n background: #f39f1a;\n}\n\n.password-strength-2-page .orbit::before {\n top: 50%;\n width: 18px;\n left: -9px;\n}\n\n.password-strength-2-page .orbit::after {\n top: 50%;\n right: -12px;\n}\n\n.password-strength-2-page .card {\n position: relative;\n z-index: 2;\n background: #ffffff;\n border-radius: 24px;\n padding: 72px 32px 48px;\n width: 340px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n box-shadow: 0 10px 50px rgb(96 68 121 / 10%);\n}\n\n.password-strength-2-page .card img {\n width: 96px;\n margin: 0 0 32px;\n}\n\n.password-strength-2-page .card :is(h2, h3) {\n font-weight: 500;\n}\n\n.password-strength-2-page .card h2 {\n font-size: 18px;\n margin: 0 0 6px;\n}\n\n.password-strength-2-page .card h3 {\n color: var(--color-muted);\n font-size: 13px;\n margin: 0 0 32px;\n}\n\n.password-strength-2-page .card form {\n display: grid;\n gap: 12px;\n width: 100%;\n margin: 0 0 20px;\n}\n\n.password-strength-2-page .card :is(input, button) {\n height: 52px;\n font-family: inherit;\n font-size: 15px;\n padding: 0 12px;\n border: 0;\n border-radius: 8px;\n}\n\n.password-strength-2-page .card .textbox {\n position: relative;\n}\n\n.password-strength-2-page label,\n.password-strength-2-page input {\n transition: 0.3s;\n}\n\n.password-strength-2-page .textbox label {\n position: absolute;\n top: 50%;\n left: 12px;\n translate: 0 -50%;\n transform-origin: 0 50%;\n pointer-events: none;\n color: var(--color-muted);\n}\n\n.password-strength-2-page .textbox input {\n width: 100%;\n padding-top: 10px;\n background: #f4f1f7;\n outline: none;\n color: inherit;\n box-shadow: 0 0 0 2px transparent;\n}\n\n.password-strength-2-page .textbox input:focus {\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.password-strength-2-page .textbox input:is(:focus, :not(:invalid)) ~ label {\n scale: 0.725;\n translate: 0 -112%;\n}\n\n.password-strength-2-page .card button {\n color: #f9f9f9;\n background: var(--color-primary);\n}\n\n.password-strength-2-page .card a {\n font-size: 14px;\n color: var(--color-primary);\n}\n\n.password-strength-2-page .card p {\n margin: 48px 0 0;\n font-size: 14px;\n color: var(--color-muted);\n}\n" }, { "path": "src/components/controls/PasswordStrength3/PasswordStrength3.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.png\";\nimport blob from \"./blob.svg\";\nimport \"./PasswordStrength3.css\";\n\nconst strengthLabels = [\"weak\", \"medium\", \"medium\", \"strong\"];\n\nexport const PasswordStrength = ({ placeholder, onChange }) => {\n const [strength, setStrength] = useState(\"\");\n\n const getStrength = (password) => {\n let strengthIndicator = -1;\n\n if (/[a-z]/.test(password)) strengthIndicator++;\n if (/[A-Z]/.test(password)) strengthIndicator++;\n if (/\\d/.test(password)) strengthIndicator++;\n if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;\n\n if (password.length >= 16) strengthIndicator++;\n\n return strengthLabels[strengthIndicator];\n };\n\n const handleChange = (event) => {\n setStrength(getStrength(event.target.value));\n onChange(event.target.value);\n };\n\n return (\n <>\n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    {strength && `${strength} password`}
    \n
    \n \n );\n};\n\nexport const PasswordStrength3Example = () => {\n const handleChange = (value) => console.log(value);\n\n return (\n
    \n \n
    \n
    \n \n

    Welcome to Lockr!

    \n

    We keep your data locked!

    \n
    \n
    \n \n \n
    \n \n \n \n Privacy Policy\n

    \n Already have an account? Login!\n

    \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/PasswordStrength4/PasswordStrength4.css", "content": "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\");\n\n* {\n box-sizing: border-box;\n}\n\n.page.password-strength-4-page {\n display: grid;\n place-items: center;\n margin: 0;\n background: #0f172a;\n color: #ffffff;\n font-family: \"Euclid Circular B\", \"Poppins\", sans-serif;\n --color-primary: #6d48f6;\n --color-muted: #94a3b8;\n --color-card: #192134;\n --color-input: rgb(255 255 255 / 4%);\n --color-border: rgba(255, 255, 255, 0.08);\n}\n\n/* ── Strength bar ── */\n.password-strength-4-page .bars {\n margin-bottom: 6px;\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n gap: 8px;\n height: 4px;\n border-radius: 3px;\n background: var(--color-input);\n}\n\n.password-strength-4-page .bars div {\n height: 100%;\n border-radius: 3px;\n transition:\n width 0.3s ease-out,\n background 0.3s ease-out;\n width: 0%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .password-strength-4-page .bars div {\n transition: none;\n }\n}\n\n.password-strength-4-page .bars.weak div {\n background: #ef4444;\n width: 33.33%;\n}\n\n.password-strength-4-page .bars.medium div {\n background: #f59e0b;\n width: 66.66%;\n}\n\n.password-strength-4-page .bars.strong div {\n background: #34d399;\n width: 100%;\n}\n\n.password-strength-4-page .strength {\n text-align: left;\n height: 20px;\n font-size: 13px;\n text-transform: capitalize;\n color: var(--color-muted);\n}\n\n/* ── Background decorations ── */\n.password-strength-4-page .blob,\n.password-strength-4-page .orbit {\n position: fixed;\n z-index: 1;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n}\n\n.password-strength-4-page .blob {\n width: 85vw;\n max-width: 550px;\n aspect-ratio: 1 / 1;\n opacity: 0.02;\n}\n\n@keyframes spin {\n 100% {\n rotate: 1turn;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .password-strength-4-page .orbit {\n animation: none;\n }\n}\n\n.password-strength-4-page .orbit {\n width: 95vw;\n max-width: 720px;\n aspect-ratio: 1 / 1;\n border: 1px solid rgba(255, 255, 255, 0.16);\n border-radius: 50%;\n animation: spin 50s infinite linear;\n}\n\n.password-strength-4-page .orbit::before,\n.password-strength-4-page .orbit::after {\n content: \"\";\n position: absolute;\n width: 24px;\n aspect-ratio: 1 / 1;\n border-radius: inherit;\n background: linear-gradient(90deg, #6d48f6, #4896f6);\n}\n\n.password-strength-4-page .orbit::before {\n top: 50%;\n width: 18px;\n left: -9px;\n}\n\n.password-strength-4-page .orbit::after {\n top: 50%;\n right: -12px;\n}\n\n/* ── Card ── */\n.password-strength-4-page .card {\n position: relative;\n z-index: 2;\n background: var(--color-card);\n border: 1px solid var(--color-border);\n border-radius: 30px;\n padding: 72px 32px 48px;\n width: 340px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.password-strength-4-page .card img {\n width: 56px;\n margin: 0 0 12px;\n}\n\n.password-strength-4-page h2 {\n font-size: 24px;\n font-weight: 400;\n margin: 0 0 38px;\n}\n\n.password-strength-4-page form {\n display: grid;\n gap: 12px;\n width: 100%;\n margin: 0 0 20px;\n}\n\n.password-strength-4-page :is(input, button) {\n height: 52px;\n font-family: inherit;\n font-size: 15px;\n padding: 0 12px;\n border: 0;\n border-radius: 8px;\n}\n\n/* ── Textbox / floating label ── */\n.password-strength-4-page .textbox {\n position: relative;\n}\n\n.password-strength-4-page label,\n.password-strength-4-page input {\n transition: 0.3s ease;\n}\n\n.password-strength-4-page .textbox label {\n position: absolute;\n top: 50%;\n left: 12px;\n translate: 0 -50%;\n transform-origin: 0 50%;\n pointer-events: none;\n color: var(--color-muted);\n}\n\n.password-strength-4-page .textbox input {\n width: 100%;\n padding-top: 10px;\n background: var(--color-input);\n outline: none;\n color: #ffffff;\n box-shadow: 0 0 0 1px transparent;\n}\n\n.password-strength-4-page .textbox input:focus {\n box-shadow: 0 0 0 2px rgb(255 255 255 / 16%);\n}\n\n.password-strength-4-page .textbox input:is(:focus, :not(:invalid)) ~ label {\n scale: 0.725;\n translate: 0 -112%;\n}\n\n/* ── Password visibility toggle ── */\n.password-strength-4-page .toggle-visibility {\n position: absolute;\n right: 12px;\n top: 50%;\n translate: 0 -50%;\n height: auto;\n padding: 6px;\n background: transparent;\n border: none;\n border-radius: 4px;\n color: var(--color-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s ease;\n}\n\n.password-strength-4-page .toggle-visibility:hover {\n color: #ffffff;\n}\n\n.password-strength-4-page .toggle-visibility:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.password-strength-4-page .textbox input.password-strength {\n padding-right: 44px;\n}\n\n/* ── Submit button ── */\n.password-strength-4-page button[type=\"submit\"] {\n color: #ffffff;\n background: linear-gradient(90deg, #6d48f6, #4896f6);\n cursor: pointer;\n transition:\n background 0.15s ease,\n transform 0.1s ease;\n}\n\n.password-strength-4-page button[type=\"submit\"]:active {\n transform: scale(0.98);\n}\n\n.password-strength-4-page button[type=\"submit\"]:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 3px;\n}\n\n/* ── Links ── */\n.password-strength-4-page a {\n font-size: 14px;\n color: #f9f9f9;\n cursor: pointer;\n text-decoration: none;\n transition: color 0.15s ease;\n}\n\n.password-strength-4-page a:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n.password-strength-4-page p {\n margin: 28px 0 6px;\n font-size: 14px;\n color: var(--color-muted);\n}\n" }, { "path": "src/components/controls/PasswordStrength4/PasswordStrength4.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport blob from \"./blob.svg\";\nimport \"./PasswordStrength4.css\";\n\nconst strengthLabels = [\"weak\", \"medium\", \"medium\", \"strong\"];\n\nconst EyeIcon = () => (\n \n \n \n \n);\n\nconst EyeOffIcon = () => (\n \n \n \n \n \n \n);\n\nconst PasswordStrength = ({ placeholder, id, onChange }) => {\n const [strength, setStrength] = useState(\"\");\n const [visible, setVisible] = useState(false);\n\n const getStrength = (password) => {\n let strengthIndicator = -1;\n if (/[a-z]/.test(password)) strengthIndicator++;\n if (/[A-Z]/.test(password)) strengthIndicator++;\n if (/\\d/.test(password)) strengthIndicator++;\n if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;\n if (password.length >= 16) strengthIndicator++;\n return strengthLabels[strengthIndicator];\n };\n\n const handleChange = (event) => {\n setStrength(getStrength(event.target.value));\n onChange(event.target.value);\n };\n\n return (\n <>\n
    \n \n \n setVisible((v) => !v)}\n >\n {visible ? : }\n \n
    \n
    \n
    \n
    \n
    \n
    {strength && `${strength} password`}
    \n
    \n \n );\n};\n\nexport const PasswordStrength4Example = () => {\n const handleChange = (value) => console.log(value);\n\n return (\n
    \n \"\"\n
    \n
    \n \"Lockr\n

    Cube.ai

    \n
    \n
    \n \n \n
    \n \n \n \n

    \n Already have an account? Login!\n

    \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/PasswordVisibility/Password.css", "content": ".password-control input {\n --color-primary: #0088ff;\n --color-muted: #5a616c;\n border: 0;\n width: 100%;\n height: 60px;\n background: transparent;\n font-family: inherit;\n font-size: 16px;\n outline: none;\n}\n\n.password-visibility .password-control {\n position: relative;\n margin-bottom: 16px;\n}\n\n.password-control > span {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n left: 0;\n font-size: 22px;\n pointer-events: none;\n color: var(--color-muted);\n transition: 0.3s;\n}\n\n.password-control input {\n padding: 0 24px 0 36px;\n color: rgb(255 255 255 / 96%);\n height: 72px;\n transition: 0.3s;\n}\n\n.password-control :is(input:focus, input:valid) ~ label {\n translate: -36px -44px;\n scale: 0.875;\n}\n\n.password-control input:focus ~ label {\n color: var(--color-primary);\n}\n\n.password-control .border {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 2px;\n border-radius: 2px;\n background: rgb(255 255 255 / 6%);\n}\n\n.password-control .border::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: var(--color-primary);\n transform: scaleX(0);\n opacity: 0;\n transition: 0.3s;\n}\n\n.password-control input:focus ~ .border::after {\n transform: scaleX(1);\n opacity: 1;\n}\n\n.password-control :is(input:focus, input:valid) ~ span {\n color: rgb(255 255 255 / 96%);\n}\n\n.password-control label {\n position: absolute;\n top: 50%;\n left: 30px;\n translate: 0 -50%;\n color: var(--color-muted);\n pointer-events: none;\n text-transform: capitalize;\n transition: 0.4s;\n}\n\n.password-control {\n margin-bottom: 20px;\n}\n\n.password-control input {\n padding-right: 50px;\n}\n\n.password-control button {\n position: absolute;\n top: 50%;\n right: 0;\n display: grid;\n place-items: center;\n padding: 0;\n height: 36px;\n width: 36px;\n translate: 0 -50%;\n cursor: pointer;\n}\n\n.password-control button span {\n color: var(--color-muted);\n transition: 0.3s;\n}\n\n.password-control button:hover span {\n color: rgb(255 255 255 / 96%);\n}\n" }, { "path": "src/components/controls/PasswordVisibility/Password.jsx", "content": "import { useState } from \"react\";\nimport \"./Password.css\";\n\nexport const Icon = ({ children }) => (\n {children}\n);\n\nexport const Password = ({ name, onInput }) => {\n const [showPassword, setShowPassword] = useState(false);\n\n const handleMouseDown = (e) => {\n e.preventDefault();\n setShowPassword(!showPassword);\n };\n\n const handleInput = (e) => onInput(name, e.target.value);\n\n return (\n
    \n \n \n lock\n \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/PasswordVisibility/PasswordVisibilityExample.css", "content": ".page.password-visibility-page {\n display: grid;\n place-items: center;\n margin: 0;\n padding: 0 20px;\n background: #3284ce;\n font-family: \"Euclid Circular A\", \"Poppins\";\n box-sizing: border-box;\n}\n\n.password-visibility :is(button, input) {\n border: 0;\n width: 100%;\n height: 60px;\n background: transparent;\n font-family: inherit;\n font-size: 16px;\n outline: none;\n}\n\n@keyframes clouds {\n 0% {\n scale: 1;\n translate: 0;\n }\n 50% {\n scale: 1.25;\n }\n 100% {\n scale: 1;\n translate: -100px 0;\n }\n}\n\n.password-visibility-clouds {\n position: fixed;\n top: -50vh;\n left: 0;\n height: 150vh;\n animation: clouds 15s both infinite alternate linear;\n}\n\n.password-visibility {\n --color-primary: #0088ff;\n --color-muted: #5a616c;\n position: fixed;\n display: flex;\n flex-direction: column;\n justify-content: center;\n z-index: 2;\n top: 0;\n left: 0;\n height: 100%;\n width: 70%;\n max-width: 400px;\n padding: 200px 60px;\n background: #121216;\n}\n\n.password-visibility > h2 {\n font-size: 32px;\n font-weight: 300;\n margin: 0 0 10px;\n color: rgb(255 255 255 / 96%);\n}\n\n.password-visibility > h3 {\n font-size: 16px;\n font-weight: 400;\n margin: 0 0 30px;\n color: var(--color-muted);\n}\n\n.password-visibility > form {\n margin: 0;\n display: grid;\n gap: 16px;\n}\n\n.password-visibility > form > button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n padding: 0 12px 0 24px;\n border-radius: 6px;\n background: var(--color-primary);\n color: #f9f9f9;\n border: 0;\n font-family: inherit;\n letter-spacing: 1px;\n font-size: 16px;\n font-weight: 500;\n transition: 0.3s;\n}\n\n.password-visibility form > button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.password-visibility p > a {\n color: var(--color-primary);\n text-decoration: none;\n}\n" }, { "path": "src/components/controls/PasswordVisibility/PasswordVisibilityExample.jsx", "content": "import { useState } from \"react\";\nimport bg from \"./bg.svg\";\nimport \"./PasswordVisibilityExample.css\";\nimport { Icon, Password } from \"./Password\";\n\nexport const PasswordVisibilityExample = () => {\n const [state, setState] = useState({\n password: \"\",\n });\n\n const handleInput = (name, value) => {\n setState({\n ...state,\n [name]: value,\n });\n };\n\n return (\n
    \n \n
    \n

    Login

    \n

    Welcome back Jack!

    \n
    \n \n \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/Slider/Slider.css", "content": ".slider-wrapper {\n --color-border: red;\n --color-border-hover: blue;\n --color-card: black;\n --color-hover: white;\n --color-primary: green;\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n border-radius: 6px;\n height: 40px;\n padding: 0 4px 0 8px;\n border: 1px solid var(--color-border);\n transition: 0.3s;\n}\n\n.slider-wrapper:hover {\n border-color: var(--color-border-hover);\n}\n\n.slider {\n flex: 1 1 auto;\n position: relative;\n height: 16px;\n}\n\n.slider-label {\n position: absolute;\n top: -8px;\n padding: 0 4px;\n left: 5px;\n font-size: 11px;\n color: var(--color-muted);\n background: var(--color-card);\n}\n\n.track {\n position: absolute;\n top: 5px;\n width: 100%;\n height: 6px;\n border-radius: 3px;\n z-index: 1;\n background: var(--color-hover);\n}\n\n.markers {\n position: absolute;\n z-index: 2;\n top: 5px;\n left: 2px;\n right: 3px;\n translate: 0 -50%;\n display: flex;\n}\n\n.marker {\n position: absolute;\n top: 0;\n left: var(--left);\n width: 6px;\n height: 6px;\n border-radius: 50%;\n translate: -50% 0;\n background: rgb(255 255 255 / 16%);\n opacity: 0.6;\n transition: 0.3s;\n}\n\n.marker-active {\n background: var(--color-primary);\n}\n\n.numeric-input-wrapper {\n position: relative;\n}\n\n.numeric-input-suffix {\n position: absolute;\n top: 50%;\n right: 8px;\n translate: 0 -50%;\n font-size: 14px;\n}\n\n.numeric-input {\n position: relative;\n z-index: 3;\n width: 58px;\n height: 28px;\n min-height: 28px;\n border-radius: 4px;\n border: 1px solid var(--color-border);\n font-size: 14px;\n padding: 0 24px 0 10px;\n}\n\n.numeric-input:hover {\n border-color: var(--color-border-hover);\n}\n\n.numeric-input:focus {\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\ninput[type=\"range\"],\ninput[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"] {\n position: relative;\n z-index: 3;\n width: 100%;\n height: 6px;\n min-height: 6px;\n translate: 0 -5px;\n padding: 0;\n border: 0;\n border-radius: 3px;\n margin: auto;\n background: transparent;\n cursor: pointer;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n position: relative;\n z-index: 3;\n background: var(--color-text);\n width: 18px;\n height: 18px;\n border-radius: 50px;\n background: #111111;\n border: 2px solid var(--color-primary);\n cursor: pointer;\n box-shadow: 0 0 0 3px transparent;\n transition: 0.3s;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n box-shadow: 0 0 0 3px rgb(48 168 121 / 16%);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:active {\n box-shadow: 0 0 0 5px rgb(48 168 121 / 16%);\n}\n\n.bar {\n position: absolute;\n z-index: 1;\n left: 0;\n top: 5px;\n bottom: 0;\n height: 6px;\n border-top-left-radius: 3px;\n border-bottom-left-radius: 3px;\n background: var(--color-primary);\n opacity: 0.25;\n pointer-events: none;\n}\n" }, { "path": "src/components/controls/Slider/Slider.jsx", "content": "import { useState } from \"react\";\nimport \"./Slider.css\";\n\nconst getBarWidth = (numValue) => {\n const THUMB_SIZE = 19;\n const percentageOfThumb = (THUMB_SIZE * numValue) / 100;\n return `${numValue - percentageOfThumb / 2}%`;\n};\n\nexport const Slider = ({ id, label, min, max, initialValue }) => {\n const [barWidth, setBarWidth] = useState(getBarWidth(+initialValue));\n\n const [value, setValue] = useState(initialValue);\n\n const MARKERS = [1, 25, 50, 75, 100];\n\n const onInput = (e) => {\n const inputValue = e.target.value;\n\n // Allow empty string\n if (inputValue === \"\") {\n setValue(\"\");\n setBarWidth(\"0%\");\n return;\n }\n\n const numValue = Number(inputValue);\n if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {\n setValue(inputValue);\n setBarWidth(getBarWidth(numValue));\n }\n };\n\n return (\n
    \n \n
    \n \n
    \n
    \n {MARKERS.map((marker) => (\n
    \n ))}\n
    \n
    \n
    \n
    \n \n % \n
    \n
    \n );\n};\n" }, { "path": "src/components/controls/Slider/SliderExample.css", "content": ".page.slider-page {\n background: #222222;\n}\n" }, { "path": "src/components/controls/Slider/SliderExample.jsx", "content": "import { Slider } from \"./Slider\";\nimport \"./SliderExample.css\";\n\nexport const SliderExample = () => (\n
    \n \n
    \n);\n" }, { "path": "src/components/controls/index.js", "content": "export * from \"./PasswordStrength/PasswordStrength\";\nexport * from \"./AutoSuggest/AutoSuggest\";\nexport * from \"./PasswordVisibility/PasswordVisibilityExample\";\nexport * from \"./EditableText/EditableTextExample\";\nexport * from \"./Slider/SliderExample\";\nexport * from \"./PasswordStrength2/PasswordStrength2\";\nexport * from \"./PasswordStrength3/PasswordStrength3\";\nexport * from \"./PasswordStrength4/PasswordStrength4\";\n" }, { "path": "src/components/dropdowns/Dropdown1/Dropdown1.css", "content": ".dropdown-1 {\n position: relative;\n perspective: 1000px;\n width: 144px;\n}\n\n.dropdown-1 button {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0;\n width: 100%;\n height: 64px;\n color: rgb(255 255 255 / 55%);\n background: #2d2f31;\n border: 0;\n cursor: pointer;\n font-size: 16px;\n font-family: \"Euclid Circular A\";\n}\n\n.dropdown-1 > button {\n background: transparent;\n gap: 10px;\n margin: 0 -4px;\n white-space: nowrap;\n}\n\n.dropdown-1 > button > .chevron {\n}\n\n.dropdown-1:hover > button,\n.dropdown-1.open > button {\n color: rgb(255 255 255 / 95%);\n}\n\n.dropdown-1.open > button .chevron {\n rotate: -180deg;\n}\n\n.dropdown-1 > button > .span {\n font-size: 30px;\n}\n\n.dropdown-1 button .chevron {\n margin-left: auto;\n transition: rotate 0.3s;\n}\n\n.dropdown-1-menu {\n position: absolute;\n overflow: hidden;\n z-index: 1;\n top: 64px;\n left: 0;\n margin: 0 -20px;\n width: calc(100% + 40px);\n height: 168px;\n opacity: 0;\n transform: rotateX(-90deg);\n transform-origin: 0% 0%;\n visibility: hidden;\n background: #2d2f31;\n transition: 0.3s;\n}\n\n.dropdown-1.open .dropdown-1-menu {\n opacity: 1;\n transform: rotateX(0);\n visibility: visible;\n}\n\n.dropdown-1-menu .main-menu {\n width: 50%;\n}\n\n.dropdown-1-menu .menu-inner {\n position: absolute;\n width: 200%;\n display: flex;\n transition: 0.4s;\n}\n\n.dropdown-1-menu .menu-inner.open {\n translate: -50%;\n}\n\n.dropdown-1-menu button {\n border: 0;\n height: 56px;\n border-radius: 0;\n gap: 10px;\n padding: 0 8px 0 16px;\n text-transform: capitalize;\n}\n\n.dropdown-1-menu button:hover {\n color: rgb(255 255 255 / 95%);\n}\n\n.dropdown-1-menu .sub-menu {\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n}\n\n.dropdown-1 button .material-symbols-outlined:first-child {\n font-size: 22px;\n}\n\n.page.dropdown-1-page {\n margin: 0;\n display: grid;\n place-items: center;\n background: #212324;\n height: 100vh;\n}\n\n.dropdown-1-nav {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2;\n background: #771dff;\n width: 100%;\n padding: 0 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.dropdown-1-nav > h1 {\n font-weight: 400;\n margin-right: auto;\n margin-left: 14px;\n font-size: 16px;\n}\n" }, { "path": "src/components/dropdowns/Dropdown1/Dropdown1.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./Dropdown1.css\";\n\nconst MenuButton = ({\n name,\n icon,\n index,\n hasSubItems,\n subMenuHeight,\n onClick,\n}) => {\n return (\n \n );\n};\n\nconst MenuItem = ({ name, icon, index, activeSubMenu, subItems, onClick }) => {\n const subMenuRef = useRef();\n const isActive = activeSubMenu === index;\n return (\n <>\n null}\n name={name}\n icon={icon || name}\n index={index}\n hasSubItems={Boolean(subItems)}\n subMenuHeight={subMenuRef.current?.clientHeight}\n />\n {subItems?.length && (\n
    \n <>\n \n {subItems.map((subItem) => (\n \n ))}\n \n
    \n )}\n \n );\n};\n\nexport const Dropdown1 = ({ items }) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);\n\n const [subMenuHeight, setSubMenuHeight] = useState();\n\n const [activeSubMenu, setActiveSubMenu] = useState();\n\n const handleClick = (index, subMenuHeight) => {\n if (index > -1) setActiveSubMenu(index);\n setSubMenuHeight(subMenuHeight);\n setIsSubMenuOpen(index > -1);\n };\n\n return (\n
    \n \n \n
    \n
    \n {items.map((item, index) => (\n \n ))}\n
    \n
    \n
    \n \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown1/Dropdown1Example.jsx", "content": "import { Dropdown1 } from \"./Dropdown1\";\nimport \"./Dropdown1.css\";\n\nconst items = [\n {\n name: \"settings\",\n subItems: [\"analytics\", \"database\", \"terminal\"],\n },\n {\n name: \"devices\",\n subItems: [\"smartphone\", \"mouse\", \"keyboard\", \"headphones\"],\n },\n {\n name: \"lock\",\n displayName: \"Account\",\n },\n];\n\nexport const Dropdown1Example = () => {\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown2/Dropdown2.css", "content": ".dropdown-2 {\n position: relative;\n display: grid;\n place-items: center;\n height: 72px;\n}\n\n.dropdown-2-overlay {\n position: fixed;\n inset: 0;\n background: rgb(0 0 0 / 40%);\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n}\n\n.dropdown-2-overlay.open {\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-2 > button {\n position: relative;\n display: grid;\n place-items: center;\n width: 36px;\n height: 36px;\n background: transparent;\n}\n\n.dropdown-2-menu {\n overflow-x: hidden;\n overflow-y: auto;\n position: fixed;\n translate: 0 20px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-auto-rows: max-content;\n width: 270px;\n max-height: 286px;\n padding: 10px;\n background: #ffffff;\n border-radius: 8px;\n border: 1px solid #ebebeb;\n box-shadow: 0 0 10px rgb(0 0 0 / 8%);\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n appearance: none;\n}\n\n.dropdown-2-menu::-webkit-scrollbar {\n width: 15px;\n}\n\n.dropdown-2-menu::-webkit-scrollbar-thumb {\n background: #dadce0;\n border-radius: 10px;\n border: 4px solid transparent;\n background-clip: padding-box;\n}\n\n.dropdown-2-menu.open {\n opacity: 1;\n visibility: visible;\n translate: 0;\n}\n\n.dropdown-2-menu > button {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 6px;\n font-family: inherit;\n color: #6d696b;\n border: 0;\n background: transparent;\n}\n\n.dropdown-2-menu > button > img {\n width: 64px;\n height: 64px;\n padding: 16px;\n}\n\n.dropdown-2-menu > button > span:first-child {\n display: block;\n width: 64px;\n height: 64px;\n scale: 0.7;\n background-image: url(\"./icons.png\");\n background-position: 0 -3105px;\n background-size: 64px 3307px;\n background-repeat: no-repeat;\n}\n\n.dropdown-2-menu > button > span:last-child {\n font-size: 12px;\n translate: 0 -12px;\n}\n" }, { "path": "src/components/dropdowns/Dropdown2/Dropdown2.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./Dropdown2.css\";\nimport joe from \"./joe.png\";\nimport { createPortal } from \"react-dom\";\n\nconst Overlay = ({ isOpen, onClick }) => (\n \n);\n\nconst Menu = ({ isOpen, dropdownRef }) => {\n const menuRef = useRef(null);\n const rect = dropdownRef?.current?.getBoundingClientRect();\n const top = `${rect?.y + 60}px`;\n const left = `${rect?.x - menuRef?.current?.clientWidth + 40}px`;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport const Dropdown2 = () => {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n return (\n
    \n setIsOpen(true)}\n >\n apps\n \n {createPortal(\n setIsOpen(false)} />,\n document.body\n )}\n {createPortal(\n ,\n document.body\n )}\n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown2/Dropdown2Example.css", "content": ".page.dropdown-2-page {\n color: #6d696b;\n background: #f7f7f7;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.dropdown-2-nav {\n margin-top: -40px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 80%;\n height: 72px;\n padding: 0 20px;\n background: #ffffff;\n box-shadow: 0 0 20px rgb(0 0 0 / 6%);\n}\n\n.dropdown-2-nav .logo {\n display: flex;\n align-items: center;\n}\n\n.dropdown-2-nav .logo img {\n width: 36px;\n padding: 0;\n margin-left: 4px;\n margin-right: 6px;\n}\n\n.dropdown-2-nav span.material-symbols-outlined {\n display: grid;\n place-items: center;\n width: 40px;\n height: 72px;\n font-size: 24px;\n}\n\n.dropdown-2-nav h2 {\n font-size: 19px;\n font-weight: 400;\n}\n\n.dropdown-2-nav .nav-right > img {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n object-fit: contain;\n margin-left: 8px;\n}\n\n.dropdown-2-nav button {\n background: transparent;\n border: 0;\n color: inherit;\n cursor: pointer;\n}\n\n.dropdown-2-nav .nav-right {\n display: flex;\n align-items: center;\n}\n" }, { "path": "src/components/dropdowns/Dropdown2/Dropdown2Example.jsx", "content": "import { Dropdown2 } from \"./Dropdown2\";\nimport joe from \"./joe.png\";\nimport logo from \"./logo.svg\";\nimport \"./Dropdown2Example.css\";\n\nexport const Dropdown2Example = () => {\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown3/Dropdown3.css", "content": ".page.dropdown-3-page {\n margin: 0;\n display: grid;\n place-items: center;\n background: #1b1921;\n height: 100vh;\n --color-menu: #2b2935;\n}\n\n.dropdown-3 {\n position: relative;\n}\n\n.dropdown-3 button {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n width: 204px;\n height: 64px;\n color: #afb3b5;\n background: var(--color-menu);\n border: 0;\n cursor: pointer;\n font-size: 18px;\n font-family: \"Euclid Circular A\";\n transition: 0.3s ease;\n}\n\n.dropdown-3 > button {\n background: #6f3dcd;\n border-radius: 10px;\n color: #f9f9f9;\n}\n\n.dropdown-3.open > button .chevron {\n rotate: -180deg;\n}\n\n.dropdown-3 button .chevron {\n margin-left: auto;\n transition: 0.3s ease;\n}\n\n.dropdown-3 .menu {\n position: absolute;\n overflow: hidden;\n z-index: 1;\n top: 74px;\n left: 0;\n width: 100%;\n opacity: 0;\n translate: 0 -20px;\n visibility: hidden;\n border-radius: 10px;\n background: var(--color-menu);\n transition: 0.4s ease;\n}\n\n.dropdown-3.open .menu {\n opacity: 1;\n translate: 0;\n visibility: visible;\n}\n\n.dropdown-3 .menu-inner {\n position: absolute;\n width: 460px;\n display: flex;\n transition: 0.4s ease;\n}\n\n.dropdown-3 .menu-inner.open {\n translate: -50%;\n}\n\n.dropdown-3 .menu button {\n border: 0;\n height: 56px;\n border-radius: 0;\n text-transform: capitalize;\n}\n\n.dropdown-3 .menu button:hover {\n background: #393646;\n color: #f9f9f9;\n}\n\n.dropdown-3 .sub-menu {\n position: absolute;\n width: 230px;\n left: 230px;\n top: 0;\n opacity: 0;\n visibility: hidden;\n}\n\n.dropdown-3 .sub-menu.open {\n opacity: 1;\n visibility: visible;\n}\n" }, { "path": "src/components/dropdowns/Dropdown3/Dropdown3.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./Dropdown3.css\";\n\nconst items = [\n {\n name: \"build\",\n subItems: [\"description\", \"folder\", \"article\"],\n },\n {\n name: \"devices\",\n subItems: [\"storage\", \"mouse\", \"keyboard\", \"headphones\"],\n },\n {\n name: \"logout\",\n },\n];\n\nconst Icon = ({ icon, className }) => (\n {icon}\n);\n\nconst MenuButton = ({\n name,\n icon,\n index,\n hasSubItems,\n subMenuHeight,\n onClick,\n}) => {\n return (\n \n );\n};\n\nconst MenuItem = ({ name, index, activeSubMenu, subItems, onClick }) => {\n const subMenuRef = useRef(null);\n const isActive = activeSubMenu === index;\n return (\n <>\n null}\n name={name}\n index={index}\n hasSubItems={Boolean(subItems)}\n subMenuHeight={subMenuRef.current?.clientHeight}\n />\n {subItems?.length && (\n
    \n <>\n \n {subItems.map((subItem) => (\n \n ))}\n \n
    \n )}\n \n );\n};\n\nexport const Dropdown3 = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);\n\n const [subMenuHeight, setSubMenuHeight] = useState();\n\n const [activeSubMenu, setActiveSubMenu] = useState();\n\n const handleClick = (index, subMenuHeight) => {\n if (index > -1) setActiveSubMenu(index);\n setSubMenuHeight(subMenuHeight);\n setIsSubMenuOpen(index > -1);\n };\n\n return (\n
    \n \n \n
    \n
    \n
    \n {items.map((item, index) => (\n \n ))}\n
    \n
    \n
    \n \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown4/Dropdown4.css", "content": ".dropdown-4 {\n position: relative;\n perspective: 400px;\n color: #f9f9f9;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.dropdown-4 :is(button, ul, .button-inner) {\n transform-origin: 50% 0;\n backface-visibility: hidden;\n transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),\n background 0.3s, scale 0.3s;\n}\n\n.dropdown-4 button {\n position: relative;\n z-index: 1;\n background: transparent;\n border: 0;\n color: inherit;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-family: inherit;\n height: 60px;\n width: 160px;\n gap: 12px;\n padding: 0 20px 0 32px;\n cursor: pointer;\n}\n\n.dropdown-4 > button span {\n font-size: 28px;\n}\n\n.dropdown-4 > button .button-inner {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 16px;\n}\n\n.dropdown-4 ul {\n position: absolute;\n top: 0;\n left: 0;\n list-style: none;\n padding: 0;\n margin: 0;\n background: #3b1977;\n transform: rotateX(-90deg) translateZ(60px);\n}\n\n.dropdown-4.open ul {\n transform: rotate(0) translateZ(60px);\n}\n\n.dropdown-4 ul button {\n justify-content: flex-start;\n gap: 12px;\n text-transform: capitalize;\n padding: 0 16px;\n}\n\n.dropdown-4 ul button i {\n font-size: 20px;\n}\n\n.dropdown-4 ul button:hover {\n background: rgb(255 255 255 / 12%);\n}\n\n.dropdown-4 > button {\n background: #5d13f1;\n transform: rotate(0);\n}\n\n.dropdown-4:not(.open) > button:hover {\n scale: 1.05;\n}\n\n.dropdown-4.open > button {\n transform: rotateX(90deg);\n}\n\n.dropdown-4.open > button .button-inner {\n opacity: 0;\n}\n" }, { "path": "src/components/dropdowns/Dropdown4/Dropdown4.jsx", "content": "import { useRef, useEffect, useState } from \"react\";\nimport \"./Dropdown4.css\";\n\n// Example items\n\n// const items = [\n// \"Trainers\",\n// \"Joggers\",\n// \"Tracksuits\"\n// ]\n\nconst useClickOutside = (ref, callback) => {\n const handleClick = (e) => {\n if (ref.current && !ref.current.contains(e.target)) {\n callback();\n }\n };\n useEffect(() => {\n document.addEventListener(\"click\", handleClick);\n\n return () => {\n document.removeEventListener(\"click\", handleClick);\n };\n });\n};\n\nexport const Dropdown4 = ({ buttonText, items, onItemClick }) => {\n const dropdownRef = useRef(null);\n\n const [isOpen, setIsOpen] = useState(false);\n\n const toggleIsOpen = () => setIsOpen(!isOpen);\n\n const handleItemClick = (item) => {\n onItemClick(item);\n toggleIsOpen();\n };\n\n useClickOutside(dropdownRef, () => setIsOpen(false));\n\n return (\n
    \n \n
      \n {items.map((item) => (\n
    • \n \n
      • \n ))}\n
    \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown4/Dropdown4Example.css", "content": ".page.dropdown-4-page {\n background: #fdfcf1;\n color: #5f5a67;\n}\n\n.page.dropdown-4-page > div {\n translate: 0 -60px;\n}\n\n.Toastify__toast {\n font-family: inherit;\n text-transform: capitalize;\n}\n\n/* .Toastify__toast .Toastify__progress-bar--wrp {\n display: none;\n} */\n" }, { "path": "src/components/dropdowns/Dropdown4/Dropdown4Example.jsx", "content": "import { useState } from \"react\";\nimport { ToastContainer, toast, cssTransition } from \"react-toastify\";\nimport { Dropdown4 } from \"./Dropdown4\";\nimport \"./Dropdown4Example.css\";\n\nconst items = [\"instagram\", \"twitter\", \"github\"];\n\nexport const Dropdown4Example = () => {\n const handleItemClick = (item) =>\n toast.success(`Followed on ${item}`, {\n position: \"bottom-center\",\n autoClose: true,\n closeButton: false,\n });\n\n return (\n <>\n \n
    \n
    \n \n
    \n
    \n \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown5/Dropdown5.css", "content": ".dropdown-5 {\n position: relative;\n display: grid;\n place-items: center;\n height: 72px;\n}\n\n.dropdown-5-overlay {\n position: fixed;\n inset: 0;\n background: rgb(0 0 0 / 40%);\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n}\n\n.dropdown-5-overlay.open {\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-5 button {\n position: relative;\n display: grid;\n place-items: center;\n width: 36px;\n height: 36px;\n background: transparent;\n}\n\n.dropdown-5-menu {\n position: fixed;\n width: 270px;\n height: 352px;\n max-height: 352px;\n border-radius: 14px;\n opacity: 0;\n visibility: hidden;\n appearance: none;\n border: 7px solid #282a2c;\n background: #1b1b1b;\n box-shadow: 0 -20px 18px rgb(0 0 0 / 12%), 0 16px 40px rgb(0 0 0 / 12%);\n}\n\n.dropdown-5-menu-inner {\n position: absolute;\n top: 4px;\n left: 0;\n right: -7px;\n bottom: 4px;\n overflow-x: hidden;\n overflow-y: scroll;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-auto-rows: max-content;\n border-radius: inherit;\n padding: 7px;\n}\n\n.dropdown-5-menu-inner::-webkit-scrollbar {\n width: 7px;\n padding-top: 40px;\n background: #282a2c;\n}\n\n.dropdown-5-menu-inner::-webkit-scrollbar-thumb {\n background: #464749;\n border-radius: 6px;\n\n background-clip: content-box;\n}\n\n.dropdown-5-menu.open {\n opacity: 1;\n visibility: visible;\n translate: 0;\n}\n\n.dropdown-5-menu button {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 6px;\n font-family: inherit;\n color: #6d696b;\n height: 80px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n cursor: pointer;\n}\n\n.dropdown-5-menu button:hover {\n background: #282a2c;\n color: #c5c7c5;\n}\n\n.dropdown-5-menu button > img {\n width: 64px;\n height: 64px;\n padding: 16px;\n}\n\n.dropdown-5-menu button > span:first-child {\n display: block;\n width: 64px;\n height: 64px;\n scale: 0.7;\n background-image: url(\"./icons.png\");\n background-position: 0 -3105px;\n background-size: 64px 3307px;\n background-repeat: no-repeat;\n}\n\n.dropdown-5-menu button > span:last-child {\n font-size: 12px;\n translate: 0 -12px;\n}\n" }, { "path": "src/components/dropdowns/Dropdown5/Dropdown5.jsx", "content": "import { useRef, useState, useEffect } from \"react\";\nimport \"./Dropdown5.css\";\nimport joe from \"./joe.png\";\nimport gemini from \"./gemini.png\";\nimport { createPortal } from \"react-dom\";\n\nconst Menu = ({ isOpen, dropdownRef, menuRef }) => {\n const rect = dropdownRef?.current?.getBoundingClientRect();\n const top = `${rect?.y + 64}px`;\n const left = `${rect?.x - menuRef?.current?.clientWidth + 40}px`;\n\n return (\n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n \n );\n};\n\nexport const Dropdown5 = () => {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n const menuRef = useRef(null);\n\n // Handle click outside to close dropdown\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(event.target) &&\n menuRef.current &&\n !menuRef.current.contains(event.target)\n ) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen]);\n\n return (\n
    \n setIsOpen(!isOpen)}\n >\n apps\n \n {createPortal(\n ,\n document.body\n )}\n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown5/Dropdown5Example.css", "content": ".page.dropdown-5-page {\n color: #c5c7c5;\n background: #1b1b1b;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.dropdown-5-nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 72px;\n padding: 0 20px;\n background: #1b1b1b;\n border-bottom: 1px solid #282a2c;\n box-shadow: 0 0 40px rgb(0 0 0 / 12%);\n}\n\n.dropdown-5-nav .logo {\n display: flex;\n align-items: center;\n}\n\n.dropdown-5-nav .logo img {\n width: 36px;\n padding: 0;\n margin-left: 4px;\n margin-right: 6px;\n}\n\n.dropdown-5-nav span.material-symbols-outlined {\n display: grid;\n place-items: center;\n width: 40px;\n height: 72px;\n font-size: 24px;\n}\n\n.dropdown-5-nav h2 {\n font-size: 19px;\n font-weight: 400;\n}\n\n.dropdown-5-nav .nav-right > img {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n object-fit: contain;\n margin-left: 8px;\n}\n\n.dropdown-5-nav button {\n background: transparent;\n border: 0;\n color: #a5a7a5;\n cursor: pointer;\n border-radius: 50%;\n}\n\n.dropdown-5-nav button:is(:hover, :focus) {\n background: #282a2c;\n color: #c5c7c5;\n}\n\n.dropdown-5-nav .nav-right {\n display: flex;\n align-items: center;\n}\n" }, { "path": "src/components/dropdowns/Dropdown5/Dropdown5Example.jsx", "content": "import { Dropdown5 } from \"./Dropdown5\";\nimport joe from \"./joe.png\";\nimport logo from \"./logo.svg\";\nimport \"./Dropdown5Example.css\";\n\nexport const Dropdown5Example = () => {\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown6/Dropdown6.css", "content": ".dropdown-6 {\n flex: 1 1 auto;\n position: relative;\n}\n\n.dropdown-6 input {\n border: 0;\n border-radius: 52px;\n height: 52px;\n width: 100%;\n background: #f3f3f6;\n padding-left: 18px;\n padding-right: 36px;\n font-size: 14.75px;\n color: inherit;\n font-family: inherit;\n outline: none;\n border: 2px solid transparent;\n transition: 0.3s;\n}\n\n.dropdown-6.open input,\n.dropdown-6 input:hover {\n border: 2px solid #eedfed;\n background: #ffffff;\n}\n\n.dropdown-6 > button {\n border: 0;\n display: grid;\n place-items: center;\n height: 34px;\n width: 34px;\n border-radius: 50%;\n background: var(--color-primary);\n color: #f9f9f9;\n position: absolute;\n top: 50%;\n right: 8px;\n translate: 0 -50%;\n font-size: 18px;\n}\n\n.dropdown-6 button span {\n font-size: 20px;\n}\n\n.dropdown-6 input::placeholder {\n color: #9b98b1;\n}\n\n.dropdown-6 .dropdown-menu {\n position: absolute;\n z-index: 1;\n top: 60px;\n left: 0;\n right: 0;\n background: #ffffff;\n border-bottom-left-radius: 12px;\n border-bottom-right-radius: 12px;\n padding-bottom: 12px;\n box-shadow: 0px 40px 50px 0px rgba(0, 0, 0, 0.05);\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n}\n\n.dropdown-6.open .dropdown-menu {\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-6 .dropdown-menu .item-btn {\n font-family: inherit;\n background: 0;\n padding: 12px 8px;\n border: 0;\n display: flex;\n gap: 8px;\n width: 100%;\n border-radius: 6px;\n color: inherit;\n cursor: pointer;\n}\n\n.dropdown-6 .dropdown-menu .item-btn:hover {\n background: rgb(0 0 0 / 3%);\n}\n\n.dropdown-6 .dropdown-item {\n position: relative;\n padding: 0 10px;\n}\n\n.dropdown-item span:first-child {\n opacity: 0.35;\n}\n" }, { "path": "src/components/dropdowns/Dropdown6/Dropdown6.jsx", "content": "import { useState, useRef, useEffect } from \"react\";\nimport \"./Dropdown6.css\";\n\nconst defaultItems = [\n \"login\",\n \"card\",\n \"landing page\",\n \"dashboard\",\n \"hero section\",\n \"footer\",\n];\n\nexport const Dropdown6 = () => {\n const [items, setItems] = useState(defaultItems);\n const [search, setSearch] = useState(\"\");\n const [open, setOpen] = useState(false);\n\n const wrapperRef = useRef(null);\n const inputRef = useRef(null);\n\n const insertSearch = (query) => {\n if (!query.trim()) return;\n\n setItems((prev) => {\n const newItems = [...prev];\n\n for (let i = newItems.length - 1; i > 0; i--) {\n newItems[i] = newItems[i - 1];\n }\n\n newItems[0] = query.trim();\n return newItems;\n });\n };\n\n const handleSearch = () => {\n insertSearch(search);\n setSearch(\"\");\n };\n\n const handleFocus = () => setOpen(true);\n\n useEffect(() => {\n const handleClickOutside = (e) => {\n if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {\n setOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, []);\n\n return (\n
    \n setSearch(e.target.value)}\n onFocus={handleFocus}\n onKeyDown={(e) => e.key === \"Enter\" && handleSearch()}\n />\n\n \n\n
    \n {items.map((item, index) => {\n const isDefault = defaultItems.includes(item);\n\n return (\n
    \n \n
    \n );\n })}\n
    \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown6/Dropdown6Example.css", "content": ".page.dropdown-6-page {\n background: #fbfbfb;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.dropdown-6-page nav {\n --color-primary: #fe5495;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 0 36px;\n height: 78px;\n width: 100%;\n background: #ffffff;\n color: #403f49;\n box-shadow: 0 10px 50px rgb(0 0 0 / 2%);\n}\n\n.dropdown-6-page nav a {\n padding: 0 8px;\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 100%;\n height: 72px;\n font-size: 15px;\n}\n\n.dropdown-6-page nav .avatar {\n height: 46px;\n padding: 1px;\n border-radius: 50%;\n border: 1px solid #8f44fd;\n}\n\n.dropdown-6-page nav > img {\n height: 32px;\n}\n\n.dropdown-6-page nav .menu {\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n}\n\n.dropdown-6-page nav .dropdown {\n position: fixed;\n z-index: 1;\n top: 86px;\n left: 0;\n width: 120px;\n padding: 6px 0;\n display: grid;\n opacity: 0;\n visibility: hidden;\n /* transition: 0.3s; */\n border-radius: 12px;\n background: #ffffff;\n box-shadow: 0 0 30px rgb(0 0 0 / 4%);\n transition: 0.3s;\n}\n\n.dropdown-6-page nav a:is(:hover, .active) {\n color: var(--color-primary);\n}\n\n.dropdown-6-page nav .dropdown.visible {\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-6-page nav .dropdown::after {\n content: \"\";\n position: absolute;\n top: -12px;\n width: 100%;\n height: 50px;\n}\n\n.dropdown-6-page nav .dropdown > a {\n position: relative;\n z-index: 1;\n height: 40px;\n font-size: 14px;\n white-space: nowrap;\n}\n" }, { "path": "src/components/dropdowns/Dropdown6/Dropdown6Example.jsx", "content": "import { useRef, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport avatar from \"./avatar.png\";\nimport { Dropdown6 } from \"./Dropdown6\";\nimport \"./Dropdown6Example.css\";\n\nconst items = [\n {\n name: \"Explore\",\n items: [\"Following\", \"Popular\", \"Noteworthy\"],\n },\n {\n name: \"Talent\",\n items: [\"Browse\", \"Profiles\", \"Services\", \"Jobs\"],\n },\n {\n name: \"Blog\",\n items: [\"News\", \"Articles\", \"Community\"],\n },\n];\n\nconst Link = ({ item, isActive, onHover }) => {\n const linkRef = useRef();\n\n const handleHover = () => {\n const rect = linkRef.current.getBoundingClientRect();\n onHover(item, `${rect.x}px`);\n };\n\n return (\n \n {item.name}\n \n );\n};\n\nconst CoolNav = ({ items }) => {\n const [translateX, setTranslateX] = useState(\"0\");\n const [activeItem, setActiveItem] = useState(null);\n const [isHidden, setIsHidden] = useState(true);\n\n const handleLinkHover = (item, x) => {\n setActiveItem(item);\n setTranslateX(x);\n };\n\n const handleMouseEnter = () => {\n setIsHidden(false);\n };\n\n const handleMouseLeave = () => {\n setIsHidden(true);\n };\n\n return (\n \n {items.map((item, index) => (\n \n ))}\n \n {activeItem?.items?.map((link) => (\n {link}\n ))}\n \n \n );\n};\n\nexport const Dropdown6Example = () => {\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/Dropdown7/Dropdown7.css", "content": ".page.dropdown-7-page {\n margin: 0;\n display: grid;\n place-items: center;\n background: url(\"bg.jpg\");\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n height: 100vh;\n --color-menu: rgb(0 0 0 / 10%);\n}\n\n.page.dropdown-7-page::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, rgb(0 0 0 / 40%), rgb(0 0 0 / 0%));\n}\n\n.dropdown-7 {\n --width: 240px;\n margin-top: -50px;\n position: relative;\n z-index: 1;\n}\n\n.dropdown-7 button {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n width: var(--width);\n height: 64px;\n color: rgb(255 255 255 / 80%);\n background: var(--color-menu);\n border: 0;\n cursor: pointer;\n font-size: 18px;\n font-family: \"Euclid Circular B\";\n transition: 0.3s ease;\n}\n\n.dropdown-7 .menu,\n.dropdown-7 > button {\n border-radius: 10px;\n background: var(--color-menu);\n color: #f9f9f9;\n border: 2px solid rgb(255 255 255 / 10%);\n}\n\n.dropdown-7.open > button .chevron {\n rotate: -180deg;\n}\n\n.dropdown-7 button .chevron {\n margin-left: auto;\n transition: 0.3s ease;\n}\n\n.dropdown-7 .menu {\n position: absolute;\n overflow: hidden;\n backdrop-filter: blur(10px);\n z-index: 1;\n top: 74px;\n left: 0;\n width: 100%;\n opacity: 0;\n translate: 0 -20px;\n visibility: hidden;\n transition: 0.4s ease;\n}\n\n.dropdown-7.open .menu {\n opacity: 1;\n translate: 0;\n visibility: visible;\n}\n\n.dropdown-7 .menu-inner {\n position: absolute;\n width: calc(var(--width) * 2);\n display: flex;\n transition: 0.4s ease;\n}\n\n.dropdown-7 .menu-inner.open {\n translate: -50%;\n}\n\n.dropdown-7 .menu button {\n border: 0;\n height: 56px;\n border-radius: 0;\n text-transform: capitalize;\n}\n\n.dropdown-7 button:hover {\n background: rgb(255 255 255 / 4%);\n color: rgb(255 255 255 / 80%);\n}\n\n.dropdown-7 .sub-menu {\n position: absolute;\n width: var(--width);\n left: var(--width);\n top: 0;\n opacity: 0;\n visibility: hidden;\n}\n\n.dropdown-7 .sub-menu.open {\n opacity: 1;\n visibility: visible;\n}\n" }, { "path": "src/components/dropdowns/Dropdown7/Dropdown7.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./Dropdown7.css\";\n\nconst items = [\n {\n name: \"Settings\",\n icon: \"ai-gear\",\n subItems: [\n { name: \"Inventory\", icon: \"ai-file\" },\n { name: \"Management\", icon: \"ai-folder\" },\n { name: \"Location\", icon: \"ai-check-in\" },\n ],\n },\n {\n name: \"Account\",\n icon: \"ai-lock-on\",\n subItems: [\n { name: \"Storage\", icon: \"ai-data\" },\n { name: \"Rewards\", icon: \"ai-gift\" },\n { name: \"Support\", icon: \"ai-chat-approve\" },\n { name: \"Shipping\", icon: \"ai-shipping-box-v1\" },\n ],\n },\n { name: \"Logout\", icon: \"ai-sign-out\" },\n];\n\nconst Icon = ({ icon, className = \"\" }) => (\n \n);\n\nexport const Dropdown7 = () => {\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(null);\n const subRef = useRef(null);\n\n const activeItem = items[active];\n const height = subRef.current?.clientHeight || 168;\n\n return (\n
    \n
    \n \n
    \n
    \n
    \n {items.map((item, i) => (\n item.subItems && setActive(i)}\n >\n \n {item.name}\n {item.subItems && (\n \n )}\n \n ))}\n
    \n {activeItem?.subItems && (\n
    \n \n {activeItem.subItems.map((sub) => (\n \n ))}\n
    \n )}\n
    \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/dropdowns/index.js", "content": "export * from \"./Dropdown1/Dropdown1Example\";\nexport * from \"./Dropdown2/Dropdown2Example\";\nexport * from \"./Dropdown3/Dropdown3\";\nexport * from \"./Dropdown4/Dropdown4Example\";\nexport * from \"./Dropdown5/Dropdown5Example\";\nexport * from \"./Dropdown6/Dropdown6Example\";\nexport * from \"./Dropdown7/Dropdown7\";\n" }, { "path": "src/components/gsap/ScrollReveal/ScrollReveal.jsx", "content": "import gsap from \"gsap\";\nimport { useGSAP } from \"@gsap/react\";\nimport { ScrollTrigger } from \"gsap/all\";\nimport \"./styles.css\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nexport const ScrollReveal = () => {\n useGSAP(() => {\n ScrollTrigger.batch(\"section > div\", {\n interval: 0.1,\n batchMax: 3,\n onEnter: (batch) =>\n gsap.to(batch, { autoAlpha: 1, stagger: 0.15, overwrite: true }),\n onLeave: (batch) => gsap.set(batch, { autoAlpha: 0, overwrite: true }),\n onEnterBack: (batch) =>\n gsap.to(batch, { autoAlpha: 1, stagger: 0.15, overwrite: true }),\n onLeaveBack: (batch) =>\n gsap.set(batch, { autoAlpha: 0, overwrite: true }),\n });\n }, []);\n\n return (\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/gsap/ScrollReveal/styles.css", "content": ".scroll-reveal {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 20px;\n padding: 20px 0;\n margin: 0 auto;\n}\n\n.scroll-reveal > div {\n background: #121419;\n height: 190px;\n width: 30%;\n opacity: 0;\n transition: background 0.3s;\n}\n\n.scroll-reveal > div:hover {\n background: #3e70ff;\n}\n" }, { "path": "src/components/gsap/TypedMessage/TypedMessage.css", "content": ".message {\n font-weight: inherit;\n line-height: inherit;\n font-size: 80px;\n text-shadow: 0 0 10px rgb(0 0 0 / 10%);\n}\n" }, { "path": "src/components/gsap/TypedMessage/TypedMessage.jsx", "content": "import React, { useRef } from \"react\";\nimport { gsap } from \"gsap\";\nimport { SplitText } from \"gsap/all\";\nimport { useGSAP } from \"@gsap/react\";\nimport \"./TypedMessage.css\";\n\ngsap.registerPlugin(SplitText);\n\nexport const TypedMessage = ({ message }) => {\n const blockRef = useRef(null);\n const tlRef = useRef();\n\n useGSAP(() => {\n const s = new SplitText(blockRef.current, {\n type: \"lines,words\",\n });\n\n const tl = gsap.timeline({\n delay: 0.5,\n repeatDelay: 0.5,\n repeat: -1,\n });\n\n tl.addLabel(\"enter\");\n\n tl.fromTo(\n s.words,\n { yPercent: 100 },\n {\n yPercent: 0,\n ease: \"circ.out\",\n stagger: 0.2,\n },\n \"enter\"\n );\n\n tl.fromTo(\n s.words,\n { opacity: 0 },\n {\n opacity: 1,\n ease: \"power1.out\",\n stagger: 0.2,\n },\n \"enter\"\n );\n\n tl.addPause();\n\n tl.to(\n s.words,\n {\n yPercent: -200,\n opacity: 0,\n ease: \"circ.in\",\n stagger: 0.1,\n duration: 0.4,\n },\n \"exit\"\n );\n\n tl.to(\n s.words,\n {\n opacity: 0,\n ease: \"power1.in\",\n stagger: 0.1,\n duration: 0.4,\n },\n \"exit\"\n );\n\n tlRef.current = tl;\n }, []);\n\n const handleClick = () => {\n if (tlRef.current) {\n tlRef.current.play();\n }\n };\n\n return (\n

    \n {message}\n

    \n );\n};\n" }, { "path": "src/components/gsap/TypedMessage/TypedMessageExample.css", "content": ".typed-message-page {\n color: #222222;\n min-height: 100vh;\n background: url(\"./image.jpg\");\n background-size: cover;\n background-position: -360px;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.typed-message-page::before {\n content: \"\";\n z-index: 0;\n position: absolute;\n inset: 0;\n background: linear-gradient(rgb(0 0 0 / 86%), rgb(0 0 0 / 0%) 120%);\n}\n\n.typed-message-page nav {\n position: fixed;\n width: 100%;\n z-index: 2;\n display: flex;\n padding: 0 40px;\n align-items: center;\n height: 96px;\n color: #f7f7f7;\n}\n\n.typed-message-search {\n position: relative;\n flex: 1 1 auto;\n}\n\n.typed-message-search span {\n position: absolute;\n z-index: 3;\n top: 50%;\n left: 16px;\n translate: 0 -50%;\n}\n\n.typed-message-search input {\n border: 0;\n border-radius: 40px;\n height: 50px;\n background: rgb(255 255 255 / 10%);\n backdrop-filter: blur(10px);\n width: 100%;\n font-family: inherit;\n font-size: 16px;\n padding-left: 46px;\n}\n\n.typed-message-search input::placeholder {\n color: rgb(255 255 255 / 60%);\n}\n\n.typed-message-banner {\n position: relative;\n height: 100vh;\n border-radius: 50px;\n color: #ffffff;\n}\n\n.background-video {\n position: absolute;\n z-index: 0;\n inset: 0;\n overflow: hidden;\n top: 0;\n height: 100%;\n object-fit: cover;\n}\n\n.banner-overlay {\n position: absolute;\n z-index: 1;\n inset: 0;\n background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%));\n}\n\n.typed-message-banner-content {\n position: relative;\n z-index: 3;\n padding-top: 320px;\n padding-inline: 82px;\n display: flex;\n flex-direction: column;\n gap: 30px;\n}\n\n.typed-message-wrapper {\n font-size: 48px;\n font-weight: 400;\n max-width: 450px;\n line-height: 1.2;\n}\n\n.typed-message-banner-content > button {\n background: rgb(247 247 247 / 12%);\n color: #f7f7f7;\n backdrop-filter: blur(10px);\n font-family: inherit;\n padding: 0 32px;\n height: 64px;\n border-radius: 32px;\n border: 0;\n font-size: 22px;\n align-self: baseline;\n}\n\n.typed-message-logo {\n width: 140px;\n padding-right: 40px;\n}\n\n.typed-message-links {\n display: flex;\n width: 140px;\n justify-content: flex-end;\n align-items: center;\n gap: 16px;\n}\n\n.typed-message-links span {\n font-size: 24px;\n}\n" }, { "path": "src/components/gsap/TypedMessage/TypedMessageExample.jsx", "content": "import { TypedMessage } from \"./TypedMessage\";\nimport \"./TypedMessageExample.css\";\nimport image from \"./image.jpg\";\nimport logo from \"./logo.svg\";\nimport video from \"./video.mp4\";\n\nexport const TypedMessageExample = () => {\n return (\n
    \n \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/gsap/index.js", "content": "export * from \"./ScrollReveal/ScrollReveal\";\nexport * from \"./TypedMessage/TypedMessageExample\";\n" }, { "path": "src/components/index.js", "content": "export * from \"./buttons\";\nexport * from \"./carousels\";\nexport * from \"./controls\";\nexport * from \"./sidebars\";\nexport * from \"./gsap\";\nexport * from \"./libraries\";\nexport * from \"./accordions\";\nexport * from \"./logins\";\nexport * from \"./cards\";\nexport * from \"./modals\";\nexport * from \"./parallax\";\nexport * from \"./dropdowns\";\nexport * from \"./widgets\";\nexport * from \"./navbars\";\nexport * from \"./tables\";\nexport * from \"./signups\";\n" }, { "path": "src/components/libraries/index.js", "content": "export * from \"./rc-slider/RcSlider\";\nexport * from \"./react-dropzone/ReactDropzone\";\nexport * from \"./react-xarrows/ReactXarrows\";\n" }, { "path": "src/components/libraries/rc-slider/RcSlider.css", "content": ".page.rc-slider-page {\n background: #393965;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.slider-card {\n --color-primary: #756bea;\n --color-card: #26263c;\n display: grid;\n gap: 14px;\n padding: 20px 20px 24px;\n width: 260px;\n background: var(--color-card);\n border-radius: 10px;\n box-shadow: 0 20px 30px rgb(0 0 0 / 10%);\n}\n\n.slider-card h2 {\n margin: 0 0 8px;\n font-size: 14px;\n font-weight: 400;\n color: rgb(255 255 255 / 50%);\n}\n\n.slider-card var {\n margin: 0;\n font-size: 38px;\n font-weight: 400;\n font-style: normal;\n color: rgb(255 255 255 / 100%);\n}\n\n.slider-card var abbr {\n color: rgb(255 255 255 / 25%);\n margin-right: 4px;\n}\n\nbody .rc-slider-rail {\n background: rgb(255 255 255 / 12%);\n}\n\nbody .rc-slider-handle {\n border-color: var(--color-card);\n background: var(--color-primary);\n opacity: 1;\n scale: 1.5;\n}\n\nbody .rc-slider-handle:hover,\nbody .rc-slider-handle-dragging {\n box-shadow: none !important;\n border-color: var(--color-card) !important;\n cursor: pointer;\n}\n\nbody .rc-slider-track {\n background: var(--color-primary);\n}\n" }, { "path": "src/components/libraries/rc-slider/RcSlider.jsx", "content": "import Slider from \"rc-slider\";\nimport \"rc-slider/assets/index.css\";\nimport { useState } from \"react\";\nimport \"./RcSlider.css\";\n\nexport const RcSlider = () => {\n const [value, setValue] = useState(20000);\n\n const handleChange = (val) => setValue(Number(val));\n\n return (\n
    \n
    \n
    \n

    Mortgage Value

    \n \n $\n {value.toLocaleString(\"en-US\")}\n \n
    \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/libraries/react-dropzone/ReactDropzone.css", "content": ".page.dropzone-page {\n background: #212224;\n --color-card: #161718;\n}\n\n.dropzone-card {\n border-radius: 6px;\n background: var(--color-card);\n padding: 40px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 16px;\n text-align: center;\n}\n\n.dropzone-card h2 {\n font-weight: 400;\n margin: 0 0 6px;\n}\n\n.dropzone-card h3 {\n font-weight: 400;\n opacity: 0.5;\n margin: 0 0 50px;\n}\n\n.dropzone-card img {\n position: absolute;\n top: -50px;\n width: 100px;\n border-radius: 50%;\n border: 8px solid var(--color-card);\n}\n\n.dropzone {\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n width: 280px;\n min-height: 200px;\n border-width: 2px;\n border-radius: 6px;\n border-color: #464646;\n border-style: dashed;\n background-color: transparent;\n color: #bdbdbd;\n outline: none;\n}\n" }, { "path": "src/components/libraries/react-dropzone/ReactDropzone.jsx", "content": "import \"./ReactDropzone.css\";\nimport { useDropzone } from \"react-dropzone\";\nimport icon from \"./icon.svg\";\n\nexport const ReactDropzone = () => {\n const onDrop = (acceptedFiles) => {\n // Do something with the files\n };\n const { getRootProps, getInputProps, isDragActive, acceptedFiles } =\n useDropzone({ onDrop });\n const files = acceptedFiles.map((file) => (\n
  • {file.path}
    • \n ));\n\n return (\n
    \n
    \n
    \n

    Upload Files

    \n

    Fast and easy

    \n
    \n
    \n \n \n {isDragActive ? (\n

    Drop the files here ...

    \n ) : (\n

    Drag 'n' drop some files here, or click to select files

    \n )}\n
    \n {files.length > 0 && (\n <>\n

    Files

    \n
      {files}
    \n \n )}\n
    \n
    \n );\n};\n" }, { "path": "src/components/libraries/react-xarrows/ReactXarrows.css", "content": "" }, { "path": "src/components/libraries/react-xarrows/ReactXarrows.jsx", "content": "import React from \"react\";\nimport Xarrow, { useXarrow, Xwrapper } from \"react-xarrows\";\nimport Draggable from \"react-draggable\";\n\nconst boxStyle = {\n border: \"grey solid 2px\",\n borderRadius: \"10px\",\n padding: \"5px\",\n};\n\nconst DraggableBox = ({ id }) => {\n const updateXarrow = useXarrow();\n return (\n \n
    \n {id}\n
    \n     \n );\n};\n\nexport const ReactXarrows = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n" }, { "path": "src/components/logins/Login1/Login1.jsx", "content": "import \"./styles.css\";\nimport logo from \"./logo.svg\";\n\nexport const Login1 = () => {\n return (\n
    \n
    \n
    \n \n

    Welcome back

    \n
    \n \n \n \n
    \n
    \n Need an account? Sign up here\n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/logins/Login1/styles.css", "content": ".page.login-1 {\n display: grid;\n place-items: center;\n gap: 50px;\n margin: 0;\n height: 100vh;\n padding: 0 32px;\n color: #aaaaaa;\n background: #eff9ff;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n@media (width >= 500px) {\n .page.login-1 {\n padding: 0;\n }\n}\n\n.login-1-background {\n position: fixed;\n top: -50vmin;\n left: -50vmin;\n width: 100vmin;\n height: 100vmin;\n border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;\n background: #65c8ff;\n}\n\n.login-1-background::after {\n content: \"\";\n position: inherit;\n right: -50vmin;\n bottom: -55vmin;\n width: inherit;\n height: inherit;\n border-radius: inherit;\n background: #143d81;\n}\n\n.login-1-card {\n overflow: hidden;\n position: relative;\n z-index: 3;\n width: 94%;\n margin: 0 20px;\n padding: 170px 30px 54px;\n border-radius: 24px;\n background: #ffffff;\n text-align: center;\n box-shadow: 0 100px 100px rgb(0 0 0 / 10%);\n}\n\n.login-1-card::before {\n content: \"\";\n position: absolute;\n top: -880px;\n left: 50%;\n translate: -50% 0;\n width: 1000px;\n height: 1000px;\n border-radius: 50%;\n background: #216ce7;\n}\n\n@media (width >= 500px) {\n .login-1-card {\n margin: 0;\n width: 360px;\n }\n}\n\n.login-1-card > img {\n position: absolute;\n top: 30px;\n left: 50%;\n translate: -50% 0;\n width: 64px;\n height: 64px;\n}\n\n.login-1-card > h2 {\n font-size: 22px;\n font-weight: 400;\n margin: 0 0 38px;\n color: rgb(0 0 0 / 38%);\n}\n\n.login-1-card form {\n margin: 0 0 44px;\n display: grid;\n gap: 12px;\n}\n\n.login-1-card form :is(input, button) {\n width: 100%;\n height: 56px;\n border-radius: 28px;\n font-size: 16px;\n font-family: inherit;\n}\n\n.login-1-card form > input {\n border: 0;\n padding: 0 24px;\n color: #222222;\n background: #ededed;\n}\n\n.login-1-card form > input::placeholder {\n color: rgb(0 0 0 / 28%);\n}\n\n.login-1-card form > button {\n border: 0;\n color: #f9f9f9;\n background: #226ce7;\n display: grid;\n place-items: center;\n font-weight: 500;\n cursor: pointer;\n}\n\n.login-1-card form > footer {\n color: #a1a1a1;\n}\n\n.login-1-card form > footer > a {\n color: #216ce7;\n}\n" }, { "path": "src/components/logins/Login2/Login2.jsx", "content": "import \"./styles.css\";\nimport logo from \"./logo.svg\";\nimport signin from \"./signin.svg\";\nimport signup from \"./signup.svg\";\nimport { useState } from \"react\";\n\nconst SigninForm = () => (\n
    \n

    \n Don't have an account? Sign Up.\n

    \n \n
    \n \n \n
    \n \n
    \n \n \n
    \n \n

    \n By clicking Sign In you agree to our terms and conditions, privacy policy\n and reusability rules.\n

    \n
    \n);\n\nconst SignupForm = () => (\n
    \n

    \n Already have an account? Sign In.\n

    \n \n
    \n \n \n
    \n \n
    \n \n \n
    \n \n
    \n \n \n
    \n \n
    \n);\n\nconst navButtons = [\n { name: \"signin\", label: \"Sign In\", icon: \"check\" },\n { name: \"signup\", label: \"Sign Up\", icon: \"add\" },\n];\n\nconst NavButton = ({ onClick, isActive, label, icon }) => (\n \n \n {label}\n \n);\n\nconst CardForms = ({ view }) => (\n
    \n
    \n \n \n
    \n
    \n);\n\nconst CardHero = ({ view }) => (\n
    \n \n
    \n

    Welcome Back.

    \n

    Please enter your credentials.

    \n \n
    \n
    \n

    Join The Crowd.

    \n

    Sign up now and get started today.

    \n \n
    \n
    \n \n);\n\nconst CardNav = ({ view, toggleView }) => (\n
      \n
    • \n \n \n
      • \n {navButtons.map((btn) => (\n
    • \n \n
      • \n ))}\n
    \n);\n\nexport const Login2 = () => {\n const [view, setView] = useState(\"signin\");\n\n const toggleView = () => setView(view === \"signin\" ? \"signup\" : \"signin\");\n\n return (\n
    \n
    \n \n \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/logins/Login2/styles.css", "content": ".page.login-2-page {\n --color-primary: #6387ff;\n --color-dark: #496cf5;\n --color-muted: hsl(226, 12%, 51%);\n margin: 0;\n background: #22262b;\n background: url(\"bg.svg\") no-repeat;\n background-size: cover;\n background-position: center;\n color: #f9f9f9;\n height: 100vh;\n display: grid;\n place-items: center;\n overflow: hidden;\n font-family: \"Euclid Circular B\";\n}\n\n.login-2 ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.login-2 input,\n.login-2 button {\n font-family: inherit;\n color: inherit;\n}\n\n.login-2 button {\n padding: 0;\n cursor: pointer;\n}\n\n.login-2 p {\n font-size: 12px;\n margin: 12px 0;\n}\n\n.login-2 p a {\n color: var(--color-primary);\n}\n\n.login-2 {\n display: flex;\n align-content: stretch;\n width: 660px;\n height: 360px;\n background: #242b43;\n backdrop-filter: blur(20px);\n box-shadow: 0 20px 80px rgba(0 0 0 / 20%);\n\n border-radius: 6px;\n}\n\n.login-2 .card-nav {\n position: relative;\n align-self: stretch;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 178px;\n}\n\n.login-2 .card-nav .active-bar {\n position: absolute;\n top: 33.33%;\n left: 0;\n width: 5px;\n height: 33.33%;\n border-radius: 6px;\n background: var(--color-dark);\n transition: 0.4s ease-out;\n}\n\n.login-2 .card-nav li {\n flex: 1 1 auto;\n display: grid;\n place-items: center;\n}\n\n.login-2 .card-nav li button.active {\n color: var(--color-primary);\n}\n\n.login-2 .card-nav button {\n background: transparent;\n border: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font-size: 14px;\n transition: 0.3s;\n}\n\n.login-2 .card-nav button:not(.active):hover i {\n scale: 1.1;\n}\n\n.login-2 .card-nav button i {\n font-size: 24px;\n transition: 0.3s;\n}\n\n.login-2 .card-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n margin: -48px 0;\n flex: 0 0 300px;\n overflow: hidden;\n border-radius: 12px;\n background: var(--color-dark);\n}\n\n.login-2 .card-hero-inner {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n transition: 0.5s ease-in-out;\n}\n\n.login-2 .card-hero-content {\n height: 456px;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.login-2 h2,\n.login-2 h3 {\n text-align: left;\n font-weight: 400;\n margin: 0;\n padding-left: 24px;\n}\n\n.login-2 .card-hero h2 {\n color: #f9f9f9;\n margin: 0 0 2px;\n}\n\n.login-2 .card-hero h3 {\n color: #f9f9f9;\n opacity: 0.75;\n font-size: 13px;\n margin: 0 0 32px;\n}\n\n.login-2 .card-hero img {\n width: 100%;\n}\n\n.login-2 .card-form {\n position: relative;\n overflow: hidden;\n padding: 24px;\n width: 400px;\n}\n\n.login-2 .forms {\n position: absolute;\n height: 200%;\n left: 0;\n top: 0;\n transition: 0.5s ease-in-out;\n}\n\n.login-2 .card-form form {\n height: 360px;\n padding: 24px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 8px;\n}\n\n.login-2 .card-form label {\n font-size: 13px;\n color: var(--color-muted);\n}\n\n.login-2 .control {\n position: relative;\n}\n\n.login-2 .control input {\n background: rgb(255 255 255 / 4%);\n border: 0;\n border-radius: 6px;\n width: 100%;\n height: 40px;\n padding: 0 12px;\n outline: none;\n transition: 0.3s;\n}\n\n.login-2 .control input:focus {\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.login-2 .control input::placeholder {\n color: #bdbcd2;\n}\n\n.login-2 .control input:focus ~ i {\n color: var(--color-primary);\n}\n\n.login-2 .control i {\n color: var(--color-muted);\n position: absolute;\n top: 50%;\n right: 12px;\n translate: 0 -50%;\n transition: 0.3s;\n}\n\n.login-2 .card-form form > button {\n height: 40px;\n padding: 12px 20px;\n border-radius: 6px;\n color: #f9f9f9;\n letter-spacing: 1px;\n border: 0;\n margin-top: 12px;\n background: var(--color-dark);\n}\n\n.login-2 p.footer {\n opacity: 0.75;\n}\n" }, { "path": "src/components/logins/Login3/Login3.css", "content": ".page.login-3-page {\n --gradient: linear-gradient(-35deg, #8d00ff, #365fe7);\n --muted: #8d889d;\n background: #1e1b2b;\n color: #f9f9f9;\n height: 100vh;\n display: grid;\n place-items: center;\n overflow: hidden;\n font-family: \"Euclid Circular B\";\n}\n\n.login-3 .card {\n position: relative;\n overflow: hidden;\n width: 660px;\n height: 440px;\n border-radius: 16px;\n background: #141317;\n box-shadow: 0 12px 80px rgba(0, 0, 0, 0.12);\n}\n\n.login-3 .card-bg {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n bottom: 0;\n width: 50%;\n background: var(--gradient);\n translate: 0 0;\n transition: 0.65s;\n}\n\n.login-3 .card-bg.signin {\n translate: 100% 0;\n}\n\n.login-3 .hero,\n.login-3 .form {\n position: absolute;\n width: 50%;\n height: 100%;\n opacity: 0;\n visibility: hidden;\n transition: 0.65s;\n}\n\n.login-3 .form.signup {\n left: 50%;\n}\n\n.login-3 .hero.signin {\n left: 50%;\n translate: 100% 0;\n}\n\n.login-3 .hero.signin.active {\n translate: 0;\n}\n\n.login-3 .hero.signup {\n translate: -100% 0;\n}\n\n.login-3 .hero.signup.active {\n translate: 0;\n}\n\n.login-3 .hero {\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n width: 50%;\n color: #f9f9f9;\n text-align: center;\n padding: 0 24px;\n}\n\n.login-3 .form.active,\n.login-3 .hero.active {\n opacity: 1;\n visibility: visible;\n}\n\n.login-3 h2 {\n margin: 0;\n font-weight: 500;\n}\n\n.login-3 .form.signin {\n translate: -100% 0;\n}\n\n.login-3 .form.signin.active {\n translate: 0;\n}\n\n.login-3 .form.signup {\n translate: 100% 0;\n}\n\n.login-3 .form.signup.active {\n translate: 0;\n}\n\n.login-3 .hero p {\n margin: 0 0 6px;\n opacity: 0.75;\n line-height: 1.45;\n}\n\n.login-3 .hero button {\n padding: 12px 40px;\n border-radius: 32px;\n letter-spacing: 1px;\n font-family: inherit;\n color: inherit;\n border: 1px solid #f9f9f9;\n background: transparent;\n transition: 0.3s;\n cursor: pointer;\n}\n\n.login-3 .hero button:hover {\n color: #2a449a;\n background: #f9f9f9;\n}\n\n.login-3 .form {\n background: inherit;\n z-index: 1;\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 16px;\n padding: 32px;\n}\n\n.login-3 .form h2 {\n font-size: 22px;\n text-align: center;\n}\n\n.login-3 .sso {\n width: 100%;\n display: flex;\n justify-content: center;\n gap: 12px;\n}\n\n.login-3 .form form > a {\n font-size: 14px;\n margin-top: 10px;\n color: var(--muted);\n}\n\n.login-3 .sso a {\n display: grid;\n place-items: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 1px solid rgb(255 255 255 / 24%);\n font-size: 16px;\n}\n\n.login-3 .form form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.login-3 .form p {\n margin: 0 0 -8px;\n text-align: center;\n color: var(--muted);\n font-size: 12px;\n}\n\n.login-3 .form input {\n font-family: inherit;\n border-radius: 10px;\n border: 0;\n background: #1f1b2b;\n padding: 14px 12px;\n color: inherit;\n width: 100%;\n}\n\n.login-3 .form input::placeholder {\n color: #8d889d;\n}\n\n.login-3 .form button {\n border: 0;\n padding: 14px 0;\n border-radius: 32px;\n font-family: inherit;\n color: #f9f9f9;\n width: 160px;\n margin-top: 10px;\n background: var(--gradient);\n}\n" }, { "path": "src/components/logins/Login3/Login3.jsx", "content": "import { useState } from \"react\";\nimport \"./Login3.css\";\n\nconst SSOButtons = () => (\n \n);\n\nconst Hero = ({ type, active, title, text, buttonText, onClick }) => (\n
    \n

    {title}

    \n

    {text}

    \n \n
    \n);\n\nconst AuthForm = ({ type, active, title, children }) => (\n
    \n

    {title}

    \n \n

    Or use your email address

    \n
    {children}
    \n
    \n);\n\nexport const Login3 = () => {\n const [view, setView] = useState(\"signup\");\n\n const isSignup = view === \"signup\";\n const toggleView = () => setView(isSignup ? \"signin\" : \"signup\");\n\n return (\n
    \n
    \n );\n};\n" }, { "path": "src/components/logins/Login4/Login4.css", "content": ".login-4-card * {\n box-sizing: border-box;\n}\n\n.login-4-page.page {\n margin: 0;\n background: #f2f3fe;\n color: #4b5679;\n height: 100vh;\n display: grid;\n place-items: center;\n overflow: hidden;\n font-family: \"Euclid Circular B\";\n}\n\n.login-4-card {\n --gradient: linear-gradient(45deg, #5823c9, #6b50ff);\n position: relative;\n overflow: hidden;\n width: 660px;\n height: 440px;\n border-radius: 24px;\n background: #ffffff;\n border: 8px solid #ffffff;\n box-shadow: 0 12px 80px rgba(41, 30, 113, 0.12);\n}\n\n.login-4-card .card-bg {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n bottom: 0;\n width: 50%;\n background: var(--gradient);\n border-radius: 18px;\n translate: 0 0;\n transition: 0.65s ease-in-out;\n}\n\n.login-4-card .card-bg.login {\n translate: 100% 0;\n}\n\n.login-4-card .hero,\n.login-4-card .form {\n position: absolute;\n width: 50%;\n height: 100%;\n opacity: 0;\n visibility: hidden;\n transition: 0.65s ease-in-out;\n}\n\n.login-4-card .hero.active,\n.login-4-card .form.active {\n opacity: 1;\n visibility: visible;\n}\n\n.login-4-card .form.register {\n left: 50%;\n}\n\n.login-4-card .hero.login {\n left: 50%;\n translate: 100% 0;\n}\n\n.login-4-card .hero.login.active {\n translate: 0;\n}\n\n.login-4-card .hero.register {\n translate: -100% 0;\n}\n\n.login-4-card .hero.register.active {\n translate: 0;\n}\n\n.login-4-card .hero {\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n width: 50%;\n color: #f9f9f9;\n text-align: center;\n padding: 0 24px;\n}\n\n.login-4-card h2 {\n margin: 0;\n font-weight: 500;\n}\n\n.login-4-card .form.login {\n translate: 100% 0;\n}\n\n.login-4-card .form.login.active {\n translate: 0;\n}\n\n.login-4-card .form.register {\n translate: -100% 0;\n}\n\n.login-4-card .form.register.active {\n translate: 0;\n}\n\n.login-4-card .hero p {\n margin: 0 0 6px;\n opacity: 0.85;\n line-height: 1.45;\n}\n\n.login-4-card .hero button {\n padding: 12px 40px;\n border-radius: 32px;\n letter-spacing: 1px;\n font-family: inherit;\n color: inherit;\n border: 1px solid #f9f9f9;\n background: transparent;\n transition: 0.3s;\n cursor: pointer;\n}\n\n.login-4-card .hero button:hover {\n color: #3c23c9;\n background: #f9f9f9;\n}\n\n.login-4-card .form {\n background: #ffffff;\n z-index: 1;\n width: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 16px;\n padding: 32px;\n}\n\n.login-4-card .form h2 {\n font-size: 22px;\n text-align: center;\n}\n\n.login-4-card .sso {\n width: 100%;\n display: flex;\n justify-content: center;\n gap: 12px;\n}\n\n.login-4-card .form form > a {\n font-size: 14px;\n margin-top: 10px;\n opacity: 0.5;\n}\n\n.login-4-card .sso a {\n display: grid;\n place-items: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #f2f3fe;\n font-size: 16px;\n}\n\n.login-4-card .form form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.login-4-card .form p {\n margin: 0 0 -8px;\n text-align: center;\n opacity: 0.5;\n font-size: 12px;\n}\n\n.login-4-card .form input {\n font-family: inherit;\n border-radius: 10px;\n border: 0;\n background: #f2f3fe;\n padding: 14px 12px;\n color: inherit;\n width: 100%;\n}\n\n.login-4-card .form input::placeholder {\n color: #96959e;\n}\n\n.login-4-card .form button {\n border: 0;\n padding: 14px 0;\n border-radius: 32px;\n font-family: inherit;\n letter-spacing: 1px;\n color: #f9f9f9;\n width: 160px;\n margin-top: 10px;\n background: var(--gradient);\n box-shadow: 0 10px 40px rgb(30 61 161 / 32%);\n}\n" }, { "path": "src/components/logins/Login4/Login4.jsx", "content": "import { useState } from \"react\";\nimport \"./Login4.css\";\n\nconst CardBackground = ({ activeView }) => {\n return
    ;\n};\n\nconst SocialButtons = () => {\n return (\n
    \n \n \n \n
    \n );\n};\n\nconst HeroPanel = ({ type, activeView, title, text, buttonText, onToggle }) => {\n return (\n
    \n

    {title}

    \n

    {text}

    \n \n
    \n );\n};\n\nconst RegisterForm = ({ activeView }) => {\n return (\n \n

    Sign Up

    \n \n

    Or use your email address

    \n\n
    \n \n \n \n \n
    \n
    \n );\n};\n\nconst LoginForm = ({ activeView }) => {\n return (\n
    \n

    Login

    \n \n

    Or use your email address

    \n\n
    \n \n \n Forgot password?\n \n
    \n
    \n );\n};\n\nexport const Login4 = () => {\n const [activeView, setActiveView] = useState(\"login\");\n\n const toggleView = () => {\n setActiveView(activeView === \"login\" ? \"register\" : \"login\");\n };\n\n return (\n
    \n
    \n \n \n \n \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/logins/Login5/Login5.jsx", "content": "import \"./styles.css\";\nimport logo from \"./logo.svg\";\n\nconst Textbox = ({ placeholder, type, icon }) => (\n
    \n \n \n
    \n);\n\nexport const Login5 = () => {\n return (\n
    \n
    \n
    \n \n

    Welcome back!

    \n
    \n \n \n\n \n Forgot password?\n \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/logins/Login5/styles.css", "content": ".page.login-5 {\n display: grid;\n place-items: center;\n gap: 50px;\n margin: 0;\n height: 100vh;\n padding: 0 32px;\n color: #f9f9f9;\n background: #17171f;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n@media (width >= 500px) {\n .page.login-5 {\n padding: 0;\n }\n}\n\n.login-5-background {\n position: fixed;\n top: -55vmin;\n left: -55vmin;\n width: 110vmin;\n height: 110vmin;\n border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;\n background: #6a65ff;\n}\n\n.login-5-background::after {\n content: \"\";\n position: inherit;\n right: -55vmin;\n bottom: -55vmin;\n width: inherit;\n height: inherit;\n border-radius: inherit;\n background: #3c85fe;\n}\n\n.login-5-card {\n overflow: hidden;\n position: relative;\n z-index: 3;\n width: 94%;\n margin: 0 20px;\n padding: 84px 30px 54px;\n border-radius: 48px;\n border: 6px solid rgb(255 255 255 / 4%);\n background: rgb(255 255 255 / 4%);\n backdrop-filter: blur(44px);\n text-align: center;\n box-shadow: 0 100px 100px rgb(0 0 0 / 10%);\n}\n\n@media (width >= 450px) {\n .login-5-card {\n margin: 0;\n width: 360px;\n }\n}\n\n.login-5-card > img {\n width: 100px;\n height: 100px;\n margin-bottom: 30px;\n border: 6px solid rgb(255 255 255 / 14%);\n border-radius: 50%;\n padding: 12px;\n}\n\n.login-5-card > h2 {\n font-size: 20px;\n font-weight: 400;\n margin: 0 0 32px;\n}\n\n.login-5-card form {\n margin: 0;\n display: grid;\n gap: 12px;\n}\n\n.login-5-textbox {\n position: relative;\n}\n\n.login-5-textbox i {\n position: absolute;\n top: 50%;\n left: 20px;\n translate: 0 -50%;\n}\n\n.login-5-card form :is(input, button) {\n width: 100%;\n height: 56px;\n border-radius: 28px;\n font-size: 16px;\n font-family: inherit;\n outline: none;\n transition: 0.3s;\n}\n\n.login-5-card form :is(input, button):focus {\n box-shadow: 0 0 0 3px #6a65ff;\n}\n\n.login-5-textbox input {\n border: 0;\n padding: 0 24px 0 44px;\n color: #f9f9f9;\n background: rgb(255 255 255 / 4%);\n}\n\n.login-5-card form > input::placeholder {\n color: rgb(255 255 255 / 32%);\n}\n\n.login-5-card form > button {\n border: 0;\n color: #f9f9f9;\n background: rgb(255 255 255 / 8%);\n display: grid;\n place-items: center;\n font-weight: 500;\n cursor: pointer;\n}\n\n.login-5-card form > button:hover {\n background: #6a65ff;\n}\n\n.login-5-card > footer {\n color: rgb(255 255 255 / 38%);\n}\n\n.login-5-card > form > a {\n opacity: 0.75;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 56px;\n margin-bottom: 12px;\n}\n\n.login-5-card > footer > a {\n color: #f9f9f9;\n text-decoration: none;\n}\n" }, { "path": "src/components/logins/Login6/Login6.jsx", "content": "import { useRef } from \"react\";\nimport \"./styles.css\";\nimport logo from \"./logo.svg\";\nimport googleIcon from \"./google.svg\";\nimport appleIcon from \"./apple.svg\";\nimport { useWebGLBackground } from \"./useWebGLBackground\";\n\nconst Textbox = ({ id, type, label }) => (\n
    \n \n \n
    \n);\n\nexport const Login6 = () => {\n const canvasRef = useRef(null);\n useWebGLBackground(canvasRef);\n\n return (\n
    \n \n
    \n \"logo\"\n

    Welcome back!

    \n
    \n
    \n \n \n
    \n
    or
    \n \n \n \n \n Forgot password?\n

    \n Don't have an account? Register here\n

    \n
    \n
    \n );\n};\n" }, { "path": "src/components/logins/Login6/styles.css", "content": ".page.login-6 {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n min-height: 100dvh;\n background: radial-gradient(ellipse at center, #030b20 0%, #07070f 70%);\n color: #ffffff;\n font-family: \"Euclid Circular B\", \"Poppins\", sans-serif;\n padding: 24px 16px;\n}\n\n.login-6-canvas {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n.login-6-card {\n position: relative;\n z-index: 2;\n background: radial-gradient(\n ellipse at 50% 0%,\n rgba(37, 45, 76, 0.52),\n rgba(2, 4, 18, 0.44)\n );\n border: 1px solid rgba(40, 140, 255, 0.16);\n box-shadow:\n inset 0 1px 0 rgba(80, 170, 255, 0.09),\n 0 48px 96px -24px rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(28px) saturate(160%);\n -webkit-backdrop-filter: blur(28px) saturate(160%);\n border-radius: 48px;\n padding: 64px 40px 52px;\n width: min(360px, 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.login-6-card > img {\n width: 120px;\n margin: 0 0 40px;\n}\n\n.login-6-card h2 {\n font-size: 22px;\n font-weight: 600;\n letter-spacing: -0.02em;\n margin: 0 0 8px;\n background: linear-gradient(160deg, #ffffff 20%, #85c8ff);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.login-6-card h3 {\n font-size: 11px;\n font-weight: 400;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(80, 160, 255, 0.45);\n margin: 0 0 40px;\n}\n\n.login-6-form {\n display: grid;\n gap: 14px;\n width: 100%;\n margin: 0 0 18px;\n}\n\n.login-6-socials {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n\n.login-6-sso-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n background: rgba(20, 100, 255, 0.05);\n border: 1px solid rgba(30, 130, 255, 0.12);\n color: rgba(255, 255, 255, 0.6);\n font-size: 14px;\n cursor: pointer;\n}\n\n.login-6-sso-btn:hover {\n background: rgba(20, 100, 255, 0.09);\n border-color: rgba(30, 130, 255, 0.22);\n color: rgba(255, 255, 255, 0.85);\n}\n\n.login-6-sso-btn:active {\n transform: scale(0.98);\n}\n\n.login-6-sso-btn img {\n display: block;\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n}\n\n.login-6-or {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(80, 160, 255, 0.4);\n}\n\n.login-6-or::before,\n.login-6-or::after {\n content: \"\";\n flex: 1;\n height: 1px;\n background: rgba(40, 140, 255, 0.18);\n}\n\n.login-6-card :is(input, button) {\n height: 56px;\n font-family: inherit;\n font-size: 15px;\n padding: 0 16px;\n border-radius: 12px;\n transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.login-6-textbox {\n position: relative;\n}\n\n.login-6-textbox label {\n transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n position: absolute;\n top: 50%;\n left: 16px;\n translate: 0 -50%;\n transform-origin: 0 50%;\n pointer-events: none;\n color: rgba(80, 160, 255, 0.42);\n font-size: 15px;\n}\n\n.login-6-textbox input {\n width: 100%;\n padding-top: 12px;\n background: rgba(20, 100, 255, 0.05);\n border: 1px solid rgba(30, 130, 255, 0.12);\n outline: none;\n color: #ffffff;\n box-shadow: 0 0 0 2px transparent;\n}\n\n.login-6-textbox input:hover {\n background: rgba(20, 100, 255, 0.09);\n border-color: rgba(30, 130, 255, 0.22);\n}\n\n.login-6-textbox input:focus {\n background: rgba(20, 100, 255, 0.11);\n border-color: transparent;\n box-shadow:\n 0 0 0 2px #1e85ff,\n 0 0 24px rgba(30, 133, 255, 0.22);\n}\n\n.login-6-textbox input:is(:focus, :not(:invalid)) ~ label {\n scale: 0.72;\n translate: 0 -118%;\n}\n\n.login-6-form button[type=\"submit\"] {\n background: linear-gradient(135deg, #2d9bff 0%, #0d4fe8 100%);\n color: #e8f4ff;\n border: none;\n font-weight: 400;\n font-size: 14px;\n letter-spacing: 1px;\n text-transform: uppercase;\n cursor: pointer;\n margin-top: 4px;\n}\n\n.login-6-form button[type=\"submit\"]:hover {\n background: linear-gradient(135deg, #46aaff 0%, #1a5ef5 100%);\n}\n\n.login-6-form button:active {\n transform: scale(0.98);\n background: linear-gradient(135deg, #1a8aee 0%, #0840cc 100%);\n}\n\n.login-6-card > a {\n font-size: 13px;\n color: rgba(80, 160, 255, 0.42);\n text-decoration: none;\n transition: color 0.2s;\n cursor: pointer;\n}\n\n.login-6-card > a:hover {\n color: rgba(130, 190, 255, 0.8);\n}\n\n.login-6-footer {\n margin: 40px 0 0;\n font-size: 13px;\n color: rgba(80, 160, 255, 0.38);\n}\n\n.login-6-footer a {\n color: #1e85ff;\n text-decoration: none;\n transition: color 0.2s;\n}\n\n.login-6-footer a:hover {\n color: #55aaff;\n}\n" }, { "path": "src/components/logins/Login6/useWebGLBackground.js", "content": "import { useEffect } from \"react\";\n\nconst VERT = `\nattribute vec2 position;\nvoid main() {\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAG = `\nprecision highp float;\n\nuniform float time;\nuniform vec2 resolution;\n\nvoid main() {\n vec4 abyssColor = vec4(0.0, 0.0, 0.0, 1.0);\n vec4 tunnelColor = vec4(0.04, 0.52, 1.0, 1.0);\n\n vec2 uv = (gl_FragCoord.xy - 0.5 * resolution.xy) / resolution.y * 0.6;\n\n float r = length(uv);\n float y = fract(r / 0.005 / (r - 0.01) + time);\n y = smoothstep(0.01, 4.0, y);\n\n float x = length(uv);\n x = smoothstep(0.5, 0.01, x);\n\n gl_FragColor = mix(tunnelColor, abyssColor, x) * y;\n}\n`;\n\nexport const useWebGLBackground = (canvasRef) => {\n useEffect(() => {\n const canvas = canvasRef.current;\n const gl = canvas.getContext(\"webgl\");\n if (!gl) return;\n\n const compile = (type, src) => {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, src);\n gl.compileShader(shader);\n return shader;\n };\n\n const program = gl.createProgram();\n const vs = compile(gl.VERTEX_SHADER, VERT);\n const fs = compile(gl.FRAGMENT_SHADER, FRAG);\n gl.attachShader(program, vs);\n gl.attachShader(program, fs);\n gl.linkProgram(program);\n gl.useProgram(program);\n\n const buf = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n gl.bufferData(\n gl.ARRAY_BUFFER,\n new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n gl.STATIC_DRAW,\n );\n\n const posAttr = gl.getAttribLocation(program, \"position\");\n gl.enableVertexAttribArray(posAttr);\n gl.vertexAttribPointer(posAttr, 2, gl.FLOAT, false, 0, 0);\n\n const timeLoc = gl.getUniformLocation(program, \"time\");\n const resLoc = gl.getUniformLocation(program, \"resolution\");\n\n const resize = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n gl.viewport(0, 0, canvas.width, canvas.height);\n };\n resize();\n window.addEventListener(\"resize\", resize);\n\n const startTime = Date.now();\n let rafId;\n const render = () => {\n gl.uniform1f(timeLoc, (Date.now() - startTime) / 1000);\n gl.uniform2f(resLoc, canvas.width, canvas.height);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n rafId = requestAnimationFrame(render);\n };\n render();\n\n return () => {\n cancelAnimationFrame(rafId);\n window.removeEventListener(\"resize\", resize);\n gl.deleteProgram(program);\n gl.deleteShader(vs);\n gl.deleteShader(fs);\n gl.deleteBuffer(buf);\n };\n }, []);\n};\n" }, { "path": "src/components/logins/index.js", "content": "export * from \"./Login1/Login1\";\nexport * from \"./Login2/Login2\";\nexport * from \"./Login3/Login3\";\nexport * from \"./Login4/Login4\";\nexport * from \"./Login5/Login5\";\nexport * from \"./Login6/Login6\";\n" }, { "path": "src/components/modals/Modal1/Modal1.jsx", "content": "import { useState } from \"react\";\nimport \"./styles.css\";\nimport logo from \"./logo.svg\";\n\nexport const Modal1 = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n const toggleModal = () => setIsOpen(!isOpen);\n\n return (\n
    \n \n
    \n
    \n

    Sign Up

    \n

    Try Hologram today

    \n
    \n
    \n
    \n account_circle\n \n
    \n
    \n lock\n \n
    \n \n

    Sign up free

    \n trending_flat \n \n \n

    No credit card information required

    \n
    \n \n \n
    \n );\n};\n" }, { "path": "src/components/modals/Modal1/styles.css", "content": ".page.modal-1-page {\n background: #ffffff;\n}\n\n.container {\n max-width: 700px;\n margin: 0 auto;\n}\n\n.modal-1-footer {\n position: fixed;\n left: 0;\n bottom: 0;\n right: 0;\n height: 50vh;\n padding-bottom: 20px;\n background: #0a1535;\n color: #f9f9f9;\n}\n\n.modal-1-footer article {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 50px 40px;\n margin: -99px 20px 20px;\n border-radius: 10px;\n background: linear-gradient(90deg, #773ecb, #9f63ff);\n}\n\n.modal-1-footer article h2 {\n font-weight: 400;\n color: rgb(255 255 255 / 70%);\n}\n\n.signup-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n padding: 0 20px 0 20px;\n width: 100%;\n height: 56px;\n background: #161022;\n border: 0;\n border-radius: 6px;\n color: #f9f9f9;\n font-family: inherit;\n font-size: 16px;\n}\n\n.modal-1-footer section {\n padding: 0 50px;\n}\n\n.modal-1-footer section.top {\n padding-top: 30px;\n margin-bottom: 48px;\n}\n\n.modal-1-footer section.top img {\n display: block;\n height: 30px;\n margin: 0 0 30px;\n}\n\n.modal-1-footer section.top ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: grid;\n gap: 30px;\n grid-template-columns: repeat(2, 1fr);\n}\n\n@media (width > 480px) {\n .modal-1-footer article button {\n width: 70%;\n }\n\n .modal-1-footer section.top ul {\n padding-right: 10%;\n }\n}\n\n@media (width > 600px) {\n .modal-1-footer article {\n flex-direction: row;\n min-height: 140px;\n margin: -70px 20px 20px;\n padding: 30px 50px 30px;\n }\n\n .modal-1-footer article button {\n width: auto;\n padding: 0 20px 0 24px;\n }\n\n .modal-1-footer section.top ul {\n grid-template-columns: repeat(4, 1fr);\n padding-right: 0;\n }\n}\n\n.modal-1-footer section.top ul li a {\n display: block;\n margin-bottom: 18px;\n color: rgb(255 255 255 / 90%);\n}\n\n.modal-1-footer section.top h3 {\n color: rgb(255 255 255 / 40%);\n font-weight: 400;\n text-transform: uppercase;\n font-size: 12px;\n letter-spacing: 1px;\n margin-bottom: 20px;\n}\n\n.modal-1-overlay,\n.modal-1-modal {\n position: fixed;\n opacity: 0;\n visibility: hidden;\n transition: 0.5s;\n}\n\n@keyframes overlay-in {\n 0% {\n scale: 0 0.004;\n }\n 33% {\n scale: 1 0.004;\n }\n 66%,\n 100% {\n scale: 1 1;\n }\n}\n\n.modal-1-overlay {\n z-index: 1;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgb(0 0 0 / 75%);\n display: grid;\n place-items: center;\n}\n\n.modal-1-overlay.open {\n visibility: visible;\n opacity: 1;\n animation: overlay-in 1s both;\n}\n\n@keyframes modal-in {\n 0%,\n 66% {\n opacity: 0;\n visibility: hidden;\n translate: -50% -40%;\n }\n 100% {\n opacity: 1;\n visibility: visible;\n }\n}\n\n.modal-1-modal {\n z-index: 2;\n width: 430px;\n top: 50%;\n left: 50%;\n background: #ffffff;\n border-radius: 12px;\n padding: 0 40px 50px;\n translate: -50% -50%;\n box-shadow: 0 10px 30px rgb(0 0 0 / 24%);\n}\n\n.modal-1-overlay.open .modal-1-modal {\n opacity: 1;\n visibility: visible;\n animation: modal-in 1s;\n}\n\n.modal-1-modal header {\n background: linear-gradient(90deg, #773ecb, #9f63ff);\n margin: -85px -20px 30px;\n border-radius: 12px;\n height: 170px;\n display: flex;\n justify-content: center;\n flex-direction: column;\n padding-left: 40px;\n box-shadow: 0 16px 30px rgb(0 0 0 / 12%);\n}\n\n.modal-1-modal h2 {\n margin-bottom: 10px;\n font-size: 29px;\n}\n\n.modal-1-modal h3 {\n opacity: 0.45;\n font-weight: 400;\n}\n\n.modal-1-modal form {\n display: grid;\n gap: 16px;\n}\n\n.modal-1-modal .textbox {\n position: relative;\n width: 100%;\n height: 56px;\n display: flex;\n align-items: center;\n}\n\n.modal-1-modal .textbox span {\n position: relative;\n z-index: 1;\n left: 16px;\n font-size: 20px;\n color: #96939c;\n pointer-events: none;\n}\n\n.modal-1-modal input {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n border: 0;\n background: #ececec;\n height: 56px;\n border-radius: 6px;\n font-family: inherit;\n padding: 0 16px 0 44px;\n font-size: 16px;\n}\n\n.modal-1-modal input::placeholder {\n color: #96939c;\n}\n\n.modal-1-modal > p {\n color: #96939c;\n margin: 30px 0 0;\n}\n" }, { "path": "src/components/modals/Modal2/Modal2 copy.css", "content": ".overlay,\n.dialog {\n position: fixed;\n}\n\n@keyframes overlay-in {\n 0% {\n scale: 0 0.003;\n }\n 33%,\n 36% {\n scale: 1 0.003;\n }\n 66%,\n 100% {\n scale: 1 1;\n }\n}\n\n.overlay {\n z-index: 1;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgb(0 0 0 / 75%);\n display: grid;\n place-items: center;\n}\n\n.overlay.open {\n animation: overlay-in 1s both;\n}\n\n.overlay.closed {\n animation: overlay-in 1s 0.25s reverse both;\n}\n\n.overlay.default {\n scale: 0;\n}\n\n@keyframes modal-in {\n 0% {\n opacity: 0;\n visibility: hidden;\n scale: 0.5;\n }\n 100% {\n opacity: 1;\n visibility: visible;\n scale: 1;\n }\n}\n\n.dialog {\n z-index: 2;\n width: 380px;\n top: 50%;\n left: 50%;\n background: #ffffff;\n border-radius: 12px;\n padding: 0 40px 50px;\n translate: -50% -50%;\n box-shadow: 0 10px 30px rgb(0 0 0 / 24%);\n}\n\n.dialog.default {\n opacity: 0;\n visibility: hidden;\n}\n\n.dialog.open {\n animation: modal-in 0.5s 0.6s both;\n}\n\n.dialog.closed {\n animation: modal-in 0.5s reverse both;\n}\n\n.dialog header {\n background: linear-gradient(90deg, #9d50bb, #6e48aa);\n margin: -85px -20px 30px;\n border-radius: 12px;\n height: 170px;\n display: flex;\n justify-content: center;\n flex-direction: column;\n padding-left: 40px;\n box-shadow: 0 16px 30px rgb(0 0 0 / 12%);\n}\n\n.dialog header h2 {\n margin-bottom: 10px;\n font-size: 29px;\n}\n\n.dialog header h3 {\n opacity: 0.45;\n font-weight: 400;\n}\n" }, { "path": "src/components/modals/Modal2/Modal2.css", "content": ".modal-2-overlay,\n.modal-2-modal {\n position: fixed;\n}\n\n@keyframes overlay-in {\n 0% {\n scale: 0 0.003;\n }\n 33%,\n 36% {\n scale: 1 0.003;\n }\n 66%,\n 100% {\n scale: 1 1;\n }\n}\n\n.modal-2-overlay {\n z-index: 1;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgb(0 0 0 / 75%);\n display: grid;\n place-items: center;\n}\n\n.modal-2-overlay.open {\n animation: overlay-in 1s both;\n}\n\n.modal-2-overlay.closed {\n animation: overlay-in 1s 0.25s reverse both;\n}\n\n.modal-2-overlay.default {\n scale: 0;\n}\n\n@keyframes modal-in {\n 0% {\n opacity: 0;\n visibility: hidden;\n scale: 0.5;\n }\n 100% {\n opacity: 1;\n visibility: visible;\n scale: 1;\n }\n}\n\n.modal-2-modal {\n z-index: 2;\n width: 380px;\n top: 50%;\n left: 50%;\n background: #ffffff;\n border-radius: 12px;\n padding: 0 40px 50px;\n translate: -50% -50%;\n box-shadow: 0 10px 30px rgb(0 0 0 / 24%);\n}\n\n.modal-2-modal.default {\n opacity: 0;\n visibility: hidden;\n}\n\n.modal-2-modal.open {\n animation: modal-in 0.5s 0.6s both;\n}\n\n.modal-2-modal.closed {\n animation: modal-in 0.5s reverse both;\n}\n\n.modal-2-modal header {\n background: linear-gradient(90deg, #9d50bb, #6e48aa);\n margin: -85px -20px 30px;\n border-radius: 12px;\n height: 170px;\n display: flex;\n justify-content: center;\n flex-direction: column;\n padding-left: 40px;\n box-shadow: 0 16px 30px rgb(0 0 0 / 12%);\n}\n\n.modal-2-modal header h2 {\n margin-bottom: 10px;\n font-size: 29px;\n}\n\n.modal-2-modal header h3 {\n opacity: 0.45;\n font-weight: 400;\n}\n" }, { "path": "src/components/modals/Modal2/Modal2.jsx", "content": "import { createPortal } from \"react-dom\";\nimport \"./Modal2.css\";\n\nexport const Modal2 = ({\n title,\n subtitle,\n modalContent,\n toggleModal,\n isOpen,\n}) => {\n const open = isOpen === null ? \"default\" : isOpen ? \"open\" : \"closed\";\n\n const Overlay = () => (\n
    \n );\n\n const Dialog = () => (\n e.stopPropagation()}\n >\n
    \n

    {title}

    \n

    {subtitle}

    \n
    \n {modalContent}\n
    \n );\n\n return (\n <>\n {createPortal(, document.body)}\n {createPortal(, document.body)}\n \n );\n};\n" }, { "path": "src/components/modals/Modal2/Modal2Example.css", "content": ".page.modal-2-page {\n background: #ffffff;\n}\n\n.page.modal-2-page .container {\n max-width: 700px;\n margin: 0 auto;\n}\n\n.modal-2-footer {\n position: fixed;\n left: 0;\n bottom: 0;\n right: 0;\n height: calc(50vh + 1px);\n padding-bottom: 20px;\n background: #161022;\n color: #e5e2e9;\n}\n\n.modal-2-footer article {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 40px 40px;\n margin: -99px 20px 20px;\n border-radius: 10px;\n background: linear-gradient(90deg, #9d50bb, #6e48aa);\n}\n\n.modal-2-footer article h2 {\n font-weight: 400;\n color: #f9f9f9;\n}\n\n.signup-button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n padding: 0 20px 0 20px;\n width: 100%;\n height: 56px;\n background: #161022;\n border: 0;\n border-radius: 6px;\n color: #e5e2e9;\n font-family: inherit;\n font-size: 16px;\n cursor: pointer;\n}\n\n.modal-2-footer section {\n padding: 0 50px;\n}\n\n.modal-2-footer section.top {\n padding-top: 30px;\n margin-bottom: 48px;\n}\n\n.modal-2-footer section.top img {\n display: block;\n height: 30px;\n margin: 0 0 30px;\n}\n\n.modal-2-footer section.top ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: grid;\n gap: 30px;\n grid-template-columns: repeat(2, 1fr);\n}\n\n@media (width > 480px) {\n .modal-2-footer article button {\n width: 70%;\n }\n\n .modal-2-footer section.top ul {\n padding-right: 10%;\n }\n}\n\n@media (width > 600px) {\n .modal-2-footer article {\n flex-direction: row;\n min-height: 140px;\n margin: -70px 20px 20px;\n padding: 30px 50px 30px;\n }\n\n .modal-2-footer article button {\n width: auto;\n padding: 0 20px 0 24px;\n }\n\n .modal-2-footer section.top ul {\n grid-template-columns: repeat(4, 1fr);\n padding-right: 0;\n }\n}\n\n.modal-2-footer section.top ul li a {\n display: block;\n margin-bottom: 18px;\n color: #e5e2e9;\n}\n\n.modal-2-footer section.top h3 {\n color: #9a90a9;\n font-weight: 400;\n text-transform: uppercase;\n font-size: 12px;\n letter-spacing: 1px;\n margin-bottom: 20px;\n}\n\n.modal-2-modal form {\n display: grid;\n gap: 16px;\n}\n\n.modal-2-modal input {\n border: 0;\n background: #ececec;\n height: 56px;\n border-radius: 6px;\n font-family: inherit;\n padding: 0 20px;\n font-size: 16px;\n}\n\n.modal-2-modal input::placeholder {\n color: #96939c;\n}\n\n.modal-2-modal > p {\n color: #96939c;\n margin: 30px 0 0;\n text-align: center;\n}\n" }, { "path": "src/components/modals/Modal2/Modal2Example.jsx", "content": "import { useState } from \"react\";\nimport \"./Modal2Example.css\";\nimport { Modal2 } from \"./Modal2\";\nimport logo from \"./logo.svg\";\n\nexport const Modal2Example = () => {\n const [isOpen, setIsOpen] = useState(null);\n\n const toggleModal = () => setIsOpen(!isOpen);\n\n return (\n
    \n \n
    \n \n \n \n
    \n

    No credit card information required

    \n \n }\n />\n \n
    \n );\n};\n" }, { "path": "src/components/modals/index.js", "content": "export * from \"./Modal1/Modal1\";\nexport * from \"./Modal2/Modal2\";\nexport * from \"./Modal2/Modal2Example\";\n" }, { "path": "src/components/navbars/Navbar1/Navbar1.css", "content": ".page.navbar-1-page {\n background: #09090b;\n color: #faf9f5;\n font-family: \"Euclid Circular A\", \"Poppins\";\n padding-top: 72px;\n margin: 0;\n}\n\n.navbar-1 {\n position: fixed;\n z-index: 1;\n top: 0;\n left: 0;\n translate: 0 -72px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 0 20px;\n width: 100%;\n height: 72px;\n box-shadow: 0 10px 20px rgb(0 0 0 / 10%);\n background: #4f52ff;\n transition: 0.3s;\n}\n\n.navbar-1.visible {\n top: 0;\n translate: 0;\n}\n\n.navbar-1 > h1 {\n width: 36px;\n height: 36px;\n background: #f9f9f9;\n color: #4f52ff;\n display: grid;\n place-items: center;\n border-radius: 50%;\n}\n\n.navbar-1 .nav-items {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.navbar-1 .nav-items > a {\n text-decoration: none;\n font-weight: 400;\n color: rgb(255 255 255 / 96%);\n height: 72px;\n display: grid;\n place-items: center;\n}\n\n.navbar-1 .nav-items > a:hover {\n color: rgb(255 255 255 / 96%);\n}\n\n.page.navbar-1-page h2 {\n font-size: 20px;\n margin: 0 0 4px;\n cursor: default;\n}\n\n.page.navbar-1-page section {\n display: flex;\n align-items: center;\n gap: 40px;\n padding: 100px 60px;\n}\n\n.page.navbar-1-page p {\n opacity: 0.6;\n}\n\n.page.navbar-1-page section.shaded {\n background: #0e0e11;\n}\n\n.page.navbar-1-page section > img {\n width: 200px;\n height: 200px;\n}\n\n.page.navbar-1-page section.shaded > img {\n padding: 20px;\n}\n\n.page.navbar-1-page section > p {\n line-height: 1.7;\n}\n" }, { "path": "src/components/navbars/Navbar1/Navbar1.jsx", "content": "import { useEffect, useRef, useState } from \"react\";\nimport image1 from \"./1.svg\";\nimport image2 from \"./2.svg\";\nimport image3 from \"./3.svg\";\nimport image4 from \"./4.svg\";\nimport image5 from \"./5.svg\";\nimport image6 from \"./6.svg\";\n\nimport \"./Navbar1.css\";\n\nexport const Navbar1 = () => {\n const [isVisible, setIsVisible] = useState(true);\n\n const lastScrollTop = useRef(0);\n\n useEffect(() => {\n const handleScroll = () => {\n var { scrollY } = window;\n if (scrollY > lastScrollTop.current) {\n setIsVisible(false);\n } else if (scrollY < lastScrollTop.current) {\n setIsVisible(true);\n } // else was horizontal scroll\n lastScrollTop.current = scrollY <= 0 ? 0 : scrollY;\n };\n\n window.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n return () => window.removeEventListener(\"scroll\", handleScroll);\n }, []);\n\n return (\n
    \n \n
    \n
    \n

    About

    \n

    \n Discover Fuzion, where innovation meets excellence. With a dedicated\n team, we redefine standards to deliver top-notch solutions.\n

    \n
    \n \n
    \n
    \n \n
    \n

    Services

    \n

    \n Explore tailored solutions at Fuzion. From consulting to technology,\n we propel your business forward.\n

    \n
    \n
    \n
    \n
    \n

    Products

    \n

    \n Experience innovation with Fuzion's exceptional products. Crafted\n for performance, each reflects our commitment to excellence.\n

    \n
    \n \n
    \n
    \n \n
    \n

    Contact

    \n

    \n Ready to bring ideas to life? Connect with us today. Whether\n questions or collaboration, we're here to assist.\n

    \n
    \n
    \n
    \n
    \n

    My Skills

    \n

    \n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse\n itaque corporis optio unde quia, modi pariatur ea magni dolorum?\n

    \n
    \n \n
    \n
    \n \n
    \n

    My Skills

    \n

    \n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse\n itaque corporis optio unde quia, modi pariatur ea magni dolorum?\n

    \n
    \n
    \n
    \n
    \n

    My Skills

    \n

    \n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse\n itaque corporis optio unde quia, modi pariatur ea magni dolorum?\n

    \n
    \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/navbars/Navbar2/Navbar2.css", "content": ".page.navbar-2-page {\n background: #f3f3f6;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.navbar-2 {\n --color-primary: #fe5495;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 0 20px;\n height: 78px;\n width: 100%;\n background: #ffffff;\n color: #5b5968;\n box-shadow: 0 10px 50px rgb(0 0 0 / 2%);\n}\n\n.navbar-2 a {\n padding: 0 12px;\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 100%;\n height: 72px;\n font-size: 15px;\n}\n\n.navbar-2 .avatar {\n height: 46px;\n padding: 1px;\n border-radius: 50%;\n border: 1px solid #8f44fd;\n}\n\n.navbar-2 > img {\n height: 32px;\n}\n\n.navbar-2-menu {\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n}\n\n.navbar-2-dropdown {\n position: fixed;\n z-index: 1;\n top: 86px;\n left: 0;\n width: 120px;\n padding: 6px 0;\n display: grid;\n opacity: 0;\n visibility: hidden;\n /* transition: 0.3s; */\n border-radius: 12px;\n background: #ffffff;\n box-shadow: 0 0 30px rgb(0 0 0 / 4%);\n transition: 0.3s;\n}\n\n.navbar-2 a:is(:hover, .active) {\n color: var(--color-primary);\n}\n\n.navbar-2-dropdown.visible {\n opacity: 1;\n visibility: visible;\n}\n\n.navbar-2-dropdown::after {\n content: \"\";\n position: absolute;\n top: -12px;\n width: 100%;\n height: 50px;\n}\n\n.navbar-2-dropdown > a {\n position: relative;\n z-index: 1;\n height: 40px;\n font-size: 14px;\n white-space: nowrap;\n}\n\n.navbar-2-search {\n flex: 1 1 auto;\n position: relative;\n margin-left: 12px;\n}\n\n.navbar-2-search input {\n border: 0;\n border-radius: 52px;\n height: 52px;\n width: 100%;\n background: #f3f3f6;\n padding-left: 18px;\n padding-right: 36px;\n font-size: 14.75px;\n font-family: inherit;\n}\n\n.navbar-2-search button {\n border: 0;\n display: grid;\n place-items: center;\n height: 34px;\n width: 34px;\n border-radius: 50%;\n background: var(--color-primary);\n color: #f9f9f9;\n position: absolute;\n top: 50%;\n right: 8px;\n translate: 0 -50%;\n font-size: 18px;\n}\n\n.navbar-2-search button span {\n font-size: 20px;\n}\n\n.navbar-2-search input::placeholder {\n color: #9b98b1;\n}\n" }, { "path": "src/components/navbars/Navbar2/Navbar2.jsx", "content": "import { useEffect, useRef, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport avatar from \"./avatar.png\";\nimport \"./Navbar2.css\";\n\nconst items = [\n {\n name: \"Explore\",\n items: [\"Following\", \"Popular\", \"Noteworthy\"],\n },\n {\n name: \"Talent\",\n items: [\"Browse\", \"Profiles\", \"Services\", \"Jobs\"],\n },\n {\n name: \"Blog\",\n items: [\"News\", \"Articles\", \"Community\"],\n },\n];\n\nconst Link = ({ item, isActive, onHover }) => {\n const linkRef = useRef();\n\n const handleHover = () => {\n const rect = linkRef.current.getBoundingClientRect();\n onHover(item, `${rect.x}px`);\n };\n\n return (\n \n {item.name}\n \n );\n};\n\nconst Search = () => (\n
    \n \n \n
    \n);\n\nconst CoolNav = ({ items }) => {\n const [translateX, setTranslateX] = useState(\"0\");\n const [activeItem, setActiveItem] = useState(null);\n const [isHidden, setIsHidden] = useState(true);\n\n const handleLinkHover = (item, x) => {\n setActiveItem(item);\n setTranslateX(x);\n };\n\n const handleMouseEnter = () => {\n setIsHidden(false);\n };\n\n const handleMouseLeave = () => {\n setIsHidden(true);\n };\n\n return (\n \n {items.map((item, index) => (\n \n ))}\n \n {activeItem?.items?.map((link) => (\n {link}\n ))}\n \n \n );\n};\n\nexport const Navbar2 = () => {\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/navbars/Navbar3/Navbar3.css", "content": ".page.navbar-3-page {\n background: #f8f7ff;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.navbar-3 {\n --color-primary: #6f5bf3;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n display: flex;\n align-items: center;\n padding: 0 20px;\n height: 72px;\n width: 100%;\n background: #ffffff;\n color: #5b5968;\n box-shadow: 0 10px 50px rgb(0 0 0 / 2%);\n}\n\n.navbar-3 a {\n padding: 0 12px;\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 100%;\n height: 72px;\n font-size: 15px;\n}\n\n.navbar-3 > img {\n margin: 0 24px 0 0;\n height: 36px;\n width: 36px;\n}\n\n.navbar-3-menu {\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n}\n\n.navbar-3-dropdown {\n position: fixed;\n z-index: 1;\n top: 82px;\n left: 0;\n height: 0;\n width: 120px;\n padding: 6px 0;\n overflow: hidden;\n display: grid;\n opacity: 0;\n visibility: hidden;\n transition: 0.3s;\n border-radius: 6px;\n background: #ffffff;\n box-shadow: 0 0 30px rgb(0 0 0 / 4%);\n transition: 0.3s;\n}\n\n.navbar-3 a:is(:hover, .active) {\n color: var(--color-primary);\n}\n\n.navbar-3-dropdown.visible {\n opacity: 1;\n visibility: visible;\n height: max-content;\n}\n\n.navbar-3-dropdown::after {\n content: \"\";\n position: absolute;\n inset: 0;\n top: -12px;\n}\n\n.navbar-3-dropdown > a {\n position: relative;\n z-index: 1;\n height: 40px;\n font-size: 14px;\n white-space: nowrap;\n}\n\n.navbar-3-search {\n position: relative;\n margin-left: auto;\n}\n\n.navbar-3-search span {\n position: absolute;\n top: 50%;\n left: 12px;\n translate: 0 -50%;\n font-size: 18px;\n}\n\n.navbar-3-search input {\n border: 0;\n border-radius: 6px;\n height: 36px;\n width: 100%;\n max-width: 200px;\n background: #f6f5fd;\n padding-left: 36px;\n font-size: 15px;\n}\n\n.navbar-3-search span,\n.navbar-3-search input::placeholder {\n color: #9b98b1;\n}\n" }, { "path": "src/components/navbars/Navbar3/Navbar3.jsx", "content": "import { useRef, useState } from \"react\";\nimport avatar from \"./avatar.png\";\nimport \"./Navbar3.css\";\n\nconst items = [\n {\n name: \"About\",\n },\n {\n name: \"Skills\",\n items: [\"UI/UX\", \"Development\", \"Design\"],\n },\n {\n name: \"Projects\",\n items: [\"Chatbot\", \"Calculator\", \"Weather\"],\n },\n {\n name: \"Work\",\n items: [\"Portfolio\", \"Resume\", \"GitHub\"],\n },\n];\n\nconst Link = ({ item, activeItem, onHover }) => {\n const linkRef = useRef();\n\n const handleHover = () => {\n const rect = linkRef.current.getBoundingClientRect();\n onHover(item, `${rect.x}px`);\n };\n\n return (\n \n {item.name}\n \n );\n};\n\nconst Search = () => (\n
    \n search\n \n
    \n);\n\nexport const Navbar3 = () => {\n const [translateX, setTranslateX] = useState(\"0\");\n const [activeItem, setActiveItem] = useState(null);\n\n const handleLinkHover = (item, x) => {\n setActiveItem(item || null);\n setTranslateX(x);\n };\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/navbars/Navbar4/Navbar4.css", "content": ".navbar-4-page {\n --color-primary: #5c48cf;\n --gradient: linear-gradient(to right, var(--color-primary), #485acf);\n background: #202022;\n font-family: \"Euclid Circular A\", \"Poppins\";\n color: #f9f9f9;\n margin: 0;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n\n.navbar-4 {\n position: fixed;\n top: 6px;\n left: 0;\n right: 0;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 32px;\n background: #161618;\n box-shadow: 0 20px 40px rgb(0 0 0 / 12%);\n}\n\n.navbar-4 img {\n height: 32px;\n}\n\n.navbar-4 .end {\n width: 120px;\n}\n\n.navbar-4 .end:last-child {\n text-align: right;\n color: #7f7f80;\n}\n\n.navbar-4 nav {\n position: relative;\n font-weight: 400;\n font-size: 0;\n display: flex;\n padding: 0;\n width: 80%;\n}\n\n.navbar-4 nav .item {\n font-size: 15px;\n display: inline-block;\n position: relative;\n padding: 0 20px;\n cursor: pointer;\n z-index: 5;\n min-width: 25%;\n height: 60px;\n line-height: 60px;\n text-align: center;\n opacity: 0.7;\n transition: 0.3s;\n}\n\n.navbar-4 .item:hover {\n opacity: 1;\n}\n\n.navbar-4 .dropdown {\n overflow: hidden;\n list-style: none;\n position: absolute;\n padding: 0;\n width: 100%;\n left: 0;\n top: 62px;\n}\n.navbar-4 .dropdown > div {\n translate: 0 -100%;\n transition: all 0.5s 0.1s;\n position: relative;\n}\n\n.dropdown a {\n display: block;\n padding: 0;\n width: 100%;\n height: 40px;\n line-height: 40px;\n font-size: 14px;\n background: #161618;\n color: #7f7f80;\n transition: background 0.1s;\n}\n\n.navbar-4 .dropdown a:hover {\n background: var(--gradient);\n color: inherit;\n}\n\n.navbar-4 .underline {\n height: 5px;\n background: var(--gradient);\n position: absolute;\n bottom: 0;\n width: 25%;\n z-index: 2;\n pointer-events: none;\n transition: 0.35s;\n}\n\n.navbar-4 nav .item:hover > .dropdown > div {\n translate: 0;\n}\n" }, { "path": "src/components/navbars/Navbar4/Navbar4.jsx", "content": "import { useState } from \"react\";\nimport \"./Navbar4.css\";\nimport logo from \"./logo.svg\";\n\nconst navItems = [\n {\n name: \"Docs\",\n },\n {\n name: \"Guides\",\n },\n {\n name: \"Demos\",\n items: [\"React\", \"Svelte\", \"Vue\"],\n },\n {\n name: \"Issues\",\n },\n];\n\nconst NavItem = ({ item, onHover }) => (\n \n {item.name}\n {!!item.items && (\n
    \n \n
    \n )}\n \n);\n\nexport const Navbar4 = () => {\n const [activeItem, setActiveItem] = useState(null);\n\n const onHover = (index) => setActiveItem(index);\n\n return (\n
    \n
    \n
    \n \n
    \n \n
    \n v1.0.2\n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/navbars/index.js", "content": "export * from \"./Navbar1/Navbar1\";\nexport * from \"./Navbar2/Navbar2\";\nexport * from \"./Navbar3/Navbar3\";\nexport * from \"./Navbar4/Navbar4\";\n" }, { "path": "src/components/parallax/index.js", "content": "export * from \"./parallax-1/Parallax1\";\nexport * from \"./parallax-2/Parallax2\";\n" }, { "path": "src/components/parallax/parallax-1/Parallax1.jsx", "content": "import { useState, useEffect } from \"react\";\nimport \"./styles.css\";\n\nexport const Parallax1 = () => {\n const [scrollPosition, setScrollPosition] = useState(0);\n\n const handleScroll = () => setScrollPosition(window.scrollY);\n\n useEffect(() => {\n window.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n return () => {\n window.removeEventListener(\"scroll\", handleScroll);\n };\n }, []);\n\n return (\n
    \n \n

    Parallax

    \n \n \n
    \n

    What is parallax?

    \n

    \n Parallax is a displacement or difference in the apparent position of\n an object viewed along two different lines of sight and is measured by\n the angle or half-angle of inclination between those two lines. Due to\n foreshortening, nearby objects show a larger parallax than farther\n objects, so parallax can be used to determine distances.\n

    \n

    \n Parallax also affects optical instruments such as rifle scopes,\n binoculars, microscopes, and twin-lens reflex cameras that view\n objects from slightly different angles. Many animals, along with\n humans, have two eyes with overlapping visual fields that use parallax\n to gain depth perception; this process is known as stereopsis. In\n computer vision the effect is used for computer stereo vision, and\n there is a device called a parallax rangefinder that uses it to find\n the range, and in some variations also altitude to a target.\n

    \n

    \n Parallax is a displacement or difference in the apparent position of\n an object viewed along two different lines of sight and is measured by\n the angle or half-angle of inclination between those two lines. Due to\n foreshortening, nearby objects show a larger parallax than farther\n objects, so parallax can be used to determine distances.\n

    \n

    \n Parallax also affects optical instruments such as rifle scopes,\n binoculars, microscopes, and twin-lens reflex cameras that view\n objects from slightly different angles. Many animals, along with\n humans, have two eyes with overlapping visual fields that use parallax\n to gain depth perception; this process is known as stereopsis. In\n computer vision the effect is used for computer stereo vision, and\n there is a device called a parallax rangefinder that uses it to find\n the range, and in some variations also altitude to a target.\n

    \n
    \n
    \n );\n};\n" }, { "path": "src/components/parallax/parallax-1/styles.css", "content": ".page.parallax-1-page {\n background: #0e0d0e;\n height: 100%;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n* {\n box-sizing: border-box;\n}\n\n.parallax-banner {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n background-image: url(\"./bg.png\");\n background-size: cover;\n background-repeat: no-repeat;\n background-position: 50% 70%;\n height: 600px;\n width: 100vw;\n transition: 0.05s linear;\n}\n\n.parallax-banner h2 {\n font-size: 48px;\n color: #f8f8f8;\n padding-top: 0;\n margin-top: 0;\n margin-bottom: 10px;\n}\n\n.parallax-banner button {\n border: 0;\n background: #ffffff;\n color: #222222;\n padding: 10px 24px;\n border-radius: 30px;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n}\n\n.parallax-container {\n padding: 0 10%;\n}\n\n.parallax-banner h2 {\n margin-top: 0;\n margin-bottom: 40px;\n padding-top: 60px;\n}\n" }, { "path": "src/components/parallax/parallax-2/Parallax2.css", "content": ".page.parallax-2-page {\n margin: 0;\n background: #6a8faa;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.parallax-2-page section {\n position: relative;\n height: 100vh;\n width: 100vw;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.parallax-2-page .bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-repeat: no-repeat;\n filter: brightness(0.68);\n}\n\n.parallax-2-page h1 {\n color: white;\n text-shadow: 1px 1px 3px black;\n z-index: 1;\n font-size: 3em;\n font-weight: 400;\n}\n" }, { "path": "src/components/parallax/parallax-2/Parallax2.jsx", "content": "import { useRef } from \"react\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/all\";\nimport { useGSAP } from \"@gsap/react\";\nimport \"./Parallax2.css\";\n\nimport image1 from \"./1.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 from \"./3.jpg\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst sectionsData = [\n { image: image1, text: \"Parallax\" },\n { image: image2, text: \"So smooth\" },\n { image: image3, text: \"Nice, right?\" },\n];\n\nconst getRatio = (el) =>\n window.innerHeight / (window.innerHeight + el.offsetHeight);\n\nconst ParallaxSection = ({ image, text }) => (\n
    \n
    \n

    {text}

    \n
    \n);\n\nexport const Parallax2 = () => {\n const containerRef = useRef(null);\n\n useGSAP(\n (context) => {\n const sections = gsap.utils.toArray(\"section\", context.scope);\n\n sections.forEach((section, i) => {\n const bg = section.querySelector(\".bg\");\n\n gsap.fromTo(\n bg,\n {\n backgroundPosition: () =>\n i\n ? `50% ${-window.innerHeight * getRatio(section)}px`\n : \"50% 0px\",\n },\n {\n backgroundPosition: () =>\n `50% ${window.innerHeight * (1 - getRatio(section))}px`,\n ease: \"none\",\n scrollTrigger: {\n trigger: section,\n start: () => (i ? \"top bottom\" : \"top top\"),\n end: \"bottom top\",\n scrub: true,\n },\n }\n );\n });\n },\n { scope: containerRef }\n );\n\n return (\n
    \n {sectionsData.map((s, i) => (\n \n ))}\n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar1/Sidebar1.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./styles.css\";\n\nconst menuItems = [\n {\n name: \"Home\",\n icon: \"home\",\n },\n {\n name: \"Settings\",\n icon: \"settings\",\n items: [\"Display\", \"Editor\", \"Theme\", \"Interface\"],\n },\n {\n name: \"Create\",\n icon: \"add_box\",\n items: [\"Article\", \"Document\", \"Report\"],\n },\n {\n name: \"Account\",\n icon: \"lock\",\n items: [\"Dashboard\", \"Logout\"],\n },\n {\n name: \"Products\",\n icon: \"inventory_2\",\n },\n {\n name: \"Favourites\",\n icon: \"favorite\",\n },\n];\n\nconst Icon = ({ icon }) => (\n {icon}\n);\n\nconst NavHeader = () => (\n
    \n \n Admin\n
    \n);\n\nconst NavButton = ({ onClick, name, icon, isActive, hasSubNav }) => (\n onClick(name)}\n className={isActive ? \"active\" : \"\"}\n >\n {icon && }\n {name}\n {hasSubNav && }\n \n);\n\nconst SubMenu = ({ item, activeItem, handleClick }) => {\n const navRef = useRef(null);\n\n const isSubNavOpen = (item, items) =>\n items.some((i) => i === activeItem) || item === activeItem;\n\n return (\n \n
    \n {item?.items.map((subItem) => (\n \n ))}\n
    \n \n );\n};\n\nexport const Sidebar1 = () => {\n const [activeItem, setActiveItem] = useState(\"\");\n\n const handleClick = (item) => {\n console.log(\"activeItem\", activeItem);\n setActiveItem(item !== activeItem ? item : \"\");\n };\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar1/styles.css", "content": "* {\n box-sizing: border-box;\n}\n\n.page.sidebar-1-page {\n margin: 0;\n background: #12131a;\n font-family: \"Euclid Circular A\";\n}\n\n.sidebar-1 button {\n background: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n}\n\n.sidebar-1 {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 260px;\n height: 100%;\n padding: 0 16px;\n background: #1d212a;\n border-right: 1px solid #2e303e;\n transition: width 0.4s;\n}\n\n.sidebar-1 .sidebar-header {\n display: flex;\n align-items: center;\n height: 72px;\n padding: 0 1.25rem 0 0;\n border-bottom: 1px solid #2e303e;\n color: #e1ecff;\n}\n\n.sidebar-1 .sidebar-header button {\n width: 54px;\n}\n\n.sidebar-1 .sidebar-logo {\n height: 20px;\n}\n\n.sidebar-1 button {\n position: relative;\n display: flex;\n gap: 16px;\n align-items: center;\n height: 50px;\n width: 100%;\n border-radius: 6px;\n font-family: inherit;\n font-size: 16px;\n font-weight: 400;\n line-height: 1;\n padding: 0 16px;\n color: #e1ecff;\n transition: background 0.3s;\n}\n\n.sidebar-1 button span:nth-child(2) {\n flex: 1 1 auto;\n}\n\n.sidebar-1 button:is(.active, :hover) {\n background: #004fee;\n color: #e1ecff;\n}\n\n.sidebar-1 button span {\n transition: 0.3s;\n}\n\n.sidebar-1 button.active > span:nth-child(3) {\n rotate: -180deg;\n}\n\n.sidebar-1 button:not(.active):hover {\n background: #2e303e;\n}\n\n.sidebar-1 .sub-nav button.active::before {\n background: #e1ecff;\n}\n\n.sidebar-1 .sub-nav {\n overflow: hidden;\n /* height: 0; */\n transition: 0.5s;\n}\n\n/* .sub-nav.open {\n height: 200px;\n} */\n\n.sidebar-1 .sub-nav button {\n padding-left: 54px;\n}\n\n.sidebar-1 .sub-nav button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 25px;\n translate: 0 -50%;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: #e1ecff;\n}\n\n.sidebar-1 .material-symbols-outlined {\n font-size: 22px;\n}\n" }, { "path": "src/components/sidebars/Sidebar10/Sidebar10.css", "content": ".page.sidebar-10-page {\n background: url(\"./bg.jpg\") #6a6eb7;\n background-size: cover;\n background-position: -200px;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.page.sidebar-10-page::after {\n content: \"\";\n position: fixed;\n z-index: 0;\n inset: 0;\n background: linear-gradient(rgb(0 0 0 / 80%), rgb(0 0 0 / 50%));\n}\n\n.sidebar-10 {\n position: absolute;\n z-index: 2;\n top: 20px;\n left: 20px;\n border-radius: 10px;\n width: 280px;\n padding: 8px;\n background: rgb(255 255 255 / 4%);\n backdrop-filter: blur(10px);\n}\n\n.sidebar-10-header {\n display: flex;\n align-items: center;\n padding: 0 16px;\n gap: 9px;\n height: 56px;\n padding-bottom: 8px;\n font-size: 16px;\n font-weight: 400;\n}\n\n.sidebar-10-header > span:first-child {\n font-size: 20px;\n}\n\n.sidebar-10 ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.sidebar-10 button {\n background: transparent;\n color: inherit;\n border: 0;\n border-radius: 12px;\n width: 100%;\n height: 48px;\n padding: 0 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-family: inherit;\n cursor: pointer;\n opacity: 0.75;\n transition: 0.3s;\n}\n\n.sidebar-10 button:hover {\n opacity: 1;\n}\n\n.sidebar-10 button span {\n font-size: 20px;\n}\n\n.sidebar-10 button span:first-child {\n color: #a0a0b8;\n}\n\n.sidebar-10 button span:nth-child(3) {\n margin-left: auto;\n rotate: 90deg;\n transition: 0.2s;\n}\n\n.sidebar-10 .block.open button span:nth-child(3) {\n rotate: 0deg;\n}\n\n.sidebar-10 .blocks {\n display: grid;\n gap: 8px;\n}\n\n.sidebar-10 .block {\n overflow: hidden;\n position: relative;\n border-radius: 12px;\n background: rgb(255 255 255 / 3%);\n transition: 0.3s;\n}\n\n.sidebar-10 .block:hover {\n background: rgb(255 255 255 / 6%);\n}\n\n.sidebar-10 .block.open {\n background: rgb(255 255 255 / 6%);\n}\n\n.sidebar-10 .block-inner {\n height: 0;\n overflow: hidden;\n transition: height 0.5s;\n}\n\n.block-items button {\n border-radius: 0;\n opacity: 0.55;\n transition: 0.3s;\n}\n\n.block-items button:hover {\n opacity: 1;\n background: rgb(255 255 255 / 3%);\n}\n" }, { "path": "src/components/sidebars/Sidebar10/Sidebar10.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./Sidebar10.css\";\n\nconst blocks = [\n {\n name: \"Hosting\",\n icon: \"storage\",\n items: [\n { name: \"Cloud\", icon: \"cloud\" },\n { name: \"DNS\", icon: \"dns\" },\n { name: \"API Keys\", icon: \"key\" },\n ],\n },\n {\n name: \"Storage\",\n icon: \"database\",\n items: [\n { name: \"Administration\", icon: \"build\" },\n { name: \"Management\", icon: \"hard_drive\" },\n ],\n },\n {\n name: \"Security\",\n icon: \"security\",\n items: [\n { name: \"Firewall\", icon: \"explosion\" },\n { name: \"Warnings\", icon: \"warning\" },\n { name: \"Alerts\", icon: \"dangerous\" },\n { name: \"Blocked\", icon: \"block\" },\n ],\n },\n {\n name: \"Profile\",\n icon: \"account_circle\",\n items: [\n { name: \"Account\", icon: \"lock\" },\n { name: \"Theme\", icon: \"palette\" },\n { name: \"Apps\", icon: \"apps\" },\n ],\n },\n];\n\nconst Icon = ({ children }) => (\n {children}\n);\n\nconst Button = ({ name, icon, isOpen, hasToggle, onClick }) => (\n \n);\n\nconst Block = ({ name, icon, items }) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const itemsRef = useRef();\n\n return (\n
  • \n setIsOpen(!isOpen)}\n />\n \n
      \n {items.map((item) => (\n
    • \n
      • \n ))}\n
    \n \n
    • \n );\n};\n\nexport const Sidebar10 = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar11/Sidebar11.css", "content": ".page.sidebar-11-page {\n background: #17132a url(\"./bg.jpg\");\n background-position: -400px;\n background-size: cover;\n overflow: hidden;\n}\n\n.page.sidebar-11-page::after {\n content: \"\";\n position: fixed;\n z-index: 0;\n inset: 0;\n background: linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 0%));\n}\n\n.sidebar-11 {\n position: absolute;\n z-index: 2;\n top: 20px;\n left: 20px;\n bottom: 26px;\n border-radius: 14px;\n width: 56px;\n background: rgb(0 0 0 / 12%);\n backdrop-filter: blur(10px);\n transition: width 0.45s;\n}\n\n.sidebar-11 button {\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.sidebar-11 .material-symbols-outlined {\n font-size: 18px;\n}\n\n.sidebar-11.open {\n width: 190px;\n}\n\n.sidebar-11 .inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 190px;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.sidebar-11 header {\n display: flex;\n align-items: center;\n height: 64px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n padding: 0 6px;\n}\n\n.sidebar-11-burger {\n width: 44px;\n height: 72px;\n display: grid;\n place-items: center;\n color: #f9f9f9;\n}\n\n.sidebar-11 header > img {\n height: 18px;\n}\n\n.sidebar-11 nav {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n padding: 0 6px;\n gap: 2px;\n}\n\n.sidebar-11 nav > button {\n display: flex;\n gap: 12px;\n align-items: center;\n height: 44px;\n width: 44px;\n font-family: \"Euclid Circular B\";\n font-size: 14px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 12px;\n border-radius: 8px;\n opacity: 0.7;\n color: #f9f9f9;\n transition: 0.3s;\n}\n\n.sidebar-11 nav > button:hover {\n background: rgb(255 255 255 / 6%);\n opacity: 1;\n}\n\n.sidebar-11 nav > button:last-child {\n margin-top: auto;\n margin-bottom: 8px;\n}\n\n.sidebar-11:not(.open) nav > button:hover p {\n position: relative;\n opacity: 1;\n background: #121113;\n backdrop-filter: blur(10px);\n padding: 8px 12px;\n border-radius: 6px;\n translate: 16px 0;\n}\n\n.sidebar-11:not(.open) nav > button:hover p::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: -4px;\n height: 8px;\n width: 8px;\n translate: 0 -50%;\n transform: rotate(45deg);\n border-radius: 1px;\n background: inherit;\n}\n\n.sidebar-11 header > img,\n.sidebar-11 nav > button p {\n opacity: 0;\n pointer-events: none;\n transition: 0.25s;\n}\n\n.sidebar-11.open :is(nav button p, header > img) {\n opacity: 1;\n}\n\n.sidebar-11.open nav > button {\n width: 100%;\n}\n" }, { "path": "src/components/sidebars/Sidebar11/Sidebar11.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar11.css\";\n\nconst navItems = [\"home\", \"build\", \"cloud\", \"stacks\", \"mail\"];\n\nexport const Sidebar11 = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar12/Sidebar12.css", "content": ".page.sidebar-12-page {\n background: url(\"./bg.jpg\");\n background-position: -360px;\n background-size: cover;\n overflow: hidden;\n font-family: \"Euclid Circular B\", \"Poppins\", sans-serif;\n}\n* {\n box-sizing: border-box;\n}\n\n.sidebar-12 {\n position: fixed;\n top: 24px;\n left: 24px;\n bottom: 24px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 260px;\n border-radius: 16px;\n padding: 0 16px;\n background: rgb(0 0 0 / 19%);\n backdrop-filter: blur(30px);\n}\n\n.sidebar-12 header {\n display: flex;\n align-items: center;\n height: 72px;\n padding-top: 10px;\n border-bottom: 1px solid rgb(255 255 255 / 8%);\n}\n\n.sidebar-12 header img {\n height: 44px;\n}\n\n.sidebar-12 button {\n position: relative;\n display: flex;\n gap: 12px;\n align-items: center;\n height: 50px;\n width: 100%;\n border-radius: 6px;\n font-size: 16px;\n font-family: inherit;\n padding: 0 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: rgb(255 255 255 / 95%);\n transition: 0.3s;\n}\n\n.sidebar-12 button.active {\n background: rgb(0 0 0 / 18%);\n}\n\n.sidebar-12 button:not(.active):hover {\n background: rgb(0 0 0 / 8%);\n}\n\n.sidebar-12 i {\n font-size: 20px;\n width: 20px;\n}\n\n.sidebar-12 button i:last-child {\n margin-left: auto;\n transition: 0.3s;\n}\n\n.sidebar-12 button.active i:last-child {\n rotate: -180deg;\n}\n\n.sidebar-12 ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.sidebar-12 .sub-menu {\n overflow: hidden;\n transition: height 0.5s ease;\n}\n\n.sidebar-12 .sub-menu ul {\n padding-left: 0;\n}\n\n.sidebar-12 .sub-menu button {\n padding-left: 48px;\n}\n\n.sidebar-12 .sub-menu button::before {\n content: \"\";\n position: absolute;\n left: 22px;\n top: 50%;\n transform: translateY(-50%);\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: rgb(255 255 255 / 35%);\n}\n" }, { "path": "src/components/sidebars/Sidebar12/Sidebar12.jsx", "content": "import { useRef, useState } from \"react\";\nimport \"./Sidebar12.css\";\nimport logo from \"./logo.svg\";\n\nconst SIDEBAR_ITEMS = [\n {\n id: \"dashboard\",\n label: \"Dashboard\",\n icon: \"ai-dashboard\",\n type: \"page\",\n },\n {\n id: \"create\",\n label: \"Create\",\n icon: \"ai-folder-add\",\n type: \"submenu\",\n children: [\n { id: \"article\", label: \"Article\" },\n { id: \"document\", label: \"Document\" },\n { id: \"slides\", label: \"Slides\" },\n ],\n },\n {\n id: \"account\",\n label: \"Account\",\n icon: \"ai-lock-on\",\n type: \"submenu\",\n children: [\n { id: \"admin\", label: \"Admin\" },\n { id: \"display\", label: \"Display\" },\n { id: \"appearance\", label: \"Appearance\" },\n { id: \"preferences\", label: \"Preferences\" },\n ],\n },\n {\n id: \"profile\",\n label: \"Profile\",\n icon: \"ai-person\",\n type: \"submenu\",\n children: [\n { id: \"avatar\", label: \"Avatar\" },\n { id: \"theme\", label: \"Theme\" },\n ],\n },\n {\n id: \"notifications\",\n label: \"Notifications\",\n icon: \"ai-bell\",\n type: \"page\",\n },\n {\n id: \"products\",\n label: \"Products\",\n icon: \"ai-cart\",\n type: \"page\",\n },\n {\n id: \"settings\",\n label: \"Settings\",\n icon: \"ai-gear\",\n type: \"page\",\n },\n];\n\nexport const Sidebar12 = () => {\n const [activeItem, setActiveItem] = useState(\"dashboard\");\n const [openSubmenu, setOpenSubmenu] = useState(null);\n\n const submenuRefs = useRef({});\n\n const getSubmenuHeight = (id) => {\n const el = submenuRefs.current[id];\n if (!el) return 0;\n return el.getBoundingClientRect().height;\n };\n\n const handlePageClick = (id) => {\n setActiveItem(id);\n setOpenSubmenu(null);\n };\n\n const handleSubmenuToggle = (id) => {\n setActiveItem(id);\n setOpenSubmenu((prev) => (prev === id ? null : id));\n };\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar13/Sidebar13.css", "content": ".page.sidebar-13-page {\n background: url(\"./bg.jpg\");\n background-position: -380px;\n background-size: cover;\n overflow: hidden;\n font-family: \"Euclid Circular B\", \"Poppins\", sans-serif;\n}\n* {\n box-sizing: border-box;\n}\n\n.title {\n position: absolute;\n top: 160px;\n left: 50%;\n translate: -50% 0;\n}\n\n.title h2,\n.title h3 {\n margin: 0;\n font-weight: 400;\n text-align: center;\n text-shadow: 0 0 10px rgb(0 0 0 / 28%);\n}\n\n.title h2 {\n margin: 0 0 8px;\n}\n\n.title h3 {\n letter-spacing: 1px;\n opacity: 0.6;\n font-size: 14px;\n}\n\n.sidebar-13 {\n position: fixed;\n top: 240px;\n left: auto;\n right: auto;\n bottom: -40px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 260px;\n border-radius: 16px;\n padding: 0 16px;\n background: rgb(0 0 0 / 19%);\n backdrop-filter: blur(30px);\n}\n\n.sidebar-13 header {\n display: flex;\n align-items: center;\n height: 72px;\n padding-top: 10px;\n border-bottom: 1px solid rgb(255 255 255 / 8%);\n}\n\n.sidebar-13 header img {\n height: 24px;\n margin-left: 16px;\n}\n\n.sidebar-13 button {\n position: relative;\n display: flex;\n gap: 12px;\n align-items: center;\n height: 50px;\n width: 100%;\n border-radius: 6px;\n font-size: 16px;\n font-family: inherit;\n padding: 0 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: rgb(255 255 255 / 95%);\n transition: 0.3s;\n}\n\n.sidebar-13 button.active {\n background: rgb(0 0 0 / 18%);\n}\n\n.sidebar-13 button:not(.active):hover {\n background: rgb(0 0 0 / 8%);\n}\n\n.sidebar-13 ion-icon {\n font-size: 19px;\n width: 20px;\n}\n\n.sidebar-13 button ion-icon:last-child {\n margin-left: auto;\n transition: 0.3s;\n}\n\n.sidebar-13 button.active ion-icon:last-child {\n rotate: -180deg;\n}\n\n.sidebar-13 ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.sidebar-13 .sub-menu {\n overflow: hidden;\n transition: height 0.5s ease;\n}\n\n.sidebar-13 .sub-menu ul {\n padding-left: 0;\n}\n\n.sidebar-13 .sub-menu button {\n padding-left: 48px;\n}\n\n.sidebar-13 .sub-menu button::before {\n content: \"\";\n position: absolute;\n left: 22px;\n top: 50%;\n transform: translateY(-50%);\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: rgb(255 255 255 / 35%);\n}\n" }, { "path": "src/components/sidebars/Sidebar13/Sidebar13.jsx", "content": "import { useRef, useState, useLayoutEffect } from \"react\";\nimport \"./Sidebar13.css\";\nimport logo from \"./logo.svg\";\n\nconst SIDEBAR_ITEMS = [\n { id: \"dashboard\", label: \"Dashboard\", icon: \"grid-outline\", type: \"page\" },\n {\n id: \"create\",\n label: \"Create\",\n icon: \"document-text-outline\",\n type: \"submenu\",\n children: [\n { id: \"article\", label: \"Article\" },\n { id: \"document\", label: \"Document\" },\n { id: \"slides\", label: \"Slides\" },\n ],\n },\n {\n id: \"account\",\n label: \"Account\",\n icon: \"lock-closed-outline\",\n type: \"submenu\",\n children: [\n { id: \"admin\", label: \"Admin\" },\n { id: \"display\", label: \"Display\" },\n { id: \"appearance\", label: \"Appearance\" },\n { id: \"preferences\", label: \"Preferences\" },\n ],\n },\n {\n id: \"profile\",\n label: \"Profile\",\n icon: \"person-outline\",\n type: \"submenu\",\n children: [\n { id: \"avatar\", label: \"Avatar\" },\n { id: \"theme\", label: \"Theme\" },\n ],\n },\n {\n id: \"notifications\",\n label: \"Notifications\",\n icon: \"notifications-outline\",\n type: \"page\",\n },\n { id: \"saved\", label: \"Favourites\", icon: \"heart-outline\", type: \"page\" },\n { id: \"products\", label: \"Products\", icon: \"cart-outline\", type: \"page\" },\n { id: \"settings\", label: \"Settings\", icon: \"settings-outline\", type: \"page\" },\n];\n\nexport const Sidebar13 = () => {\n const [activeItem, setActiveItem] = useState(\"dashboard\");\n const [openSubmenu, setOpenSubmenu] = useState(null);\n\n const handlePageClick = (id) => {\n setActiveItem(id);\n setOpenSubmenu(null);\n };\n\n const handleSubmenuToggle = (id) => {\n setActiveItem((prev) => (prev === id ? null : id));\n setOpenSubmenu((prev) => (prev === id ? null : id));\n };\n\n return (\n
    \n
    \n

    React Sidebar

    \n

    @FRONTENDJOE

    \n
    \n \n
    \n );\n};\n\nconst SidebarItem = ({\n item,\n activeItem,\n isOpen,\n onPageClick,\n onSubmenuToggle,\n}) => {\n const isActive = activeItem === item.id;\n\n return (\n
  • \n \n item.type === \"page\" ? onPageClick(item.id) : onSubmenuToggle(item.id)\n }\n >\n \n

    {item.label}

    \n {item.type === \"submenu\" && (\n \n )}\n \n\n {item.type === \"submenu\" && (\n \n )}\n
    • \n );\n};\n\nconst Submenu = ({ isOpen, activeItem, items }) => {\n const listRef = useRef(null);\n const [height, setHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (listRef.current) {\n setHeight(listRef.current.getBoundingClientRect().height);\n }\n }, [items]);\n\n return (\n \n
      \n {items.map((child) => (\n
    • \n \n
      • \n ))}\n
    \n \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar14/Sidebar14.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"build\", \"cloud\", \"mail\", \"favorite\"];\n\nconst Icon = ({ icon }) => (\n {icon}\n);\n\nconst Button = ({ item }) => (\n \n);\n\nconst Header = () => (\n
    \n \n
    \n);\n\nexport const Sidebar14 = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n
    \n setIsOpen(!isOpen)}\n >\n \n \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar14/styles.css", "content": ".page.sidebar-14-page {\n background: #1c1b23;\n}\n\n.page.sidebar-14-page button {\n background: transparent;\n border: 0;\n cursor: pointer;\n}\n\n.sidebar-14 {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n bottom: 0;\n width: 56px;\n background: #5331ff;\n backdrop-filter: blur(10px);\n transition: 0.45s;\n}\n\n.sidebar-14 .material-symbols-outlined {\n font-size: 20px;\n}\n\n.sidebar-14.open {\n width: 190px;\n overflow: hidden;\n}\n\n.sidebar-14 .inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 190px;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.sidebar-14 header {\n display: flex;\n align-items: center;\n height: 64px;\n padding: 0 6px 0 48px;\n}\n\n.sidebar-14-burger {\n position: fixed;\n z-index: 2;\n top: 0;\n left: 0;\n width: 56px;\n height: 64px;\n display: grid;\n place-items: center;\n color: #f9f9f9;\n}\n\n.sidebar-14 header > img {\n height: 18px;\n}\n\n.sidebar-14 nav {\n display: flex;\n flex-direction: column;\n padding: 0 8px 20px;\n gap: 2px;\n flex: 1 1 auto;\n}\n\n.sidebar-14 nav > button {\n display: flex;\n gap: 12px;\n align-items: center;\n height: 40px;\n width: 40px;\n font-family: \"Euclid Circular A\";\n font-size: 14px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 10px;\n border-radius: 8px;\n color: #f9f9f9;\n}\n\n.sidebar-14 nav > button:last-child {\n margin-top: auto;\n}\n\n.sidebar-14 nav > button:hover {\n background: rgb(0 0 0 / 24%);\n}\n\n.sidebar-14:not(.open) nav p {\n visibility: hidden;\n}\n\n.sidebar-14:not(.open) nav > button:hover p {\n opacity: 1;\n visibility: visible;\n background: #2e2a47;\n padding: 5px 10px;\n font-size: 13px;\n border-radius: 6px;\n translate: 12px 0;\n}\n\n.sidebar-14 header > img,\n.sidebar-14 nav > button p {\n opacity: 0;\n transition: 0.25s;\n}\n\n.sidebar-14.open :is(nav button p, header > img) {\n opacity: 1;\n}\n\n.sidebar-14.open nav > button {\n width: 100%;\n}\n\n@media (width <= 400px) {\n .sidebar-14 {\n translate: -100% 0;\n }\n\n .sidebar-14.open {\n translate: 0;\n }\n\n .sidebar-14:not(.open) button span {\n transition: 0.3s;\n opacity: 0;\n }\n}\n" }, { "path": "src/components/sidebars/Sidebar15/Sidebar15.css", "content": ".page.sidebar-15-page {\n --color-bg: #f4f6fa;\n --color-primary: #121926;\n --color-muted: #9fa4af;\n --color-hover: #e8ecf4;\n margin: 0;\n background: #dadee5;\n color: #5d6674;\n height: 100vh;\n font-family: \"Euclid Circular A\";\n}\n\n.sidebar-15 h2,\n.sidebar-15 h3 {\n margin: 0;\n}\n\n.sidebar-15 {\n position: fixed;\n overflow: hidden;\n top: 24px;\n left: 18px;\n bottom: 28px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 80px;\n border-radius: 18px;\n transition: 0.4s;\n background: #ffffff;\n}\n\n.sidebar-15 button {\n border: 0;\n background: transparent;\n font-size: 22px;\n color: inherit;\n border-radius: 8px;\n font-family: inherit;\n cursor: pointer;\n transition: 0.3s;\n}\n\n.sidebar-15 .left,\n.sidebar-15 .right {\n position: absolute;\n top: 0;\n bottom: 0;\n transition: 0.4s;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.sidebar-15 .left {\n z-index: 1;\n left: 0;\n width: 80px;\n background: #ffffff;\n}\n\n.sidebar-15 .left img {\n width: 40px;\n margin: 24px 0 28px;\n}\n\n.sidebar-15 .left button {\n width: 44px;\n height: 44px;\n display: grid;\n place-items: center;\n}\n\n.sidebar-15 .left button:hover {\n background: var(--color-bg);\n color: #384251;\n}\n\n.sidebar-15 .left div:last-of-type {\n margin-top: auto;\n margin-bottom: 20px;\n}\n\n.sidebar-15 .right {\n left: 76px;\n height: 100%;\n position: relative;\n}\n\n.sidebar-15 .right-inner {\n position: absolute;\n inset: 8px;\n left: 4px;\n border-radius: 12px;\n background: var(--color-bg);\n}\n\n.sidebar-15 .right .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 16px 28px;\n}\n\n.sidebar-15 .right h2 {\n font-size: 16px;\n font-weight: 600;\n}\n\n.sidebar-15 .right h3 {\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted);\n}\n\n.sidebar-15 .right nav {\n padding: 0 12px;\n}\n\n.sidebar-15 .right button {\n padding: 0 12px;\n background: transparent;\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 44px;\n font-size: 14px;\n}\n\n.sidebar-15 .right button i:last-child {\n opacity: 0;\n font-size: 16px;\n margin-left: auto;\n transition: 0.3s;\n}\n\n.sidebar-15 .right button:hover {\n background: var(--color-hover);\n color: #384251;\n}\n\n.sidebar-15 .right button:hover i:last-child {\n opacity: 1;\n color: var(--color-muted);\n}\n\n.sidebar-15 .right button i {\n font-size: 18px;\n}\n\n.sidebar-15:hover {\n width: 300px;\n}\n\n.sidebar-15:hover .right {\n width: 225px;\n}\n\n.sidebar-15 .submenu {\n position: relative;\n list-style: none;\n margin: 0;\n padding: 8px 0 8px 29px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.sidebar-15 .submenu::before {\n content: \"\";\n position: absolute;\n top: 8px;\n left: 21px;\n bottom: 8px;\n width: 1px;\n background: var(--color-muted);\n opacity: 0.33;\n}\n\n.sidebar-15 .submenu li {\n white-space: nowrap;\n height: 36px;\n padding-left: 12px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: 0.3s;\n}\n\n.sidebar-15 .submenu li:hover {\n background: var(--color-hover);\n color: #384251;\n cursor: pointer;\n}\n\n.sidebar-15 .submenu .badge {\n font-size: 10px;\n padding: 3px 5px;\n border-radius: 4px;\n background: var(--color-primary);\n color: #ffffff;\n margin-right: 12px;\n}\n" }, { "path": "src/components/sidebars/Sidebar15/Sidebar15.jsx", "content": "import \"./Sidebar15.css\";\nimport logo from \"./logo.svg\";\n\nconst leftTopItems = [\n \"ai-home-alt1\",\n \"ai-heart\",\n \"ai-mention\",\n \"ai-chat-dots\",\n \"ai-plus\",\n];\n\nconst leftBottomItems = [\"ai-gear\", \"ai-link-out\"];\n\nconst navItems = [\n { icon: \"ai-dashboard\", label: \"Dashboard\" },\n { icon: \"ai-shipping-box-v1\", label: \"Products\" },\n { icon: \"ai-person\", label: \"Customers\" },\n {\n icon: \"ai-open-envelope\",\n label: \"Messages\",\n actionIcon: \"ai-plus\",\n submenu: [\n { label: \"Drafts\", count: 10 },\n { label: \"Scheduled\", count: 4 },\n { label: \"Published\", count: 20 },\n ],\n },\n { icon: \"ai-image\", label: \"Images\" },\n { icon: \"ai-network\", label: \"Network\" },\n { icon: \"ai-data\", label: \"Inventory\" },\n { icon: \"ai-hashtag\", label: \"Hashtags\" },\n];\n\nconst IconButton = ({ icon }) => (\n \n);\n\nconst LeftSidebar = () => (\n
    \n \"Logo\"\n\n {leftTopItems.map((icon) => (\n \n ))}\n\n
    \n {leftBottomItems.map((icon) => (\n \n ))}\n
    \n
    \n);\n\nconst SidebarHeader = () => (\n
    \n
    \n

    Untitled UI

    \n

    store.untitledui.com

    \n
    \n \n
    \n);\n\nconst Submenu = ({ items }) => (\n
      \n {items.map((item) => (\n
    • \n {item.label}\n {item.count}\n
      • \n ))}\n
    \n);\n\nconst NavItem = ({ item }) => (\n <>\n \n\n {item.submenu && }\n \n);\n\nconst Navigation = () => (\n \n);\n\nconst RightSidebar = () => (\n
    \n
    \n \n \n
    \n
    \n);\n\nexport const Sidebar15 = () => {\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar2/Sidebar2.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"settings\", \"build\", \"cloud\", \"mail\", \"bookmark\"];\n\nexport const Sidebar2 = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar2/styles.css", "content": ".page.sidebar-2-page {\n background: #17132a;\n}\n\n.sidebar-2 {\n position: absolute;\n overflow: hidden;\n top: 0;\n left: 0;\n width: 56px;\n height: 100%;\n background: #4f2cd4;\n transition: width 0.4s;\n}\n\n.sidebar-2.open {\n width: 260px;\n}\n\n.sidebar-2 .inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 260px;\n}\n\n.sidebar-2 header {\n display: flex;\n align-items: center;\n height: 64px;\n padding: 0 6px;\n background: rgb(0 0 0 / 25%);\n}\n\n.sidebar-2-burger {\n width: 44px;\n height: 72px;\n display: grid;\n place-items: center;\n color: #f9f9f9;\n}\n\n.sidebar-2 header > img {\n height: 28px;\n}\n\n.sidebar-2 nav {\n display: grid;\n padding: 6px;\n gap: 2px;\n}\n\n.sidebar-2 nav > button {\n display: flex;\n gap: 12px;\n align-items: center;\n height: 44px;\n width: 44px;\n font-family: \"Poppins\";\n font-size: 16px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 12px;\n border-radius: 8px;\n color: #f9f9f9;\n}\n\n.sidebar-2 nav > button:hover {\n background: rgb(0 0 0 / 30%);\n}\n\n.sidebar-2 header > img,\n.sidebar-2 nav > button p {\n opacity: 0;\n transition: 0.3s;\n}\n\n.sidebar-2.open :is(nav button p, header > img) {\n opacity: 1;\n}\n\n.sidebar-2.open nav > button {\n width: 100%;\n}\n" }, { "path": "src/components/sidebars/Sidebar3/Sidebar3.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"settings\", \"build\", \"cloud\", \"mail\"];\n\nexport const Sidebar3 = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar3/styles.css", "content": ".page.sidebar-3-page {\n background: #17132a url(\"./bg.jpeg\");\n background-size: cover;\n}\n\n.page.sidebar-3-page::after {\n content: \"\";\n position: fixed;\n z-index: 0;\n inset: 0;\n background: rgb(0 0 0 / 15%);\n}\n\n.sidebar-3 {\n position: absolute;\n z-index: 2;\n top: 20px;\n left: 20px;\n bottom: 20px;\n border-radius: 8px;\n width: 56px;\n background: rgb(0 0 0 / 25%);\n backdrop-filter: blur(10px);\n transition: width 0.45s;\n}\n\n.sidebar-3 button {\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.sidebar-3 .material-symbols-outlined {\n font-size: 20px;\n}\n\n.sidebar-3.open {\n width: 190px;\n}\n\n.sidebar-3 .inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 190px;\n}\n\n.sidebar-3 header {\n display: flex;\n align-items: center;\n height: 64px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n padding: 0 6px;\n}\n\n.sidebar-3-burger {\n width: 44px;\n height: 72px;\n display: grid;\n place-items: center;\n color: #f9f9f9;\n}\n\n.sidebar-3 header > img {\n height: 18px;\n}\n\n.sidebar-3 nav {\n display: grid;\n padding: 0 6px;\n gap: 2px;\n}\n\n.sidebar-3 nav > button {\n display: flex;\n gap: 12px;\n align-items: center;\n height: 44px;\n width: 44px;\n font-family: \"Poppins\";\n font-size: 14px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 12px;\n border-radius: 8px;\n opacity: 0.7;\n color: #f9f9f9;\n}\n\n.sidebar-3 nav > button:hover {\n background: rgb(0 0 0 / 30%);\n opacity: 1;\n}\n\n.sidebar-3:not(.open) nav > button:hover p {\n opacity: 1;\n background: rgb(0 0 0 / 70%);\n padding: 4px 8px;\n border-radius: 6px;\n translate: 10px 0;\n}\n\n.sidebar-3 header > img,\n.sidebar-3 nav > button p {\n opacity: 0;\n transition: 0.25s;\n}\n\n.sidebar-3.open :is(nav button p, header > img) {\n opacity: 1;\n}\n\n.sidebar-3.open nav > button {\n width: 100%;\n}\n" }, { "path": "src/components/sidebars/Sidebar4/Sidebar4.css", "content": "* {\n box-sizing: border-box;\n}\n\n.page.sidebar-4-page {\n background: #36367f;\n}\n\n.sidebar-4 button {\n background: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.sidebar-4 {\n position: absolute;\n overflow: hidden;\n top: 20px;\n left: 20px;\n bottom: 30px;\n width: 64px;\n border-radius: 16px;\n background: #21214c;\n transition: width 0.4s;\n}\n\n.sidebar-4:hover {\n width: 260px;\n}\n\n.sidebar-4 .inner {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 260px;\n}\n\n.sidebar-4 .header {\n display: flex;\n align-items: center;\n height: 72px;\n padding: 0 20px;\n background: rgb(0 0 0 / 15%);\n}\n\n.sidebar-4 .header h1 {\n margin-left: 12px;\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 2px;\n}\n\n.sidebar-4 .logo {\n height: 28px;\n scale: 1.1;\n transition: 0.5s;\n}\n\n.sidebar-4 .menu {\n position: relative;\n display: grid;\n}\n\n.sidebar-4 .menu::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 56px;\n width: 6px;\n background: #6154f7;\n translate: 0 var(--top);\n transition: 0.5s;\n}\n\n.sidebar-4 .menu button {\n display: flex;\n gap: 16px;\n align-items: center;\n height: 56px;\n width: 100%;\n font-family: \"Poppins\";\n font-size: 17px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 22px;\n color: rgb(255 255 255 / 60%);\n cursor: pointer;\n opacity: 0.8;\n transition: 0.5s;\n}\n\n.sidebar-4:hover .menu button:hover:not(.active) {\n background: rgb(0 0 0 / 8%);\n}\n\n.sidebar-4 .menu :is(button:hover, .active) {\n background: rgb(0 0 0 / 35%);\n color: rgb(255 255 255 / 100%);\n opacity: 1;\n}\n\n.sidebar-4:hover .menu .active {\n cursor: default;\n}\n\n.sidebar-4 .menu button:hover > span {\n opacity: 1;\n}\n\n.sidebar-4 .menu button p,\n.sidebar-4 .header h1 {\n opacity: 0;\n transition: 0.5s;\n}\n\n.sidebar-4:hover :is(.sidebar-4 .menu button p, .sidebar-4 .header h1) {\n opacity: 1;\n}\n\n.sidebar-4:hover .logo {\n scale: 1;\n}\n\n.sidebar-4 .menu button > img {\n width: 24px;\n height: 24px;\n}\n" }, { "path": "src/components/sidebars/Sidebar4/Sidebar4.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.png\";\nimport \"./Sidebar4.css\";\n\nconst navItems = [\n \"home\",\n \"dashboard\",\n \"mail\",\n \"cloud\",\n \"workspaces\",\n \"settings\",\n];\n\nexport const Sidebar4 = () => {\n const [active, setActive] = useState(1);\n\n const goto = (index) => setActive(index);\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar5/Sidebar5.css", "content": ".page.sidebar-5-page {\n margin: 0;\n background: #1c376d;\n height: 100vh;\n overflow: hidden;\n}\n\n.lni {\n font-size: 24px;\n}\n\n.sidebar-5 button {\n background: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.sidebar-5 {\n position: absolute;\n overflow: hidden;\n top: 0;\n left: 0;\n bottom: 0;\n width: 260px;\n background: rgb(0 0 0 / 40%);\n}\n\n.sidebar-5 .sidebar-inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 260px;\n}\n\n.sidebar-5 .sidebar-header {\n display: flex;\n align-items: center;\n height: 72px;\n padding-top: 10px;\n}\n\n.sidebar-5 .sidebar-burger {\n width: 60px;\n height: 60px;\n display: grid;\n place-items: center;\n color: #f9f9f9;\n}\n\n.sidebar-5 .sidebar-logo {\n height: 22px;\n}\n\n.sidebar-5 .sidebar-menu {\n display: grid;\n padding: 0 10px;\n}\n\n.sidebar-5 .sidebar-button {\n display: flex;\n gap: 16px;\n align-items: center;\n height: 56px;\n width: 100%;\n font-family: \"Poppins\";\n font-size: 17px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 10px;\n border-radius: 8px;\n color: #b8c2d8;\n opacity: 0.9;\n}\n\n.sidebar-5 .sidebar-button p {\n font-size: 15px;\n margin-left: 1px;\n}\n\n.sidebar-5 .handle {\n position: absolute;\n z-index: 100;\n width: 8px;\n top: 0;\n bottom: 0;\n right: 0;\n user-select: none;\n transition: 0.3s;\n}\n\n.sidebar-5 .handle:hover,\n.sidebar-5 .handle:active {\n background: rgb(255 255 255 / 6%);\n cursor: col-resize;\n}\n" }, { "path": "src/components/sidebars/Sidebar5/Sidebar5.jsx", "content": "import { useRef, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar5.css\";\n\nconst items = [\n {\n name: \"home\",\n icon: \"home-2\",\n },\n {\n name: \"favourites\",\n icon: \"heart\",\n },\n {\n name: \"products\",\n icon: \"cart-2\",\n },\n {\n name: \"testimonials\",\n icon: \"comment-1\",\n },\n {\n name: \"security\",\n icon: \"locked-2\",\n },\n {\n name: \"settings\",\n icon: \"gear-1\",\n },\n];\n\nconst Icon = ({ children }) => ;\n\nexport const Sidebar5 = () => {\n const [width, setWidth] = useState(60);\n const sidebarRef = useRef(null);\n const sidebar = sidebarRef.current;\n\n const resize = (e) => {\n let newWidth = e.clientX - sidebar?.offsetLeft;\n if (newWidth < 60) newWidth = 60;\n if (newWidth > 259) newWidth = 260;\n setWidth(newWidth);\n };\n\n const stopResize = () => {\n document.body.style.cursor = \"default\";\n window.removeEventListener(\"mousemove\", resize);\n window.removeEventListener(\"mouseup\", stopResize);\n };\n\n const initResize = () => {\n document.body.style.cursor = \"col-resize\";\n window.addEventListener(\"mousemove\", resize);\n window.addEventListener(\"mouseup\", stopResize);\n };\n\n return (\n
    \n \n
    \n
    \n
    \n \n \n
    \n \n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar6/Sidebar6.css", "content": "* {\n box-sizing: border-box;\n}\n\n.sidebar-6 {\n --width-open: 260px;\n --width-closed: 64px;\n}\n\n.page.sidebar-6-page {\n background: #474bb7;\n}\n\n.sidebar-6 button {\n background: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.sidebar-6 {\n overflow: hidden;\n position: absolute;\n top: 20px;\n left: 20px;\n bottom: 30px;\n width: var(--width-closed);\n border-radius: 16px;\n background: #1a1a36;\n transition: width 0.3s;\n}\n\n.sidebar-6:hover {\n width: var(--width-open);\n}\n\n.sidebar-6 .toggle-btn {\n position: absolute;\n z-index: 2;\n top: 24px;\n right: -12px;\n display: grid;\n place-items: center;\n padding: 0;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #373153;\n color: #8f8d9b;\n box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n transition: 0.3s;\n}\n\n.sidebar-6 .toggle-btn:hover {\n color: #f9f9f9;\n}\n\n.sidebar-6:hover .toggle-btn {\n rotate: 180deg;\n}\n\n.sidebar-6 .inner {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 260px;\n display: flex;\n flex-direction: column;\n}\n\n.sidebar-6 .header {\n display: flex;\n align-items: center;\n height: 72px;\n width: var(--width-closed);\n padding: 0 20px;\n background: rgb(0 0 0 / 15%);\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n transition: 0.3s;\n}\n\n.sidebar-6:hover .header {\n width: var(--width-open);\n}\n\n.sidebar-6 .header h1 {\n margin-left: 12px;\n font-weight: 500;\n font-size: 16px;\n letter-spacing: 2px;\n}\n\n.sidebar-6 .logo {\n height: 28px;\n}\n\n.sidebar-6 .menu {\n position: relative;\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n}\n\n.sidebar-6 .menu::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 56px;\n width: 6px;\n background: #656aff;\n translate: 0 var(--top);\n transition: 0.3s;\n}\n\n.sidebar-6 .menu button {\n display: flex;\n gap: 16px;\n align-items: center;\n height: 56px;\n width: var(--width-closed);\n font-family: \"Poppins\";\n font-size: 17px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 22px;\n color: #9193b3;\n cursor: pointer;\n opacity: 0.8;\n transition: 0.3s;\n}\n\n.sidebar-6:hover .menu button {\n width: var(--width-open);\n}\n\n.sidebar-6 .menu button.active {\n color: #f9f9f9;\n background: rgb(255 255 255 / 3%);\n opacity: 1;\n}\n\n.sidebar-6 .menu button:not(.active):hover {\n background: rgb(255 255 255 / 2%);\n opacity: 0.9;\n}\n\n.sidebar-6:hover .menu .active {\n cursor: default;\n}\n\n.sidebar-6 .menu button:hover > span {\n opacity: 1;\n}\n\n.sidebar-6 .menu button p,\n.sidebar-6 .header h1 {\n opacity: 0;\n transition: 0.3s;\n}\n\n.sidebar-6 .menu button:hover p {\n transition: 0.1s;\n}\n\n.sidebar-6:hover :is(.sidebar-6 .menu button p, .sidebar-6 .header h1) {\n opacity: 1;\n}\n\n.sidebar-6 .menu button > img {\n width: 24px;\n height: 24px;\n}\n" }, { "path": "src/components/sidebars/Sidebar6/Sidebar6.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar6.css\";\n\nconst navItems = [\n \"dashboard\",\n \"leaderboard\",\n \"groups\",\n \"analytics\",\n \"message\",\n \"settings\",\n];\n\nexport const Sidebar6 = () => {\n const [active, setActive] = useState(1);\n\n const goto = (index) => setActive(index);\n\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar7/Sidebar7.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"build\", \"cloud\", \"mail\", \"favorite\"];\n\nconst Icon = ({ icon }) => (\n {icon}\n);\n\nconst Button = ({ item }) => (\n \n);\n\nconst Header = () => (\n
    \n \n
    \n);\n\nexport const Sidebar7 = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n
    \n setIsOpen(!isOpen)}\n >\n \n \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar7/styles.css", "content": ".page.sidebar-7-page {\n background: #1c1b23;\n}\n\n.page.sidebar-7-page button {\n background: transparent;\n border: 0;\n cursor: pointer;\n}\n\n.sidebar-7 {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n bottom: 0;\n width: 56px;\n background: #5331ff;\n backdrop-filter: blur(10px);\n transition: 0.45s;\n}\n\n.sidebar-7 .material-symbols-outlined {\n font-size: 20px;\n}\n\n.sidebar-7.open {\n width: 190px;\n overflow: hidden;\n}\n\n.sidebar-7 .inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 190px;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.sidebar-7 header {\n display: flex;\n align-items: center;\n height: 64px;\n padding: 0 6px 0 48px;\n}\n\n.sidebar-7-burger {\n position: fixed;\n z-index: 2;\n top: 0;\n left: 0;\n width: 56px;\n height: 64px;\n display: grid;\n place-items: center;\n color: #f9f9f9;\n}\n\n.sidebar-7 header > img {\n height: 18px;\n}\n\n.sidebar-7 nav {\n display: flex;\n flex-direction: column;\n padding: 0 8px 20px;\n gap: 2px;\n flex: 1 1 auto;\n}\n\n.sidebar-7 nav > button {\n display: flex;\n gap: 12px;\n align-items: center;\n height: 40px;\n width: 40px;\n font-family: \"Euclid Circular A\";\n font-size: 14px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 10px;\n border-radius: 8px;\n color: #f9f9f9;\n}\n\n.sidebar-7 nav > button:last-child {\n margin-top: auto;\n}\n\n.sidebar-7 nav > button:hover {\n background: rgb(0 0 0 / 24%);\n}\n\n.sidebar-7:not(.open) nav p {\n visibility: hidden;\n}\n\n.sidebar-7:not(.open) nav > button:hover p {\n opacity: 1;\n visibility: visible;\n background: #2e2a47;\n padding: 5px 10px;\n font-size: 13px;\n border-radius: 6px;\n translate: 12px 0;\n}\n\n.sidebar-7 header > img,\n.sidebar-7 nav > button p {\n opacity: 0;\n transition: 0.25s;\n}\n\n.sidebar-7.open :is(nav button p, header > img) {\n opacity: 1;\n}\n\n.sidebar-7.open nav > button {\n width: 100%;\n}\n\n@media (width <= 400px) {\n .sidebar-7 {\n translate: -100% 0;\n }\n\n .sidebar-7.open {\n translate: 0;\n }\n\n .sidebar-7:not(.open) button span {\n transition: 0.3s;\n opacity: 0;\n }\n}\n" }, { "path": "src/components/sidebars/Sidebar8/Sidebar8.css", "content": ".page.sidebar-8-page {\n --color-hover: #313132;\n --border: 1px solid #2d2d2d;\n margin: 0;\n background: #141414;\n color: #fdffff;\n height: 100vh;\n font-family: \"SF Pro\";\n}\n\n.sidebar-8 header :is(h2, h3) {\n margin: 0;\n}\n\n.sidebar-8 {\n position: fixed;\n overflow: hidden;\n top: 24px;\n left: 24px;\n bottom: 28px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 80px;\n border-radius: 18px;\n border: var(--border);\n transition: 0.4s;\n background: #1c1c1c;\n}\n\n.sidebar-8 button {\n border: 0;\n background: transparent;\n font-size: 22px;\n color: inherit;\n border-radius: 8px;\n font-family: inherit;\n cursor: pointer;\n transition: 0.3s;\n}\n\n.sidebar-8-left,\n.sidebar-8-right {\n position: absolute;\n top: 0;\n bottom: 0;\n transition: 0.4s;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.sidebar-8-left {\n z-index: 1;\n left: 0;\n width: 80px;\n}\n\n.sidebar-8-dots {\n position: absolute;\n top: 10px;\n left: 18px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #ee6c5f;\n}\n\n.sidebar-8-dots::before,\n.sidebar-8-dots::after {\n content: \"\";\n width: inherit;\n height: inherit;\n border-radius: inherit;\n position: inherit;\n}\n\n.sidebar-8-dots::before {\n left: 16px;\n background: #f7bc50;\n}\n\n.sidebar-8-dots::after {\n left: 32px;\n background: #61c453;\n}\n\n.sidebar-8-left img {\n width: 40px;\n margin: 36px 0 14px;\n}\n\n.sidebar-8-left button {\n width: 44px;\n height: 44px;\n display: grid;\n place-items: center;\n opacity: 0.8;\n}\n\n.sidebar-8-left button:hover {\n opacity: 1;\n background: var(--color-hover);\n}\n\n.sidebar-8-left div:last-of-type {\n margin-top: auto;\n margin-bottom: 16px;\n}\n\n.sidebar-8-right {\n left: 76px;\n height: 100%;\n position: relative;\n}\n\n.sidebar-8-right-inner {\n position: absolute;\n inset: 8px;\n left: 6px;\n border-radius: 12px;\n background: #1a1a1a;\n border: var(--border);\n}\n\n.sidebar-8-right header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 30px 16px 18px;\n}\n\n.sidebar-8-right h2 {\n font-size: 16px;\n font-weight: 600;\n}\n\n.sidebar-8-right h3 {\n font-size: 12px;\n font-weight: 500;\n color: #7e7f82;\n}\n\n.sidebar-8-right nav {\n padding: 0 12px;\n}\n\n.sidebar-8-right button {\n padding: 0 12px;\n background: transparent;\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 44px;\n font-size: 15px;\n opacity: 0.7;\n}\n\n.sidebar-8-right button:hover {\n opacity: 1;\n background: var(--color-hover);\n}\n\n.sidebar-8-right button i {\n font-size: 18px;\n}\n\n.sidebar-8:hover {\n width: 300px;\n}\n\n.sidebar-8:hover .sidebar-8-right {\n width: 225px;\n}\n" }, { "path": "src/components/sidebars/Sidebar8/Sidebar8.jsx", "content": "import logo from \"./logo.svg\";\nimport \"./Sidebar8.css\";\n\nconst navItems = [\"home-alt1\", \"heart\", \"mention\", \"plus\"];\n\nconst footerItems = [\"gear\", \"link-out\"];\n\nconst innerItems = [\n {\n name: \"Dashboard\",\n icon: \"dashboard\",\n },\n {\n name: \"Products\",\n icon: \"shipping-box-v1\",\n },\n {\n name: \"Customers\",\n icon: \"person\",\n },\n {\n name: \"Messages\",\n icon: \"open-envelope\",\n },\n {\n name: \"Images\",\n icon: \"image\",\n },\n {\n name: \"Inventory\",\n icon: \"data\",\n },\n {\n name: \"Hashtags\",\n icon: \"hashtag\",\n },\n];\n\nconst Icon = ({ icon }) => ;\n\nconst Button = ({ item }) => (\n \n);\n\nconst Header = () => (\n
    \n
    \n

    Untitled UI

    \n

    store.untitledui.com

    \n
    \n \n
    \n);\n\nexport const Sidebar8 = () => {\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/Sidebar9/Sidebar9.css", "content": ".page.sidebar-9-page {\n background: #17132a url(\"./bg.jpg\");\n background-size: cover;\n}\n\n.page.sidebar-9-page::after {\n content: \"\";\n position: fixed;\n z-index: 0;\n inset: 0;\n background: linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 0%));\n}\n\n.sidebar-9 {\n position: absolute;\n z-index: 2;\n top: 20px;\n left: 20px;\n bottom: 26px;\n border-radius: 14px;\n border: 1px solid rgb(255 255 255 / 6%);\n width: 56px;\n background: rgb(255 255 255 / 6%);\n backdrop-filter: blur(10px);\n transition: width 0.45s;\n}\n\n.sidebar-9 button {\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.sidebar-9 .material-symbols-outlined {\n font-size: 20px;\n}\n\n.sidebar-9.open {\n width: 190px;\n}\n\n.sidebar-9 .inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 190px;\n}\n\n.sidebar-9 header {\n display: flex;\n align-items: center;\n height: 64px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n padding: 0 6px;\n}\n\n.sidebar-9-burger {\n width: 44px;\n height: 72px;\n display: grid;\n place-items: center;\n color: #f9f9f9;\n}\n\n.sidebar-9 header > img {\n height: 18px;\n}\n\n.sidebar-9 nav {\n display: grid;\n padding: 0 6px;\n gap: 2px;\n}\n\n.sidebar-9 nav > button {\n display: flex;\n gap: 12px;\n align-items: center;\n height: 44px;\n width: 44px;\n font-family: \"Euclid Circular B\";\n font-size: 14px;\n text-transform: capitalize;\n line-height: 1;\n padding: 0 12px;\n border-radius: 8px;\n opacity: 0.7;\n color: #f9f9f9;\n transition: 0.3s;\n}\n\n.sidebar-9 nav > button:hover {\n background: rgb(255 255 255 / 6%);\n opacity: 1;\n}\n\n.sidebar-9:not(.open) nav > button:hover p {\n opacity: 1;\n background: rgb(0 0 0 / 20%);\n backdrop-filter: blur(10px);\n padding: 8px 12px;\n border-radius: 6px;\n translate: 10px 0;\n}\n\n.sidebar-9 header > img,\n.sidebar-9 nav > button p {\n opacity: 0;\n pointer-events: none;\n transition: 0.25s;\n}\n\n.sidebar-9.open :is(nav button p, header > img) {\n opacity: 1;\n}\n\n.sidebar-9.open nav > button {\n width: 100%;\n}\n" }, { "path": "src/components/sidebars/Sidebar9/Sidebar9.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar9.css\";\n\nconst navItems = [\"home\", \"security\", \"build\", \"cloud\", \"mail\", \"settings\"];\n\nexport const Sidebar9 = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n
    \n \n
    \n );\n};\n" }, { "path": "src/components/sidebars/index.js", "content": "export * from \"./Sidebar1/Sidebar1\";\nexport * from \"./Sidebar2/Sidebar2\";\nexport * from \"./Sidebar3/Sidebar3\";\nexport * from \"./Sidebar4/Sidebar4\";\nexport * from \"./Sidebar5/Sidebar5\";\nexport * from \"./Sidebar6/Sidebar6\";\nexport * from \"./Sidebar7/Sidebar7\";\nexport * from \"./Sidebar8/Sidebar8\";\nexport * from \"./Sidebar9/Sidebar9\";\nexport * from \"./Sidebar10/Sidebar10\";\nexport * from \"./Sidebar11/Sidebar11\";\nexport * from \"./Sidebar12/Sidebar12\";\nexport * from \"./Sidebar13/Sidebar13\";\nexport * from \"./Sidebar14/Sidebar14\";\nexport * from \"./Sidebar15/Sidebar15\";\n" }, { "path": "src/components/signups/Signup1/Signup1.css", "content": ".page.signup-1-page {\n margin: 0;\n background: #f2f3fe;\n color: #4b5679;\n height: 100vh;\n display: grid;\n place-items: center;\n overflow: hidden;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.signup-1-card {\n --color-primary: #6663e6;\n position: relative;\n overflow: hidden;\n width: 660px;\n height: 440px;\n border-radius: 32px;\n background: #ffffff;\n box-shadow: 0 12px 80px rgba(0, 0, 0, 0.12);\n}\n\n.signup-1-card .card-bg {\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 860px;\n height: 440px;\n rotate: -45deg;\n transform-origin: 0% 100%;\n background: var(--color-primary);\n}\n\n.signup-1-card .card-bg-2 {\n background: var(--color-primary);\n rotate: 0deg;\n opacity: 0;\n right: 0;\n left: auto;\n transform-origin: 100% 100%;\n}\n\n.signup-1-card .card-bg-1.register {\n animation: card-bg-register 1.5s both;\n}\n\n.signup-1-card .card-bg-1.login {\n animation: card-bg-login 1.5s both;\n}\n\n.signup-1-card .card-bg-2.register {\n animation: card-bg-2-register 1.5s both;\n}\n\n.signup-1-card .card-bg-2.login {\n animation: card-bg-2-login 1.5s both;\n}\n\n.signup-1-card .logo {\n position: absolute;\n top: 70px;\n z-index: 2;\n height: 24px;\n transition: 0.3s;\n opacity: 0;\n}\n\n.signup-1-card .logo-1 {\n translate: -280px 0;\n left: 64px;\n}\n\n.signup-1-card .logo-2 {\n translate: 280px 0;\n right: 64px;\n}\n\n.signup-1-card .card-bg.login ~ .logo-1,\n.signup-1-card .card-bg.register ~ .logo-2 {\n opacity: 1;\n translate: 0;\n transition: 0.3s 1.05s;\n}\n\n.signup-1-card .form {\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n bottom: 0;\n width: 50%;\n display: grid;\n place-items: center;\n}\n\n.signup-1-card .form h2 {\n text-align: center;\n font-weight: 500;\n}\n\n.signup-1-card .form form {\n display: grid;\n gap: 12px;\n opacity: 0;\n transition: 0.3s;\n}\n\n.signup-1-card .form a {\n display: inline-flex;\n flex-direction: column;\n gap: 8px;\n color: #a7a7ad;\n cursor: pointer;\n font-size: 14px;\n text-align: center;\n}\n\n.signup-1-card .form p {\n font-size: 14px;\n text-align: center;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 44px;\n color: #a7a7ad;\n}\n\n.signup-1-card .form a em {\n display: block;\n font-style: normal;\n font-size: 15px;\n color: var(--color-primary);\n}\n\n.signup-1-card .form.register {\n translate: 100% 0;\n}\n\n.signup-1-card .form.register form {\n translate: 320px 0;\n}\n\n.signup-1-card .form.login form {\n translate: -320px 0;\n}\n\n.signup-1-card .form.register.active form,\n.signup-1-card .form.login.active form {\n opacity: 1;\n translate: 0;\n transition: 0.5s 1s;\n}\n\n.signup-1-card form input {\n width: 260px;\n padding: 0 12px;\n font-size: 14px;\n background: #f4f4f7;\n}\n\n.signup-1-card form input::placeholder {\n color: #a7a7ad;\n}\n\n.signup-1-card input,\n.signup-1-card button {\n border: 0;\n border-radius: 12px;\n height: 44px;\n font-family: inherit;\n font-size: 16px;\n}\n\n.signup-1-card form button {\n color: #f9f9f9;\n background: var(--color-primary);\n letter-spacing: 1px;\n font-size: 14px;\n}\n\n/* Animations (Global definitions - prefixes not applied to @keyframe names) */\n@keyframes card-bg-register {\n 0% {\n rotate: -45deg;\n }\n 50% {\n opacity: 1;\n }\n 50%,\n 100% {\n rotate: 0deg;\n }\n 50.01%,\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes card-bg-login {\n 0% {\n opacity: 0;\n rotate: 0deg;\n }\n 50% {\n rotate: 0deg;\n opacity: 0;\n }\n 50%,\n 100% {\n rotate: 0;\n }\n 50.01%,\n 100% {\n opacity: 1;\n }\n 100% {\n rotate: -45deg;\n }\n}\n\n@keyframes card-bg-2-register {\n 0%,\n 50% {\n rotate: 0;\n opacity: 0;\n }\n 50.01% {\n opacity: 1;\n rotate: 0deg;\n }\n 100% {\n opacity: 1;\n rotate: 45deg;\n }\n}\n\n@keyframes card-bg-2-login {\n 0% {\n rotate: 45deg;\n opacity: 1;\n }\n 50%,\n 100% {\n rotate: 0deg;\n opacity: 1;\n }\n 50.01%,\n 100% {\n opacity: 0;\n }\n}\n" }, { "path": "src/components/signups/Signup1/Signup1.jsx", "content": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Signup1.css\";\n\nconst CardBackground = ({ view }) => {\n const bgClass = view === \"login\" ? \"register\" : \"login\";\n\n return (\n <>\n
    \n
    \n \n );\n};\n\nconst LogoGroup = ({ logo }) => {\n return (\n <>\n \"logo\"\n \"logo\"\n \n );\n};\n\nconst LoginForm = ({ view, toggleView }) => {\n return (\n
    \n
    \n

    Login

    \n \n \n

    Forgot password?

    \n \n \n Don't have an account? Register here\n \n
    \n
    \n );\n};\n\nconst RegisterForm = ({ view, toggleView }) => {\n return (\n
    \n
    \n

    Register

    \n \n \n \n \n \n Already have an account? Login here\n \n
    \n
    \n );\n};\n\nexport const Signup1 = () => {\n const [view, setView] = useState(\"login\");\n\n const toggleView = () => setView(view === \"login\" ? \"register\" : \"login\");\n\n return (\n
    \n
    \n \n \n \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/signups/index.js", "content": "export * from \"./Signup1/Signup1\";\n" }, { "path": "src/components/tables/Table1/Table1.css", "content": ".table-1-wrapper {\n overflow: auto;\n position: relative;\n z-index: 2;\n width: 440px;\n min-width: 440px;\n max-width: 440px;\n}\n\n.table-1-card table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n}\n\n.table-1-card table th {\n opacity: 0.5;\n font-weight: 400;\n user-select: none;\n text-transform: capitalize;\n background: rgb(255 255 255 / 6%);\n}\n\n.table-1-card table :is(th, td) {\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n height: 36px;\n padding: 0 10px;\n border: 1px solid rgb(255 255 255 / 10%);\n}\n\n.table-1-card table th .draggable {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 6px;\n cursor: col-resize;\n}\n" }, { "path": "src/components/tables/Table1/Table1.jsx", "content": "import { useEffect, useRef, useState, createRef } from \"react\";\nimport \"./Table1.css\";\n\nconst TableHeader = ({ index, column, columnRef, initResize }) => {\n const width = !!initResize ? column.width : \"100%\";\n\n return (\n \n {column.name}\n {!!initResize && (\n initResize(e, index)}\n >\n )}\n \n );\n};\n\nexport const Table1 = ({ columns, data }) => {\n const [columnState, setColumnState] = useState(columns);\n const [columnRefs, setColumnRefs] = useState([]);\n\n const wrapperRef = useRef(null);\n const activeIndex = useRef(null);\n\n const resize = (e) => {\n const columnsCopy = [...columns];\n const column = columnsCopy[activeIndex.current];\n const columnRef = columnRefs[activeIndex.current];\n const nextWidth =\n e.clientX -\n 48 -\n columnRef.current.offsetLeft -\n (wrapperRef.current.offsetLeft - wrapperRef.current.scrollLeft);\n\n console.log(\"nextWidth\", nextWidth);\n\n column.width = nextWidth;\n\n setColumnState(columnsCopy);\n };\n\n const stopResize = () => {\n document.body.style.cursor = \"default\";\n window.removeEventListener(\"mousemove\", resize);\n window.removeEventListener(\"mouseup\", stopResize);\n };\n\n const initResize = (e, index) => {\n activeIndex.current = index;\n e.stopPropagation();\n document.body.style.cursor = \"col-resize\";\n window.addEventListener(\"mousemove\", resize);\n window.addEventListener(\"mouseup\", stopResize);\n };\n\n useEffect(() => {\n setColumnRefs(\n Array(columns.length)\n .fill()\n .map((_, i) => columnRefs[i] || createRef())\n );\n }, []);\n\n return (\n
    \n \n \n \n {columnState.map((column, index) => (\n \n ))}\n \n \n \n {data.map((item) => (\n \n {columnState.map((column) => (\n \n ))}\n \n ))}\n \n \n
    \n {item[column.name]}\n
    \n
    \n );\n};\n" }, { "path": "src/components/tables/Table1/Table1Example.css", "content": ".page.table-1-page {\n background: linear-gradient(45deg, #2c3c5e, #1a2239);\n color: #f9f9f9;\n display: flex;\n align-items: flex-start;\n display: grid;\n place-items: center;\n}\n\n.table-1-card {\n background: rgb(255 255 255 / 3%);\n border: 2px solid rgb(255 255 255 / 3%);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n padding: 24px;\n font-size: 12px;\n}\n\n.table-1-card .header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.table-1-card .header h2 {\n font-weight: 400;\n opacity: 0.6;\n display: flex;\n align-items: center;\n}\n\n.table-1-card .header button {\n background: #2e5fdc;\n color: rgb(255 255 255 / 96%);\n font-size: 12px;\n border: 0;\n border-radius: 20px;\n font-family: inherit;\n padding: 8px 14px;\n}\n" }, { "path": "src/components/tables/Table1/Table1Example.jsx", "content": "import { Table1 } from \"./Table1\";\nimport \"./Table1Example.css\";\nimport logo from \"./logo.svg\";\n\nconst columns = [\n {\n name: \"name\",\n width: 125,\n },\n {\n name: \"age\",\n width: 50,\n },\n {\n name: \"level\",\n width: 170,\n },\n];\n\nconst data = [\n {\n name: \"Alice Johnson\",\n age: 29,\n level: \"Intermediate\",\n languages: [\"Python\", \"JavaScript\", \"HTML\"],\n },\n {\n name: \"Bob Smith\",\n age: 35,\n level: \"Advanced\",\n languages: [\"Java\", \"Kotlin\", \"Scala\"],\n },\n {\n name: \"Charlie Evans\",\n age: 23,\n level: \"Beginner\",\n languages: [\"Python\", \"C++\"],\n },\n {\n name: \"Diana Lee\",\n age: 41,\n level: \"Expert\",\n languages: [\"C#\", \"F#\", \"SQL\"],\n },\n {\n name: \"Edward Kim\",\n age: 28,\n level: \"Intermediate\",\n languages: [\"JavaScript\", \"TypeScript\", \"Node.js\"],\n },\n {\n name: \"Fiona Garcia\",\n age: 32,\n level: \"Advanced\",\n languages: [\"Ruby\", \"Go\", \"Elixir\"],\n },\n {\n name: \"George Thompson\",\n age: 26,\n level: \"Intermediate\",\n languages: [\"PHP\", \"Python\", \"JavaScript\"],\n },\n];\n\nexport const Table1Example = () => {\n return (\n
    \n
    \n
    \n

    Developers

    \n \n
    \n \n
    \n
    \n );\n};\n" }, { "path": "src/components/tables/Table2/Table2.css", "content": ".table-2 {\n border-collapse: collapse;\n text-align: left;\n width: 100%;\n}\n\n.table-2 thead {\n position: sticky;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.table-2 thead tr th:not(:last-child) {\n width: 120px;\n max-width: 120px;\n}\n\n.table-2 :is(th, td) {\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n padding: 0 6px;\n height: 50px;\n font-size: 13px;\n}\n\n.table-2 th {\n font-weight: 500;\n user-select: none;\n text-transform: capitalize;\n color: #706d84;\n height: 56px;\n cursor: pointer;\n vertical-align: middle;\n transition: 0.3s;\n}\n\n.table-2 th i {\n font-size: 11px;\n translate: 0 -1px;\n margin-left: 6px;\n}\n\n.table-2 th:is(.active, :hover) {\n color: inherit;\n}\n\n.table-2 td {\n opacity: 0.65;\n transition: opacity 0.3s;\n}\n\n.table-2 tbody tr:hover td {\n opacity: 1;\n}\n\n.table-2 tr {\n cursor: pointer;\n border-bottom: 1px solid #34323c;\n}\n\n.table-2 tbody tr:last-child {\n border: 0;\n}\n\n.table-2 tbody tr:nth-child(odd) {\n background: #1e1d25;\n}\n" }, { "path": "src/components/tables/Table2/Table2.jsx", "content": "import { useState } from \"react\";\nimport \"./Table2.css\";\n\nconst TableHeader = ({ column, onSort, sortOrder, sortColumn }) => {\n const isActive = column === sortColumn;\n return (\n onSort(column)}>\n {column}\n {isActive && (\n \n )}\n \n );\n};\n\nexport const Table2 = ({ rows, columns }) => {\n const [sortColumn, setSortColumn] = useState(columns[0]);\n const [sortOrder, setSortOrder] = useState(\"asc\");\n\n const sortedRows = rows.sort((a, b) => {\n const [valA, valB] = [a[sortColumn], b[sortColumn]];\n return typeof valA === typeof valB\n ? sortOrder === \"asc\"\n ? valA > valB\n ? 1\n : -1\n : valA < valB\n ? 1\n : -1\n : 0;\n });\n\n const handleSort = (column) => {\n console.log(\"name\", column);\n setSortColumn(column);\n setSortOrder(\n sortColumn !== column ? \"asc\" : sortOrder === \"asc\" ? \"desc\" : \"asc\"\n );\n };\n\n return (\n \n \n \n {columns.map((column) => (\n \n ))}\n \n \n \n {sortedRows.map((row) => (\n \n {columns.map((column) => (\n \n ))}\n \n ))}\n \n
    {row[column]}
    \n );\n};\n" }, { "path": "src/components/tables/Table2/Table2Example.css", "content": ".table-2-page {\n background: #222129;\n color: #f5f3f9;\n margin: 0;\n height: 100vh;\n font-size: 110%;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.table-2-page .wrapper {\n overflow: auto;\n position: relative;\n z-index: 2;\n}\n\n.table-2-page header {\n position: relative;\n overflow: hidden;\n margin: 0 0 18px;\n}\n\n.table-2-page header .content {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 240px;\n max-width: 700px;\n margin: 0 auto;\n padding: 0 70px 60px;\n}\n\n.table-2-page header::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n translate: -50% 0;\n z-index: 0;\n background: #5926fc;\n width: 500vw;\n aspect-ratio: 1/1;\n border-radius: 50%;\n}\n\n.table-2-page header button {\n font-family: inherit;\n background: rgb(0 0 0 / 16%);\n color: inherit;\n border: 0;\n border-radius: 8px;\n padding: 12px 18px 12px 20px;\n font-size: 13.5px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.table-2-page header button span {\n font-size: 16px;\n translate: 0 -1px;\n}\n\n.table-2-page header h2 {\n font-size: 20px;\n font-weight: 400;\n display: flex;\n align-items: center;\n}\n\n.table-2-page header h2 i {\n margin-right: 8px;\n background: rgb(0 0 0 / 16%);\n display: grid;\n place-items: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n}\n\n.table-2-page .card {\n max-width: 600px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n background: #1a191e;\n border-radius: 8px;\n box-shadow: 0 30px 40px rgb(0 0 0 / 12%);\n padding: 10px 18px 18px;\n font-size: 12px;\n margin: -100px auto 30px;\n}\n\n@media (width < 706px) {\n .table-2-page .card {\n margin: -100px 50px 30px;\n }\n}\n" }, { "path": "src/components/tables/Table2/Table2Example.jsx", "content": "import { Table2 } from \"./Table2\";\nimport \"./Table2Example.css\";\n\nconst rows = [\n {\n name: \"Zoe Blogs\",\n level: \"Intermediate\",\n age: 21,\n language: \"JavaScript\",\n location: \"USA\",\n },\n {\n name: \"Jane Doe\",\n level: \"Advanced\",\n age: 25,\n language: \"Python\",\n location: \"Canada\",\n },\n {\n name: \"Alice Smith\",\n level: \"Junior\",\n age: 22,\n language: \"Ruby\",\n location: \"UK\",\n },\n {\n name: \"Bob Kohler\",\n level: \"Senior\",\n age: 35,\n language: \"C#\",\n location: \"Germany\",\n },\n {\n name: \"Dana White\",\n level: \"Junior\",\n age: 23,\n language: \"PHP\",\n location: \"France\",\n },\n {\n name: \"Ethan Hunt\",\n level: \"Advanced\",\n age: 28,\n language: \"JavaScript\",\n location: \"USA\",\n },\n {\n name: \"Fiona Green\",\n level: \"Senior\",\n age: 40,\n language: \"Java\",\n location: \"Ireland\",\n },\n {\n name: \"Luuk Black\",\n level: \"Intermediate\",\n age: 30,\n language: \"JavaScript\",\n location: \"Netherlands\",\n },\n {\n name: \"Hannah Isak\",\n level: \"Junior\",\n age: 24,\n language: \"Kotlin\",\n location: \"Sweden\",\n },\n];\n\nconst columns = [\"name\", \"level\", \"language\", \"location\"];\n\nexport const Table2Example = () => {\n return (\n
    \n
    \n
    \n

    \n {/* */}\n Developers\n

    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/tables/Table3/Table3.css", "content": ".table-3 {\n width: 100%;\n border-collapse: collapse;\n}\n\n.table-3 td {\n padding: 16px;\n white-space: nowrap;\n}\n\n.table-3 tr td:last-of-type {\n text-align: right;\n}\n\n.table-3 th:first-of-type {\n width: 20px;\n}\n\n.table-3 tr td:first-child,\n.table-3 tr th:first-child {\n padding-right: 2px;\n}\n\n.table-3 tr td:last-child,\n.table-3 tr th:last-child {\n padding-right: 12px;\n}\n\n.table-3 th:nth-child(2) {\n width: 133px;\n max-width: 133px;\n min-width: 133px;\n}\n\n.table-3 th:nth-child(3) {\n width: 180px;\n max-width: 180px;\n min-width: 180px;\n}\n\n.table-3 th {\n padding: 20px 16px;\n font-weight: 500;\n text-align: left;\n text-transform: capitalize;\n}\n\n.table-3 :is(td, th) {\n border-bottom: 1px solid #2d2d2d;\n}\n\n.table-3-footer {\n display: flex;\n align-items: center;\n}\n\n.table-3-footer p {\n margin: 0;\n font-size: 14px;\n color: #8a8a8a;\n}\n\n.table-3-footer p em {\n color: #ffffff;\n font-style: normal;\n}\n\n.table-3-pagination {\n padding: 16px;\n display: flex;\n}\n\n.table-3-pagination > button {\n background: transparent;\n border: 1px solid #2d2d2d;\n border-right: 0;\n color: #ffffff;\n font-family: inherit;\n padding: 0 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n font-size: 14px;\n transition: 0.3s;\n}\n\n.table-3-pagination > button:first-child {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n}\n\n.table-3-pagination > button:last-child {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n border-right: 1px solid #2d2d2d;\n}\n\n.table-3-pagination > button:hover {\n background: rgb(255 255 255 / 1%);\n}\n\n.table-3-pagination > button.active {\n background: #2d2d2d;\n}\n" }, { "path": "src/components/tables/Table3/Table3.jsx", "content": "import { useState } from \"react\";\nimport \"./Table3.css\";\nimport { Checkbox } from \"./Table3Example\";\n\nconst pageSize = 5;\n\nconst PaginatedTable = ({ pageNumber, totalPages, totalRows, goToPage }) => {\n return (\n
    \n
    \n {[...Array(totalPages)].map((_, index) => (\n goToPage(index + 1)}\n disabled={pageNumber === index + 1}\n className={pageNumber === index + 1 ? \"active\" : \"\"}\n >\n {index + 1}\n \n ))}\n
    \n

    \n Viewing{\" \"}\n \n {pageNumber === 1 ? 1 : (pageNumber - 1) * pageSize + 1}-\n {pageNumber * pageSize}\n {\" \"}\n of {totalRows} rows\n

    \n
    \n );\n};\n\nexport const Table3 = ({ columns, rows }) => {\n const [pageNumber, setPageNumber] = useState(1);\n\n const totalPages = Math.ceil(rows.length / pageSize);\n\n const paginateArray = (array, pageSize, pageNumber) => {\n return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\n };\n\n const goToPage = (page) => setPageNumber(page);\n\n return (\n <>\n \n \n \n \n {columns.map((column, index) => (\n \n ))}\n \n \n \n {paginateArray(rows, pageSize, pageNumber).map((row, index) => (\n \n {row.map((control, index) => (\n \n ))}\n \n ))}\n \n
    \n \n {column}
    {control}
    \n \n \n );\n};\n" }, { "path": "src/components/tables/Table3/Table3Example.css", "content": ".page.table-3-page {\n background: #141414;\n font-family: \"SF Pro\";\n font-size: 14px;\n overflow: hidden;\n}\n\n.table-3-page .card {\n background: #1c1c1c;\n border-radius: 8px;\n width: 600px;\n border: 1px solid #2d2d2d;\n}\n\n.table-3-page header {\n display: flex;\n margin-bottom: 16px;\n}\n\n.table-3-page header > h2 {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 400;\n font-size: 22px;\n}\n\n.table-3-page header > h2 > span {\n font-size: 19px;\n color: #626262;\n}\n\n.table-3-page button {\n cursor: pointer;\n background: #1c1c1c;\n}\n\n.table-3-page header > button {\n border: 1px solid #2d2d2d;\n color: #ffffff;\n font-family: inherit;\n border-radius: 6px;\n padding: 0 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 44px;\n width: 44px;\n margin-left: 16px;\n font-size: 16px;\n}\n\n.table-3-page header > button.dropdown {\n width: auto;\n padding-right: 8px;\n gap: 6px;\n}\n\n.table-3-switch input {\n position: absolute;\n scale: 0;\n}\n\n.table-3-switch-control {\n position: relative;\n display: block;\n width: 42px;\n height: 22px;\n border-radius: 32px;\n background: #191919;\n border: 1px solid #2d2d2d;\n cursor: pointer;\n}\n\n.table-3-switch input:checked ~ .table-3-switch-control {\n background: #353535;\n}\n\n.table-3-switch input:checked ~ .table-3-switch-control::after {\n translate: 20px 0;\n}\n\n.table-3-switch-control::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n height: 16px;\n width: 16px;\n background: #ffffff;\n border-radius: inherit;\n}\n\n.table-3-checkbox input {\n position: absolute;\n scale: 0;\n}\n\n.table-3-checkbox-control {\n position: relative;\n display: block;\n width: 20px;\n height: 20px;\n border-radius: 3px;\n background: #191919;\n border: 1px solid #2d2d2d;\n cursor: pointer;\n}\n\n.table-3-checkbox input:checked ~ .table-3-checkbox-control {\n background: #ffffff;\n}\n\n.table-3-checkbox input:checked ~ .table-3-checkbox-control::after {\n opacity: 1;\n}\n\n.table-3-checkbox-control::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 50%;\n translate: -50% 0;\n height: 8px;\n width: 4px;\n border-right: 3px solid #141414;\n border-bottom: 3px solid #141414;\n rotate: 45deg;\n opacity: 0;\n}\n\n.table-3-id {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.table-3-id-img-wrapper {\n background: #353535;\n display: grid;\n place-items: center;\n padding: 7px;\n border-radius: 50%;\n}\n\n.table-3-id img {\n width: 14px;\n}\n\n.table-3-status {\n position: relative;\n border: 1px solid #2d2d2d;\n border-radius: 6px;\n padding-left: 22px;\n padding-right: 8px;\n display: inline-flex;\n align-items: center;\n height: 24px;\n font-size: 14px;\n text-transform: capitalize;\n}\n\n.table-3-status::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 8px;\n width: 8px;\n height: 8px;\n border-radius: 3px;\n translate: 0 -50%;\n background: #ffffff;\n}\n\n.table-3-status.available::after {\n background: #46ad7c;\n}\n\n.table-3-status.issue::after {\n background: #f35a42;\n}\n\n.table-3-status.busy::after {\n background: #fd9d27;\n}\n\n.table-3-progress {\n position: relative;\n display: inline-block;\n background: #353535;\n width: 100px;\n height: 8px;\n border-radius: 5px;\n margin-right: 12px;\n}\n\n.table-3-progress::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: var(--width);\n border-radius: inherit;\n background: #ffffff;\n transition: 0.3s;\n}\n\n.page-3-id-header {\n display: flex;\n align-items: center;\n}\n\n.page-3-id-header span {\n font-size: 18px;\n margin-left: 4px;\n}\n" }, { "path": "src/components/tables/Table3/Table3Example.jsx", "content": "import { Table3 } from \"./Table3\";\nimport \"./Table3Example.css\";\nimport image from \"./image.svg\";\n\nconst Icon = ({ children }) => (\n {children}\n);\n\nconst columns = [\n \n Vehicle ID arrow_downward\n ,\n \"progress\",\n \"status\",\n \"active\",\n \"\",\n];\n\nconst Progress = ({ progress }) => (\n <>\n \n {progress}%\n \n);\n\nconst Status = ({ status }) => (\n
    {status}
    \n);\n\nexport const Checkbox = ({ checked }) => (\n \n);\n\nconst Id = ({ id }) => (\n
    \n
    \n \n
    \n {id}\n
    \n);\n\nconst Switch = ({ checked }) => (\n \n);\n\nconst More = () => more_vert;\n\nconst rows = [\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n [\n ,\n ,\n ,\n ,\n ,\n ,\n ],\n];\n\nexport const Table3Example = () => {\n return (\n
    \n
    \n
    \n

    \n Reservations\n info\n

    \n \n \n
    \n
    \n \n
    \n
    \n
    \n );\n};\n" }, { "path": "src/components/tables/index.js", "content": "export * from \"./Table1/Table1Example\";\nexport * from \"./Table2/Table2Example\";\nexport * from \"./Table3/Table3Example\";\n" }, { "path": "src/components/widgets/Widget1/Widget1.jsx", "content": "import { createRef, useEffect, useState } from \"react\";\nimport \"./styles.css\";\n\nconst buttonWidth = 56;\nconst tabWidth = 300;\n\nconst tabs = [\n {\n title: \"Home\",\n icon: \"home\",\n content:\n \"Some information inside the tab widget, that will auto resize it's height.\",\n },\n {\n title: \"Settings\",\n icon: \"settings\",\n content:\n \"Some information inside the tab widget, that will auto resize it's height. This one has extra information so is a bit taller. Let's add one more sentence to see it's height grow even more!\",\n },\n {\n title: \"Account\",\n icon: \"lock\",\n content:\n \"Some information inside the tab widget, that will auto resize it's height. This one has extra information so is a bit taller. \",\n },\n];\n\nconst WidgetHeader = ({ onClick, activeIndex }) => {\n return (\n
    \n {tabs.map((tab, index) => (\n onClick(index)}\n key={tab.title}\n className={`material-symbols-outlined ${\n activeIndex === index ? \"active\" : \"\"\n }`}\n >\n {tab.icon}\n \n ))}\n \n
    \n );\n};\n\nconst WidgetTab = ({ tabRef, title, content }) => {\n return (\n
    \n

    {title}

    \n

    {content}

    \n
    \n );\n};\n\nexport const Widget1 = () => {\n const [activeIndex, setActiveIndex] = useState(0);\n\n const [height, setHeight] = useState(140);\n\n const [refs, setRefs] = useState([]);\n\n const handleClick = (index) => {\n setActiveIndex(index);\n setHeight(refs[index].current.clientHeight);\n };\n\n useEffect(() => {\n setRefs(tabs.map(() => createRef()));\n }, []);\n\n useEffect(() => {\n if (!refs.length) return;\n setHeight(refs[0].current.clientHeight);\n }, [refs.length]);\n\n return (\n
    \n \n
    \n \n {tabs.map((tab, index) => (\n \n ))}\n
    \n \n
    \n );\n};\n\nexport const Widget1Example = () => (\n
    \n \n
    \n);\n" }, { "path": "src/components/widgets/Widget1/styles.css", "content": ":root {\n --color-primary: #5644fd;\n --tab-width: 300px;\n --button-width: 56px;\n}\n\n.page.widget-1-page {\n display: flex;\n flex-direction: column;\n justify-content: start;\n padding-top: 260px;\n font-family: \"Euclid Circular A\", \"Poppins\";\n line-height: 1.5;\n background: #24232b;\n color: #f9f9f9;\n}\n\n.widget {\n background: #18181d;\n width: var(--tab-width);\n border-radius: 8px;\n}\n\n.widget h2 {\n margin: 0;\n}\n\n.widget > header {\n position: relative;\n display: flex;\n border-bottom: 1px solid rgb(255 255 255 / 10%);\n}\n\n.widget > header > button {\n padding: 20px 0;\n font-size: 15px;\n width: var(--button-width);\n cursor: pointer;\n background: transparent;\n color: rgb(255 255 255 / 50%);\n display: grid;\n place-items: center;\n border: 0;\n font-size: 22px;\n transition: 0.5s;\n}\n\n.widget > header > button:not(.active) {\n opacity: 0.7;\n}\n\n.widget > header > button:hover:not(.active) {\n opacity: 1;\n}\n\n.widget > header > button.active {\n color: var(--color-primary);\n}\n\n.widget .content {\n position: relative;\n overflow: hidden;\n transition: 0.5s;\n}\n\n.widget .content-inner {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: start;\n width: calc(var(--tab-width) * 3);\n transition: 0.5s;\n}\n\n.widget .underline {\n position: absolute;\n left: 0;\n bottom: 0;\n width: var(--button-width);\n height: 3px;\n background: var(--color-primary);\n transition: 0.2s;\n}\n\n.widget h2 {\n margin: 0 0 10px;\n font-size: 15px;\n font-weight: 400;\n}\n\n.widget p {\n margin: 0;\n font-size: 13px;\n opacity: 0.5;\n}\n\n.widget .content-inner > div {\n width: inherit;\n padding: 20px;\n}\n" }, { "path": "src/components/widgets/Widget2/Widget2.jsx", "content": "import { useState } from \"react\";\nimport \"./styles.css\";\n\nconst menuHeight = getComputedStyle(document.body).getPropertyValue(\n \"--widget-2-menu-height\"\n);\n\nconst items = [\n {\n name: \"Home\",\n content:\n \"Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.\",\n },\n {\n name: \"Security\",\n icon: \"Encrypted\",\n content:\n \"Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.\",\n },\n {\n name: \"Stacks\",\n content:\n \"Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.\",\n },\n {\n name: \"Settings\",\n content:\n \"Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.\",\n },\n];\n\nexport const Widget2 = () => {\n const [activeBlock, setActiveBlock] = useState(0);\n\n const toggleMenuBlock = (index) => setActiveBlock(index);\n\n return (\n
    \n
    \n
    \n {items.map((item, index) => (\n toggleMenuBlock(index)}\n >\n \n {item.icon || item.name}\n \n {item.name}\n \n ))}\n
    \n
    \n \n {items.map((item) => (\n
    \n

    {item.name}

    \n

    {item.content}

    \n
    \n ))}\n
    \n
    \n \n
    \n );\n};\n" }, { "path": "src/components/widgets/Widget2/styles.css", "content": ":root {\n --widget-2-color-primary: #195adc;\n --widget-2-sidebar-width: 130px;\n --widget-2-menu-height: 200px;\n}\n\n.page.widget-2-page {\n margin: 0;\n display: grid;\n place-items: center;\n background: linear-gradient(-135deg, var(--widget-2-color-primary), #0f3278);\n color: #f0f5ff;\n}\n\n.widget-2-card {\n display: flex;\n padding: 0 20px;\n width: 440px;\n height: var(--widget-2-menu-height);\n border-radius: 10px;\n background: #101115;\n box-shadow: 0 20px 30px rgba(57, 76, 96, 0.06);\n}\n\n.widget-2-card .buttons {\n padding-top: 20px;\n width: var(--widget-2-sidebar-width);\n}\n\n.widget-2-card .buttons button {\n margin: 0;\n font-size: 14px;\n width: 100%;\n height: 40px;\n padding: 0 0 0 12px;\n background: transparent;\n border-radius: 6px;\n border: 0;\n display: flex;\n gap: 8px;\n align-items: center;\n font-weight: 400;\n font-family: inherit;\n cursor: pointer;\n color: inherit;\n}\n\n.widget-2-card .buttons button:focus {\n outline-color: var(--widget-2-color-primary);\n outline-offset: 0;\n}\n\n.widget-2-card .buttons button:hover {\n background-color: rgb(255 255 255 / 4%);\n}\n\n.widget-2-card .buttons button span {\n font-size: 16px;\n}\n\n.widget-2-card .buttons button.active {\n background: var(--widget-2-color-primary);\n color: #f9f9f9;\n}\n\n.widget-2-card .wrapper {\n position: relative;\n overflow: hidden;\n flex: 1 1 auto;\n}\n\n.widget-2-card .wrapper::before,\n.widget-2-card .wrapper::after {\n content: \"\";\n position: absolute;\n z-index: 2;\n left: 0;\n width: 100%;\n height: 36px;\n}\n\n.widget-2-card .wrapper::before {\n top: 0;\n background: linear-gradient(#101115, rgb(24 24 29 / 0%));\n}\n\n.widget-2-card .wrapper::after {\n bottom: 0;\n background: linear-gradient(rgb(24 24 29 / 0%), #101115);\n}\n\n.widget-2-card .content {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n height: calc(var(--widget-2-menu-height) * 3);\n transition: 0.6s;\n}\n\n.widget-2-card .content p {\n display: flex;\n align-items: center;\n line-height: 1.6;\n font-size: 13px;\n margin: 0;\n opacity: 0.5;\n}\n\n.widget-2-card .block {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px;\n height: var(--widget-2-menu-height);\n}\n\n.widget-2-card .block h2 {\n margin: 0 0 6px;\n font-size: 18px;\n font-weight: 400;\n}\n" }, { "path": "src/components/widgets/index.js", "content": "export * from \"./Widget1/Widget1\";\nexport * from \"./Widget2/Widget2\";\n" }, { "path": "src/index.css", "content": "body {\n margin: 0;\n /* background: #6a8faa; */\n color: #f9f9f9;\n background: #2b2a2f;\n font-family: \"Euclid Circular B\", \"Poppins\";\n overflow: hidden;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.page {\n width: 100vw;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n" }, { "path": "src/main.jsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App.jsx'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n \n \n ,\n)\n" }, { "path": "src/routes.jsx", "content": "import {\n AutoSuggestExample,\n Card1,\n Card2Example,\n Card3Example,\n Card4Example,\n Card5Example,\n Card6Example,\n Card7Example,\n Carousel1,\n Carousel2,\n Carousel3,\n DeleteButton,\n Dropdown1Example,\n Dropdown2Example,\n Dropdown3,\n Dropdown4Example,\n Dropdown5Example,\n Dropdown6Example,\n Dropdown7,\n EditableTitleExample,\n FabButton,\n Accordion1Example,\n Accordion2Example,\n Accordion3Example,\n Login1,\n Login2,\n Login3,\n Login4,\n Login5,\n Login6,\n Modal1,\n Modal2Example,\n Navbar1,\n Navbar2,\n Navbar3,\n Navbar4,\n Parallax1,\n Parallax2,\n PasswordStrengthExample,\n PasswordStrength2Example,\n PasswordStrength3Example,\n PasswordStrength4Example,\n PasswordVisibilityExample,\n RcSlider,\n ReactDropzone,\n ReactXarrows,\n ScrollReveal,\n Sidebar1,\n Sidebar2,\n Sidebar3,\n Sidebar4,\n Sidebar5,\n Sidebar6,\n Sidebar7,\n Sidebar8,\n Sidebar9,\n Sidebar10,\n Sidebar11,\n Sidebar12,\n Sidebar13,\n Sidebar14,\n Sidebar15,\n Signup1,\n SliderExample,\n Table1Example,\n Table2Example,\n Table3Example,\n TrashButton,\n TypedMessageExample,\n Widget1Example,\n Widget2,\n} from \"./components\";\n\nexport const routes = [\n {\n name: \"DeleteButton\",\n path: \"/buttons/delete-button\",\n element: ,\n },\n {\n name: \"TrashButton\",\n path: \"/buttons/trash-button\",\n element: ,\n },\n {\n name: \"Sidebar1\",\n path: \"/sidebars/sidebar-1\",\n element: ,\n },\n {\n name: \"Controls - PasswordStrength\",\n path: \"/controls/password-strength\",\n element: ,\n },\n {\n name: \"ScrollReveal\",\n path: \"/gsap/scroll-reveal\",\n element: ,\n },\n {\n name: \"Accordion1\",\n path: \"/accordions/accordion-1\",\n element: ,\n },\n {\n name: \"Accordion2\",\n path: \"/accordions/accordion-2\",\n element: ,\n },\n {\n name: \"Login1\",\n path: \"/logins/login-1\",\n element: ,\n },\n {\n name: \"Sidebar2\",\n path: \"/sidebars/sidebar-2\",\n element: ,\n },\n {\n name: \"Card1\",\n path: \"/cards/card-1\",\n element: ,\n },\n {\n name: \"Modal1\",\n path: \"/modals/modal-1\",\n element: ,\n },\n {\n name: \"Parallax1\",\n path: \"/parallax/parallax-1\",\n element: ,\n },\n {\n name: \"Dropdown1\",\n path: \"/dropdowns/dropdown-1\",\n element: ,\n },\n {\n name: \"Widget1\",\n path: \"/widgets/widget-1\",\n element: ,\n },\n {\n name: \"Controls - AutoSuggest\",\n path: \"/controls/auto-suggest\",\n element: ,\n },\n {\n name: \"Sidebar3\",\n path: \"/sidebars/sidebar-3\",\n element: ,\n },\n {\n name: \"Carousel1\",\n path: \"/carousels/carousel-1\",\n element: ,\n },\n {\n name: \"RcSlider\",\n path: \"/libraries/rc-slider\",\n element: ,\n },\n {\n name: \"Modal2\",\n path: \"/modals/modal-2\",\n element: ,\n },\n {\n name: \"Navbar1\",\n path: \"/navbars/navbar-1\",\n element: ,\n },\n {\n name: \"Card2\",\n path: \"/cards/card-2\",\n element: ,\n },\n {\n name: \"Sidebar4\",\n path: \"/sidebars/sidebar-4\",\n element: ,\n },\n {\n name: \"Carousel2\",\n path: \"/carousels/carousel-2\",\n element: ,\n },\n {\n name: \"Table1\",\n path: \"/tables/table-1\",\n element: ,\n },\n {\n name: \"Sidebar5\",\n path: \"/sidebars/sidebar-5\",\n element: ,\n },\n {\n name: \"Widget2\",\n path: \"/widgets/widget-2\",\n element: ,\n },\n {\n name: \"Navbar2\",\n path: \"/navbars/navbar-2\",\n element: ,\n },\n {\n name: \"Dropdown2\",\n path: \"/dropdowns/dropdown-2\",\n element: ,\n },\n {\n name: \"Sidebar6\",\n path: \"/sidebars/sidebar-6\",\n element: ,\n },\n {\n name: \"Sidebar7\",\n path: \"/sidebars/sidebar-7\",\n element: ,\n },\n {\n name: \"ReactDropzone\",\n path: \"/libraries/react-dropzone\",\n element: ,\n },\n {\n name: \"Dropdown3\",\n path: \"/dropdowns/dropdown-3\",\n element: ,\n },\n {\n name: \"Table2\",\n path: \"/tables/table-2\",\n element: ,\n },\n {\n name: \"Navbar3\",\n path: \"/navbars/navbar-3\",\n element: ,\n },\n {\n name: \"FabButton\",\n path: \"/button/fab-button\",\n element: ,\n },\n {\n name: \"Controls - PasswordVisibility\",\n path: \"/controls/password-visibility\",\n element: ,\n },\n {\n name: \"Table3\",\n path: \"/tables/table-3\",\n element: ,\n },\n {\n name: \"Dropdown4\",\n path: \"/dropdowns/dropdown-4\",\n element: ,\n },\n {\n name: \"Sidebar8\",\n path: \"/sidebars/sidebar-8\",\n element: ,\n },\n {\n name: \"ReactXarrows\",\n path: \"/libraries/react-xarrows\",\n element: ,\n },\n {\n name: \"GSAP - TypedMessage\",\n path: \"/gsap/typed-message\",\n element: ,\n },\n {\n name: \"Card3\",\n path: \"/cards/card-3\",\n element: ,\n },\n {\n name: \"Controls - EditableText\",\n path: \"/controls/editable-text\",\n element: ,\n },\n {\n name: \"Sidebar9\",\n path: \"/sidebars/sidebar-9\",\n element: ,\n },\n {\n name: \"Sidebar10\",\n path: \"/sidebars/sidebar-10\",\n element: ,\n },\n {\n name: \"Controls - Slider\",\n path: \"/controls/slider\",\n element: ,\n },\n {\n name: \"Carousel3\",\n path: \"/carousels/carousel-3\",\n element: ,\n },\n {\n name: \"Card4\",\n path: \"/cards/card-4\",\n element: ,\n },\n {\n name: \"Parallax2\",\n path: \"/parallax/parallax-2\",\n element: ,\n },\n {\n name: \"Dropdown5\",\n path: \"/dropdown/dropdown-5\",\n element: ,\n },\n {\n name: \"Controls - PasswordStrength2\",\n path: \"/controls/password-strength-2\",\n element: ,\n },\n {\n name: \"Accordion3\",\n path: \"/accordions/accordion-3\",\n element: ,\n },\n {\n name: \"Sidebar11\",\n path: \"/sidebars/sidebar-11\",\n element: ,\n },\n {\n name: \"Card5\",\n path: \"/cards/card-5\",\n element: ,\n },\n {\n name: \"Login2\",\n path: \"/logins/login-2\",\n element: ,\n },\n {\n name: \"Card6\",\n path: \"/cards/card-6\",\n element: ,\n },\n {\n name: \"Dropdown6\",\n path: \"/dropdowns/dropdown-6\",\n element: ,\n },\n {\n name: \"Sidebar12\",\n path: \"/sidebars/sidebar-12\",\n element: ,\n },\n {\n name: \"Login3\",\n path: \"/logins/login-3\",\n element: ,\n },\n {\n name: \"Sidebar13\",\n path: \"/sidebars/sidebar-13\",\n element: ,\n },\n {\n name: \"Sidebar14\",\n path: \"/sidebars/sidebar-14\",\n element: ,\n },\n {\n name: \"Navbar4\",\n path: \"/navbars/navbar-4\",\n element: ,\n },\n {\n name: \"Sidebar15\",\n path: \"/sidebars/sidebars-15\",\n element: ,\n },\n {\n name: \"Login4\",\n path: \"/logins/login-4\",\n element: ,\n },\n {\n name: \"Signup1\",\n path: \"/signup/signup-1\",\n element: ,\n },\n {\n name: \"Card7\",\n path: \"/cards/card-7\",\n element: ,\n },\n {\n name: \"Controls - PasswordStrength3\",\n path: \"/controls/password-strength-3\",\n element: ,\n },\n {\n name: \"Controls - PasswordStrength4\",\n path: \"/controls/password-strength-4\",\n element: ,\n },\n {\n name: \"Dropdown7\",\n path: \"/dropdowns/dropdown-7\",\n element: ,\n },\n {\n name: \"Login5\",\n path: \"/logins/login-5\",\n element: ,\n },\n {\n name: \"Login6\",\n path: \"/logins/login-6\",\n element: ,\n },\n];\n" }, { "path": "vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n})\n" } ]