Repository: frontend-joe/react-components
Branch: main
Commit: 76ee472a27cd
Files: 215
Total size: 351.9 KB
Directory structure:
gitextract_o32ohc4j/
├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src/
│ ├── App.jsx
│ ├── Layout.css
│ ├── Layout.jsx
│ ├── components/
│ │ ├── accordions/
│ │ │ ├── Accordion1/
│ │ │ │ ├── Accordion1.jsx
│ │ │ │ ├── Accordion1Example.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Accordion2/
│ │ │ │ ├── Accordion2.css
│ │ │ │ ├── Accordion2.jsx
│ │ │ │ ├── Accordion2Example.css
│ │ │ │ └── Accordion2Example.jsx
│ │ │ ├── Accordion3/
│ │ │ │ ├── Accordion3.css
│ │ │ │ ├── Accordion3.jsx
│ │ │ │ └── Accordion3Example.jsx
│ │ │ └── index.js
│ │ ├── buttons/
│ │ │ ├── DeleteButton/
│ │ │ │ ├── DeleteButton.jsx
│ │ │ │ └── styles.css
│ │ │ ├── FabButton/
│ │ │ │ ├── FabButton.css
│ │ │ │ └── FabButton.jsx
│ │ │ ├── TrashButton/
│ │ │ │ ├── TrashButton.css
│ │ │ │ └── TrashButton.jsx
│ │ │ └── index.js
│ │ ├── cards/
│ │ │ ├── Card1/
│ │ │ │ ├── Card1.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Card2/
│ │ │ │ ├── Card2.css
│ │ │ │ ├── Card2.jsx
│ │ │ │ └── Card2Example.jsx
│ │ │ ├── Card3/
│ │ │ │ ├── Card3.css
│ │ │ │ ├── Card3.jsx
│ │ │ │ ├── Card3Example.css
│ │ │ │ └── Card3Example.jsx
│ │ │ ├── Card4/
│ │ │ │ ├── Card4.css
│ │ │ │ ├── Card4.jsx
│ │ │ │ ├── Card4Example.css
│ │ │ │ └── Card4Example.jsx
│ │ │ ├── Card5/
│ │ │ │ ├── Card5.css
│ │ │ │ ├── Card5.jsx
│ │ │ │ ├── Card5Example.css
│ │ │ │ ├── Card5Example.jsx
│ │ │ │ ├── Dropdown.css
│ │ │ │ └── Dropdown.jsx
│ │ │ ├── Card6/
│ │ │ │ ├── Card6.css
│ │ │ │ ├── Card6.jsx
│ │ │ │ ├── Card6Example.css
│ │ │ │ └── Card6Example.jsx
│ │ │ ├── Card7/
│ │ │ │ ├── Card7.css
│ │ │ │ ├── Card7.jsx
│ │ │ │ ├── Card7Example.css
│ │ │ │ └── Card7Example.jsx
│ │ │ └── index.js
│ │ ├── carousels/
│ │ │ ├── Carousel1/
│ │ │ │ ├── Carousel1.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Carousel2/
│ │ │ │ ├── Carousel2.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Carousel3/
│ │ │ │ ├── Carousel3.css
│ │ │ │ └── Carousel3.jsx
│ │ │ └── index.js
│ │ ├── controls/
│ │ │ ├── AutoSuggest/
│ │ │ │ ├── AutoSuggest.jsx
│ │ │ │ └── styles.css
│ │ │ ├── EditableText/
│ │ │ │ ├── EditableText.css
│ │ │ │ ├── EditableText.jsx
│ │ │ │ ├── EditableTextExample.css
│ │ │ │ └── EditableTextExample.jsx
│ │ │ ├── PasswordStrength/
│ │ │ │ ├── PasswordStrength.jsx
│ │ │ │ └── styles.css
│ │ │ ├── PasswordStrength2/
│ │ │ │ ├── PasswordStrength2.css
│ │ │ │ └── PasswordStrength2.jsx
│ │ │ ├── PasswordStrength3/
│ │ │ │ ├── PasswordStrength3.css
│ │ │ │ └── PasswordStrength3.jsx
│ │ │ ├── PasswordStrength4/
│ │ │ │ ├── PasswordStrength4.css
│ │ │ │ └── PasswordStrength4.jsx
│ │ │ ├── PasswordVisibility/
│ │ │ │ ├── Password.css
│ │ │ │ ├── Password.jsx
│ │ │ │ ├── PasswordVisibilityExample.css
│ │ │ │ └── PasswordVisibilityExample.jsx
│ │ │ ├── Slider/
│ │ │ │ ├── Slider.css
│ │ │ │ ├── Slider.jsx
│ │ │ │ ├── SliderExample.css
│ │ │ │ └── SliderExample.jsx
│ │ │ └── index.js
│ │ ├── dropdowns/
│ │ │ ├── Dropdown1/
│ │ │ │ ├── Dropdown1.css
│ │ │ │ ├── Dropdown1.jsx
│ │ │ │ └── Dropdown1Example.jsx
│ │ │ ├── Dropdown2/
│ │ │ │ ├── Dropdown2.css
│ │ │ │ ├── Dropdown2.jsx
│ │ │ │ ├── Dropdown2Example.css
│ │ │ │ └── Dropdown2Example.jsx
│ │ │ ├── Dropdown3/
│ │ │ │ ├── Dropdown3.css
│ │ │ │ └── Dropdown3.jsx
│ │ │ ├── Dropdown4/
│ │ │ │ ├── Dropdown4.css
│ │ │ │ ├── Dropdown4.jsx
│ │ │ │ ├── Dropdown4Example.css
│ │ │ │ └── Dropdown4Example.jsx
│ │ │ ├── Dropdown5/
│ │ │ │ ├── Dropdown5.css
│ │ │ │ ├── Dropdown5.jsx
│ │ │ │ ├── Dropdown5Example.css
│ │ │ │ └── Dropdown5Example.jsx
│ │ │ ├── Dropdown6/
│ │ │ │ ├── Dropdown6.css
│ │ │ │ ├── Dropdown6.jsx
│ │ │ │ ├── Dropdown6Example.css
│ │ │ │ └── Dropdown6Example.jsx
│ │ │ ├── Dropdown7/
│ │ │ │ ├── Dropdown7.css
│ │ │ │ └── Dropdown7.jsx
│ │ │ └── index.js
│ │ ├── gsap/
│ │ │ ├── ScrollReveal/
│ │ │ │ ├── ScrollReveal.jsx
│ │ │ │ └── styles.css
│ │ │ ├── TypedMessage/
│ │ │ │ ├── TypedMessage.css
│ │ │ │ ├── TypedMessage.jsx
│ │ │ │ ├── TypedMessageExample.css
│ │ │ │ └── TypedMessageExample.jsx
│ │ │ └── index.js
│ │ ├── index.js
│ │ ├── libraries/
│ │ │ ├── index.js
│ │ │ ├── rc-slider/
│ │ │ │ ├── RcSlider.css
│ │ │ │ └── RcSlider.jsx
│ │ │ ├── react-dropzone/
│ │ │ │ ├── ReactDropzone.css
│ │ │ │ └── ReactDropzone.jsx
│ │ │ └── react-xarrows/
│ │ │ ├── ReactXarrows.css
│ │ │ └── ReactXarrows.jsx
│ │ ├── logins/
│ │ │ ├── Login1/
│ │ │ │ ├── Login1.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Login2/
│ │ │ │ ├── Login2.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Login3/
│ │ │ │ ├── Login3.css
│ │ │ │ └── Login3.jsx
│ │ │ ├── Login4/
│ │ │ │ ├── Login4.css
│ │ │ │ └── Login4.jsx
│ │ │ ├── Login5/
│ │ │ │ ├── Login5.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Login6/
│ │ │ │ ├── Login6.jsx
│ │ │ │ ├── styles.css
│ │ │ │ └── useWebGLBackground.js
│ │ │ └── index.js
│ │ ├── modals/
│ │ │ ├── Modal1/
│ │ │ │ ├── Modal1.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Modal2/
│ │ │ │ ├── Modal2 copy.css
│ │ │ │ ├── Modal2.css
│ │ │ │ ├── Modal2.jsx
│ │ │ │ ├── Modal2Example.css
│ │ │ │ └── Modal2Example.jsx
│ │ │ └── index.js
│ │ ├── navbars/
│ │ │ ├── Navbar1/
│ │ │ │ ├── Navbar1.css
│ │ │ │ └── Navbar1.jsx
│ │ │ ├── Navbar2/
│ │ │ │ ├── Navbar2.css
│ │ │ │ └── Navbar2.jsx
│ │ │ ├── Navbar3/
│ │ │ │ ├── Navbar3.css
│ │ │ │ └── Navbar3.jsx
│ │ │ ├── Navbar4/
│ │ │ │ ├── Navbar4.css
│ │ │ │ └── Navbar4.jsx
│ │ │ └── index.js
│ │ ├── parallax/
│ │ │ ├── index.js
│ │ │ ├── parallax-1/
│ │ │ │ ├── Parallax1.jsx
│ │ │ │ └── styles.css
│ │ │ └── parallax-2/
│ │ │ ├── Parallax2.css
│ │ │ └── Parallax2.jsx
│ │ ├── sidebars/
│ │ │ ├── Sidebar1/
│ │ │ │ ├── Sidebar1.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Sidebar10/
│ │ │ │ ├── Sidebar10.css
│ │ │ │ └── Sidebar10.jsx
│ │ │ ├── Sidebar11/
│ │ │ │ ├── Sidebar11.css
│ │ │ │ └── Sidebar11.jsx
│ │ │ ├── Sidebar12/
│ │ │ │ ├── Sidebar12.css
│ │ │ │ └── Sidebar12.jsx
│ │ │ ├── Sidebar13/
│ │ │ │ ├── Sidebar13.css
│ │ │ │ └── Sidebar13.jsx
│ │ │ ├── Sidebar14/
│ │ │ │ ├── Sidebar14.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Sidebar15/
│ │ │ │ ├── Sidebar15.css
│ │ │ │ └── Sidebar15.jsx
│ │ │ ├── Sidebar2/
│ │ │ │ ├── Sidebar2.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Sidebar3/
│ │ │ │ ├── Sidebar3.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Sidebar4/
│ │ │ │ ├── Sidebar4.css
│ │ │ │ └── Sidebar4.jsx
│ │ │ ├── Sidebar5/
│ │ │ │ ├── Sidebar5.css
│ │ │ │ └── Sidebar5.jsx
│ │ │ ├── Sidebar6/
│ │ │ │ ├── Sidebar6.css
│ │ │ │ └── Sidebar6.jsx
│ │ │ ├── Sidebar7/
│ │ │ │ ├── Sidebar7.jsx
│ │ │ │ └── styles.css
│ │ │ ├── Sidebar8/
│ │ │ │ ├── Sidebar8.css
│ │ │ │ └── Sidebar8.jsx
│ │ │ ├── Sidebar9/
│ │ │ │ ├── Sidebar9.css
│ │ │ │ └── Sidebar9.jsx
│ │ │ └── index.js
│ │ ├── signups/
│ │ │ ├── Signup1/
│ │ │ │ ├── Signup1.css
│ │ │ │ └── Signup1.jsx
│ │ │ └── index.js
│ │ ├── tables/
│ │ │ ├── Table1/
│ │ │ │ ├── Table1.css
│ │ │ │ ├── Table1.jsx
│ │ │ │ ├── Table1Example.css
│ │ │ │ └── Table1Example.jsx
│ │ │ ├── Table2/
│ │ │ │ ├── Table2.css
│ │ │ │ ├── Table2.jsx
│ │ │ │ ├── Table2Example.css
│ │ │ │ └── Table2Example.jsx
│ │ │ ├── Table3/
│ │ │ │ ├── Table3.css
│ │ │ │ ├── Table3.jsx
│ │ │ │ ├── Table3Example.css
│ │ │ │ └── Table3Example.jsx
│ │ │ └── index.js
│ │ └── widgets/
│ │ ├── Widget1/
│ │ │ ├── Widget1.jsx
│ │ │ └── styles.css
│ │ ├── Widget2/
│ │ │ ├── Widget2.jsx
│ │ │ └── styles.css
│ │ └── index.js
│ ├── index.css
│ ├── main.jsx
│ └── routes.jsx
└── vite.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@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
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: index.html
================================================
React Components
================================================
FILE: package.json
================================================
{
"name": "react-components",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --open",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@gsap/react": "^2.1.0",
"framer-motion": "^11.0.18",
"gsap": "^3.13.0",
"rc-slider": "^10.6.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.6",
"react-dropzone": "^14.3.5",
"react-router-dom": "^6.22.3",
"react-toastify": "^11.0.5",
"react-xarrows": "^2.0.2",
"swiper": "^11.1.4"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.0.8"
}
}
================================================
FILE: src/App.jsx
================================================
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Layout } from "./Layout";
import { routes } from "./routes";
const router = createBrowserRouter([
{
path: "/",
element: ,
},
...routes,
]);
function App() {
return ;
}
export default App;
================================================
FILE: src/Layout.css
================================================
.layout {
background: #222129;
color: #f5f3f9;
margin: 0;
height: 100vh;
font-size: 16px;
}
.layout-table-wrapper {
overflow: auto;
position: relative;
z-index: 2;
max-height: 60vh;
}
.layout-header {
position: relative;
overflow: hidden;
margin: 0 0 18px;
}
.layout-header .content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
height: 240px;
max-width: 1000px;
margin: 0 auto;
padding: 0 70px 60px;
}
.layout-header::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 0;
z-index: 0;
background: #5926fc;
width: 500vw;
aspect-ratio: 1/1;
border-radius: 50%;
}
.layout-header button {
font-family: inherit;
background: rgb(0 0 0 / 16%);
color: inherit;
border: 0;
border-radius: 8px;
padding: 12px 18px 12px 20px;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 4px;
}
.layout-header button span {
font-size: 16px;
translate: 0 -1px;
}
.layout-header h2 {
font-size: 24px;
font-weight: 400;
display: flex;
align-items: center;
}
.layout-header h2 i {
margin-right: 8px;
background: rgb(0 0 0 / 16%);
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
}
.layout-card {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 1;
background: #1a191e;
border-radius: 8px;
box-shadow: 0 30px 40px rgb(0 0 0 / 12%);
padding: 10px 18px 18px;
font-size: 12px;
margin: -100px auto 30px;
}
@media (width < 706px) {
.layout-table {
margin: -100px 50px 30px;
}
}
.layout-table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.layout-table thead {
position: sticky;
top: 0;
left: 0;
z-index: 1;
background: #1a191e;
}
.layout-table thead tr th:not(:last-child) {
width: 120px;
max-width: 120px;
}
.layout-table :is(th, td) {
position: relative;
overflow: hidden;
white-space: nowrap;
padding: 0 6px;
height: 60px;
font-size: 16px;
}
.layout-table th {
font-weight: 500;
user-select: none;
text-transform: capitalize;
color: #706d84;
height: 56px;
cursor: pointer;
vertical-align: middle;
transition: 0.3s;
}
.layout-table th i {
font-size: 11px;
translate: 0 -1px;
margin-left: 6px;
}
.layout-table th:is(.active, :hover) {
color: inherit;
}
.layout-table td {
opacity: 0.65;
transition: opacity 0.3s;
}
.layout-table td a {
color: inherit;
text-decoration: none;
}
.layout-table tbody tr:hover td {
opacity: 1;
}
.layout-table tr {
cursor: pointer;
border-bottom: 1px solid #34323c;
}
.layout-table tbody tr:last-child {
border: 0;
}
.layout-table tbody tr:nth-child(odd) {
background: #1e1d25;
}
================================================
FILE: src/Layout.jsx
================================================
import { Link, useNavigate } from "react-router-dom";
import { routes } from "./routes";
import "./Layout.css";
export const Layout = () => {
const sortedRoutes = routes.sort((a, b) => {
const regex = /^([a-zA-Z]+)(\d*)$/;
const matchA = a.name.match(regex);
const matchB = b.name.match(regex);
const textA = matchA ? matchA[1] : a.name;
const textB = matchB ? matchB[1] : b.name;
const numA = matchA && matchA[2] ? parseInt(matchA[2], 10) : 0;
const numB = matchB && matchB[2] ? parseInt(matchB[2], 10) : 0;
const textCompare = textA.localeCompare(textB);
if (textCompare !== 0) return textCompare;
return numA - numB;
});
const navigate = useNavigate();
return (
Name
{sortedRoutes.map((route) => (
navigate(route.path)} key={route.path}>
{route.name}
))}
);
};
================================================
FILE: src/components/accordions/Accordion1/Accordion1.jsx
================================================
import { useState } from "react";
import "./styles.css";
export const Accordion1 = ({ items }) => {
const [active, setActive] = useState(0);
const handleToggle = (index) => setActive(index);
return (
{items.map((item, index) => {
const isActive = active === index ? "active" : "";
return (
handleToggle(index)}
>
photo_camera
{item.header}
{item.text}
);
})}
);
};
================================================
FILE: src/components/accordions/Accordion1/Accordion1Example.jsx
================================================
import { Accordion1 } from "./Accordion1";
import image1 from "./6.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
import image5 from "./5.jpg";
const coolImages = [
{
header: "Canada",
image: image1,
text: `Image description`,
},
{
header: "New Zealand",
image: image2,
text: `Image description`,
},
{
header: "Indonesia",
image: image3,
text: `Image description`,
},
{
header: "South Africa",
image: image2,
text: `Image description`,
},
{
header: "Spain",
image: image5,
text: `Image description`,
},
];
export const Accordion1Example = () => ;
================================================
FILE: src/components/accordions/Accordion1/styles.css
================================================
.page.image-accordion-page {
background: #141415;
}
.page.image-accordion-page .bg {
background-size: cover;
position: fixed;
width: 100vh;
min-width: 100vh;
max-width: 100vh;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
top: 0;
left: 0;
filter: grayscale(5);
transition: background 0.5s;
}
.page.image-accordion-page .bg::after {
content: "";
position: absolute;
inset: 0;
background: rgb(0 0 0 / 80%);
backdrop-filter: blur(16px);
}
.image-accordion-item {
position: relative;
overflow: hidden;
background: #ffffff;
width: 64px;
height: 500px;
border-radius: 36px;
display: flex;
align-items: flex-end;
opacity: 0.25;
cursor: pointer;
transition: 0.5s;
}
.image-accordion-item:hover {
opacity: 0.5;
}
h2,
p {
margin: 0;
}
.image-accordion {
display: flex;
gap: 12px;
}
.image-accordion-item {
cursor: pointer;
}
.image-accordion-item h2 {
font-size: 24px;
font-weight: 400;
color: rgb(255 255 255 / 96%);
}
.image-accordion-item p {
color: rgb(255 255 255 / 66%);
}
.image-accordion-item.active {
width: 400px;
opacity: 1;
}
.image-accordion-item .material-symbols-outlined {
display: grid;
place-items: center;
width: 50px;
height: 50px;
background: rgb(255 255 255 / 20%);
border-radius: 50%;
font-size: 28px;
}
.image-accordion-item .content {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
z-index: 1;
opacity: 0;
visibility: hidden;
padding: 100px 0 20px 20px;
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%));
transition: 0.25s;
}
.image-accordion-item.active .content {
opacity: 1;
visibility: visible;
}
.image-accordion-item img {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
translate: -50% -50%;
height: 150%;
filter: grayscale(0.5);
}
================================================
FILE: src/components/accordions/Accordion2/Accordion2.css
================================================
.accordion-2 {
list-style: none;
margin: 0;
padding: 0;
}
.accordion-2-item h2 {
display: flex;
align-items: center;
height: 48px;
padding: 0 10px 0 20px;
border-radius: 8px;
cursor: pointer;
background: #2d2f3c;
margin: 0 0 10px;
color: #f8f8f8;
font-size: 16px;
font-weight: 400;
transition: 0.3s;
opacity: 0.7;
}
.accordion-2-item h2:hover {
background: #303341;
opacity: 1;
}
.accordion-2-item h2.active {
background: #3472ff;
opacity: 1;
}
.accordion-2-item h2.active > span:last-child {
rotate: -180deg;
}
.accordion-2-item p {
padding: 0 20px 10px;
line-height: 1.7;
font-size: 14px;
margin: 0;
opacity: 0.65;
cursor: pointer;
}
.accordion-2-item > h2 > span {
transition: 0.3s;
}
.accordion-2-content {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.5s ease;
}
================================================
FILE: src/components/accordions/Accordion2/Accordion2.jsx
================================================
import { useRef, useState } from "react";
import "./Accordion2.css";
const AccordionItem = (props) => {
const contentEl = useRef(null);
const { handleToggle, active, item, index } = props;
const { header, content } = item;
return (
handleToggle(index)}
>
{header}
expand_more
);
};
export const Accordion2 = ({ items }) => {
const [active, setActive] = useState(null);
const handleToggle = (index) => setActive(active === index ? null : index);
return (
{items.map((item, index) => {
return (
);
})}
);
};
================================================
FILE: src/components/accordions/Accordion2/Accordion2Example.css
================================================
.page.accordion-2-page {
display: grid;
place-items: center;
height: 100vh;
color: #ffffff;
background: #141316;
font-family: "Euclid Circular B", "Poppins";
}
.accordion-2-card {
background: #22252f;
width: 400px;
padding: 24px;
border-radius: 12px;
cursor: pointer;
}
.accordion-2-header {
display: flex;
align-items: center;
gap: 8px;
margin-right: auto;
}
.accordion-2-header > span {
font-size: 20px;
}
================================================
FILE: src/components/accordions/Accordion2/Accordion2Example.jsx
================================================
import { Accordion2 } from "./Accordion2";
import "./Accordion2Example.css";
const faqs = [
{
header: (
mail Delivery
),
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.`,
},
{
header: (
credit_card Returns &
Refunds
),
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.`,
},
{
header: (
warning Order Issues
),
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.`,
},
{
header: (
package_2 Products &
Stock
),
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.`,
},
];
export const Accordion2Example = () => (
);
================================================
FILE: src/components/accordions/Accordion3/Accordion3.css
================================================
.page.accordion-3-page {
background: #141415;
}
.page.accordion-3-page .bg {
background-size: cover;
position: fixed;
width: 100vh;
min-width: 100vh;
max-width: 100vh;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
top: 0;
left: 0;
filter: grayscale(5);
transition: background 0.5s;
}
.page.accordion-3-page .bg::after {
content: "";
position: absolute;
inset: 0;
background: rgb(0 0 0 / 80%);
backdrop-filter: blur(16px);
}
.accordion-3-item:hover {
opacity: 0.5;
}
.accordion-3 :is(h2, p) {
margin: 0;
}
.accordion-3 {
display: flex;
gap: 12px;
}
.accordion-3-item {
position: relative;
overflow: hidden;
background: #ffffff;
width: 64px;
height: 500px;
border-radius: 36px;
display: flex;
align-items: flex-end;
opacity: 0.25;
cursor: pointer;
transition: 0.5s;
}
.accordion-3-item h2 {
font-size: 24px;
font-weight: 400;
color: rgb(255 255 255 / 96%);
}
.accordion-3-item p {
color: rgb(255 255 255 / 66%);
}
.accordion-3-item.active {
width: 400px;
opacity: 1;
}
.accordion-3-item .material-symbols-outlined.icon {
display: grid;
place-items: center;
width: 50px;
height: 50px;
background: rgb(255 255 255 / 20%);
border-radius: 50%;
font-size: 28px;
}
.accordion-3-item .content {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
z-index: 1;
opacity: 0;
visibility: hidden;
padding: 100px 0 20px 20px;
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%));
transition: 0.25s;
}
.accordion-3-item.active .content {
opacity: 1;
visibility: visible;
}
.accordion-3-item img {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
translate: -50% -50%;
height: 150%;
filter: grayscale(0.5);
}
================================================
FILE: src/components/accordions/Accordion3/Accordion3.jsx
================================================
import { useState } from "react";
import "./Accordion3.css";
export const Accordion3 = ({ items }) => {
const [active, setActive] = useState(0);
const handleToggle = (index) => setActive(index);
return (
{items.map((item, index) => {
const isActive = active === index ? "active" : "";
return (
handleToggle(index)}
>
photo_camera
{item.header}
{item.text}
);
})}
);
};
================================================
FILE: src/components/accordions/Accordion3/Accordion3Example.jsx
================================================
import { Accordion3 } from "./Accordion3";
import image1 from "./6.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
import image5 from "./5.jpg";
const coolImages = [
{
header: "Canada",
image: image4,
text: `Image description`,
},
{
header: "New Zealand",
image: image1,
text: `Image description`,
},
{
header: "Indonesia",
image: image3,
text: `Image description`,
},
{
header: "South Africa",
image: image2,
text: `Image description`,
},
{
header: "Spain",
image: image5,
text: `Image description`,
},
];
export const Accordion3Example = () => ;
================================================
FILE: src/components/accordions/index.js
================================================
export * from "./Accordion1/Accordion1";
export * from "./Accordion1/Accordion1Example";
export * from "./Accordion2/Accordion2Example";
export * from "./Accordion3/Accordion3Example";
================================================
FILE: src/components/buttons/DeleteButton/DeleteButton.jsx
================================================
import { useState } from "react";
import "./styles.css";
export const DeleteButton = () => {
const [isDeleting, setIsDeleting] = useState(false);
const [isDeleted, setIsDeleted] = useState(false);
const handleClick = () => {
setIsDeleting(true);
// do something async
setTimeout(() => {
setIsDeleting(false);
setIsDeleted(true);
setTimeout(() => {
setIsDeleted(false);
}, 1250);
}, 2500);
};
return (
{isDeleting || isDeleted ? "Deleting" : "Delete"}
);
};
================================================
FILE: src/components/buttons/DeleteButton/styles.css
================================================
.page.delete-button-page {
background: #141414;
}
.delete-button {
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
border: 0;
background: #fc3b51;
font-size: 24px;
font-weight: 400;
font-family: "Euclid Circular A";
color: #f9f9f9;
padding: 0 10px 0 32px;
height: 74px;
text-align: left;
cursor: pointer;
outline: none;
transition: 0.3s;
}
.delete-button .button-text {
display: block;
text-align: center;
min-width: 94px;
}
.delete-button .animation {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
width: 64px;
height: 74px;
flex: 0 0 64px;
min-width: 0;
}
.delete-button .can {
overflow: hidden;
position: relative;
translate: 0 2px;
width: 20px;
height: 22px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 2px solid #ffffff;
border-top: 0;
}
@keyframes lid-open {
0% {
rotate: 0;
}
15%,
90% {
rotate: -75deg;
translate: -70% -20%;
width: 20px;
}
}
.delete-button .lid {
position: absolute;
top: 24px;
left: 50%;
translate: -50% 0;
transform-origin: 0% 0%;
width: 24px;
height: 2px;
background: #ffffff;
}
@keyframes balls-drop {
0%,
20% {
translate: -50% 0;
}
40% {
scale: 1 1;
}
40%,
100% {
translate: -50% 72px;
}
50%,
100% {
scale: 2.1 1;
}
}
.delete-button .balls {
position: absolute;
top: -32px;
left: 50%;
translate: -50% 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: #ffffff;
}
@keyframes fill {
0%,
20% {
translate: 0 0;
}
50%,
70% {
translate: 0 -50%;
}
90%,
100% {
translate: 0 -100%;
}
}
.delete-button .filler {
position: absolute;
top: 100%;
left: 50%;
margin-left: -32px;
width: 64px;
height: 120%;
background: #ffffff;
}
.delete-button:disabled {
cursor: not-allowed;
}
.delete-button.deleting .balls {
animation: balls-drop 2 linear 1.25s;
}
.delete-button.deleting .filler {
animation: fill 2.5s both;
}
.delete-button.deleting .lid {
animation: lid-open 2.5s both;
}
================================================
FILE: src/components/buttons/FabButton/FabButton.css
================================================
.page.fab-button-page {
background: #16151b;
}
.fab {
position: fixed;
right: 30px;
bottom: 38px;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.fab button {
cursor: pointer;
border: 0;
background: transparent;
}
.fab > button {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
border: 0;
background: #e952de;
border: 0;
color: #f9f9f9;
transition: 0.2s;
rotate: 0deg;
}
.fab > button > span {
font-size: 36px;
}
.fab-menu {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
width: 360px;
height: 360px;
translate: -50% -50%;
border: 80px solid #282633;
border-radius: 50%;
rotate: -220deg;
scale: 0.7;
opacity: 0;
transition: 0.4s ease-out;
}
.fab.open > button {
rotate: 45deg;
}
.fab.open .fab-menu {
rotate: 0deg;
scale: 1;
opacity: 1;
}
.fab-menu > button {
position: absolute;
color: #e0e0e0;
transition: 0.4s;
}
.fab-menu > button:hover {
scale: 1.2;
color: #f9f9f9;
}
.fab .material-symbols-outlined {
font-size: 36px;
}
.fab-menu > button:nth-child(1) {
left: 78px;
top: -58px;
}
.fab-menu > button:nth-child(2) {
left: -16px;
top: -16px;
}
.fab-menu > button:nth-child(3) {
left: -58px;
top: 78px;
}
================================================
FILE: src/components/buttons/FabButton/FabButton.jsx
================================================
import { useState } from "react";
import "./FabButton.css";
const Icon = ({ children }) => (
{children}
);
export const FabButton = () => {
const [isOpen, setIsOpen] = useState(false);
return (
setIsOpen(!isOpen)}>
add
favorite
sell
settings
);
};
================================================
FILE: src/components/buttons/TrashButton/TrashButton.css
================================================
.page.trash-button-page {
background: #141414;
}
.trash-button {
--color-icon: #f9f9f9;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
border: 0;
background: #fc3b51;
font-size: 22px;
font-weight: 400;
font-family: "Euclid Circular B";
color: var(--color-icon);
padding: 0 0 0 20px;
opacity: 0.85;
width: 160px;
height: 64px;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
@keyframes loader-move {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.trash-button .loader {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 4px;
background: rgb(0 0 0 / 24%);
opacity: 0;
transition: 0.3s;
}
.trash-button.deleting .loader {
opacity: 1;
}
.trash-button .loader::after {
content: "";
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: 0% 50%;
background: #f9f9f9;
}
.trash-button.deleting .loader::after {
animation: loader-move 1.5s linear both;
}
.trash-button:hover {
opacity: 1;
}
.trash-button .button-text {
flex: 0 0 66px;
width: 66px;
}
.trash-button .animation {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
width: 64px;
height: 64px;
scale: 1;
}
.trash-button .can {
overflow: hidden;
position: relative;
translate: 0 3px;
width: 20px;
height: 22px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 2px solid var(--color-icon);
}
.trash-button .lid {
position: absolute;
top: 20px;
left: 50%;
translate: -50% 0;
width: 22px;
height: 2px;
background: var(--color-icon);
}
@keyframes move {
75%,
100% {
translate: 0 88px;
}
}
.trash-button :is(.paper-wrapper, .shredded-wrapper) {
overflow: hidden;
position: absolute;
display: flex;
top: -20px;
}
.trash-button .paper-wrapper {
height: 40px;
}
.trash-button .shredded-wrapper {
top: 24px;
height: 20px;
}
.trash-button :is(.paper, .shredded) {
height: 18px;
}
.trash-button .shredded {
margin-top: -40px;
}
@keyframes fill {
0%,
20% {
translate: 0 0;
}
40%,
70% {
translate: 0 -50%;
}
90%,
100% {
translate: 0 -100%;
}
}
.trash-button .filler {
position: absolute;
top: 100%;
left: 50%;
margin-left: -32px;
width: 64px;
height: 120%;
background: var(--color-icon);
}
.trash-button:disabled {
cursor: not-allowed;
}
.trash-button.deleting :is(.paper, .shredded) {
animation: move 1s linear 2 both;
}
.trash-button.deleting .filler {
animation: fill 2s both;
}
================================================
FILE: src/components/buttons/TrashButton/TrashButton.jsx
================================================
import { useState } from "react";
import "./TrashButton.css";
import paper from "./paper.svg";
import shredded from "./shredded.svg";
export const TrashButton = () => {
const [isDeleting, setIsDeleting] = useState(false);
const handleClick = () => {
setIsDeleting(true);
// do something async
setTimeout(() => {
setIsDeleting(false);
}, 2500);
};
return (
Delete
);
};
================================================
FILE: src/components/buttons/index.js
================================================
export * from "./DeleteButton/DeleteButton";
export * from "./TrashButton/TrashButton";
export * from "./FabButton/FabButton";
================================================
FILE: src/components/cards/Card1/Card1.jsx
================================================
import "./styles.css";
const cards = [
{
name: "summary",
total: 21,
description: "Due Tasks",
footer: "Completed: 13",
more: "More Information",
},
{
name: "overdue",
total: 17,
description: "Projects",
footer: "Yesterday: 9",
more: "More Information",
},
{
name: "features",
total: 38,
description: "Proposals",
footer: "Implemented: 6",
more: "More Information",
},
];
export const Card1 = () => {
return (
{cards.map((card) => (
{card.total}
{card.description}
{card.footer}
))}
);
};
================================================
FILE: src/components/cards/Card1/styles.css
================================================
.page.card-1-page {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
color: #f7f7f7;
background: #121212;
font-family: "Euclid Circular A", "Poppins";
}
.card-1-page h2,
.card-1-page h3,
.card-1-page h4 {
margin: 0;
font-weight: 500;
}
.card-1-page .cards {
display: flex;
gap: 30px;
}
.card-1-page .card {
position: relative;
perspective: 1000px;
width: 300px;
height: 300px;
}
.card-1-page .card header {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
margin-bottom: 26px;
}
.card-1-page .card header h2 {
font-size: 20px;
text-transform: capitalize;
}
.card-1-page .card .front,
.card-1-page .card .back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backface-visibility: hidden;
background: #1e1e1e;
border-radius: 10px;
padding: 36px 36px 44px 44px;
transition: 0.6s;
cursor: pointer;
}
.card-1-page .back {
transform: rotateY(180deg);
}
.card-1-page input {
position: absolute;
scale: 0;
}
.card-1-page input:checked ~ .card .back {
transform: rotateY(0);
}
.card-1-page input:checked ~ .card .front {
transform: rotateY(-180deg);
}
.card-1-page .card var {
font-style: normal;
font-size: 80px;
line-height: 1;
}
.card-1-page .card h3 {
margin: 0 0 30px;
font-weight: 500;
}
.card-1-page #summary :is(var, h3) {
color: #3b82f6;
}
.card-1-page #overdue :is(var, h3) {
color: #e56363;
}
.card-1-page #features :is(var, h3) {
color: #25b697;
}
.card-1-page .card :is(h4, p) {
opacity: 0.6;
font-size: 20px;
}
.card-1-page .card p {
margin-top: 76px;
}
================================================
FILE: src/components/cards/Card2/Card2.css
================================================
.page.card-2-example-page {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background: linear-gradient(45deg, #0cd2d1, #0857c0);
color: #fdfcfd;
font-family: "Euclid Circular A", "Poppins";
}
.card-2 {
display: flex;
align-items: center;
width: 75vw;
max-width: 650px;
padding: 50px 30px 50px 20px;
background: #121017;
border-radius: 24px;
box-shadow: 0 80px 60px rgb(0 0 0 / 12%);
}
.card-2 img {
max-width: 280px;
width: 32vw;
height: 300px;
object-fit: cover;
margin-left: -60px;
margin-right: 30px;
border-radius: inherit;
box-shadow: 0 60px 40px rgb(0 0 0 / 12%);
transition: border-radius 0.3s;
}
.card-2 h2 {
font-size: 26px;
font-weight: 400;
margin-top: 0;
margin-right: 30px;
margin-bottom: 6px;
}
.card-2 h3 {
font-size: 16px;
font-weight: 400;
margin: 0 0 12px;
opacity: 0.66;
}
.card-2 p {
font-size: 14px;
font-weight: 400;
margin-bottom: 30px;
opacity: 0.42;
}
.card-2 .buttons {
display: flex;
gap: 12px;
}
.card-2 button {
border: 1px solid #f8f8f8;
background: transparent;
color: #f8f8f8;
width: 40%;
min-width: 100px;
text-align: center;
font-family: inherit;
padding: 12px 26px;
font-size: 16px;
border-radius: 40px;
}
.card-2 button.primary {
background: #ffffff;
color: #121017;
}
@media (width <= 600px) {
.card-2 {
margin: 0 40px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 60px;
width: 100%;
text-align: center;
flex-direction: column;
}
.card-2 .buttons {
justify-content: center;
}
.card-2 .buttons button {
width: 50%;
}
.card-2 h2 {
margin-right: 0;
font-size: 26px;
}
.card-2 img {
margin: -100px 0 30px 0;
width: 100%;
max-width: 1000px;
height: 250px;
}
.card-2 p {
max-width: 400px;
}
}
@media (width <= 420px) {
.card-2 img {
height: 50vw;
width: 50vw;
border-radius: 50%;
margin: -140px 0 30px 0;
}
}
================================================
FILE: src/components/cards/Card2/Card2.jsx
================================================
import "./Card2.css";
export const Card2 = ({
image,
title,
subtitle,
description,
onProfile,
onFollow,
}) => (
{title}
{subtitle}
{description}
Profile
Follow
);
================================================
FILE: src/components/cards/Card2/Card2Example.jsx
================================================
import { Card2 } from "./Card2";
import image from "./image.jpg";
export const Card2Example = () => {
const handleProfile = () => {
// goto profile
};
const handleFollow = () => {
// follow account
};
return (
);
};
================================================
FILE: src/components/cards/Card3/Card3.css
================================================
.card-3 {
--color-primary: #356aff;
--color-muted: #9895a2;
--color-highlight: #242328;
--border: 1px solid #2f2e32;
position: relative;
border-radius: 24px;
width: clamp(200px, 80vw, 500px);
padding-top: 30px;
background: #1c1b20;
}
.card-3 > img {
position: absolute;
top: 0;
left: 50%;
translate: -50% -50%;
width: 92px;
aspect-ratio: 1/1;
border-radius: 50%;
background: var(--color-highlight);
padding: 20px;
box-shadow: 0 20px 150px rgb(0 0 0 / 8%);
}
.card-3 .main {
padding: 24px 24px 0;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.card-3 :is(h2, h3, h4, h5) {
font-weight: 400;
margin: 0;
}
.card-3 em {
font-style: normal;
color: var(--color-primary);
}
.card-3 h2 {
font-weight: 600;
font-size: 20px;
margin-top: 18px;
margin-bottom: 18px;
}
.card-3 h3 {
font-weight: 300;
font-size: clamp(16px, 4vw, 20px);
color: var(--color-muted);
}
.card-3 h4 {
font-weight: 500;
font-size: clamp(22px, 5.5vw, 26px);
margin-bottom: 6px;
}
.card-3 h5 {
color: var(--color-muted);
font-size: clamp(14px, 4vw, 16px);
margin-bottom: 40px;
}
.card-3 .details {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
margin-bottom: 20px;
font-size: clamp(14px, 4vw, 16px);
}
.card-3 .salary em {
color: var(--color-muted);
}
.card-3 .date {
color: var(--color-muted);
}
.card-3 .footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 16px 24px;
border-top: var(--border);
}
.card-3 .footer button {
background: transparent;
border: var(--border);
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
color: inherit;
}
.card-3 .footer button span {
font-size: 22px;
}
.card-3 .badge {
display: inline-flex;
margin-right: auto;
align-items: center;
gap: 12px;
padding-right: 20px;
font-size: 14px;
border-radius: 50px;
background: var(--color-highlight);
}
.card-3 .badge .text {
display: none;
}
.card-3 .badge img {
width: 40px;
}
.card-3 .badge p {
color: var(--color-muted);
}
@media (width >= 430px) {
.card-3 {
padding-top: 0;
}
.card-3 > img {
position: absolute;
top: 20px;
right: 20px;
left: auto;
translate: 0;
width: clamp(68px, 12vw, 80px);
padding: 16px;
border-color: transparent;
box-shadow: none;
}
.card-3 .main {
text-align: left;
}
.card-3 .badge .text {
display: inline;
}
.card-3 h5 {
margin-bottom: 28px;
}
}
================================================
FILE: src/components/cards/Card3/Card3.jsx
================================================
import logo from "./logo.svg";
import avatar from "./avatar.png";
import "./Card3.css";
export const Card3 = ({
company,
level,
role,
location,
isRemote,
salary,
when,
profileMatch,
onShare,
onSave,
}) => (
{company}
{level}
{role}
{location} {isRemote && (Remote) }
{" "}
{salary}
/month {" "}
{when}
);
================================================
FILE: src/components/cards/Card3/Card3Example.css
================================================
.page.card-3-page {
background: #111116;
color: #ffffff;
height: 100vh;
margin: 0;
display: grid;
place-items: center;
font-family: "Euclid Circular B", "Poppins";
}
================================================
FILE: src/components/cards/Card3/Card3Example.jsx
================================================
import { Card3 } from "./Card3";
import "./Card3Example.css";
export const Card3Example = () => {
const onShare = () => console.log("share");
const onSave = () => console.log("share");
return (
);
};
================================================
FILE: src/components/cards/Card4/Card4.css
================================================
.card-4 {
display: flex;
align-items: center;
width: 75vw;
max-width: 650px;
padding: 24px 30px 24px 20px;
background: rgba(0, 0, 0, 20%);
backdrop-filter: blur(30px);
border-radius: 24px;
}
.card-4 img {
max-width: 280px;
width: 36vw;
height: 340px;
object-fit: cover;
margin-left: -60px;
margin-right: 30px;
border-radius: inherit;
box-shadow: 0 20px 40px rgb(0 0 0 / 16%);
transition: border-radius 0.3s;
}
.card-4 h2 {
font-size: 24px;
font-weight: 400;
margin-top: 0;
margin-right: 30px;
margin-bottom: 10px;
}
.card-4 h3 {
font-size: 16px;
font-weight: 400;
margin: 0 0 10px;
opacity: 0.75;
}
.card-4 p {
font-size: 14px;
font-weight: 400;
margin-bottom: 30px;
opacity: 0.5;
}
.card-4-socials {
display: flex;
align-items: center;
gap: 18px;
}
.card-4-socials > button {
position: relative;
border: 0;
background: transparent;
color: #f8f8f8;
padding: 0;
}
.card-4-socials > button > i {
position: relative;
z-index: 1;
display: grid;
place-items: center;
font-size: 24px;
height: 50px;
}
@media (width <= 600px) {
.card-4 {
margin: 0 40px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 60px;
width: 100%;
text-align: center;
flex-direction: column;
}
.card-4 h2 {
margin-right: 0;
font-size: 26px;
}
.card-4 img {
margin: -100px 0 30px 0;
width: 100%;
max-width: 1000px;
height: 250px;
}
.card-4 p {
max-width: 360px;
}
.card-4-socials {
justify-content: center;
}
}
@media (width <= 440px) {
.card-4 img {
height: 50vw;
width: 50vw;
border-radius: 50%;
border: 12px solid var(--card);
box-shadow: none;
margin: -140px 0 30px 0;
}
}
================================================
FILE: src/components/cards/Card4/Card4.jsx
================================================
import image from "./image.jpg";
import "./Card4.css";
export const Card4 = ({ name, role, bio, socials, onSocialClick }) => (
{name}
{role}
{bio}
{socials.map((social) => (
onSocialClick(social)}>
))}
);
================================================
FILE: src/components/cards/Card4/Card4Example.css
================================================
.page.card-4-page {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background: linear-gradient(45deg, #3727a9, #4a1c40);
color: #fdfcfd;
font-family: "Euclid Circular A", "Poppins";
}
================================================
FILE: src/components/cards/Card4/Card4Example.jsx
================================================
import { Card4 } from "./Card4";
import "./Card4Example.css";
export const Card4Example = () => {
const handleSocialClick = (type) => {
console.log("handleSocialClick", type);
};
const socials = ["facebook", "discord", "pinterest", "dribbble"];
return (
);
};
================================================
FILE: src/components/cards/Card5/Card5.css
================================================
.card-5 {
background: #ffffff;
border-radius: 28px;
padding: 24px;
width: 400px;
box-shadow: 0 40px 80px rgba(128, 87, 216, 0.1);
}
.card-5 label {
color: #a39fb2;
font-size: 15px;
}
.card-5-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.card-5-header h2 {
font-weight: 500;
color: #4f4664;
}
.card-5-chart {
display: flex;
height: 220px;
}
.card-5-chart-y-axis {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 20px;
padding-bottom: 32px;
}
.card-5-chart-y-axis label {
height: 25%;
display: flex;
align-items: flex-end;
translate: 0 6px;
}
.card-5-chart-bars {
display: flex;
flex: 1 1 auto;
margin: 0 0 0 12px;
opacity: 0.8;
background-size: 1px 52px;
background-position: -32px;
background-image: repeating-linear-gradient(
0deg,
#ebecfa,
#ebecfa 1px,
#fff 1px,
#fff
);
}
.card-5-chart-bar-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: 33.33%;
}
.card-5-chart-bar-wrapper label {
height: 32px;
display: flex;
align-items: flex-end;
}
.card-5-chart-bar {
position: relative;
background: linear-gradient(rgb(199 194 253 / 100%), rgb(199 194 253 / 4%));
height: 60px;
width: 40px;
border-radius: 20px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.card-5-chart-bar::after {
content: "";
position: absolute;
inset: 0;
background: #c7c2fd;
border-radius: inherit;
transition: 0.3s;
opacity: 0;
}
.card-5-chart-bar:hover::after {
opacity: 1;
}
.card-5-chart-tooltip {
opacity: 0;
position: absolute;
left: calc(50% + 24px);
bottom: 89px;
transition: 0.3s;
}
.card-5-chart-tooltip::after,
.card-5-chart-tooltip::before {
content: "";
position: absolute;
background: #8a54ff;
}
.card-5-chart-tooltip::before {
right: 0;
bottom: -6px;
width: 63px;
height: 2px;
}
.card-5-chart-tooltip::after {
right: 63px;
bottom: -8px;
width: 6px;
height: 6px;
border-radius: 50%;
}
.card-5-chart-tooltip h3 {
font-size: 12px;
font-weight: 500;
}
.card-5-chart-tooltip var {
font-style: normal;
font-size: 11px;
white-space: nowrap;
color: #8f8b9c;
}
.card-5-chart-bar:hover ~ .card-5-chart-tooltip {
opacity: 1;
}
================================================
FILE: src/components/cards/Card5/Card5.jsx
================================================
import { useState } from "react";
import "./Card5.css";
import { Dropdown } from "./Dropdown";
const days = ["today", "yesterday"];
const yValues = [300, 200, 100, 0];
const data = [
{
name: "today",
values: [
{
name: "Protein",
value: 180,
energy: 420,
},
{
name: "Fat",
value: 260,
energy: 560,
},
{
name: "Carbs",
value: 200,
energy: 490,
},
],
},
{
name: "yesterday",
values: [
{
name: "Protein",
value: 250,
energy: 503,
},
{
name: "Fat",
value: 150,
energy: 450,
},
{
name: "Carbs",
value: 240,
energy: 652,
},
],
},
];
export const Card5 = ({ title }) => {
const [day, setDay] = useState("today");
const activeData = data.find((d) => d.name === day);
const handleDayChanged = (nextDay) => setDay(nextDay);
return (
{title}
{yValues.map((v) => (
{v} g
))}
{activeData.values.map((v) => (
{v.name}
Energy
{v.energy} kcal
))}
);
};
================================================
FILE: src/components/cards/Card5/Card5Example.css
================================================
.page.card-5-page {
background: linear-gradient(135deg, #dfd0ff, #ffffff);
color: #1f1b29;
}
================================================
FILE: src/components/cards/Card5/Card5Example.jsx
================================================
import { Card5 } from "./Card5";
import "./Card5Example.css";
export const Card5Example = () => (
);
================================================
FILE: src/components/cards/Card5/Dropdown.css
================================================
.card-5-dropdown {
position: relative;
}
.card-5-dropdown button {
cursor: pointer;
font-family: inherit;
padding: 8px 12px;
text-transform: capitalize;
background: transparent;
border: 0;
}
.card-5-dropdown > button {
display: flex;
gap: 8px;
background: #eeeef5;
color: #736a88;
border-radius: 9px;
opacity: 0.8;
padding-left: 12px;
padding-right: 8px;
transition: 0.3s;
}
.card-5-dropdown > button:hover {
opacity: 1;
}
.card-5-menu {
position: absolute;
overflow: hidden;
z-index: 10;
top: 40px;
right: 0;
width: max-content;
background: #fff;
box-shadow: 0 0 40px rgba(128, 87, 216, 0.2);
border-radius: 7px;
opacity: 0;
visibility: hidden;
display: grid;
transition: 0.3s;
}
.card-5-menu > button {
text-align: left;
opacity: 0.7;
transition: 0.3s;
color: #645a79;
}
.card-5-menu > button.active {
color: #8a54ff;
opacity: 1;
cursor: default;
}
.card-5-menu > button:hover {
background: #fbf9ff;
opacity: 1;
}
.card-5-menu.open {
opacity: 1;
visibility: visible;
}
================================================
FILE: src/components/cards/Card5/Dropdown.jsx
================================================
import { useState } from "react";
import "./Dropdown.css";
export const Dropdown = ({ items, selectedItem, onSelect }) => {
const [isOpen, setIsOpen] = useState(false);
const handleSelect = (item) => {
setIsOpen(false);
onSelect(item);
};
return (
setIsOpen(!isOpen)}>
{selectedItem}
{items.map((item) => (
handleSelect(item)}
>
{item}
))}
);
};
================================================
FILE: src/components/cards/Card6/Card6.css
================================================
.card-6 {
--color-muted: rgb(255 255 255 / 50%);
position: relative;
background: rgb(0 0 0 / 25%);
border-radius: 24px;
width: 85%;
max-width: 580px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 40px 60px rgba(58, 71, 72, 0.16);
}
.card-6-hero {
position: relative;
display: grid;
place-items: center;
border-radius: 22px;
padding: 48px 24px;
background: linear-gradient(#712ff6, #8d10f9);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-6-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px 24px 28px;
text-align: center;
}
.card-6 img {
height: 13.5vw;
min-height: 72px;
max-height: 84px;
border-radius: 50%;
box-shadow: 0 20px 80px rgb(0 0 0 / 56%);
border: 2px solid rgb(255 255 255 / 16%);
padding: 2px;
}
.card-6 var {
font-style: normal;
}
.card-6 ul {
list-style: none;
display: flex;
gap: 8px;
}
.card-6 .tags {
margin-bottom: 16px;
}
.card-6 .tags li {
background: rgb(255 255 255 / 12%);
font-size: 12px;
height: 28px;
color: var(--color-muted);
padding: 6px 8px;
border-radius: 32px;
}
.card-6 .stats {
gap: 0;
margin-bottom: 16px;
width: 90%;
}
.card-6 .stats li {
width: 33.33%;
display: flex;
flex-direction: column;
font-size: clamp(18px, 4vw, 24px);
min-width: 0;
}
.card-6 .stats label {
color: var(--color-muted);
font-size: 13px;
}
.card-6 :is(h2, h3, h4) {
font-weight: 400;
}
.card-6 h2 {
margin-bottom: 3px;
}
.card-6 h3 {
margin: 0 0 12px;
color: var(--color-muted);
font-size: 16px;
}
.card-6 button {
color: inherit;
font-family: inherit;
border-radius: 28px;
}
.card-6 .actions {
display: flex;
gap: 8px;
width: 100%;
}
.card-6 .contact-btn,
.card-6 .save-btn {
height: 48px;
box-shadow: 0 10px 80px rgb(0 0 0 / 12%);
background: rgb(255 255 255 / 5%);
border: 0;
backdrop-filter: blur(20px);
}
.card-6 .contact-btn {
flex: 1 1 auto;
font-size: 16px;
background: #f9f9f9;
color: #1f1e21;
}
.card-6 .save-btn {
width: 48px;
height: 48px;
}
.card-6 .share-btn {
background: transparent;
border: 0;
position: absolute;
top: 24px;
right: 24px;
z-index: 1;
display: grid;
place-items: center;
}
.card-6 .share-btn i {
font-size: 18px;
}
.card-6 i {
font-size: 18px;
}
@media (width >= 400px) {
.card-6 {
padding: 5px;
}
.card-6-content {
align-items: flex-start;
text-align: left;
padding: 24px;
}
.card-6-hero {
border-bottom-left-radius: 22px;
border-bottom-right-radius: 22px;
}
.card-6 .stats {
width: auto;
gap: 6vw;
}
}
@media (width >= 520px) {
.card-6 {
min-height: 300px;
flex-direction: row;
}
.card-6-hero {
flex: 1 1 45%;
min-width: 45%;
}
.card-6 .tags {
margin-bottom: 0;
}
.card-6-content {
flex: 1 1 55%;
max-width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
}
.card-6 .stats {
gap: 3vw;
height: 60px;
align-items: center;
}
.card-6 .actions {
margin-top: auto;
}
}
================================================
FILE: src/components/cards/Card6/Card6.jsx
================================================
import "./Card6.css";
export const Card6 = ({ name, role, tags, img, stats }) => {
return (
{name}
{role}
{tags.map((tag) => (
{tag}
))}
{stats.map((stat, index) => (
{stat}
))}
Get in touch
);
};
================================================
FILE: src/components/cards/Card6/Card6Example.css
================================================
.page.card-6-page {
background: #2b2a2f;
color: #f9f9f9;
}
.card-6-rating {
}
================================================
FILE: src/components/cards/Card6/Card6Example.jsx
================================================
import { Card6 } from "./Card6";
import "./Card6Example.css";
import avatar from "./avatar.png";
const tags = ["Figma", "UX Design"];
const Rating = () => 4.58 ;
const stats = [
<>
Rating
>,
<>
$15k
Earned
>,
<>
32h
Hours
>,
];
export const Card6Example = () => (
);
================================================
FILE: src/components/cards/Card7/Card7.css
================================================
.card-7 {
--card: #272524;
display: flex;
align-items: center;
width: 75vw;
max-width: 650px;
padding: 44px 30px 44px 20px;
background: var(--card);
border-radius: 24px;
}
.card-7 img {
max-width: 280px;
width: 36vw;
height: 300px;
object-fit: cover;
margin-left: -60px;
margin-right: 30px;
border-radius: inherit;
box-shadow: 0 60px 40px rgb(0 0 0 / 8%);
transition: border-radius 0.3s;
}
.card-7 h2 {
font-size: 22px;
font-weight: 400;
margin-top: 0;
margin-right: 30px;
margin-bottom: 10px;
}
.card-7 h3 {
font-size: 14px;
font-weight: 400;
margin: 0 0 12px;
opacity: 0.75;
}
.card-7 p {
font-size: 13px;
font-weight: 400;
margin-bottom: 30px;
opacity: 0.5;
}
.card-7 .socials {
display: flex;
align-items: center;
gap: 8px;
}
.card-7 .socials > button {
position: relative;
border: 0;
background: transparent;
color: #f8f8f8;
padding: 0;
}
.card-7 .socials > button:first-child::before {
content: "";
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
width: 52px;
height: 52px;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(45deg, #ff7c7d, #ffda67);
transition: 0.3s;
transform: translateY(0);
}
.card-7 .socials > button > i {
position: relative;
z-index: 1;
border: 4px solid var(--card);
background: #3f3b39;
display: grid;
place-items: center;
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 40px;
}
@media (width <= 600px) {
.card-7 {
margin: 0 40px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 60px;
width: 100%;
text-align: center;
flex-direction: column;
}
.card-7 h2 {
margin-right: 0;
font-size: 26px;
}
.card-7 img {
margin: -100px 0 30px 0;
width: 100%;
max-width: 1000px;
height: 250px;
}
.card-7 p {
max-width: 360px;
}
.card-7 .socials {
justify-content: center;
}
}
@media (width <= 440px) {
.card-7 img {
height: 50vw;
width: 50vw;
border-radius: 50%;
border: 12px solid var(--card);
box-shadow: none;
margin: -140px 0 30px 0;
}
}
================================================
FILE: src/components/cards/Card7/Card7.jsx
================================================
import "./Card7.css";
export const Card7 = ({ name, image, role, bio, socials }) => {
return (
{name}
{role}
{bio}
{socials.map((social) => (
))}
);
};
================================================
FILE: src/components/cards/Card7/Card7Example.css
================================================
.page.card-7-page {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background: linear-gradient(45deg, #ff7c7d, #ffda67);
color: #fdfcfd;
font-family: "Euclid Circular A", "Poppins";
}
================================================
FILE: src/components/cards/Card7/Card7Example.jsx
================================================
import { Card7 } from "./Card7";
import image from "./image.jpg";
import "./Card7Example.css";
const socials = ["dribbble", "pinterest", "codepen"];
export const Card7Example = () => (
);
================================================
FILE: src/components/cards/index.js
================================================
export * from "./Card1/Card1";
export * from "./Card2/Card2Example";
export * from "./Card3/Card3Example";
export * from "./Card4/Card4Example";
export * from "./Card5/Card5Example";
export * from "./Card6/Card6Example";
export * from "./Card7/Card7Example";
================================================
FILE: src/components/carousels/Carousel1/Carousel1.jsx
================================================
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow, Pagination } from "swiper/modules";
import "./styles.css";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import image1 from "./1.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
import image5 from "./5.jpg";
const slides = [
{
title: "1 Series",
image: image1,
},
{
title: "2 Series",
image: image2,
},
{
title: "3 Series",
image: image3,
},
{
title: "4 Series",
image: image4,
},
{
title: "5 Series",
image: image5,
},
];
export const Carousel1 = () => {
return (
{slides.map((slide) => (
))}
);
};
================================================
FILE: src/components/carousels/Carousel1/styles.css
================================================
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page.carousel-1-page {
position: relative;
display: flex;
align-items: center;
gap: 50px;
padding: 0 8vw;
background: linear-gradient(45deg, #2c3d46, #0c0f13);
color: #f9f9f9;
}
.carousel-1-page .swiper a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #717171;
font-weight: 500;
background: #fff;
border-radius: 3.125rem;
margin: 0 auto;
padding: 10px 26px;
font-size: 0.9rem;
transition: 0.3s ease-in-out;
}
.carousel-1-page .swiper {
width: 100%;
max-width: 800px;
height: 440px;
}
.carousel-1-page .swiper-slide {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
filter: grayscale(0.6);
background-size: cover;
background-position: center;
}
.carousel-1-page .swiper-slide h2 {
color: #fff;
font-weight: 100;
font-size: 20px;
line-height: 1.4;
margin-bottom: 0.625rem;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.carousel-1-page .swiper-slide a:hover {
color: #005baa;
}
.carousel-1-page .swiper-slide div {
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 80%));
transition: 0.25s;
opacity: 0;
align-self: stretch;
padding-bottom: 70px;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end;
}
.carousel-1-page .swiper-slide-active div {
opacity: 1;
}
.carousel-1-page .swiper-slide > div > div {
translate: 0 100px;
transition: 0.3s;
}
.carousel-1-page .swiper-slide-active > div > div {
translate: 0;
}
.carousel-1-page .swiper-pagination-bullet,
.carousel-1-page .swiper-pagination-bullet-active {
background: #fff !important;
}
.carousel-1-page .swiper-pagination {
bottom: 10px !important;
transform: scale(1.3);
}
================================================
FILE: src/components/carousels/Carousel2/Carousel2.jsx
================================================
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow } from "swiper/modules";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "./styles.css";
import image1 from "./1.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
import image5 from "./5.jpg";
import image6 from "./6.jpg";
import image7 from "./7.jpg";
import image8 from "./8.jpg";
import image9 from "./9.jpg";
const slides = [image2, image3, image4, image5, image6, image7, image8, image9];
export const Carousel2 = () => {
return (
{slides.map((slide) => (
))}
);
};
================================================
FILE: src/components/carousels/Carousel2/styles.css
================================================
.page.carousel-2-page {
background: #010101;
font-size: 14px;
color: #010101;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-2-page .swiper {
padding-top: 50px;
padding-bottom: 140px;
}
.carousel-2-page .swiper .swiper-slide {
background-position: center;
background-size: cover;
border-radius: 10px;
width: 300px;
height: 250px;
filter: saturate(1.2);
-webkit-box-reflect: below 1px
linear-gradient(transparent, transparent, #0006);
}
================================================
FILE: src/components/carousels/Carousel3/Carousel3.css
================================================
.page.carousel-3-page {
background: linear-gradient(45deg, #8647b3, #40429c);
font-size: 14px;
color: #f9f9f9;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-3-page h2 {
font-weight: 500;
margin: 0 0 16px;
}
.carousel-3-page p {
opacity: 0.7;
font-size: 18px;
margin: 0 0 20px;
}
.carousel-3-page a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: 500;
background: transparent;
border-radius: 3.125rem;
border: 2px solid #ffffff;
margin: 0 auto;
padding: 6px 26px;
font-size: 0.9rem;
transition: 0.3s ease-in-out;
}
.carousel-3-page .swiper {
height: 440px;
margin-top: 40px;
}
.carousel-3-page .swiper-pagination-bullet,
.carousel-3-page .swiper-pagination-bullet-active {
background: #fff;
}
.carousel-3-page .swiper-pagination {
bottom: 34px !important;
transform: scale(1.3);
}
.carousel-3-page .swiper-slide {
height: 300px;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
border-radius: 20px;
background-size: cover;
background-position: center;
filter: grayscale(0.4) saturate(2) sepia(0.2);
-webkit-box-reflect: below 24px
linear-gradient(transparent, transparent, #0006);
}
.carousel-3-page .swiper-slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 100%));
border-radius: inherit;
z-index: -1;
}
.carousel-3-page .swiper-slide h2 {
color: #fff;
font-weight: 400;
font-size: 1.4rem;
line-height: 1.4;
margin-bottom: 0.625rem;
text-transform: uppercase;
text-align: center;
}
.carousel-3-page .swiper-slide a:hover {
color: #005baa;
}
.carousel-3-page .swiper-slide div {
transition: 0.5s;
opacity: 0;
padding-bottom: 140px;
}
.carousel-3-page .swiper-slide-active div {
opacity: 1;
}
.swiper-slide-shadow-coverflow {
border-radius: 20px;
}
================================================
FILE: src/components/carousels/Carousel3/Carousel3.jsx
================================================
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "./Carousel3.css";
import image1 from "./1.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
import image5 from "./5.jpg";
const slides = [
{
name: "India",
src: image1,
},
{
name: "Japan",
src: image2,
},
{
name: "Scotland",
src: image3,
},
{
name: "Norway",
src: image4,
},
{
name: "France",
src: image5,
},
];
export const Carousel3 = () => {
return (
{slides.map((slide) => (
))}
);
};
================================================
FILE: src/components/carousels/index.js
================================================
export * from "./Carousel1/Carousel1";
export * from "./Carousel2/Carousel2";
export * from "./Carousel3/Carousel3";
================================================
FILE: src/components/controls/AutoSuggest/AutoSuggest.jsx
================================================
import { useEffect, useState } from "react";
import logo from "./Joegle.svg";
import "./styles.css";
const names = [
"Aarav",
"Aaron",
"Abdiel",
"Abdullah",
"Abel",
"Abraham",
"Abram",
"Ace",
"Adam",
"Adan",
"Aden",
"Adler",
"Adonis",
"Adrian",
"Adriel",
"Adrien",
"Agustin",
"Ahmad",
"Ahmed",
"Ahmir",
"Aidan",
"Aiden",
"Alan",
"Alaric",
"Albert",
"Alberto",
"Alden",
"Aldo",
"Alec",
"Alejandro",
"Alessandro",
"Alex",
"Alexander",
"Alexis",
"Alfonso",
"Alfred",
"Alfredo",
"Ali",
"Alijah",
"Alistair",
"Allan",
"Allen",
"Alonso",
"Alonzo",
"Alvaro",
"Alvin",
"Amari",
"Ambrose",
"Ameer",
"Amias",
"Amir",
"Amiri",
"Amos",
"Anakin",
"Ander",
"Anders",
"Anderson",
"Andre",
"Andres",
"Andrew",
"Andy",
"Angel",
"Angelo",
"Anthony",
"Antonio",
"Apollo",
"Archer",
"Archie",
"Ares",
"Ari",
"Arian",
"Ariel",
"Aries",
"Arjun",
"Arlo",
"Armando",
"Armani",
"Aron",
"Arthur",
"Arturo",
"Aryan",
"Asa",
"Asher",
"Ashton",
"Atharv",
"Atlas",
"Atreus",
"Atticus",
"August",
"Augustine",
"Augustus",
"Austin",
"Avery",
"Avi",
"Avyaan",
"Axel",
"Axl",
"Axton",
"Ayaan",
"Ayan",
"Ayden",
"Aydin",
"Azael",
"Azariah",
"Aziel",
"Azrael",
"Azriel",
"Baker",
"Banks",
"Barrett",
"Baylor",
"Bear",
"Beau",
"Beckett",
"Beckham",
"Bellamy",
"Ben",
"Benedict",
"Benicio",
"Benjamin",
"Bennett",
"Benson",
"Bentley",
"Bishop",
"Bjorn",
"Blaine",
"Blaise",
"Blake",
"Blaze",
"Bo",
"Bode",
"Boden",
"Bodhi",
"Bodie",
"Boone",
"Boston",
"Bowen",
"Bowie",
"Braden",
"Bradley",
"Brady",
"Brandon",
"Branson",
"Brantley",
"Braxton",
"Brayan",
"Brayden",
"Braylen",
"Braylon",
"Brecken",
"Brendan",
"Brennan",
"Brian",
"Briar",
"Bridger",
"Briggs",
"Brixton",
"Brock",
"Brodie",
"Brody",
"Bronson",
"Brooks",
"Bruce",
"Bruno",
"Bryan",
"Bryant",
"Bryce",
"Brycen",
"Bryson",
"Byron",
"Cade",
"Caden",
"Caiden",
"Cain",
"Cairo",
"Cal",
"Caleb",
"Callahan",
"Callan",
"Callen",
"Callum",
"Calum",
"Calvin",
"Camden",
"Cameron",
"Camilo",
"Canaan",
"Cannon",
"Carl",
"Carlos",
"Carmelo",
"Carson",
"Carter",
"Case",
"Casen",
"Casey",
"Cash",
"Cason",
"Caspian",
"Cassian",
"Cassius",
"Castiel",
"Cayden",
"Cayson",
"Cesar",
"Chaim",
"Chance",
"Chandler",
"Charles",
"Charlie",
"Chase",
"Chris",
"Christian",
"Christopher",
"Cillian",
"Clark",
"Clay",
"Clayton",
"Clyde",
"Cody",
"Cohen",
"Colby",
"Cole",
"Coleson",
"Colin",
"Collin",
"Colson",
"Colt",
"Colten",
"Colter",
"Colton",
"Conner",
"Connor",
"Conor",
"Conrad",
"Cooper",
"Corbin",
"Corey",
"Cory",
"Creed",
"Crew",
"Cristian",
"Crosby",
"Cruz",
"Cullen",
"Curtis",
"Cyrus",
"Dakari",
"Dakota",
"Dallas",
"Dalton",
"Damari",
"Damian",
"Damien",
"Damir",
"Damon",
"Dane",
"Dangelo",
"Daniel",
"Danny",
"Dante",
"Darian",
"Dariel",
"Dario",
"Darius",
"Darren",
"Dash",
"Davian",
"David",
"Davion",
"Davis",
"Dawson",
"Dax",
"Daxton",
"Deacon",
"Dean",
"Deandre",
"Declan",
"Demetrius",
"Dennis",
"Denver",
"Derek",
"Derrick",
"Desmond",
"Devin",
"Devon",
"Dexter",
"Diego",
"Dilan",
"Dillon",
"Dimitri",
"Dior",
"Dominic",
"Dominick",
"Dominik",
"Donald",
"Donovan",
"Dorian",
"Douglas",
"Drake",
"Drew",
"Duke",
"Dustin",
"Dylan",
"Easton",
"Eddie",
"Eden",
"Edgar",
"Edison",
"Eduardo",
"Edward",
"Edwin",
"Eithan",
"Eli",
"Eliam",
"Elian",
"Elias",
"Eliel",
"Elijah",
"Elio",
"Eliseo",
"Elisha",
"Elliot",
"Elliott",
"Ellis",
"Elon",
"Emanuel",
"Emerson",
"Emery",
"Emiliano",
"Emilio",
"Emir",
"Emmanuel",
"Emmett",
"Emmitt",
"Emory",
"Enoch",
"Enrique",
"Enzo",
"Ephraim",
"Eric",
"Erick",
"Erik",
"Ermias",
"Ernesto",
"Esteban",
"Ethan",
"Eugene",
"Evan",
"Evander",
"Everest",
"Everett",
"Ezekiel",
"Ezequiel",
"Ezra",
"Fabian",
"Felipe",
"Felix",
"Fernando",
"Finley",
"Finn",
"Finnegan",
"Finnley",
"Fisher",
"Fletcher",
"Flynn",
"Ford",
"Forest",
"Forrest",
"Fox",
"Francis",
"Francisco",
"Franco",
"Frank",
"Franklin",
"Frederick",
"Gabriel",
"Gael",
"Gage",
"Garrett",
"Gary",
"Gatlin",
"Gavin",
"Genesis",
"George",
"Gerardo",
"Gian",
"Gianni",
"Gideon",
"Giovanni",
"Gordon",
"Grady",
"Graham",
"Granger",
"Grant",
"Graysen",
"Grayson",
"Gregory",
"Grey",
"Greyson",
"Griffin",
"Guillermo",
"Gunnar",
"Gunner",
"Gustavo",
"Hamza",
"Hank",
"Harlan",
"Harlem",
"Harley",
"Harold",
"Harrison",
"Harry",
"Harvey",
"Hassan",
"Hayden",
"Hayes",
"Heath",
"Hector",
"Hendrix",
"Henrik",
"Henry",
"Hezekiah",
"Holden",
"Houston",
"Howard",
"Hudson",
"Hugh",
"Hugo",
"Hunter",
"Huxley",
"Ian",
"Ibrahim",
"Idris",
"Ignacio",
"Iker",
"Ira",
"Isaac",
"Isaiah",
"Isaias",
"Ishaan",
"Ismael",
"Israel",
"Issac",
"Ivan",
"Izaiah",
"Jabari",
"Jace",
"Jack",
"Jackson",
"Jacob",
"Jacoby",
"Jaden",
"Jadiel",
"Jagger",
"Jaiden",
"Jaime",
"Jair",
"Jakai",
"Jakari",
"Jake",
"Jakob",
"Jakobe",
"Jalen",
"Jamal",
"Jamari",
"James",
"Jameson",
"Jamie",
"Jamir",
"Jamison",
"Jared",
"Jase",
"Jasiah",
"Jason",
"Jasper",
"Javier",
"Jax",
"Jaxon",
"Jaxson",
"Jaxton",
"Jaxtyn",
"Jaxx",
"Jaxxon",
"Jay",
"Jayce",
"Jayceon",
"Jayden",
"Jaylen",
"Jayson",
"Jaziel",
"Jedidiah",
"Jefferson",
"Jeffrey",
"Jensen",
"Jeremiah",
"Jeremias",
"Jeremy",
"Jericho",
"Jerry",
"Jesiah",
"Jesse",
"Jesus",
"Jett",
"Jimmy",
"Jiraiya",
"Joaquin",
"Joe",
"Joel",
"Joey",
"Johan",
"John",
"Johnathan",
"Johnny",
"Jon",
"Jonah",
"Jonas",
"Jonathan",
"Jones",
"Jordan",
"Jorge",
"Jose",
"Joseph",
"Joshua",
"Josiah",
"Josue",
"Jovanni",
"Joziah",
"Juan",
"Judah",
"Jude",
"Judson",
"Julian",
"Julien",
"Julio",
"Julius",
"Junior",
"Justice",
"Justin",
"Kabir",
"Kace",
"Kade",
"Kaden",
"Kai",
"Kaiden",
"Kairo",
"Kaiser",
"Kaison",
"Kaleb",
"Kalel",
"Kamari",
"Kamden",
"Kamdyn",
"Kameron",
"Kane",
"Kannon",
"Kareem",
"Karson",
"Karsyn",
"Karter",
"Kartier",
"Kase",
"Kasen",
"Kash",
"Kashton",
"Kason",
"Kayden",
"Kaysen",
"Kayson",
"Keanu",
"Keaton",
"Keegan",
"Keith",
"Kellan",
"Kellen",
"Kelvin",
"Kendrick",
"Kenji",
"Kenneth",
"Kenzo",
"Kevin",
"Khai",
"Khalid",
"Khalil",
"Khari",
"Kiaan",
"Kian",
"Kieran",
"Killian",
"King",
"Kingsley",
"Kingston",
"Knox",
"Koa",
"Kobe",
"Koda",
"Kody",
"Koen",
"Kohen",
"Kole",
"Kolton",
"Korbin",
"Krew",
"Kristian",
"Kristopher",
"Kye",
"Kylan",
"Kyle",
"Kylen",
"Kyler",
"Kylian",
"Kylo",
"Kyng",
"Kyree",
"Kyrie",
"Kyro",
"Kyson",
"Lachlan",
"Lance",
"Landen",
"Landon",
"Landry",
"Landyn",
"Lane",
"Langston",
"Larry",
"Lawrence",
"Lawson",
"Layne",
"Layton",
"Leandro",
"Ledger",
"Lee",
"Legacy",
"Legend",
"Leif",
"Leighton",
"Leland",
"Lennon",
"Lennox",
"Leo",
"Leon",
"Leonard",
"Leonardo",
"Leonel",
"Leonidas",
"Leroy",
"Levi",
"Lewis",
"Lian",
"Lincoln",
"Lionel",
"Lochlan",
"Logan",
"Lorenzo",
"Louie",
"Louis",
"Loyal",
"Luca",
"Lucas",
"Lucca",
"Lucian",
"Luciano",
"Luis",
"Luka",
"Lukas",
"Luke",
"Mac",
"Mack",
"Madden",
"Maddox",
"Magnus",
"Major",
"Makai",
"Malachi",
"Malakai",
"Malcolm",
"Malik",
"Manuel",
"Marcel",
"Marcellus",
"Marcelo",
"Marco",
"Marcos",
"Marcus",
"Mario",
"Mark",
"Marshall",
"Martin",
"Marvin",
"Mason",
"Mateo",
"Mathew",
"Mathias",
"Matias",
"Matteo",
"Matthew",
"Matthias",
"Maurice",
"Mauricio",
"Maverick",
"Max",
"Maximilian",
"Maximiliano",
"Maximo",
"Maximus",
"Maxton",
"Maxwell",
"Mccoy",
"Mekhi",
"Melvin",
"Memphis",
"Messiah",
"Micah",
"Michael",
"Miguel",
"Milan",
"Miles",
"Miller",
"Milo",
"Misael",
"Mitchell",
"Mohamed",
"Mohammad",
"Mohammed",
"Moises",
"Mordechai",
"Morgan",
"Moses",
"Moshe",
"Muhammad",
"Musa",
"Mustafa",
"Myles",
"Mylo",
"Nash",
"Nasir",
"Nathan",
"Nathanael",
"Nathaniel",
"Nehemiah",
"Neil",
"Nelson",
"Neo",
"Nicholas",
"Nico",
"Nicolas",
"Niklaus",
"Niko",
"Nikolai",
"Nikolas",
"Nixon",
"Noah",
"Noe",
"Noel",
"Nolan",
"Nova",
"Oakley",
"Ocean",
"Odin",
"Oliver",
"Omar",
"Omari",
"Onyx",
"Orion",
"Orlando",
"Oscar",
"Osiris",
"Osman",
"Otis",
"Otto",
"Owen",
"Ozzy",
"Pablo",
"Palmer",
"Parker",
"Patrick",
"Paul",
"Paxton",
"Pedro",
"Peter",
"Peyton",
"Philip",
"Phillip",
"Phoenix",
"Pierce",
"Porter",
"Preston",
"Prince",
"Princeton",
"Quentin",
"Quincy",
"Quinn",
"Quinton",
"Rafael",
"Raiden",
"Ramon",
"Randy",
"Raphael",
"Raul",
"Ray",
"Rayan",
"Rayden",
"Raylan",
"Raymond",
"Reece",
"Reed",
"Reese",
"Reid",
"Reign",
"Remi",
"Remington",
"Remy",
"Rene",
"Reuben",
"Rex",
"Rey",
"Rhett",
"Rhys",
"Ricardo",
"Richard",
"Ricky",
"Ridge",
"Riggs",
"Riley",
"Rio",
"River",
"Robert",
"Roberto",
"Robin",
"Rocco",
"Rocky",
"Rodney",
"Rodrigo",
"Roger",
"Rohan",
"Roland",
"Roman",
"Rome",
"Romeo",
"Ronald",
"Ronan",
"Ronin",
"Rory",
"Rowan",
"Rowen",
"Roy",
"Royal",
"Royce",
"Ruben",
"Rudy",
"Russell",
"Ryan",
"Ryder",
"Ryker",
"Rylan",
"Ryland",
"Sage",
"Saint",
"Salem",
"Salvador",
"Salvatore",
"Sam",
"Samir",
"Samson",
"Samuel",
"Santana",
"Santiago",
"Santino",
"Santos",
"Saul",
"Sawyer",
"Scott",
"Sean",
"Sebastian",
"Sergio",
"Seth",
"Seven",
"Shane",
"Shawn",
"Shepard",
"Shepherd",
"Shiloh",
"Silas",
"Simon",
"Sincere",
"Skyler",
"Solomon",
"Sonny",
"Soren",
"Spencer",
"Stanley",
"Stefan",
"Stephen",
"Sterling",
"Stetson",
"Steven",
"Sullivan",
"Sutton",
"Sylas",
"Tadeo",
"Talon",
"Tanner",
"Tate",
"Tatum",
"Taylor",
"Thaddeus",
"Thatcher",
"Theo",
"Theodore",
"Thiago",
"Thomas",
"Timothy",
"Titan",
"Titus",
"Tobias",
"Tomas",
"Tommy",
"Tony",
"Trace",
"Travis",
"Trenton",
"Trevor",
"Trey",
"Tripp",
"Tristan",
"Troy",
"Tru",
"Truett",
"Tucker",
"Turner",
"Ty",
"Tyler",
"Tyson",
"Ulises",
"Uriah",
"Uriel",
"Valentin",
"Valentino",
"Van",
"Vance",
"Vicente",
"Victor",
"Vihaan",
"Vincent",
"Vincenzo",
"Wade",
"Walker",
"Wallace",
"Walter",
"Warren",
"Watson",
"Waylon",
"Wayne",
"Wells",
"Wes",
"Wesley",
"Wesson",
"Westin",
"Westley",
"Weston",
"Wilder",
"William",
"Wilson",
"Winston",
"Wyatt",
"Wylder",
"Xander",
"Xavier",
"Yaakov",
"Yadiel",
"Yahir",
"Yehuda",
"Yisroel",
"Yosef",
"Yousef",
"Yusuf",
"Zachariah",
"Zachary",
"Zahir",
"Zaid",
"Zaiden",
"Zain",
"Zaire",
"Zakai",
"Zander",
"Zane",
"Zavier",
"Zayd",
"Zayden",
"Zayn",
"Zayne",
"Zechariah",
"Zeke",
"Zev",
"Zion",
"Zyair",
"Zyaire",
"Zyon",
];
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
};
const Header = () => ;
const Footer = () => (
<>
Joegle Search
I'm Feeling Lucky
Shop final Black Friday device deals on the Joegle Store today.
>
);
const AutoSuggest = ({ onSearch, results, search }) => (
);
export const AutoSuggestExample = () => {
const [search, setSearch] = useState("");
const [results, setResults] = useState([]);
const debounced = useDebounce(search, 500);
const handleSearch = (e) => setSearch(e.target.value);
useEffect(() => {
const namesCopy = [...names];
setResults(
namesCopy.filter(
(n, i) =>
search === "" || n.toLowerCase().includes(search.toLowerCase())
)
);
}, [debounced]);
return (
);
};
================================================
FILE: src/components/controls/AutoSuggest/styles.css
================================================
.page.auto-suggest-page {
background: #18181b;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
padding-top: 0;
}
.auto-suggest-page img {
width: 240px;
margin: 0 auto;
}
.auto-suggest-page button {
padding: 10px 16px;
border-radius: 4px;
border: 0;
background: #303134;
color: inherit;
font-family: inherit;
}
.auto-suggest-page p {
margin: 0;
font-size: 13px;
}
.auto-suggest-page p a {
color: #8ab4f7;
}
.auto-suggest {
position: relative;
}
.auto-suggest input {
width: 440px;
height: 44px;
padding: 0 20px 0 44px;
border-radius: 22px;
border: 1px solid #5f6367;
background: transparent;
color: #e8eaed;
font-size: 16px;
font-family: inherit;
outline: none;
}
.auto-suggest input:focus {
background: #2c2e34;
border-color: #2c2e34;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.auto-suggest span:nth-child(1) {
position: absolute;
top: 50%;
left: 14px;
translate: 0 -50%;
}
.auto-suggest-buttons {
display: flex;
gap: 16px;
}
.auto-suggest .menu {
display: none;
position: absolute;
z-index: 1;
overflow: hidden;
top: 44px;
left: 0;
width: 100%;
max-height: 228px;
padding: 0 16px 6px;
background: #2c2e34;
border-bottom-right-radius: 22px;
border-bottom-left-radius: 22px;
}
.auto-suggest input:focus ~ .menu,
.auto-suggest .menu:hover {
display: block;
}
.auto-suggest .menu > div {
padding: 8px 0;
border-top: 1px solid #5f6367;
line-height: 1.8;
}
.auto-suggest .menu > div button {
display: block;
background: transparent;
padding: 0;
height: 30px;
font-size: 16px;
cursor: pointer;
width: 100%;
text-align: left;
}
================================================
FILE: src/components/controls/EditableText/EditableText.css
================================================
.editable-text {
display: flex;
align-items: center;
gap: 8px;
}
.editable-text-value.is-editing ~ .editable-text-buttons {
opacity: 1;
visibility: visible;
}
.editable-text-buttons {
display: flex;
gap: 2px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.editable-text:hover .editable-text-buttons {
opacity: 1;
visibility: visible;
}
.editable-text-buttons button {
cursor: pointer;
background: transparent;
border: 0;
display: grid;
place-items: center;
color: inherit;
opacity: 0.5;
transition: 0.3s;
}
.editable-text-buttons button:hover {
opacity: 0.8;
}
.editable-text-value {
outline: none;
}
================================================
FILE: src/components/controls/EditableText/EditableText.jsx
================================================
import { useLayoutEffect, useRef, useState } from "react";
import "./EditableText.css";
const setCaret = (el) => {
if (!el) return;
try {
const range = document.createRange();
const sel = window.getSelection();
range.setStart(el.childNodes[0], el.innerText.length);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
} catch (err) {
console.log("Error Setting Caret: ", err);
}
};
const IconButton = ({ children, onClick }) => (
{children}
);
export const EditableText = ({ name, defaultValue, onSave, className }) => {
const [isEditing, setIsEditing] = useState(false);
const nextValue = useRef("");
const spanRef = useRef(null);
const handleChange = (e) => (nextValue.current = e.target.innerText);
const handleSave = () => {
toggleIsEditing();
onSave(name, nextValue.current);
};
const toggleIsEditing = () => setIsEditing(!isEditing);
useLayoutEffect(() => {
if (isEditing) {
spanRef.current.focus();
setCaret(spanRef.current);
} else {
spanRef.current.innerText = defaultValue;
nextValue.current = defaultValue;
}
}, [isEditing]);
return (
{defaultValue}
{isEditing ? (
<>
check_circle
cancel
>
) : (
edit
)}
);
};
================================================
FILE: src/components/controls/EditableText/EditableTextExample.css
================================================
.page.editable-text-page {
--gradient: linear-gradient(45deg, #ff7c7d, #ffda67);
--card: #272524;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background: var(--gradient);
color: #fdfcfd;
font-family: "Euclid Circular B", "Poppins";
}
.editable-text-card {
display: flex;
align-items: center;
width: 75vw;
max-width: 650px;
padding: 44px 30px 44px 20px;
background: var(--card);
border-radius: 24px;
}
.editable-text-card img {
max-width: 280px;
width: 36vw;
height: 300px;
object-fit: cover;
margin-left: -60px;
margin-right: 30px;
border-radius: inherit;
box-shadow: 0 60px 40px rgb(0 0 0 / 8%);
transition: border-radius 0.3s;
}
.editable-text-card-title {
display: block;
font-size: 24px;
font-weight: 400;
margin-top: 0;
margin-bottom: 10px;
}
.editable-text-card-role {
display: block;
font-size: 16px;
font-weight: 400;
margin: 0 0 5px;
opacity: 0.75;
}
.editable-text-card p {
font-size: 14px;
font-weight: 400;
margin-bottom: 30px;
opacity: 0.5;
}
.editable-text-socials {
display: flex;
align-items: center;
gap: 8px;
}
.editable-text-socials > button {
position: relative;
border: 0;
background: transparent;
color: #f8f8f8;
padding: 0;
}
.editable-text-socials > button:first-child::before {
content: "";
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
width: 52px;
height: 52px;
translate: -50% -50%;
border-radius: 50%;
border: 2px solid #ff7c7d;
transition: 0.3s;
transform: translateY(0);
}
.editable-text-socials > button > i {
position: relative;
z-index: 1;
border: 4px solid var(--card);
background: rgb(255 255 255 / 12%);
display: grid;
place-items: center;
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 40px;
}
@media (width <= 600px) {
.editable-text-card {
margin: 0 40px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 60px;
width: 100%;
text-align: center;
flex-direction: column;
}
.editable-text-card h2 {
margin-right: 0;
font-size: 26px;
}
.editable-text-card img {
margin: -100px 0 30px 0;
width: 100%;
max-width: 1000px;
height: 250px;
}
.editable-text-card p {
max-width: 360px;
}
.editable-text-socials {
justify-content: center;
}
}
@media (width <= 440px) {
.editable-text-card img {
height: 50vw;
width: 50vw;
border-radius: 50%;
border: 12px solid var(--card);
box-shadow: none;
margin: -140px 0 30px 0;
}
}
================================================
FILE: src/components/controls/EditableText/EditableTextExample.jsx
================================================
import image from "./image.jpg";
import "./EditableTextExample.css";
import { EditableText } from "./EditableText";
import { useState } from "react";
export const EditableTitleExample = () => {
const [state, setState] = useState({
title: "Jill Scott",
role: "Frontend Engineer",
});
const { title, role } = state;
const handleSave = (name, value) =>
setState({
...state,
[name]: value,
});
return (
Transforming ideas into realities, creating interfaces that inspire
and engage users dreams.
);
};
================================================
FILE: src/components/controls/PasswordStrength/PasswordStrength.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./styles.css";
const strengthLabels = ["weak", "medium", "medium", "strong"];
export const PasswordStrength = ({ placeholder, onChange }) => {
const [strength, setStrength] = useState("");
const getStrength = (password) => {
let strengthIndicator = -1;
if (/[a-z]/.test(password)) strengthIndicator++;
if (/[A-Z]/.test(password)) strengthIndicator++;
if (/\d/.test(password)) strengthIndicator++;
if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;
if (password.length >= 16) strengthIndicator++;
return strengthLabels[strengthIndicator];
};
const handleChange = (event) => {
setStrength(getStrength(event.target.value));
onChange(event.target.value);
};
return (
<>
{strength && `${strength} password`}
>
);
};
export const PasswordStrengthExample = () => {
const handleChange = (value) => console.log(value);
return (
Sign Up
);
};
================================================
FILE: src/components/controls/PasswordStrength/styles.css
================================================
* {
box-sizing: border-box;
}
.page.password-strength-page {
display: grid;
place-items: center;
margin: 0;
background: #000000;
font-family: "Euclid Circular A", "Poppins";
color: #fdfdfd;
}
.password-strength-page .login-card {
width: 400px;
padding: 60px 30px 30px;
border-radius: 16px;
background: #0e0d0d;
text-align: center;
}
.password-strength-page .login-card > h2 {
font-size: 36px;
font-weight: 600;
margin: 0 0 30px;
}
.password-strength-page .login-card img {
width: 260px;
margin-bottom: 20px;
}
.password-strength-page .login-form {
width: 100%;
margin: 0;
display: grid;
}
.password-strength-page .login-form input.control::placeholder {
color: #9f9d9e;
}
.password-strength-page .control {
outline: none;
width: 100%;
height: 56px;
padding: 0 16px;
color: inherit;
background: #181919;
border: 0;
border-radius: 6px;
margin: 8px 0;
font-family: inherit;
font-size: 18px;
transition: 0.4s;
}
.password-strength-page button.control {
cursor: pointer;
width: 100%;
height: 56px;
padding: 0 16px;
background: #0079ea;
text-align: center;
}
.password-strength-page .bars {
margin: 8px 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
height: 6px;
border-radius: 3px;
background: #181919;
}
.password-strength-page .bars div {
height: 6px;
border-radius: 3px;
transition: 0.4s;
width: 0%;
}
.password-strength-page .bars.weak div {
background: #e24c71;
width: 33.33%;
}
.password-strength-page .bars.medium div {
background: #f39845;
width: 66.66%;
}
.password-strength-page .bars.strong div {
background: #57c558;
width: 100%;
}
.password-strength-page .strength {
text-align: left;
height: 30px;
text-transform: capitalize;
color: #868b94;
}
================================================
FILE: src/components/controls/PasswordStrength2/PasswordStrength2.css
================================================
* {
box-sizing: border-box;
}
.page.password-strength-2-page {
display: grid;
place-items: center;
margin: 0;
background: #f9f6fc;
color: #2e2c2f;
font-family: "Euclid Circular A", "Poppins";
--color-primary: #7b00f1;
--color-muted: #ada5b4;
}
.password-strength-2-page .card .bars {
margin: 8px 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
height: 6px;
border-radius: 3px;
background: #f4f1f7;
}
.password-strength-2-page .card .bars div {
height: 6px;
border-radius: 3px;
transition: 0.4s;
width: 0%;
}
.password-strength-2-page .card .bars.weak div {
background: #e24c71;
width: 33.33%;
}
.password-strength-2-page .card .bars.medium div {
background: #f39845;
width: 66.66%;
}
.password-strength-2-page .card .bars.strong div {
background: #57c558;
width: 100%;
}
.password-strength-2-page .card .strength {
text-align: left;
height: 20px;
font-size: 13px;
text-transform: capitalize;
color: #868b94;
}
.password-strength-2-page .blob,
.password-strength-2-page .orbit {
position: fixed;
z-index: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.password-strength-2-page .blob {
width: 85vw;
max-width: 550px;
aspect-ratio: 1 / 1;
}
@keyframes spin {
100% {
rotate: 1turn;
}
}
.password-strength-2-page .orbit {
width: 95vw;
max-width: 720px;
aspect-ratio: 1 / 1;
border: 2px solid #ffffff;
border-radius: 50%;
animation: spin 50s infinite linear;
}
.password-strength-2-page .orbit::before,
.password-strength-2-page .orbit::after {
content: "";
position: absolute;
width: 24px;
aspect-ratio: 1 / 1;
border-radius: inherit;
background: #f39f1a;
}
.password-strength-2-page .orbit::before {
top: 50%;
width: 18px;
left: -9px;
}
.password-strength-2-page .orbit::after {
top: 50%;
right: -12px;
}
.password-strength-2-page .card {
position: relative;
z-index: 2;
background: #ffffff;
border-radius: 24px;
padding: 72px 32px 48px;
width: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 10px 50px rgb(96 68 121 / 10%);
}
.password-strength-2-page .card img {
width: 96px;
margin: 0 0 32px;
}
.password-strength-2-page .card :is(h2, h3) {
font-weight: 500;
}
.password-strength-2-page .card h2 {
font-size: 18px;
margin: 0 0 6px;
}
.password-strength-2-page .card h3 {
color: var(--color-muted);
font-size: 13px;
margin: 0 0 32px;
}
.password-strength-2-page .card form {
display: grid;
gap: 12px;
width: 100%;
margin: 0 0 20px;
}
.password-strength-2-page .card :is(input, button) {
height: 52px;
font-family: inherit;
font-size: 15px;
padding: 0 12px;
border: 0;
border-radius: 8px;
}
.password-strength-2-page .card .textbox {
position: relative;
}
.password-strength-2-page label,
.password-strength-2-page input {
transition: 0.3s;
}
.password-strength-2-page .textbox label {
position: absolute;
top: 50%;
left: 12px;
translate: 0 -50%;
transform-origin: 0 50%;
pointer-events: none;
color: var(--color-muted);
}
.password-strength-2-page .textbox input {
width: 100%;
padding-top: 10px;
background: #f4f1f7;
outline: none;
color: inherit;
box-shadow: 0 0 0 2px transparent;
}
.password-strength-2-page .textbox input:focus {
box-shadow: 0 0 0 2px var(--color-primary);
}
.password-strength-2-page .textbox input:is(:focus, :not(:invalid)) ~ label {
scale: 0.725;
translate: 0 -112%;
}
.password-strength-2-page .card button {
color: #f9f9f9;
background: var(--color-primary);
}
.password-strength-2-page .card a {
font-size: 14px;
color: var(--color-primary);
}
.password-strength-2-page .card p {
margin: 48px 0 0;
font-size: 14px;
color: var(--color-muted);
}
================================================
FILE: src/components/controls/PasswordStrength2/PasswordStrength2.jsx
================================================
import { useState } from "react";
import logo from "./logo.png";
import blob from "./blob.svg";
import "./PasswordStrength2.css";
const strengthLabels = ["weak", "medium", "medium", "strong"];
export const PasswordStrength = ({ placeholder, onChange }) => {
const [strength, setStrength] = useState("");
const getStrength = (password) => {
let strengthIndicator = -1;
if (/[a-z]/.test(password)) strengthIndicator++;
if (/[A-Z]/.test(password)) strengthIndicator++;
if (/\d/.test(password)) strengthIndicator++;
if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;
if (password.length >= 16) strengthIndicator++;
return strengthLabels[strengthIndicator];
};
const handleChange = (event) => {
setStrength(getStrength(event.target.value));
onChange(event.target.value);
};
return (
<>
{placeholder}
{strength && `${strength} password`}
>
);
};
export const PasswordStrength2Example = () => {
const handleChange = (value) => console.log(value);
return (
);
};
================================================
FILE: src/components/controls/PasswordStrength3/PasswordStrength3.css
================================================
* {
box-sizing: border-box;
}
.page.password-strength-2-page {
display: grid;
place-items: center;
margin: 0;
background: #f9f6fc;
color: #2e2c2f;
font-family: "Euclid Circular A", "Poppins";
--color-primary: #7b00f1;
--color-muted: #ada5b4;
}
.password-strength-2-page .card .bars {
margin: 8px 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
height: 6px;
border-radius: 3px;
background: #f4f1f7;
}
.password-strength-2-page .card .bars div {
height: 6px;
border-radius: 3px;
transition: 0.4s;
width: 0%;
}
.password-strength-2-page .card .bars.weak div {
background: #e24c71;
width: 33.33%;
}
.password-strength-2-page .card .bars.medium div {
background: #f39845;
width: 66.66%;
}
.password-strength-2-page .card .bars.strong div {
background: #57c558;
width: 100%;
}
.password-strength-2-page .card .strength {
text-align: left;
height: 20px;
font-size: 13px;
text-transform: capitalize;
color: #868b94;
}
.password-strength-2-page .blob,
.password-strength-2-page .orbit {
position: fixed;
z-index: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.password-strength-2-page .blob {
width: 85vw;
max-width: 550px;
aspect-ratio: 1 / 1;
}
@keyframes spin {
100% {
rotate: 1turn;
}
}
.password-strength-2-page .orbit {
width: 95vw;
max-width: 720px;
aspect-ratio: 1 / 1;
border: 2px solid #ffffff;
border-radius: 50%;
animation: spin 50s infinite linear;
}
.password-strength-2-page .orbit::before,
.password-strength-2-page .orbit::after {
content: "";
position: absolute;
width: 24px;
aspect-ratio: 1 / 1;
border-radius: inherit;
background: #f39f1a;
}
.password-strength-2-page .orbit::before {
top: 50%;
width: 18px;
left: -9px;
}
.password-strength-2-page .orbit::after {
top: 50%;
right: -12px;
}
.password-strength-2-page .card {
position: relative;
z-index: 2;
background: #ffffff;
border-radius: 24px;
padding: 72px 32px 48px;
width: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 10px 50px rgb(96 68 121 / 10%);
}
.password-strength-2-page .card img {
width: 96px;
margin: 0 0 32px;
}
.password-strength-2-page .card :is(h2, h3) {
font-weight: 500;
}
.password-strength-2-page .card h2 {
font-size: 18px;
margin: 0 0 6px;
}
.password-strength-2-page .card h3 {
color: var(--color-muted);
font-size: 13px;
margin: 0 0 32px;
}
.password-strength-2-page .card form {
display: grid;
gap: 12px;
width: 100%;
margin: 0 0 20px;
}
.password-strength-2-page .card :is(input, button) {
height: 52px;
font-family: inherit;
font-size: 15px;
padding: 0 12px;
border: 0;
border-radius: 8px;
}
.password-strength-2-page .card .textbox {
position: relative;
}
.password-strength-2-page label,
.password-strength-2-page input {
transition: 0.3s;
}
.password-strength-2-page .textbox label {
position: absolute;
top: 50%;
left: 12px;
translate: 0 -50%;
transform-origin: 0 50%;
pointer-events: none;
color: var(--color-muted);
}
.password-strength-2-page .textbox input {
width: 100%;
padding-top: 10px;
background: #f4f1f7;
outline: none;
color: inherit;
box-shadow: 0 0 0 2px transparent;
}
.password-strength-2-page .textbox input:focus {
box-shadow: 0 0 0 2px var(--color-primary);
}
.password-strength-2-page .textbox input:is(:focus, :not(:invalid)) ~ label {
scale: 0.725;
translate: 0 -112%;
}
.password-strength-2-page .card button {
color: #f9f9f9;
background: var(--color-primary);
}
.password-strength-2-page .card a {
font-size: 14px;
color: var(--color-primary);
}
.password-strength-2-page .card p {
margin: 48px 0 0;
font-size: 14px;
color: var(--color-muted);
}
================================================
FILE: src/components/controls/PasswordStrength3/PasswordStrength3.jsx
================================================
import { useState } from "react";
import logo from "./logo.png";
import blob from "./blob.svg";
import "./PasswordStrength3.css";
const strengthLabels = ["weak", "medium", "medium", "strong"];
export const PasswordStrength = ({ placeholder, onChange }) => {
const [strength, setStrength] = useState("");
const getStrength = (password) => {
let strengthIndicator = -1;
if (/[a-z]/.test(password)) strengthIndicator++;
if (/[A-Z]/.test(password)) strengthIndicator++;
if (/\d/.test(password)) strengthIndicator++;
if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;
if (password.length >= 16) strengthIndicator++;
return strengthLabels[strengthIndicator];
};
const handleChange = (event) => {
setStrength(getStrength(event.target.value));
onChange(event.target.value);
};
return (
<>
{placeholder}
{strength && `${strength} password`}
>
);
};
export const PasswordStrength3Example = () => {
const handleChange = (value) => console.log(value);
return (
);
};
================================================
FILE: src/components/controls/PasswordStrength4/PasswordStrength4.css
================================================
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
* {
box-sizing: border-box;
}
.page.password-strength-4-page {
display: grid;
place-items: center;
margin: 0;
background: #0f172a;
color: #ffffff;
font-family: "Euclid Circular B", "Poppins", sans-serif;
--color-primary: #6d48f6;
--color-muted: #94a3b8;
--color-card: #192134;
--color-input: rgb(255 255 255 / 4%);
--color-border: rgba(255, 255, 255, 0.08);
}
/* ── Strength bar ── */
.password-strength-4-page .bars {
margin-bottom: 6px;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
height: 4px;
border-radius: 3px;
background: var(--color-input);
}
.password-strength-4-page .bars div {
height: 100%;
border-radius: 3px;
transition:
width 0.3s ease-out,
background 0.3s ease-out;
width: 0%;
}
@media (prefers-reduced-motion: reduce) {
.password-strength-4-page .bars div {
transition: none;
}
}
.password-strength-4-page .bars.weak div {
background: #ef4444;
width: 33.33%;
}
.password-strength-4-page .bars.medium div {
background: #f59e0b;
width: 66.66%;
}
.password-strength-4-page .bars.strong div {
background: #34d399;
width: 100%;
}
.password-strength-4-page .strength {
text-align: left;
height: 20px;
font-size: 13px;
text-transform: capitalize;
color: var(--color-muted);
}
/* ── Background decorations ── */
.password-strength-4-page .blob,
.password-strength-4-page .orbit {
position: fixed;
z-index: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.password-strength-4-page .blob {
width: 85vw;
max-width: 550px;
aspect-ratio: 1 / 1;
opacity: 0.02;
}
@keyframes spin {
100% {
rotate: 1turn;
}
}
@media (prefers-reduced-motion: reduce) {
.password-strength-4-page .orbit {
animation: none;
}
}
.password-strength-4-page .orbit {
width: 95vw;
max-width: 720px;
aspect-ratio: 1 / 1;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
animation: spin 50s infinite linear;
}
.password-strength-4-page .orbit::before,
.password-strength-4-page .orbit::after {
content: "";
position: absolute;
width: 24px;
aspect-ratio: 1 / 1;
border-radius: inherit;
background: linear-gradient(90deg, #6d48f6, #4896f6);
}
.password-strength-4-page .orbit::before {
top: 50%;
width: 18px;
left: -9px;
}
.password-strength-4-page .orbit::after {
top: 50%;
right: -12px;
}
/* ── Card ── */
.password-strength-4-page .card {
position: relative;
z-index: 2;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 30px;
padding: 72px 32px 48px;
width: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.password-strength-4-page .card img {
width: 56px;
margin: 0 0 12px;
}
.password-strength-4-page h2 {
font-size: 24px;
font-weight: 400;
margin: 0 0 38px;
}
.password-strength-4-page form {
display: grid;
gap: 12px;
width: 100%;
margin: 0 0 20px;
}
.password-strength-4-page :is(input, button) {
height: 52px;
font-family: inherit;
font-size: 15px;
padding: 0 12px;
border: 0;
border-radius: 8px;
}
/* ── Textbox / floating label ── */
.password-strength-4-page .textbox {
position: relative;
}
.password-strength-4-page label,
.password-strength-4-page input {
transition: 0.3s ease;
}
.password-strength-4-page .textbox label {
position: absolute;
top: 50%;
left: 12px;
translate: 0 -50%;
transform-origin: 0 50%;
pointer-events: none;
color: var(--color-muted);
}
.password-strength-4-page .textbox input {
width: 100%;
padding-top: 10px;
background: var(--color-input);
outline: none;
color: #ffffff;
box-shadow: 0 0 0 1px transparent;
}
.password-strength-4-page .textbox input:focus {
box-shadow: 0 0 0 2px rgb(255 255 255 / 16%);
}
.password-strength-4-page .textbox input:is(:focus, :not(:invalid)) ~ label {
scale: 0.725;
translate: 0 -112%;
}
/* ── Password visibility toggle ── */
.password-strength-4-page .toggle-visibility {
position: absolute;
right: 12px;
top: 50%;
translate: 0 -50%;
height: auto;
padding: 6px;
background: transparent;
border: none;
border-radius: 4px;
color: var(--color-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease;
}
.password-strength-4-page .toggle-visibility:hover {
color: #ffffff;
}
.password-strength-4-page .toggle-visibility:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.password-strength-4-page .textbox input.password-strength {
padding-right: 44px;
}
/* ── Submit button ── */
.password-strength-4-page button[type="submit"] {
color: #ffffff;
background: linear-gradient(90deg, #6d48f6, #4896f6);
cursor: pointer;
transition:
background 0.15s ease,
transform 0.1s ease;
}
.password-strength-4-page button[type="submit"]:active {
transform: scale(0.98);
}
.password-strength-4-page button[type="submit"]:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
/* ── Links ── */
.password-strength-4-page a {
font-size: 14px;
color: #f9f9f9;
cursor: pointer;
text-decoration: none;
transition: color 0.15s ease;
}
.password-strength-4-page a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 2px;
}
.password-strength-4-page p {
margin: 28px 0 6px;
font-size: 14px;
color: var(--color-muted);
}
================================================
FILE: src/components/controls/PasswordStrength4/PasswordStrength4.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import blob from "./blob.svg";
import "./PasswordStrength4.css";
const strengthLabels = ["weak", "medium", "medium", "strong"];
const EyeIcon = () => (
);
const EyeOffIcon = () => (
);
const PasswordStrength = ({ placeholder, id, onChange }) => {
const [strength, setStrength] = useState("");
const [visible, setVisible] = useState(false);
const getStrength = (password) => {
let strengthIndicator = -1;
if (/[a-z]/.test(password)) strengthIndicator++;
if (/[A-Z]/.test(password)) strengthIndicator++;
if (/\d/.test(password)) strengthIndicator++;
if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++;
if (password.length >= 16) strengthIndicator++;
return strengthLabels[strengthIndicator];
};
const handleChange = (event) => {
setStrength(getStrength(event.target.value));
onChange(event.target.value);
};
return (
<>
{placeholder}
setVisible((v) => !v)}
>
{visible ? : }
{strength && `${strength} password`}
>
);
};
export const PasswordStrength4Example = () => {
const handleChange = (value) => console.log(value);
return (
Cube.ai
Already have an account? Login!
);
};
================================================
FILE: src/components/controls/PasswordVisibility/Password.css
================================================
.password-control input {
--color-primary: #0088ff;
--color-muted: #5a616c;
border: 0;
width: 100%;
height: 60px;
background: transparent;
font-family: inherit;
font-size: 16px;
outline: none;
}
.password-visibility .password-control {
position: relative;
margin-bottom: 16px;
}
.password-control > span {
position: absolute;
top: 50%;
translate: 0 -50%;
left: 0;
font-size: 22px;
pointer-events: none;
color: var(--color-muted);
transition: 0.3s;
}
.password-control input {
padding: 0 24px 0 36px;
color: rgb(255 255 255 / 96%);
height: 72px;
transition: 0.3s;
}
.password-control :is(input:focus, input:valid) ~ label {
translate: -36px -44px;
scale: 0.875;
}
.password-control input:focus ~ label {
color: var(--color-primary);
}
.password-control .border {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: rgb(255 255 255 / 6%);
}
.password-control .border::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--color-primary);
transform: scaleX(0);
opacity: 0;
transition: 0.3s;
}
.password-control input:focus ~ .border::after {
transform: scaleX(1);
opacity: 1;
}
.password-control :is(input:focus, input:valid) ~ span {
color: rgb(255 255 255 / 96%);
}
.password-control label {
position: absolute;
top: 50%;
left: 30px;
translate: 0 -50%;
color: var(--color-muted);
pointer-events: none;
text-transform: capitalize;
transition: 0.4s;
}
.password-control {
margin-bottom: 20px;
}
.password-control input {
padding-right: 50px;
}
.password-control button {
position: absolute;
top: 50%;
right: 0;
display: grid;
place-items: center;
padding: 0;
height: 36px;
width: 36px;
translate: 0 -50%;
cursor: pointer;
}
.password-control button span {
color: var(--color-muted);
transition: 0.3s;
}
.password-control button:hover span {
color: rgb(255 255 255 / 96%);
}
================================================
FILE: src/components/controls/PasswordVisibility/Password.jsx
================================================
import { useState } from "react";
import "./Password.css";
export const Icon = ({ children }) => (
{children}
);
export const Password = ({ name, onInput }) => {
const [showPassword, setShowPassword] = useState(false);
const handleMouseDown = (e) => {
e.preventDefault();
setShowPassword(!showPassword);
};
const handleInput = (e) => onInput(name, e.target.value);
return (
);
};
================================================
FILE: src/components/controls/PasswordVisibility/PasswordVisibilityExample.css
================================================
.page.password-visibility-page {
display: grid;
place-items: center;
margin: 0;
padding: 0 20px;
background: #3284ce;
font-family: "Euclid Circular A", "Poppins";
box-sizing: border-box;
}
.password-visibility :is(button, input) {
border: 0;
width: 100%;
height: 60px;
background: transparent;
font-family: inherit;
font-size: 16px;
outline: none;
}
@keyframes clouds {
0% {
scale: 1;
translate: 0;
}
50% {
scale: 1.25;
}
100% {
scale: 1;
translate: -100px 0;
}
}
.password-visibility-clouds {
position: fixed;
top: -50vh;
left: 0;
height: 150vh;
animation: clouds 15s both infinite alternate linear;
}
.password-visibility {
--color-primary: #0088ff;
--color-muted: #5a616c;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
top: 0;
left: 0;
height: 100%;
width: 70%;
max-width: 400px;
padding: 200px 60px;
background: #121216;
}
.password-visibility > h2 {
font-size: 32px;
font-weight: 300;
margin: 0 0 10px;
color: rgb(255 255 255 / 96%);
}
.password-visibility > h3 {
font-size: 16px;
font-weight: 400;
margin: 0 0 30px;
color: var(--color-muted);
}
.password-visibility > form {
margin: 0;
display: grid;
gap: 16px;
}
.password-visibility > form > button {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0 12px 0 24px;
border-radius: 6px;
background: var(--color-primary);
color: #f9f9f9;
border: 0;
font-family: inherit;
letter-spacing: 1px;
font-size: 16px;
font-weight: 500;
transition: 0.3s;
}
.password-visibility form > button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.password-visibility p > a {
color: var(--color-primary);
text-decoration: none;
}
================================================
FILE: src/components/controls/PasswordVisibility/PasswordVisibilityExample.jsx
================================================
import { useState } from "react";
import bg from "./bg.svg";
import "./PasswordVisibilityExample.css";
import { Icon, Password } from "./Password";
export const PasswordVisibilityExample = () => {
const [state, setState] = useState({
password: "",
});
const handleInput = (name, value) => {
setState({
...state,
[name]: value,
});
};
return (
);
};
================================================
FILE: src/components/controls/Slider/Slider.css
================================================
.slider-wrapper {
--color-border: red;
--color-border-hover: blue;
--color-card: black;
--color-hover: white;
--color-primary: green;
position: relative;
display: flex;
align-items: center;
gap: 8px;
border-radius: 6px;
height: 40px;
padding: 0 4px 0 8px;
border: 1px solid var(--color-border);
transition: 0.3s;
}
.slider-wrapper:hover {
border-color: var(--color-border-hover);
}
.slider {
flex: 1 1 auto;
position: relative;
height: 16px;
}
.slider-label {
position: absolute;
top: -8px;
padding: 0 4px;
left: 5px;
font-size: 11px;
color: var(--color-muted);
background: var(--color-card);
}
.track {
position: absolute;
top: 5px;
width: 100%;
height: 6px;
border-radius: 3px;
z-index: 1;
background: var(--color-hover);
}
.markers {
position: absolute;
z-index: 2;
top: 5px;
left: 2px;
right: 3px;
translate: 0 -50%;
display: flex;
}
.marker {
position: absolute;
top: 0;
left: var(--left);
width: 6px;
height: 6px;
border-radius: 50%;
translate: -50% 0;
background: rgb(255 255 255 / 16%);
opacity: 0.6;
transition: 0.3s;
}
.marker-active {
background: var(--color-primary);
}
.numeric-input-wrapper {
position: relative;
}
.numeric-input-suffix {
position: absolute;
top: 50%;
right: 8px;
translate: 0 -50%;
font-size: 14px;
}
.numeric-input {
position: relative;
z-index: 3;
width: 58px;
height: 28px;
min-height: 28px;
border-radius: 4px;
border: 1px solid var(--color-border);
font-size: 14px;
padding: 0 24px 0 10px;
}
.numeric-input:hover {
border-color: var(--color-border-hover);
}
.numeric-input:focus {
box-shadow: 0 0 0 2px var(--color-primary);
}
input[type="range"],
input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
}
input[type="range"] {
position: relative;
z-index: 3;
width: 100%;
height: 6px;
min-height: 6px;
translate: 0 -5px;
padding: 0;
border: 0;
border-radius: 3px;
margin: auto;
background: transparent;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
position: relative;
z-index: 3;
background: var(--color-text);
width: 18px;
height: 18px;
border-radius: 50px;
background: #111111;
border: 2px solid var(--color-primary);
cursor: pointer;
box-shadow: 0 0 0 3px transparent;
transition: 0.3s;
}
input[type="range"]::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 3px rgb(48 168 121 / 16%);
}
input[type="range"]::-webkit-slider-thumb:active {
box-shadow: 0 0 0 5px rgb(48 168 121 / 16%);
}
.bar {
position: absolute;
z-index: 1;
left: 0;
top: 5px;
bottom: 0;
height: 6px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background: var(--color-primary);
opacity: 0.25;
pointer-events: none;
}
================================================
FILE: src/components/controls/Slider/Slider.jsx
================================================
import { useState } from "react";
import "./Slider.css";
const getBarWidth = (numValue) => {
const THUMB_SIZE = 19;
const percentageOfThumb = (THUMB_SIZE * numValue) / 100;
return `${numValue - percentageOfThumb / 2}%`;
};
export const Slider = ({ id, label, min, max, initialValue }) => {
const [barWidth, setBarWidth] = useState(getBarWidth(+initialValue));
const [value, setValue] = useState(initialValue);
const MARKERS = [1, 25, 50, 75, 100];
const onInput = (e) => {
const inputValue = e.target.value;
// Allow empty string
if (inputValue === "") {
setValue("");
setBarWidth("0%");
return;
}
const numValue = Number(inputValue);
if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {
setValue(inputValue);
setBarWidth(getBarWidth(numValue));
}
};
return (
{label}
{MARKERS.map((marker) => (
))}
%
);
};
================================================
FILE: src/components/controls/Slider/SliderExample.css
================================================
.page.slider-page {
background: #222222;
}
================================================
FILE: src/components/controls/Slider/SliderExample.jsx
================================================
import { Slider } from "./Slider";
import "./SliderExample.css";
export const SliderExample = () => (
);
================================================
FILE: src/components/controls/index.js
================================================
export * from "./PasswordStrength/PasswordStrength";
export * from "./AutoSuggest/AutoSuggest";
export * from "./PasswordVisibility/PasswordVisibilityExample";
export * from "./EditableText/EditableTextExample";
export * from "./Slider/SliderExample";
export * from "./PasswordStrength2/PasswordStrength2";
export * from "./PasswordStrength3/PasswordStrength3";
export * from "./PasswordStrength4/PasswordStrength4";
================================================
FILE: src/components/dropdowns/Dropdown1/Dropdown1.css
================================================
.dropdown-1 {
position: relative;
perspective: 1000px;
width: 144px;
}
.dropdown-1 button {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
width: 100%;
height: 64px;
color: rgb(255 255 255 / 55%);
background: #2d2f31;
border: 0;
cursor: pointer;
font-size: 16px;
font-family: "Euclid Circular A";
}
.dropdown-1 > button {
background: transparent;
gap: 10px;
margin: 0 -4px;
white-space: nowrap;
}
.dropdown-1 > button > .chevron {
}
.dropdown-1:hover > button,
.dropdown-1.open > button {
color: rgb(255 255 255 / 95%);
}
.dropdown-1.open > button .chevron {
rotate: -180deg;
}
.dropdown-1 > button > .span {
font-size: 30px;
}
.dropdown-1 button .chevron {
margin-left: auto;
transition: rotate 0.3s;
}
.dropdown-1-menu {
position: absolute;
overflow: hidden;
z-index: 1;
top: 64px;
left: 0;
margin: 0 -20px;
width: calc(100% + 40px);
height: 168px;
opacity: 0;
transform: rotateX(-90deg);
transform-origin: 0% 0%;
visibility: hidden;
background: #2d2f31;
transition: 0.3s;
}
.dropdown-1.open .dropdown-1-menu {
opacity: 1;
transform: rotateX(0);
visibility: visible;
}
.dropdown-1-menu .main-menu {
width: 50%;
}
.dropdown-1-menu .menu-inner {
position: absolute;
width: 200%;
display: flex;
transition: 0.4s;
}
.dropdown-1-menu .menu-inner.open {
translate: -50%;
}
.dropdown-1-menu button {
border: 0;
height: 56px;
border-radius: 0;
gap: 10px;
padding: 0 8px 0 16px;
text-transform: capitalize;
}
.dropdown-1-menu button:hover {
color: rgb(255 255 255 / 95%);
}
.dropdown-1-menu .sub-menu {
position: absolute;
width: 100%;
left: 50%;
top: 0;
}
.dropdown-1 button .material-symbols-outlined:first-child {
font-size: 22px;
}
.page.dropdown-1-page {
margin: 0;
display: grid;
place-items: center;
background: #212324;
height: 100vh;
}
.dropdown-1-nav {
position: fixed;
top: 0;
left: 0;
z-index: 2;
background: #771dff;
width: 100%;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.dropdown-1-nav > h1 {
font-weight: 400;
margin-right: auto;
margin-left: 14px;
font-size: 16px;
}
================================================
FILE: src/components/dropdowns/Dropdown1/Dropdown1.jsx
================================================
import { useRef, useState } from "react";
import "./Dropdown1.css";
const MenuButton = ({
name,
icon,
index,
hasSubItems,
subMenuHeight,
onClick,
}) => {
return (
(onClick ? onClick(index, subMenuHeight) : null)}>
{icon || name}
{name}
{hasSubItems && (
chevron_right
)}
);
};
const MenuItem = ({ name, icon, index, activeSubMenu, subItems, onClick }) => {
const subMenuRef = useRef();
const isActive = activeSubMenu === index;
return (
<>
null}
name={name}
icon={icon || name}
index={index}
hasSubItems={Boolean(subItems)}
subMenuHeight={subMenuRef.current?.clientHeight}
/>
{subItems?.length && (
<>
{subItems.map((subItem) => (
))}
>
)}
>
);
};
export const Dropdown1 = ({ items }) => {
const [isOpen, setIsOpen] = useState(false);
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
const [subMenuHeight, setSubMenuHeight] = useState();
const [activeSubMenu, setActiveSubMenu] = useState();
const handleClick = (index, subMenuHeight) => {
if (index > -1) setActiveSubMenu(index);
setSubMenuHeight(subMenuHeight);
setIsSubMenuOpen(index > -1);
};
return (
setIsOpen(!isOpen)}>
account_circle
Joe Harrison
expand_more
{items.map((item, index) => (
))}
);
};
================================================
FILE: src/components/dropdowns/Dropdown1/Dropdown1Example.jsx
================================================
import { Dropdown1 } from "./Dropdown1";
import "./Dropdown1.css";
const items = [
{
name: "settings",
subItems: ["analytics", "database", "terminal"],
},
{
name: "devices",
subItems: ["smartphone", "mouse", "keyboard", "headphones"],
},
{
name: "lock",
displayName: "Account",
},
];
export const Dropdown1Example = () => {
return (
);
};
================================================
FILE: src/components/dropdowns/Dropdown2/Dropdown2.css
================================================
.dropdown-2 {
position: relative;
display: grid;
place-items: center;
height: 72px;
}
.dropdown-2-overlay {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 40%);
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.dropdown-2-overlay.open {
opacity: 1;
visibility: visible;
}
.dropdown-2 > button {
position: relative;
display: grid;
place-items: center;
width: 36px;
height: 36px;
background: transparent;
}
.dropdown-2-menu {
overflow-x: hidden;
overflow-y: auto;
position: fixed;
translate: 0 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: max-content;
width: 270px;
max-height: 286px;
padding: 10px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #ebebeb;
box-shadow: 0 0 10px rgb(0 0 0 / 8%);
opacity: 0;
visibility: hidden;
transition: 0.3s;
appearance: none;
}
.dropdown-2-menu::-webkit-scrollbar {
width: 15px;
}
.dropdown-2-menu::-webkit-scrollbar-thumb {
background: #dadce0;
border-radius: 10px;
border: 4px solid transparent;
background-clip: padding-box;
}
.dropdown-2-menu.open {
opacity: 1;
visibility: visible;
translate: 0;
}
.dropdown-2-menu > button {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
font-family: inherit;
color: #6d696b;
border: 0;
background: transparent;
}
.dropdown-2-menu > button > img {
width: 64px;
height: 64px;
padding: 16px;
}
.dropdown-2-menu > button > span:first-child {
display: block;
width: 64px;
height: 64px;
scale: 0.7;
background-image: url("./icons.png");
background-position: 0 -3105px;
background-size: 64px 3307px;
background-repeat: no-repeat;
}
.dropdown-2-menu > button > span:last-child {
font-size: 12px;
translate: 0 -12px;
}
================================================
FILE: src/components/dropdowns/Dropdown2/Dropdown2.jsx
================================================
import { useRef, useState } from "react";
import "./Dropdown2.css";
import joe from "./joe.png";
import { createPortal } from "react-dom";
const Overlay = ({ isOpen, onClick }) => (
);
const Menu = ({ isOpen, dropdownRef }) => {
const menuRef = useRef(null);
const rect = dropdownRef?.current?.getBoundingClientRect();
const top = `${rect?.y + 60}px`;
const left = `${rect?.x - menuRef?.current?.clientWidth + 40}px`;
return (
Account
Search
Maps
YouTube
Play
News
Gmail
Meet
Chat
Contacts
Drive
Calendar
Translate
Photos
Ad Centre
Shopping
);
};
export const Dropdown2 = () => {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null);
return (
setIsOpen(true)}
>
apps
{createPortal(
setIsOpen(false)} />,
document.body
)}
{createPortal(
,
document.body
)}
);
};
================================================
FILE: src/components/dropdowns/Dropdown2/Dropdown2Example.css
================================================
.page.dropdown-2-page {
color: #6d696b;
background: #f7f7f7;
font-family: "Euclid Circular A", "Poppins";
}
.dropdown-2-nav {
margin-top: -40px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
height: 72px;
padding: 0 20px;
background: #ffffff;
box-shadow: 0 0 20px rgb(0 0 0 / 6%);
}
.dropdown-2-nav .logo {
display: flex;
align-items: center;
}
.dropdown-2-nav .logo img {
width: 36px;
padding: 0;
margin-left: 4px;
margin-right: 6px;
}
.dropdown-2-nav span.material-symbols-outlined {
display: grid;
place-items: center;
width: 40px;
height: 72px;
font-size: 24px;
}
.dropdown-2-nav h2 {
font-size: 19px;
font-weight: 400;
}
.dropdown-2-nav .nav-right > img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: contain;
margin-left: 8px;
}
.dropdown-2-nav button {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
}
.dropdown-2-nav .nav-right {
display: flex;
align-items: center;
}
================================================
FILE: src/components/dropdowns/Dropdown2/Dropdown2Example.jsx
================================================
import { Dropdown2 } from "./Dropdown2";
import joe from "./joe.png";
import logo from "./logo.svg";
import "./Dropdown2Example.css";
export const Dropdown2Example = () => {
return (
menu
Joemail
help
settings
);
};
================================================
FILE: src/components/dropdowns/Dropdown3/Dropdown3.css
================================================
.page.dropdown-3-page {
margin: 0;
display: grid;
place-items: center;
background: #1b1921;
height: 100vh;
--color-menu: #2b2935;
}
.dropdown-3 {
position: relative;
}
.dropdown-3 button {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
width: 204px;
height: 64px;
color: #afb3b5;
background: var(--color-menu);
border: 0;
cursor: pointer;
font-size: 18px;
font-family: "Euclid Circular A";
transition: 0.3s ease;
}
.dropdown-3 > button {
background: #6f3dcd;
border-radius: 10px;
color: #f9f9f9;
}
.dropdown-3.open > button .chevron {
rotate: -180deg;
}
.dropdown-3 button .chevron {
margin-left: auto;
transition: 0.3s ease;
}
.dropdown-3 .menu {
position: absolute;
overflow: hidden;
z-index: 1;
top: 74px;
left: 0;
width: 100%;
opacity: 0;
translate: 0 -20px;
visibility: hidden;
border-radius: 10px;
background: var(--color-menu);
transition: 0.4s ease;
}
.dropdown-3.open .menu {
opacity: 1;
translate: 0;
visibility: visible;
}
.dropdown-3 .menu-inner {
position: absolute;
width: 460px;
display: flex;
transition: 0.4s ease;
}
.dropdown-3 .menu-inner.open {
translate: -50%;
}
.dropdown-3 .menu button {
border: 0;
height: 56px;
border-radius: 0;
text-transform: capitalize;
}
.dropdown-3 .menu button:hover {
background: #393646;
color: #f9f9f9;
}
.dropdown-3 .sub-menu {
position: absolute;
width: 230px;
left: 230px;
top: 0;
opacity: 0;
visibility: hidden;
}
.dropdown-3 .sub-menu.open {
opacity: 1;
visibility: visible;
}
================================================
FILE: src/components/dropdowns/Dropdown3/Dropdown3.jsx
================================================
import { useRef, useState } from "react";
import "./Dropdown3.css";
const items = [
{
name: "build",
subItems: ["description", "folder", "article"],
},
{
name: "devices",
subItems: ["storage", "mouse", "keyboard", "headphones"],
},
{
name: "logout",
},
];
const Icon = ({ icon, className }) => (
{icon}
);
const MenuButton = ({
name,
icon,
index,
hasSubItems,
subMenuHeight,
onClick,
}) => {
return (
(onClick ? onClick(index, subMenuHeight) : null)}>
{name}
{hasSubItems && }
);
};
const MenuItem = ({ name, index, activeSubMenu, subItems, onClick }) => {
const subMenuRef = useRef(null);
const isActive = activeSubMenu === index;
return (
<>
null}
name={name}
index={index}
hasSubItems={Boolean(subItems)}
subMenuHeight={subMenuRef.current?.clientHeight}
/>
{subItems?.length && (
<>
{subItems.map((subItem) => (
))}
>
)}
>
);
};
export const Dropdown3 = () => {
const [isOpen, setIsOpen] = useState(false);
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
const [subMenuHeight, setSubMenuHeight] = useState();
const [activeSubMenu, setActiveSubMenu] = useState();
const handleClick = (index, subMenuHeight) => {
if (index > -1) setActiveSubMenu(index);
setSubMenuHeight(subMenuHeight);
setIsSubMenuOpen(index > -1);
};
return (
setIsOpen(!isOpen)}>
Kim Wilson
{items.map((item, index) => (
))}
);
};
================================================
FILE: src/components/dropdowns/Dropdown4/Dropdown4.css
================================================
.dropdown-4 {
position: relative;
perspective: 400px;
color: #f9f9f9;
font-family: "Euclid Circular A", "Poppins";
}
.dropdown-4 :is(button, ul, .button-inner) {
transform-origin: 50% 0;
backface-visibility: hidden;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
background 0.3s, scale 0.3s;
}
.dropdown-4 button {
position: relative;
z-index: 1;
background: transparent;
border: 0;
color: inherit;
display: flex;
align-items: center;
justify-content: space-between;
font-family: inherit;
height: 60px;
width: 160px;
gap: 12px;
padding: 0 20px 0 32px;
cursor: pointer;
}
.dropdown-4 > button span {
font-size: 28px;
}
.dropdown-4 > button .button-inner {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
}
.dropdown-4 ul {
position: absolute;
top: 0;
left: 0;
list-style: none;
padding: 0;
margin: 0;
background: #3b1977;
transform: rotateX(-90deg) translateZ(60px);
}
.dropdown-4.open ul {
transform: rotate(0) translateZ(60px);
}
.dropdown-4 ul button {
justify-content: flex-start;
gap: 12px;
text-transform: capitalize;
padding: 0 16px;
}
.dropdown-4 ul button i {
font-size: 20px;
}
.dropdown-4 ul button:hover {
background: rgb(255 255 255 / 12%);
}
.dropdown-4 > button {
background: #5d13f1;
transform: rotate(0);
}
.dropdown-4:not(.open) > button:hover {
scale: 1.05;
}
.dropdown-4.open > button {
transform: rotateX(90deg);
}
.dropdown-4.open > button .button-inner {
opacity: 0;
}
================================================
FILE: src/components/dropdowns/Dropdown4/Dropdown4.jsx
================================================
import { useRef, useEffect, useState } from "react";
import "./Dropdown4.css";
// Example items
// const items = [
// "Trainers",
// "Joggers",
// "Tracksuits"
// ]
const useClickOutside = (ref, callback) => {
const handleClick = (e) => {
if (ref.current && !ref.current.contains(e.target)) {
callback();
}
};
useEffect(() => {
document.addEventListener("click", handleClick);
return () => {
document.removeEventListener("click", handleClick);
};
});
};
export const Dropdown4 = ({ buttonText, items, onItemClick }) => {
const dropdownRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const toggleIsOpen = () => setIsOpen(!isOpen);
const handleItemClick = (item) => {
onItemClick(item);
toggleIsOpen();
};
useClickOutside(dropdownRef, () => setIsOpen(false));
return (
{buttonText}
arrow_drop_down
{items.map((item) => (
handleItemClick(item)}>
{item}
))}
);
};
================================================
FILE: src/components/dropdowns/Dropdown4/Dropdown4Example.css
================================================
.page.dropdown-4-page {
background: #fdfcf1;
color: #5f5a67;
}
.page.dropdown-4-page > div {
translate: 0 -60px;
}
.Toastify__toast {
font-family: inherit;
text-transform: capitalize;
}
/* .Toastify__toast .Toastify__progress-bar--wrp {
display: none;
} */
================================================
FILE: src/components/dropdowns/Dropdown4/Dropdown4Example.jsx
================================================
import { useState } from "react";
import { ToastContainer, toast, cssTransition } from "react-toastify";
import { Dropdown4 } from "./Dropdown4";
import "./Dropdown4Example.css";
const items = ["instagram", "twitter", "github"];
export const Dropdown4Example = () => {
const handleItemClick = (item) =>
toast.success(`Followed on ${item}`, {
position: "bottom-center",
autoClose: true,
closeButton: false,
});
return (
<>
>
);
};
================================================
FILE: src/components/dropdowns/Dropdown5/Dropdown5.css
================================================
.dropdown-5 {
position: relative;
display: grid;
place-items: center;
height: 72px;
}
.dropdown-5-overlay {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 40%);
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.dropdown-5-overlay.open {
opacity: 1;
visibility: visible;
}
.dropdown-5 button {
position: relative;
display: grid;
place-items: center;
width: 36px;
height: 36px;
background: transparent;
}
.dropdown-5-menu {
position: fixed;
width: 270px;
height: 352px;
max-height: 352px;
border-radius: 14px;
opacity: 0;
visibility: hidden;
appearance: none;
border: 7px solid #282a2c;
background: #1b1b1b;
box-shadow: 0 -20px 18px rgb(0 0 0 / 12%), 0 16px 40px rgb(0 0 0 / 12%);
}
.dropdown-5-menu-inner {
position: absolute;
top: 4px;
left: 0;
right: -7px;
bottom: 4px;
overflow-x: hidden;
overflow-y: scroll;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: max-content;
border-radius: inherit;
padding: 7px;
}
.dropdown-5-menu-inner::-webkit-scrollbar {
width: 7px;
padding-top: 40px;
background: #282a2c;
}
.dropdown-5-menu-inner::-webkit-scrollbar-thumb {
background: #464749;
border-radius: 6px;
background-clip: content-box;
}
.dropdown-5-menu.open {
opacity: 1;
visibility: visible;
translate: 0;
}
.dropdown-5-menu button {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
font-family: inherit;
color: #6d696b;
height: 80px;
border: 0;
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.dropdown-5-menu button:hover {
background: #282a2c;
color: #c5c7c5;
}
.dropdown-5-menu button > img {
width: 64px;
height: 64px;
padding: 16px;
}
.dropdown-5-menu button > span:first-child {
display: block;
width: 64px;
height: 64px;
scale: 0.7;
background-image: url("./icons.png");
background-position: 0 -3105px;
background-size: 64px 3307px;
background-repeat: no-repeat;
}
.dropdown-5-menu button > span:last-child {
font-size: 12px;
translate: 0 -12px;
}
================================================
FILE: src/components/dropdowns/Dropdown5/Dropdown5.jsx
================================================
import { useRef, useState, useEffect } from "react";
import "./Dropdown5.css";
import joe from "./joe.png";
import gemini from "./gemini.png";
import { createPortal } from "react-dom";
const Menu = ({ isOpen, dropdownRef, menuRef }) => {
const rect = dropdownRef?.current?.getBoundingClientRect();
const top = `${rect?.y + 64}px`;
const left = `${rect?.x - menuRef?.current?.clientWidth + 40}px`;
return (
Account
Drive
Gmail
YouTube
Gemini
Maps
Search
Calendar
Play
News
Photos
Meet
Chat
Translate
Contacts
Ad Centre
Shopping
);
};
export const Dropdown5 = () => {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null);
const menuRef = useRef(null);
// Handle click outside to close dropdown
useEffect(() => {
const handleClickOutside = (event) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target) &&
menuRef.current &&
!menuRef.current.contains(event.target)
) {
setIsOpen(false);
}
};
if (isOpen) {
document.addEventListener("mousedown", handleClickOutside);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [isOpen]);
return (
setIsOpen(!isOpen)}
>
apps
{createPortal(
,
document.body
)}
);
};
================================================
FILE: src/components/dropdowns/Dropdown5/Dropdown5Example.css
================================================
.page.dropdown-5-page {
color: #c5c7c5;
background: #1b1b1b;
font-family: "Euclid Circular A", "Poppins";
}
.dropdown-5-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
padding: 0 20px;
background: #1b1b1b;
border-bottom: 1px solid #282a2c;
box-shadow: 0 0 40px rgb(0 0 0 / 12%);
}
.dropdown-5-nav .logo {
display: flex;
align-items: center;
}
.dropdown-5-nav .logo img {
width: 36px;
padding: 0;
margin-left: 4px;
margin-right: 6px;
}
.dropdown-5-nav span.material-symbols-outlined {
display: grid;
place-items: center;
width: 40px;
height: 72px;
font-size: 24px;
}
.dropdown-5-nav h2 {
font-size: 19px;
font-weight: 400;
}
.dropdown-5-nav .nav-right > img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: contain;
margin-left: 8px;
}
.dropdown-5-nav button {
background: transparent;
border: 0;
color: #a5a7a5;
cursor: pointer;
border-radius: 50%;
}
.dropdown-5-nav button:is(:hover, :focus) {
background: #282a2c;
color: #c5c7c5;
}
.dropdown-5-nav .nav-right {
display: flex;
align-items: center;
}
================================================
FILE: src/components/dropdowns/Dropdown5/Dropdown5Example.jsx
================================================
import { Dropdown5 } from "./Dropdown5";
import joe from "./joe.png";
import logo from "./logo.svg";
import "./Dropdown5Example.css";
export const Dropdown5Example = () => {
return (
menu
Drive
help
settings
);
};
================================================
FILE: src/components/dropdowns/Dropdown6/Dropdown6.css
================================================
.dropdown-6 {
flex: 1 1 auto;
position: relative;
}
.dropdown-6 input {
border: 0;
border-radius: 52px;
height: 52px;
width: 100%;
background: #f3f3f6;
padding-left: 18px;
padding-right: 36px;
font-size: 14.75px;
color: inherit;
font-family: inherit;
outline: none;
border: 2px solid transparent;
transition: 0.3s;
}
.dropdown-6.open input,
.dropdown-6 input:hover {
border: 2px solid #eedfed;
background: #ffffff;
}
.dropdown-6 > button {
border: 0;
display: grid;
place-items: center;
height: 34px;
width: 34px;
border-radius: 50%;
background: var(--color-primary);
color: #f9f9f9;
position: absolute;
top: 50%;
right: 8px;
translate: 0 -50%;
font-size: 18px;
}
.dropdown-6 button span {
font-size: 20px;
}
.dropdown-6 input::placeholder {
color: #9b98b1;
}
.dropdown-6 .dropdown-menu {
position: absolute;
z-index: 1;
top: 60px;
left: 0;
right: 0;
background: #ffffff;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding-bottom: 12px;
box-shadow: 0px 40px 50px 0px rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.dropdown-6.open .dropdown-menu {
opacity: 1;
visibility: visible;
}
.dropdown-6 .dropdown-menu .item-btn {
font-family: inherit;
background: 0;
padding: 12px 8px;
border: 0;
display: flex;
gap: 8px;
width: 100%;
border-radius: 6px;
color: inherit;
cursor: pointer;
}
.dropdown-6 .dropdown-menu .item-btn:hover {
background: rgb(0 0 0 / 3%);
}
.dropdown-6 .dropdown-item {
position: relative;
padding: 0 10px;
}
.dropdown-item span:first-child {
opacity: 0.35;
}
================================================
FILE: src/components/dropdowns/Dropdown6/Dropdown6.jsx
================================================
import { useState, useRef, useEffect } from "react";
import "./Dropdown6.css";
const defaultItems = [
"login",
"card",
"landing page",
"dashboard",
"hero section",
"footer",
];
export const Dropdown6 = () => {
const [items, setItems] = useState(defaultItems);
const [search, setSearch] = useState("");
const [open, setOpen] = useState(false);
const wrapperRef = useRef(null);
const inputRef = useRef(null);
const insertSearch = (query) => {
if (!query.trim()) return;
setItems((prev) => {
const newItems = [...prev];
for (let i = newItems.length - 1; i > 0; i--) {
newItems[i] = newItems[i - 1];
}
newItems[0] = query.trim();
return newItems;
});
};
const handleSearch = () => {
insertSearch(search);
setSearch("");
};
const handleFocus = () => setOpen(true);
useEffect(() => {
const handleClickOutside = (e) => {
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
return (
setSearch(e.target.value)}
onFocus={handleFocus}
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
/>
search
{items.map((item, index) => {
const isDefault = defaultItems.includes(item);
return (
{isDefault ? "search" : "schedule"}
{item}
);
})}
);
};
================================================
FILE: src/components/dropdowns/Dropdown6/Dropdown6Example.css
================================================
.page.dropdown-6-page {
background: #fbfbfb;
font-family: "Euclid Circular B", "Poppins";
}
.dropdown-6-page nav {
--color-primary: #fe5495;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
gap: 24px;
padding: 0 36px;
height: 78px;
width: 100%;
background: #ffffff;
color: #403f49;
box-shadow: 0 10px 50px rgb(0 0 0 / 2%);
}
.dropdown-6-page nav a {
padding: 0 8px;
display: flex;
align-items: center;
cursor: pointer;
width: 100%;
height: 72px;
font-size: 15px;
}
.dropdown-6-page nav .avatar {
height: 46px;
padding: 1px;
border-radius: 50%;
border: 1px solid #8f44fd;
}
.dropdown-6-page nav > img {
height: 32px;
}
.dropdown-6-page nav .menu {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.dropdown-6-page nav .dropdown {
position: fixed;
z-index: 1;
top: 86px;
left: 0;
width: 120px;
padding: 6px 0;
display: grid;
opacity: 0;
visibility: hidden;
/* transition: 0.3s; */
border-radius: 12px;
background: #ffffff;
box-shadow: 0 0 30px rgb(0 0 0 / 4%);
transition: 0.3s;
}
.dropdown-6-page nav a:is(:hover, .active) {
color: var(--color-primary);
}
.dropdown-6-page nav .dropdown.visible {
opacity: 1;
visibility: visible;
}
.dropdown-6-page nav .dropdown::after {
content: "";
position: absolute;
top: -12px;
width: 100%;
height: 50px;
}
.dropdown-6-page nav .dropdown > a {
position: relative;
z-index: 1;
height: 40px;
font-size: 14px;
white-space: nowrap;
}
================================================
FILE: src/components/dropdowns/Dropdown6/Dropdown6Example.jsx
================================================
import { useRef, useState } from "react";
import logo from "./logo.svg";
import avatar from "./avatar.png";
import { Dropdown6 } from "./Dropdown6";
import "./Dropdown6Example.css";
const items = [
{
name: "Explore",
items: ["Following", "Popular", "Noteworthy"],
},
{
name: "Talent",
items: ["Browse", "Profiles", "Services", "Jobs"],
},
{
name: "Blog",
items: ["News", "Articles", "Community"],
},
];
const Link = ({ item, isActive, onHover }) => {
const linkRef = useRef();
const handleHover = () => {
const rect = linkRef.current.getBoundingClientRect();
onHover(item, `${rect.x}px`);
};
return (
{item.name}
);
};
const CoolNav = ({ items }) => {
const [translateX, setTranslateX] = useState("0");
const [activeItem, setActiveItem] = useState(null);
const [isHidden, setIsHidden] = useState(true);
const handleLinkHover = (item, x) => {
setActiveItem(item);
setTranslateX(x);
};
const handleMouseEnter = () => {
setIsHidden(false);
};
const handleMouseLeave = () => {
setIsHidden(true);
};
return (
{items.map((item, index) => (
))}
{activeItem?.items?.map((link) => (
{link}
))}
);
};
export const Dropdown6Example = () => {
return (
);
};
================================================
FILE: src/components/dropdowns/Dropdown7/Dropdown7.css
================================================
.page.dropdown-7-page {
margin: 0;
display: grid;
place-items: center;
background: url("bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
--color-menu: rgb(0 0 0 / 10%);
}
.page.dropdown-7-page::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgb(0 0 0 / 40%), rgb(0 0 0 / 0%));
}
.dropdown-7 {
--width: 240px;
margin-top: -50px;
position: relative;
z-index: 1;
}
.dropdown-7 button {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
width: var(--width);
height: 64px;
color: rgb(255 255 255 / 80%);
background: var(--color-menu);
border: 0;
cursor: pointer;
font-size: 18px;
font-family: "Euclid Circular B";
transition: 0.3s ease;
}
.dropdown-7 .menu,
.dropdown-7 > button {
border-radius: 10px;
background: var(--color-menu);
color: #f9f9f9;
border: 2px solid rgb(255 255 255 / 10%);
}
.dropdown-7.open > button .chevron {
rotate: -180deg;
}
.dropdown-7 button .chevron {
margin-left: auto;
transition: 0.3s ease;
}
.dropdown-7 .menu {
position: absolute;
overflow: hidden;
backdrop-filter: blur(10px);
z-index: 1;
top: 74px;
left: 0;
width: 100%;
opacity: 0;
translate: 0 -20px;
visibility: hidden;
transition: 0.4s ease;
}
.dropdown-7.open .menu {
opacity: 1;
translate: 0;
visibility: visible;
}
.dropdown-7 .menu-inner {
position: absolute;
width: calc(var(--width) * 2);
display: flex;
transition: 0.4s ease;
}
.dropdown-7 .menu-inner.open {
translate: -50%;
}
.dropdown-7 .menu button {
border: 0;
height: 56px;
border-radius: 0;
text-transform: capitalize;
}
.dropdown-7 button:hover {
background: rgb(255 255 255 / 4%);
color: rgb(255 255 255 / 80%);
}
.dropdown-7 .sub-menu {
position: absolute;
width: var(--width);
left: var(--width);
top: 0;
opacity: 0;
visibility: hidden;
}
.dropdown-7 .sub-menu.open {
opacity: 1;
visibility: visible;
}
================================================
FILE: src/components/dropdowns/Dropdown7/Dropdown7.jsx
================================================
import { useRef, useState } from "react";
import "./Dropdown7.css";
const items = [
{
name: "Settings",
icon: "ai-gear",
subItems: [
{ name: "Inventory", icon: "ai-file" },
{ name: "Management", icon: "ai-folder" },
{ name: "Location", icon: "ai-check-in" },
],
},
{
name: "Account",
icon: "ai-lock-on",
subItems: [
{ name: "Storage", icon: "ai-data" },
{ name: "Rewards", icon: "ai-gift" },
{ name: "Support", icon: "ai-chat-approve" },
{ name: "Shipping", icon: "ai-shipping-box-v1" },
],
},
{ name: "Logout", icon: "ai-sign-out" },
];
const Icon = ({ icon, className = "" }) => (
);
export const Dropdown7 = () => {
const [open, setOpen] = useState(false);
const [active, setActive] = useState(null);
const subRef = useRef(null);
const activeItem = items[active];
const height = subRef.current?.clientHeight || 168;
return (
setOpen((o) => !o)}>
Joseph Harrison
{items.map((item, i) => (
item.subItems && setActive(i)}
>
{item.name}
{item.subItems && (
)}
))}
{activeItem?.subItems && (
setActive(null)}>
{activeItem.name}
{activeItem.subItems.map((sub) => (
{sub.name}
))}
)}
);
};
================================================
FILE: src/components/dropdowns/index.js
================================================
export * from "./Dropdown1/Dropdown1Example";
export * from "./Dropdown2/Dropdown2Example";
export * from "./Dropdown3/Dropdown3";
export * from "./Dropdown4/Dropdown4Example";
export * from "./Dropdown5/Dropdown5Example";
export * from "./Dropdown6/Dropdown6Example";
export * from "./Dropdown7/Dropdown7";
================================================
FILE: src/components/gsap/ScrollReveal/ScrollReveal.jsx
================================================
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/all";
import "./styles.css";
gsap.registerPlugin(ScrollTrigger);
export const ScrollReveal = () => {
useGSAP(() => {
ScrollTrigger.batch("section > div", {
interval: 0.1,
batchMax: 3,
onEnter: (batch) =>
gsap.to(batch, { autoAlpha: 1, stagger: 0.15, overwrite: true }),
onLeave: (batch) => gsap.set(batch, { autoAlpha: 0, overwrite: true }),
onEnterBack: (batch) =>
gsap.to(batch, { autoAlpha: 1, stagger: 0.15, overwrite: true }),
onLeaveBack: (batch) =>
gsap.set(batch, { autoAlpha: 0, overwrite: true }),
});
}, []);
return (
);
};
================================================
FILE: src/components/gsap/ScrollReveal/styles.css
================================================
.scroll-reveal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px 0;
margin: 0 auto;
}
.scroll-reveal > div {
background: #121419;
height: 190px;
width: 30%;
opacity: 0;
transition: background 0.3s;
}
.scroll-reveal > div:hover {
background: #3e70ff;
}
================================================
FILE: src/components/gsap/TypedMessage/TypedMessage.css
================================================
.message {
font-weight: inherit;
line-height: inherit;
font-size: 80px;
text-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
================================================
FILE: src/components/gsap/TypedMessage/TypedMessage.jsx
================================================
import React, { useRef } from "react";
import { gsap } from "gsap";
import { SplitText } from "gsap/all";
import { useGSAP } from "@gsap/react";
import "./TypedMessage.css";
gsap.registerPlugin(SplitText);
export const TypedMessage = ({ message }) => {
const blockRef = useRef(null);
const tlRef = useRef();
useGSAP(() => {
const s = new SplitText(blockRef.current, {
type: "lines,words",
});
const tl = gsap.timeline({
delay: 0.5,
repeatDelay: 0.5,
repeat: -1,
});
tl.addLabel("enter");
tl.fromTo(
s.words,
{ yPercent: 100 },
{
yPercent: 0,
ease: "circ.out",
stagger: 0.2,
},
"enter"
);
tl.fromTo(
s.words,
{ opacity: 0 },
{
opacity: 1,
ease: "power1.out",
stagger: 0.2,
},
"enter"
);
tl.addPause();
tl.to(
s.words,
{
yPercent: -200,
opacity: 0,
ease: "circ.in",
stagger: 0.1,
duration: 0.4,
},
"exit"
);
tl.to(
s.words,
{
opacity: 0,
ease: "power1.in",
stagger: 0.1,
duration: 0.4,
},
"exit"
);
tlRef.current = tl;
}, []);
const handleClick = () => {
if (tlRef.current) {
tlRef.current.play();
}
};
return (
{message}
);
};
================================================
FILE: src/components/gsap/TypedMessage/TypedMessageExample.css
================================================
.typed-message-page {
color: #222222;
min-height: 100vh;
background: url("./image.jpg");
background-size: cover;
background-position: -360px;
font-family: "Euclid Circular B", "Poppins";
}
.typed-message-page::before {
content: "";
z-index: 0;
position: absolute;
inset: 0;
background: linear-gradient(rgb(0 0 0 / 86%), rgb(0 0 0 / 0%) 120%);
}
.typed-message-page nav {
position: fixed;
width: 100%;
z-index: 2;
display: flex;
padding: 0 40px;
align-items: center;
height: 96px;
color: #f7f7f7;
}
.typed-message-search {
position: relative;
flex: 1 1 auto;
}
.typed-message-search span {
position: absolute;
z-index: 3;
top: 50%;
left: 16px;
translate: 0 -50%;
}
.typed-message-search input {
border: 0;
border-radius: 40px;
height: 50px;
background: rgb(255 255 255 / 10%);
backdrop-filter: blur(10px);
width: 100%;
font-family: inherit;
font-size: 16px;
padding-left: 46px;
}
.typed-message-search input::placeholder {
color: rgb(255 255 255 / 60%);
}
.typed-message-banner {
position: relative;
height: 100vh;
border-radius: 50px;
color: #ffffff;
}
.background-video {
position: absolute;
z-index: 0;
inset: 0;
overflow: hidden;
top: 0;
height: 100%;
object-fit: cover;
}
.banner-overlay {
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%));
}
.typed-message-banner-content {
position: relative;
z-index: 3;
padding-top: 320px;
padding-inline: 82px;
display: flex;
flex-direction: column;
gap: 30px;
}
.typed-message-wrapper {
font-size: 48px;
font-weight: 400;
max-width: 450px;
line-height: 1.2;
}
.typed-message-banner-content > button {
background: rgb(247 247 247 / 12%);
color: #f7f7f7;
backdrop-filter: blur(10px);
font-family: inherit;
padding: 0 32px;
height: 64px;
border-radius: 32px;
border: 0;
font-size: 22px;
align-self: baseline;
}
.typed-message-logo {
width: 140px;
padding-right: 40px;
}
.typed-message-links {
display: flex;
width: 140px;
justify-content: flex-end;
align-items: center;
gap: 16px;
}
.typed-message-links span {
font-size: 24px;
}
================================================
FILE: src/components/gsap/TypedMessage/TypedMessageExample.jsx
================================================
import { TypedMessage } from "./TypedMessage";
import "./TypedMessageExample.css";
import image from "./image.jpg";
import logo from "./logo.svg";
import video from "./video.mp4";
export const TypedMessageExample = () => {
return (
search
mail
notifications
menu
Your browser does not support the video tag.
);
};
================================================
FILE: src/components/gsap/index.js
================================================
export * from "./ScrollReveal/ScrollReveal";
export * from "./TypedMessage/TypedMessageExample";
================================================
FILE: src/components/index.js
================================================
export * from "./buttons";
export * from "./carousels";
export * from "./controls";
export * from "./sidebars";
export * from "./gsap";
export * from "./libraries";
export * from "./accordions";
export * from "./logins";
export * from "./cards";
export * from "./modals";
export * from "./parallax";
export * from "./dropdowns";
export * from "./widgets";
export * from "./navbars";
export * from "./tables";
export * from "./signups";
================================================
FILE: src/components/libraries/index.js
================================================
export * from "./rc-slider/RcSlider";
export * from "./react-dropzone/ReactDropzone";
export * from "./react-xarrows/ReactXarrows";
================================================
FILE: src/components/libraries/rc-slider/RcSlider.css
================================================
.page.rc-slider-page {
background: #393965;
font-family: "Euclid Circular A", "Poppins";
}
.slider-card {
--color-primary: #756bea;
--color-card: #26263c;
display: grid;
gap: 14px;
padding: 20px 20px 24px;
width: 260px;
background: var(--color-card);
border-radius: 10px;
box-shadow: 0 20px 30px rgb(0 0 0 / 10%);
}
.slider-card h2 {
margin: 0 0 8px;
font-size: 14px;
font-weight: 400;
color: rgb(255 255 255 / 50%);
}
.slider-card var {
margin: 0;
font-size: 38px;
font-weight: 400;
font-style: normal;
color: rgb(255 255 255 / 100%);
}
.slider-card var abbr {
color: rgb(255 255 255 / 25%);
margin-right: 4px;
}
body .rc-slider-rail {
background: rgb(255 255 255 / 12%);
}
body .rc-slider-handle {
border-color: var(--color-card);
background: var(--color-primary);
opacity: 1;
scale: 1.5;
}
body .rc-slider-handle:hover,
body .rc-slider-handle-dragging {
box-shadow: none !important;
border-color: var(--color-card) !important;
cursor: pointer;
}
body .rc-slider-track {
background: var(--color-primary);
}
================================================
FILE: src/components/libraries/rc-slider/RcSlider.jsx
================================================
import Slider from "rc-slider";
import "rc-slider/assets/index.css";
import { useState } from "react";
import "./RcSlider.css";
export const RcSlider = () => {
const [value, setValue] = useState(20000);
const handleChange = (val) => setValue(Number(val));
return (
Mortgage Value
$
{value.toLocaleString("en-US")}
);
};
================================================
FILE: src/components/libraries/react-dropzone/ReactDropzone.css
================================================
.page.dropzone-page {
background: #212224;
--color-card: #161718;
}
.dropzone-card {
border-radius: 6px;
background: var(--color-card);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
text-align: center;
}
.dropzone-card h2 {
font-weight: 400;
margin: 0 0 6px;
}
.dropzone-card h3 {
font-weight: 400;
opacity: 0.5;
margin: 0 0 50px;
}
.dropzone-card img {
position: absolute;
top: -50px;
width: 100px;
border-radius: 50%;
border: 8px solid var(--color-card);
}
.dropzone {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
width: 280px;
min-height: 200px;
border-width: 2px;
border-radius: 6px;
border-color: #464646;
border-style: dashed;
background-color: transparent;
color: #bdbdbd;
outline: none;
}
================================================
FILE: src/components/libraries/react-dropzone/ReactDropzone.jsx
================================================
import "./ReactDropzone.css";
import { useDropzone } from "react-dropzone";
import icon from "./icon.svg";
export const ReactDropzone = () => {
const onDrop = (acceptedFiles) => {
// Do something with the files
};
const { getRootProps, getInputProps, isDragActive, acceptedFiles } =
useDropzone({ onDrop });
const files = acceptedFiles.map((file) => (
{file.path}
));
return (
Upload Files
Fast and easy
{isDragActive ? (
Drop the files here ...
) : (
Drag 'n' drop some files here, or click to select files
)}
{files.length > 0 && (
<>
Files
>
)}
);
};
================================================
FILE: src/components/libraries/react-xarrows/ReactXarrows.css
================================================
================================================
FILE: src/components/libraries/react-xarrows/ReactXarrows.jsx
================================================
import React from "react";
import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";
import Draggable from "react-draggable";
const boxStyle = {
border: "grey solid 2px",
borderRadius: "10px",
padding: "5px",
};
const DraggableBox = ({ id }) => {
const updateXarrow = useXarrow();
return (
{id}
);
};
export const ReactXarrows = () => {
return (
);
};
================================================
FILE: src/components/logins/Login1/Login1.jsx
================================================
import "./styles.css";
import logo from "./logo.svg";
export const Login1 = () => {
return (
Welcome back
Need an account? Sign up here
);
};
================================================
FILE: src/components/logins/Login1/styles.css
================================================
.page.login-1 {
display: grid;
place-items: center;
gap: 50px;
margin: 0;
height: 100vh;
padding: 0 32px;
color: #aaaaaa;
background: #eff9ff;
font-family: "Euclid Circular A", "Poppins";
}
@media (width >= 500px) {
.page.login-1 {
padding: 0;
}
}
.login-1-background {
position: fixed;
top: -50vmin;
left: -50vmin;
width: 100vmin;
height: 100vmin;
border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;
background: #65c8ff;
}
.login-1-background::after {
content: "";
position: inherit;
right: -50vmin;
bottom: -55vmin;
width: inherit;
height: inherit;
border-radius: inherit;
background: #143d81;
}
.login-1-card {
overflow: hidden;
position: relative;
z-index: 3;
width: 94%;
margin: 0 20px;
padding: 170px 30px 54px;
border-radius: 24px;
background: #ffffff;
text-align: center;
box-shadow: 0 100px 100px rgb(0 0 0 / 10%);
}
.login-1-card::before {
content: "";
position: absolute;
top: -880px;
left: 50%;
translate: -50% 0;
width: 1000px;
height: 1000px;
border-radius: 50%;
background: #216ce7;
}
@media (width >= 500px) {
.login-1-card {
margin: 0;
width: 360px;
}
}
.login-1-card > img {
position: absolute;
top: 30px;
left: 50%;
translate: -50% 0;
width: 64px;
height: 64px;
}
.login-1-card > h2 {
font-size: 22px;
font-weight: 400;
margin: 0 0 38px;
color: rgb(0 0 0 / 38%);
}
.login-1-card form {
margin: 0 0 44px;
display: grid;
gap: 12px;
}
.login-1-card form :is(input, button) {
width: 100%;
height: 56px;
border-radius: 28px;
font-size: 16px;
font-family: inherit;
}
.login-1-card form > input {
border: 0;
padding: 0 24px;
color: #222222;
background: #ededed;
}
.login-1-card form > input::placeholder {
color: rgb(0 0 0 / 28%);
}
.login-1-card form > button {
border: 0;
color: #f9f9f9;
background: #226ce7;
display: grid;
place-items: center;
font-weight: 500;
cursor: pointer;
}
.login-1-card form > footer {
color: #a1a1a1;
}
.login-1-card form > footer > a {
color: #216ce7;
}
================================================
FILE: src/components/logins/Login2/Login2.jsx
================================================
import "./styles.css";
import logo from "./logo.svg";
import signin from "./signin.svg";
import signup from "./signup.svg";
import { useState } from "react";
const SigninForm = () => (
);
const SignupForm = () => (
);
const navButtons = [
{ name: "signin", label: "Sign In", icon: "check" },
{ name: "signup", label: "Sign Up", icon: "add" },
];
const NavButton = ({ onClick, isActive, label, icon }) => (
{label}
);
const CardForms = ({ view }) => (
);
const CardHero = ({ view }) => (
Welcome Back.
Please enter your credentials.
Join The Crowd.
Sign up now and get started today.
);
const CardNav = ({ view, toggleView }) => (
{navButtons.map((btn) => (
))}
);
export const Login2 = () => {
const [view, setView] = useState("signin");
const toggleView = () => setView(view === "signin" ? "signup" : "signin");
return (
);
};
================================================
FILE: src/components/logins/Login2/styles.css
================================================
.page.login-2-page {
--color-primary: #6387ff;
--color-dark: #496cf5;
--color-muted: hsl(226, 12%, 51%);
margin: 0;
background: #22262b;
background: url("bg.svg") no-repeat;
background-size: cover;
background-position: center;
color: #f9f9f9;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
font-family: "Euclid Circular B";
}
.login-2 ul {
list-style: none;
margin: 0;
padding: 0;
}
.login-2 input,
.login-2 button {
font-family: inherit;
color: inherit;
}
.login-2 button {
padding: 0;
cursor: pointer;
}
.login-2 p {
font-size: 12px;
margin: 12px 0;
}
.login-2 p a {
color: var(--color-primary);
}
.login-2 {
display: flex;
align-content: stretch;
width: 660px;
height: 360px;
background: #242b43;
backdrop-filter: blur(20px);
box-shadow: 0 20px 80px rgba(0 0 0 / 20%);
border-radius: 6px;
}
.login-2 .card-nav {
position: relative;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
width: 178px;
}
.login-2 .card-nav .active-bar {
position: absolute;
top: 33.33%;
left: 0;
width: 5px;
height: 33.33%;
border-radius: 6px;
background: var(--color-dark);
transition: 0.4s ease-out;
}
.login-2 .card-nav li {
flex: 1 1 auto;
display: grid;
place-items: center;
}
.login-2 .card-nav li button.active {
color: var(--color-primary);
}
.login-2 .card-nav button {
background: transparent;
border: 0;
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 14px;
transition: 0.3s;
}
.login-2 .card-nav button:not(.active):hover i {
scale: 1.1;
}
.login-2 .card-nav button i {
font-size: 24px;
transition: 0.3s;
}
.login-2 .card-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: -48px 0;
flex: 0 0 300px;
overflow: hidden;
border-radius: 12px;
background: var(--color-dark);
}
.login-2 .card-hero-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
transition: 0.5s ease-in-out;
}
.login-2 .card-hero-content {
height: 456px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.login-2 h2,
.login-2 h3 {
text-align: left;
font-weight: 400;
margin: 0;
padding-left: 24px;
}
.login-2 .card-hero h2 {
color: #f9f9f9;
margin: 0 0 2px;
}
.login-2 .card-hero h3 {
color: #f9f9f9;
opacity: 0.75;
font-size: 13px;
margin: 0 0 32px;
}
.login-2 .card-hero img {
width: 100%;
}
.login-2 .card-form {
position: relative;
overflow: hidden;
padding: 24px;
width: 400px;
}
.login-2 .forms {
position: absolute;
height: 200%;
left: 0;
top: 0;
transition: 0.5s ease-in-out;
}
.login-2 .card-form form {
height: 360px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.login-2 .card-form label {
font-size: 13px;
color: var(--color-muted);
}
.login-2 .control {
position: relative;
}
.login-2 .control input {
background: rgb(255 255 255 / 4%);
border: 0;
border-radius: 6px;
width: 100%;
height: 40px;
padding: 0 12px;
outline: none;
transition: 0.3s;
}
.login-2 .control input:focus {
box-shadow: 0 0 0 2px var(--color-primary);
}
.login-2 .control input::placeholder {
color: #bdbcd2;
}
.login-2 .control input:focus ~ i {
color: var(--color-primary);
}
.login-2 .control i {
color: var(--color-muted);
position: absolute;
top: 50%;
right: 12px;
translate: 0 -50%;
transition: 0.3s;
}
.login-2 .card-form form > button {
height: 40px;
padding: 12px 20px;
border-radius: 6px;
color: #f9f9f9;
letter-spacing: 1px;
border: 0;
margin-top: 12px;
background: var(--color-dark);
}
.login-2 p.footer {
opacity: 0.75;
}
================================================
FILE: src/components/logins/Login3/Login3.css
================================================
.page.login-3-page {
--gradient: linear-gradient(-35deg, #8d00ff, #365fe7);
--muted: #8d889d;
background: #1e1b2b;
color: #f9f9f9;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
font-family: "Euclid Circular B";
}
.login-3 .card {
position: relative;
overflow: hidden;
width: 660px;
height: 440px;
border-radius: 16px;
background: #141317;
box-shadow: 0 12px 80px rgba(0, 0, 0, 0.12);
}
.login-3 .card-bg {
position: absolute;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
width: 50%;
background: var(--gradient);
translate: 0 0;
transition: 0.65s;
}
.login-3 .card-bg.signin {
translate: 100% 0;
}
.login-3 .hero,
.login-3 .form {
position: absolute;
width: 50%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: 0.65s;
}
.login-3 .form.signup {
left: 50%;
}
.login-3 .hero.signin {
left: 50%;
translate: 100% 0;
}
.login-3 .hero.signin.active {
translate: 0;
}
.login-3 .hero.signup {
translate: -100% 0;
}
.login-3 .hero.signup.active {
translate: 0;
}
.login-3 .hero {
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
width: 50%;
color: #f9f9f9;
text-align: center;
padding: 0 24px;
}
.login-3 .form.active,
.login-3 .hero.active {
opacity: 1;
visibility: visible;
}
.login-3 h2 {
margin: 0;
font-weight: 500;
}
.login-3 .form.signin {
translate: -100% 0;
}
.login-3 .form.signin.active {
translate: 0;
}
.login-3 .form.signup {
translate: 100% 0;
}
.login-3 .form.signup.active {
translate: 0;
}
.login-3 .hero p {
margin: 0 0 6px;
opacity: 0.75;
line-height: 1.45;
}
.login-3 .hero button {
padding: 12px 40px;
border-radius: 32px;
letter-spacing: 1px;
font-family: inherit;
color: inherit;
border: 1px solid #f9f9f9;
background: transparent;
transition: 0.3s;
cursor: pointer;
}
.login-3 .hero button:hover {
color: #2a449a;
background: #f9f9f9;
}
.login-3 .form {
background: inherit;
z-index: 1;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
padding: 32px;
}
.login-3 .form h2 {
font-size: 22px;
text-align: center;
}
.login-3 .sso {
width: 100%;
display: flex;
justify-content: center;
gap: 12px;
}
.login-3 .form form > a {
font-size: 14px;
margin-top: 10px;
color: var(--muted);
}
.login-3 .sso a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgb(255 255 255 / 24%);
font-size: 16px;
}
.login-3 .form form {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.login-3 .form p {
margin: 0 0 -8px;
text-align: center;
color: var(--muted);
font-size: 12px;
}
.login-3 .form input {
font-family: inherit;
border-radius: 10px;
border: 0;
background: #1f1b2b;
padding: 14px 12px;
color: inherit;
width: 100%;
}
.login-3 .form input::placeholder {
color: #8d889d;
}
.login-3 .form button {
border: 0;
padding: 14px 0;
border-radius: 32px;
font-family: inherit;
color: #f9f9f9;
width: 160px;
margin-top: 10px;
background: var(--gradient);
}
================================================
FILE: src/components/logins/Login3/Login3.jsx
================================================
import { useState } from "react";
import "./Login3.css";
const SSOButtons = () => (
);
const Hero = ({ type, active, title, text, buttonText, onClick }) => (
{title}
{text}
{buttonText}
);
const AuthForm = ({ type, active, title, children }) => (
{title}
Or use your email address
);
export const Login3 = () => {
const [view, setView] = useState("signup");
const isSignup = view === "signup";
const toggleView = () => setView(isSignup ? "signin" : "signup");
return (
);
};
================================================
FILE: src/components/logins/Login4/Login4.css
================================================
.login-4-card * {
box-sizing: border-box;
}
.login-4-page.page {
margin: 0;
background: #f2f3fe;
color: #4b5679;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
font-family: "Euclid Circular B";
}
.login-4-card {
--gradient: linear-gradient(45deg, #5823c9, #6b50ff);
position: relative;
overflow: hidden;
width: 660px;
height: 440px;
border-radius: 24px;
background: #ffffff;
border: 8px solid #ffffff;
box-shadow: 0 12px 80px rgba(41, 30, 113, 0.12);
}
.login-4-card .card-bg {
position: absolute;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
width: 50%;
background: var(--gradient);
border-radius: 18px;
translate: 0 0;
transition: 0.65s ease-in-out;
}
.login-4-card .card-bg.login {
translate: 100% 0;
}
.login-4-card .hero,
.login-4-card .form {
position: absolute;
width: 50%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: 0.65s ease-in-out;
}
.login-4-card .hero.active,
.login-4-card .form.active {
opacity: 1;
visibility: visible;
}
.login-4-card .form.register {
left: 50%;
}
.login-4-card .hero.login {
left: 50%;
translate: 100% 0;
}
.login-4-card .hero.login.active {
translate: 0;
}
.login-4-card .hero.register {
translate: -100% 0;
}
.login-4-card .hero.register.active {
translate: 0;
}
.login-4-card .hero {
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
width: 50%;
color: #f9f9f9;
text-align: center;
padding: 0 24px;
}
.login-4-card h2 {
margin: 0;
font-weight: 500;
}
.login-4-card .form.login {
translate: 100% 0;
}
.login-4-card .form.login.active {
translate: 0;
}
.login-4-card .form.register {
translate: -100% 0;
}
.login-4-card .form.register.active {
translate: 0;
}
.login-4-card .hero p {
margin: 0 0 6px;
opacity: 0.85;
line-height: 1.45;
}
.login-4-card .hero button {
padding: 12px 40px;
border-radius: 32px;
letter-spacing: 1px;
font-family: inherit;
color: inherit;
border: 1px solid #f9f9f9;
background: transparent;
transition: 0.3s;
cursor: pointer;
}
.login-4-card .hero button:hover {
color: #3c23c9;
background: #f9f9f9;
}
.login-4-card .form {
background: #ffffff;
z-index: 1;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
padding: 32px;
}
.login-4-card .form h2 {
font-size: 22px;
text-align: center;
}
.login-4-card .sso {
width: 100%;
display: flex;
justify-content: center;
gap: 12px;
}
.login-4-card .form form > a {
font-size: 14px;
margin-top: 10px;
opacity: 0.5;
}
.login-4-card .sso a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f2f3fe;
font-size: 16px;
}
.login-4-card .form form {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.login-4-card .form p {
margin: 0 0 -8px;
text-align: center;
opacity: 0.5;
font-size: 12px;
}
.login-4-card .form input {
font-family: inherit;
border-radius: 10px;
border: 0;
background: #f2f3fe;
padding: 14px 12px;
color: inherit;
width: 100%;
}
.login-4-card .form input::placeholder {
color: #96959e;
}
.login-4-card .form button {
border: 0;
padding: 14px 0;
border-radius: 32px;
font-family: inherit;
letter-spacing: 1px;
color: #f9f9f9;
width: 160px;
margin-top: 10px;
background: var(--gradient);
box-shadow: 0 10px 40px rgb(30 61 161 / 32%);
}
================================================
FILE: src/components/logins/Login4/Login4.jsx
================================================
import { useState } from "react";
import "./Login4.css";
const CardBackground = ({ activeView }) => {
return
;
};
const SocialButtons = () => {
return (
);
};
const HeroPanel = ({ type, activeView, title, text, buttonText, onToggle }) => {
return (
{title}
{text}
{buttonText}
);
};
const RegisterForm = ({ activeView }) => {
return (
Sign Up
Or use your email address
);
};
const LoginForm = ({ activeView }) => {
return (
Login
Or use your email address
);
};
export const Login4 = () => {
const [activeView, setActiveView] = useState("login");
const toggleView = () => {
setActiveView(activeView === "login" ? "register" : "login");
};
return (
);
};
================================================
FILE: src/components/logins/Login5/Login5.jsx
================================================
import "./styles.css";
import logo from "./logo.svg";
const Textbox = ({ placeholder, type, icon }) => (
);
export const Login5 = () => {
return (
Welcome back!
);
};
================================================
FILE: src/components/logins/Login5/styles.css
================================================
.page.login-5 {
display: grid;
place-items: center;
gap: 50px;
margin: 0;
height: 100vh;
padding: 0 32px;
color: #f9f9f9;
background: #17171f;
font-family: "Euclid Circular A", "Poppins";
}
@media (width >= 500px) {
.page.login-5 {
padding: 0;
}
}
.login-5-background {
position: fixed;
top: -55vmin;
left: -55vmin;
width: 110vmin;
height: 110vmin;
border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;
background: #6a65ff;
}
.login-5-background::after {
content: "";
position: inherit;
right: -55vmin;
bottom: -55vmin;
width: inherit;
height: inherit;
border-radius: inherit;
background: #3c85fe;
}
.login-5-card {
overflow: hidden;
position: relative;
z-index: 3;
width: 94%;
margin: 0 20px;
padding: 84px 30px 54px;
border-radius: 48px;
border: 6px solid rgb(255 255 255 / 4%);
background: rgb(255 255 255 / 4%);
backdrop-filter: blur(44px);
text-align: center;
box-shadow: 0 100px 100px rgb(0 0 0 / 10%);
}
@media (width >= 450px) {
.login-5-card {
margin: 0;
width: 360px;
}
}
.login-5-card > img {
width: 100px;
height: 100px;
margin-bottom: 30px;
border: 6px solid rgb(255 255 255 / 14%);
border-radius: 50%;
padding: 12px;
}
.login-5-card > h2 {
font-size: 20px;
font-weight: 400;
margin: 0 0 32px;
}
.login-5-card form {
margin: 0;
display: grid;
gap: 12px;
}
.login-5-textbox {
position: relative;
}
.login-5-textbox i {
position: absolute;
top: 50%;
left: 20px;
translate: 0 -50%;
}
.login-5-card form :is(input, button) {
width: 100%;
height: 56px;
border-radius: 28px;
font-size: 16px;
font-family: inherit;
outline: none;
transition: 0.3s;
}
.login-5-card form :is(input, button):focus {
box-shadow: 0 0 0 3px #6a65ff;
}
.login-5-textbox input {
border: 0;
padding: 0 24px 0 44px;
color: #f9f9f9;
background: rgb(255 255 255 / 4%);
}
.login-5-card form > input::placeholder {
color: rgb(255 255 255 / 32%);
}
.login-5-card form > button {
border: 0;
color: #f9f9f9;
background: rgb(255 255 255 / 8%);
display: grid;
place-items: center;
font-weight: 500;
cursor: pointer;
}
.login-5-card form > button:hover {
background: #6a65ff;
}
.login-5-card > footer {
color: rgb(255 255 255 / 38%);
}
.login-5-card > form > a {
opacity: 0.75;
display: flex;
align-items: center;
justify-content: center;
height: 56px;
margin-bottom: 12px;
}
.login-5-card > footer > a {
color: #f9f9f9;
text-decoration: none;
}
================================================
FILE: src/components/logins/Login6/Login6.jsx
================================================
import { useRef } from "react";
import "./styles.css";
import logo from "./logo.svg";
import googleIcon from "./google.svg";
import appleIcon from "./apple.svg";
import { useWebGLBackground } from "./useWebGLBackground";
const Textbox = ({ id, type, label }) => (
{label}
);
export const Login6 = () => {
const canvasRef = useRef(null);
useWebGLBackground(canvasRef);
return (
);
};
================================================
FILE: src/components/logins/Login6/styles.css
================================================
.page.login-6 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100dvh;
background: radial-gradient(ellipse at center, #030b20 0%, #07070f 70%);
color: #ffffff;
font-family: "Euclid Circular B", "Poppins", sans-serif;
padding: 24px 16px;
}
.login-6-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.login-6-card {
position: relative;
z-index: 2;
background: radial-gradient(
ellipse at 50% 0%,
rgba(37, 45, 76, 0.52),
rgba(2, 4, 18, 0.44)
);
border: 1px solid rgba(40, 140, 255, 0.16);
box-shadow:
inset 0 1px 0 rgba(80, 170, 255, 0.09),
0 48px 96px -24px rgba(0, 0, 0, 0.8);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border-radius: 48px;
padding: 64px 40px 52px;
width: min(360px, 100%);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.login-6-card > img {
width: 120px;
margin: 0 0 40px;
}
.login-6-card h2 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 8px;
background: linear-gradient(160deg, #ffffff 20%, #85c8ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.login-6-card h3 {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(80, 160, 255, 0.45);
margin: 0 0 40px;
}
.login-6-form {
display: grid;
gap: 14px;
width: 100%;
margin: 0 0 18px;
}
.login-6-socials {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.login-6-sso-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
background: rgba(20, 100, 255, 0.05);
border: 1px solid rgba(30, 130, 255, 0.12);
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
cursor: pointer;
}
.login-6-sso-btn:hover {
background: rgba(20, 100, 255, 0.09);
border-color: rgba(30, 130, 255, 0.22);
color: rgba(255, 255, 255, 0.85);
}
.login-6-sso-btn:active {
transform: scale(0.98);
}
.login-6-sso-btn img {
display: block;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.login-6-or {
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(80, 160, 255, 0.4);
}
.login-6-or::before,
.login-6-or::after {
content: "";
flex: 1;
height: 1px;
background: rgba(40, 140, 255, 0.18);
}
.login-6-card :is(input, button) {
height: 56px;
font-family: inherit;
font-size: 15px;
padding: 0 16px;
border-radius: 12px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-6-textbox {
position: relative;
}
.login-6-textbox label {
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: absolute;
top: 50%;
left: 16px;
translate: 0 -50%;
transform-origin: 0 50%;
pointer-events: none;
color: rgba(80, 160, 255, 0.42);
font-size: 15px;
}
.login-6-textbox input {
width: 100%;
padding-top: 12px;
background: rgba(20, 100, 255, 0.05);
border: 1px solid rgba(30, 130, 255, 0.12);
outline: none;
color: #ffffff;
box-shadow: 0 0 0 2px transparent;
}
.login-6-textbox input:hover {
background: rgba(20, 100, 255, 0.09);
border-color: rgba(30, 130, 255, 0.22);
}
.login-6-textbox input:focus {
background: rgba(20, 100, 255, 0.11);
border-color: transparent;
box-shadow:
0 0 0 2px #1e85ff,
0 0 24px rgba(30, 133, 255, 0.22);
}
.login-6-textbox input:is(:focus, :not(:invalid)) ~ label {
scale: 0.72;
translate: 0 -118%;
}
.login-6-form button[type="submit"] {
background: linear-gradient(135deg, #2d9bff 0%, #0d4fe8 100%);
color: #e8f4ff;
border: none;
font-weight: 400;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
margin-top: 4px;
}
.login-6-form button[type="submit"]:hover {
background: linear-gradient(135deg, #46aaff 0%, #1a5ef5 100%);
}
.login-6-form button:active {
transform: scale(0.98);
background: linear-gradient(135deg, #1a8aee 0%, #0840cc 100%);
}
.login-6-card > a {
font-size: 13px;
color: rgba(80, 160, 255, 0.42);
text-decoration: none;
transition: color 0.2s;
cursor: pointer;
}
.login-6-card > a:hover {
color: rgba(130, 190, 255, 0.8);
}
.login-6-footer {
margin: 40px 0 0;
font-size: 13px;
color: rgba(80, 160, 255, 0.38);
}
.login-6-footer a {
color: #1e85ff;
text-decoration: none;
transition: color 0.2s;
}
.login-6-footer a:hover {
color: #55aaff;
}
================================================
FILE: src/components/logins/Login6/useWebGLBackground.js
================================================
import { useEffect } from "react";
const VERT = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
const FRAG = `
precision highp float;
uniform float time;
uniform vec2 resolution;
void main() {
vec4 abyssColor = vec4(0.0, 0.0, 0.0, 1.0);
vec4 tunnelColor = vec4(0.04, 0.52, 1.0, 1.0);
vec2 uv = (gl_FragCoord.xy - 0.5 * resolution.xy) / resolution.y * 0.6;
float r = length(uv);
float y = fract(r / 0.005 / (r - 0.01) + time);
y = smoothstep(0.01, 4.0, y);
float x = length(uv);
x = smoothstep(0.5, 0.01, x);
gl_FragColor = mix(tunnelColor, abyssColor, x) * y;
}
`;
export const useWebGLBackground = (canvasRef) => {
useEffect(() => {
const canvas = canvasRef.current;
const gl = canvas.getContext("webgl");
if (!gl) return;
const compile = (type, src) => {
const shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
return shader;
};
const program = gl.createProgram();
const vs = compile(gl.VERTEX_SHADER, VERT);
const fs = compile(gl.FRAGMENT_SHADER, FRAG);
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
gl.STATIC_DRAW,
);
const posAttr = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(posAttr);
gl.vertexAttribPointer(posAttr, 2, gl.FLOAT, false, 0, 0);
const timeLoc = gl.getUniformLocation(program, "time");
const resLoc = gl.getUniformLocation(program, "resolution");
const resize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
};
resize();
window.addEventListener("resize", resize);
const startTime = Date.now();
let rafId;
const render = () => {
gl.uniform1f(timeLoc, (Date.now() - startTime) / 1000);
gl.uniform2f(resLoc, canvas.width, canvas.height);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
rafId = requestAnimationFrame(render);
};
render();
return () => {
cancelAnimationFrame(rafId);
window.removeEventListener("resize", resize);
gl.deleteProgram(program);
gl.deleteShader(vs);
gl.deleteShader(fs);
gl.deleteBuffer(buf);
};
}, []);
};
================================================
FILE: src/components/logins/index.js
================================================
export * from "./Login1/Login1";
export * from "./Login2/Login2";
export * from "./Login3/Login3";
export * from "./Login4/Login4";
export * from "./Login5/Login5";
export * from "./Login6/Login6";
================================================
FILE: src/components/modals/Modal1/Modal1.jsx
================================================
import { useState } from "react";
import "./styles.css";
import logo from "./logo.svg";
export const Modal1 = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleModal = () => setIsOpen(!isOpen);
return (
Sign Up
Try Hologram today
No credit card information required
Try Hologram today.
Sign up free
trending_flat
);
};
================================================
FILE: src/components/modals/Modal1/styles.css
================================================
.page.modal-1-page {
background: #ffffff;
}
.container {
max-width: 700px;
margin: 0 auto;
}
.modal-1-footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: 50vh;
padding-bottom: 20px;
background: #0a1535;
color: #f9f9f9;
}
.modal-1-footer article {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 50px 40px;
margin: -99px 20px 20px;
border-radius: 10px;
background: linear-gradient(90deg, #773ecb, #9f63ff);
}
.modal-1-footer article h2 {
font-weight: 400;
color: rgb(255 255 255 / 70%);
}
.signup-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 20px 0 20px;
width: 100%;
height: 56px;
background: #161022;
border: 0;
border-radius: 6px;
color: #f9f9f9;
font-family: inherit;
font-size: 16px;
}
.modal-1-footer section {
padding: 0 50px;
}
.modal-1-footer section.top {
padding-top: 30px;
margin-bottom: 48px;
}
.modal-1-footer section.top img {
display: block;
height: 30px;
margin: 0 0 30px;
}
.modal-1-footer section.top ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 30px;
grid-template-columns: repeat(2, 1fr);
}
@media (width > 480px) {
.modal-1-footer article button {
width: 70%;
}
.modal-1-footer section.top ul {
padding-right: 10%;
}
}
@media (width > 600px) {
.modal-1-footer article {
flex-direction: row;
min-height: 140px;
margin: -70px 20px 20px;
padding: 30px 50px 30px;
}
.modal-1-footer article button {
width: auto;
padding: 0 20px 0 24px;
}
.modal-1-footer section.top ul {
grid-template-columns: repeat(4, 1fr);
padding-right: 0;
}
}
.modal-1-footer section.top ul li a {
display: block;
margin-bottom: 18px;
color: rgb(255 255 255 / 90%);
}
.modal-1-footer section.top h3 {
color: rgb(255 255 255 / 40%);
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 20px;
}
.modal-1-overlay,
.modal-1-modal {
position: fixed;
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
@keyframes overlay-in {
0% {
scale: 0 0.004;
}
33% {
scale: 1 0.004;
}
66%,
100% {
scale: 1 1;
}
}
.modal-1-overlay {
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / 75%);
display: grid;
place-items: center;
}
.modal-1-overlay.open {
visibility: visible;
opacity: 1;
animation: overlay-in 1s both;
}
@keyframes modal-in {
0%,
66% {
opacity: 0;
visibility: hidden;
translate: -50% -40%;
}
100% {
opacity: 1;
visibility: visible;
}
}
.modal-1-modal {
z-index: 2;
width: 430px;
top: 50%;
left: 50%;
background: #ffffff;
border-radius: 12px;
padding: 0 40px 50px;
translate: -50% -50%;
box-shadow: 0 10px 30px rgb(0 0 0 / 24%);
}
.modal-1-overlay.open .modal-1-modal {
opacity: 1;
visibility: visible;
animation: modal-in 1s;
}
.modal-1-modal header {
background: linear-gradient(90deg, #773ecb, #9f63ff);
margin: -85px -20px 30px;
border-radius: 12px;
height: 170px;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 40px;
box-shadow: 0 16px 30px rgb(0 0 0 / 12%);
}
.modal-1-modal h2 {
margin-bottom: 10px;
font-size: 29px;
}
.modal-1-modal h3 {
opacity: 0.45;
font-weight: 400;
}
.modal-1-modal form {
display: grid;
gap: 16px;
}
.modal-1-modal .textbox {
position: relative;
width: 100%;
height: 56px;
display: flex;
align-items: center;
}
.modal-1-modal .textbox span {
position: relative;
z-index: 1;
left: 16px;
font-size: 20px;
color: #96939c;
pointer-events: none;
}
.modal-1-modal input {
position: absolute;
top: 0;
left: 0;
right: 0;
border: 0;
background: #ececec;
height: 56px;
border-radius: 6px;
font-family: inherit;
padding: 0 16px 0 44px;
font-size: 16px;
}
.modal-1-modal input::placeholder {
color: #96939c;
}
.modal-1-modal > p {
color: #96939c;
margin: 30px 0 0;
}
================================================
FILE: src/components/modals/Modal2/Modal2 copy.css
================================================
.overlay,
.dialog {
position: fixed;
}
@keyframes overlay-in {
0% {
scale: 0 0.003;
}
33%,
36% {
scale: 1 0.003;
}
66%,
100% {
scale: 1 1;
}
}
.overlay {
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / 75%);
display: grid;
place-items: center;
}
.overlay.open {
animation: overlay-in 1s both;
}
.overlay.closed {
animation: overlay-in 1s 0.25s reverse both;
}
.overlay.default {
scale: 0;
}
@keyframes modal-in {
0% {
opacity: 0;
visibility: hidden;
scale: 0.5;
}
100% {
opacity: 1;
visibility: visible;
scale: 1;
}
}
.dialog {
z-index: 2;
width: 380px;
top: 50%;
left: 50%;
background: #ffffff;
border-radius: 12px;
padding: 0 40px 50px;
translate: -50% -50%;
box-shadow: 0 10px 30px rgb(0 0 0 / 24%);
}
.dialog.default {
opacity: 0;
visibility: hidden;
}
.dialog.open {
animation: modal-in 0.5s 0.6s both;
}
.dialog.closed {
animation: modal-in 0.5s reverse both;
}
.dialog header {
background: linear-gradient(90deg, #9d50bb, #6e48aa);
margin: -85px -20px 30px;
border-radius: 12px;
height: 170px;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 40px;
box-shadow: 0 16px 30px rgb(0 0 0 / 12%);
}
.dialog header h2 {
margin-bottom: 10px;
font-size: 29px;
}
.dialog header h3 {
opacity: 0.45;
font-weight: 400;
}
================================================
FILE: src/components/modals/Modal2/Modal2.css
================================================
.modal-2-overlay,
.modal-2-modal {
position: fixed;
}
@keyframes overlay-in {
0% {
scale: 0 0.003;
}
33%,
36% {
scale: 1 0.003;
}
66%,
100% {
scale: 1 1;
}
}
.modal-2-overlay {
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / 75%);
display: grid;
place-items: center;
}
.modal-2-overlay.open {
animation: overlay-in 1s both;
}
.modal-2-overlay.closed {
animation: overlay-in 1s 0.25s reverse both;
}
.modal-2-overlay.default {
scale: 0;
}
@keyframes modal-in {
0% {
opacity: 0;
visibility: hidden;
scale: 0.5;
}
100% {
opacity: 1;
visibility: visible;
scale: 1;
}
}
.modal-2-modal {
z-index: 2;
width: 380px;
top: 50%;
left: 50%;
background: #ffffff;
border-radius: 12px;
padding: 0 40px 50px;
translate: -50% -50%;
box-shadow: 0 10px 30px rgb(0 0 0 / 24%);
}
.modal-2-modal.default {
opacity: 0;
visibility: hidden;
}
.modal-2-modal.open {
animation: modal-in 0.5s 0.6s both;
}
.modal-2-modal.closed {
animation: modal-in 0.5s reverse both;
}
.modal-2-modal header {
background: linear-gradient(90deg, #9d50bb, #6e48aa);
margin: -85px -20px 30px;
border-radius: 12px;
height: 170px;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 40px;
box-shadow: 0 16px 30px rgb(0 0 0 / 12%);
}
.modal-2-modal header h2 {
margin-bottom: 10px;
font-size: 29px;
}
.modal-2-modal header h3 {
opacity: 0.45;
font-weight: 400;
}
================================================
FILE: src/components/modals/Modal2/Modal2.jsx
================================================
import { createPortal } from "react-dom";
import "./Modal2.css";
export const Modal2 = ({
title,
subtitle,
modalContent,
toggleModal,
isOpen,
}) => {
const open = isOpen === null ? "default" : isOpen ? "open" : "closed";
const Overlay = () => (
);
const Dialog = () => (
e.stopPropagation()}
>
{modalContent}
);
return (
<>
{createPortal( , document.body)}
{createPortal( , document.body)}
>
);
};
================================================
FILE: src/components/modals/Modal2/Modal2Example.css
================================================
.page.modal-2-page {
background: #ffffff;
}
.page.modal-2-page .container {
max-width: 700px;
margin: 0 auto;
}
.modal-2-footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: calc(50vh + 1px);
padding-bottom: 20px;
background: #161022;
color: #e5e2e9;
}
.modal-2-footer article {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 40px 40px;
margin: -99px 20px 20px;
border-radius: 10px;
background: linear-gradient(90deg, #9d50bb, #6e48aa);
}
.modal-2-footer article h2 {
font-weight: 400;
color: #f9f9f9;
}
.signup-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 20px 0 20px;
width: 100%;
height: 56px;
background: #161022;
border: 0;
border-radius: 6px;
color: #e5e2e9;
font-family: inherit;
font-size: 16px;
cursor: pointer;
}
.modal-2-footer section {
padding: 0 50px;
}
.modal-2-footer section.top {
padding-top: 30px;
margin-bottom: 48px;
}
.modal-2-footer section.top img {
display: block;
height: 30px;
margin: 0 0 30px;
}
.modal-2-footer section.top ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 30px;
grid-template-columns: repeat(2, 1fr);
}
@media (width > 480px) {
.modal-2-footer article button {
width: 70%;
}
.modal-2-footer section.top ul {
padding-right: 10%;
}
}
@media (width > 600px) {
.modal-2-footer article {
flex-direction: row;
min-height: 140px;
margin: -70px 20px 20px;
padding: 30px 50px 30px;
}
.modal-2-footer article button {
width: auto;
padding: 0 20px 0 24px;
}
.modal-2-footer section.top ul {
grid-template-columns: repeat(4, 1fr);
padding-right: 0;
}
}
.modal-2-footer section.top ul li a {
display: block;
margin-bottom: 18px;
color: #e5e2e9;
}
.modal-2-footer section.top h3 {
color: #9a90a9;
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 20px;
}
.modal-2-modal form {
display: grid;
gap: 16px;
}
.modal-2-modal input {
border: 0;
background: #ececec;
height: 56px;
border-radius: 6px;
font-family: inherit;
padding: 0 20px;
font-size: 16px;
}
.modal-2-modal input::placeholder {
color: #96939c;
}
.modal-2-modal > p {
color: #96939c;
margin: 30px 0 0;
text-align: center;
}
================================================
FILE: src/components/modals/Modal2/Modal2Example.jsx
================================================
import { useState } from "react";
import "./Modal2Example.css";
import { Modal2 } from "./Modal2";
import logo from "./logo.svg";
export const Modal2Example = () => {
const [isOpen, setIsOpen] = useState(null);
const toggleModal = () => setIsOpen(!isOpen);
return (
No credit card information required
>
}
/>
Try Hologram today.
Sign up free
trending_flat
);
};
================================================
FILE: src/components/modals/index.js
================================================
export * from "./Modal1/Modal1";
export * from "./Modal2/Modal2";
export * from "./Modal2/Modal2Example";
================================================
FILE: src/components/navbars/Navbar1/Navbar1.css
================================================
.page.navbar-1-page {
background: #09090b;
color: #faf9f5;
font-family: "Euclid Circular A", "Poppins";
padding-top: 72px;
margin: 0;
}
.navbar-1 {
position: fixed;
z-index: 1;
top: 0;
left: 0;
translate: 0 -72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 0 20px;
width: 100%;
height: 72px;
box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
background: #4f52ff;
transition: 0.3s;
}
.navbar-1.visible {
top: 0;
translate: 0;
}
.navbar-1 > h1 {
width: 36px;
height: 36px;
background: #f9f9f9;
color: #4f52ff;
display: grid;
place-items: center;
border-radius: 50%;
}
.navbar-1 .nav-items {
display: flex;
align-items: center;
gap: 16px;
}
.navbar-1 .nav-items > a {
text-decoration: none;
font-weight: 400;
color: rgb(255 255 255 / 96%);
height: 72px;
display: grid;
place-items: center;
}
.navbar-1 .nav-items > a:hover {
color: rgb(255 255 255 / 96%);
}
.page.navbar-1-page h2 {
font-size: 20px;
margin: 0 0 4px;
cursor: default;
}
.page.navbar-1-page section {
display: flex;
align-items: center;
gap: 40px;
padding: 100px 60px;
}
.page.navbar-1-page p {
opacity: 0.6;
}
.page.navbar-1-page section.shaded {
background: #0e0e11;
}
.page.navbar-1-page section > img {
width: 200px;
height: 200px;
}
.page.navbar-1-page section.shaded > img {
padding: 20px;
}
.page.navbar-1-page section > p {
line-height: 1.7;
}
================================================
FILE: src/components/navbars/Navbar1/Navbar1.jsx
================================================
import { useEffect, useRef, useState } from "react";
import image1 from "./1.svg";
import image2 from "./2.svg";
import image3 from "./3.svg";
import image4 from "./4.svg";
import image5 from "./5.svg";
import image6 from "./6.svg";
import "./Navbar1.css";
export const Navbar1 = () => {
const [isVisible, setIsVisible] = useState(true);
const lastScrollTop = useRef(0);
useEffect(() => {
const handleScroll = () => {
var { scrollY } = window;
if (scrollY > lastScrollTop.current) {
setIsVisible(false);
} else if (scrollY < lastScrollTop.current) {
setIsVisible(true);
} // else was horizontal scroll
lastScrollTop.current = scrollY <= 0 ? 0 : scrollY;
};
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
F
About
Discover Fuzion, where innovation meets excellence. With a dedicated
team, we redefine standards to deliver top-notch solutions.
Services
Explore tailored solutions at Fuzion. From consulting to technology,
we propel your business forward.
Products
Experience innovation with Fuzion's exceptional products. Crafted
for performance, each reflects our commitment to excellence.
Contact
Ready to bring ideas to life? Connect with us today. Whether
questions or collaboration, we're here to assist.
My Skills
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse
itaque corporis optio unde quia, modi pariatur ea magni dolorum?
My Skills
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse
itaque corporis optio unde quia, modi pariatur ea magni dolorum?
My Skills
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse
itaque corporis optio unde quia, modi pariatur ea magni dolorum?
);
};
================================================
FILE: src/components/navbars/Navbar2/Navbar2.css
================================================
.page.navbar-2-page {
background: #f3f3f6;
font-family: "Euclid Circular B", "Poppins";
}
.navbar-2 {
--color-primary: #fe5495;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
gap: 24px;
padding: 0 20px;
height: 78px;
width: 100%;
background: #ffffff;
color: #5b5968;
box-shadow: 0 10px 50px rgb(0 0 0 / 2%);
}
.navbar-2 a {
padding: 0 12px;
display: flex;
align-items: center;
cursor: pointer;
width: 100%;
height: 72px;
font-size: 15px;
}
.navbar-2 .avatar {
height: 46px;
padding: 1px;
border-radius: 50%;
border: 1px solid #8f44fd;
}
.navbar-2 > img {
height: 32px;
}
.navbar-2-menu {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.navbar-2-dropdown {
position: fixed;
z-index: 1;
top: 86px;
left: 0;
width: 120px;
padding: 6px 0;
display: grid;
opacity: 0;
visibility: hidden;
/* transition: 0.3s; */
border-radius: 12px;
background: #ffffff;
box-shadow: 0 0 30px rgb(0 0 0 / 4%);
transition: 0.3s;
}
.navbar-2 a:is(:hover, .active) {
color: var(--color-primary);
}
.navbar-2-dropdown.visible {
opacity: 1;
visibility: visible;
}
.navbar-2-dropdown::after {
content: "";
position: absolute;
top: -12px;
width: 100%;
height: 50px;
}
.navbar-2-dropdown > a {
position: relative;
z-index: 1;
height: 40px;
font-size: 14px;
white-space: nowrap;
}
.navbar-2-search {
flex: 1 1 auto;
position: relative;
margin-left: 12px;
}
.navbar-2-search input {
border: 0;
border-radius: 52px;
height: 52px;
width: 100%;
background: #f3f3f6;
padding-left: 18px;
padding-right: 36px;
font-size: 14.75px;
font-family: inherit;
}
.navbar-2-search button {
border: 0;
display: grid;
place-items: center;
height: 34px;
width: 34px;
border-radius: 50%;
background: var(--color-primary);
color: #f9f9f9;
position: absolute;
top: 50%;
right: 8px;
translate: 0 -50%;
font-size: 18px;
}
.navbar-2-search button span {
font-size: 20px;
}
.navbar-2-search input::placeholder {
color: #9b98b1;
}
================================================
FILE: src/components/navbars/Navbar2/Navbar2.jsx
================================================
import { useEffect, useRef, useState } from "react";
import logo from "./logo.svg";
import avatar from "./avatar.png";
import "./Navbar2.css";
const items = [
{
name: "Explore",
items: ["Following", "Popular", "Noteworthy"],
},
{
name: "Talent",
items: ["Browse", "Profiles", "Services", "Jobs"],
},
{
name: "Blog",
items: ["News", "Articles", "Community"],
},
];
const Link = ({ item, isActive, onHover }) => {
const linkRef = useRef();
const handleHover = () => {
const rect = linkRef.current.getBoundingClientRect();
onHover(item, `${rect.x}px`);
};
return (
{item.name}
);
};
const Search = () => (
search
);
const CoolNav = ({ items }) => {
const [translateX, setTranslateX] = useState("0");
const [activeItem, setActiveItem] = useState(null);
const [isHidden, setIsHidden] = useState(true);
const handleLinkHover = (item, x) => {
setActiveItem(item);
setTranslateX(x);
};
const handleMouseEnter = () => {
setIsHidden(false);
};
const handleMouseLeave = () => {
setIsHidden(true);
};
return (
{items.map((item, index) => (
))}
{activeItem?.items?.map((link) => (
{link}
))}
);
};
export const Navbar2 = () => {
return (
);
};
================================================
FILE: src/components/navbars/Navbar3/Navbar3.css
================================================
.page.navbar-3-page {
background: #f8f7ff;
font-family: "Euclid Circular A", "Poppins";
}
.navbar-3 {
--color-primary: #6f5bf3;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
padding: 0 20px;
height: 72px;
width: 100%;
background: #ffffff;
color: #5b5968;
box-shadow: 0 10px 50px rgb(0 0 0 / 2%);
}
.navbar-3 a {
padding: 0 12px;
display: flex;
align-items: center;
cursor: pointer;
width: 100%;
height: 72px;
font-size: 15px;
}
.navbar-3 > img {
margin: 0 24px 0 0;
height: 36px;
width: 36px;
}
.navbar-3-menu {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.navbar-3-dropdown {
position: fixed;
z-index: 1;
top: 82px;
left: 0;
height: 0;
width: 120px;
padding: 6px 0;
overflow: hidden;
display: grid;
opacity: 0;
visibility: hidden;
transition: 0.3s;
border-radius: 6px;
background: #ffffff;
box-shadow: 0 0 30px rgb(0 0 0 / 4%);
transition: 0.3s;
}
.navbar-3 a:is(:hover, .active) {
color: var(--color-primary);
}
.navbar-3-dropdown.visible {
opacity: 1;
visibility: visible;
height: max-content;
}
.navbar-3-dropdown::after {
content: "";
position: absolute;
inset: 0;
top: -12px;
}
.navbar-3-dropdown > a {
position: relative;
z-index: 1;
height: 40px;
font-size: 14px;
white-space: nowrap;
}
.navbar-3-search {
position: relative;
margin-left: auto;
}
.navbar-3-search span {
position: absolute;
top: 50%;
left: 12px;
translate: 0 -50%;
font-size: 18px;
}
.navbar-3-search input {
border: 0;
border-radius: 6px;
height: 36px;
width: 100%;
max-width: 200px;
background: #f6f5fd;
padding-left: 36px;
font-size: 15px;
}
.navbar-3-search span,
.navbar-3-search input::placeholder {
color: #9b98b1;
}
================================================
FILE: src/components/navbars/Navbar3/Navbar3.jsx
================================================
import { useRef, useState } from "react";
import avatar from "./avatar.png";
import "./Navbar3.css";
const items = [
{
name: "About",
},
{
name: "Skills",
items: ["UI/UX", "Development", "Design"],
},
{
name: "Projects",
items: ["Chatbot", "Calculator", "Weather"],
},
{
name: "Work",
items: ["Portfolio", "Resume", "GitHub"],
},
];
const Link = ({ item, activeItem, onHover }) => {
const linkRef = useRef();
const handleHover = () => {
const rect = linkRef.current.getBoundingClientRect();
onHover(item, `${rect.x}px`);
};
return (
{item.name}
);
};
const Search = () => (
search
);
export const Navbar3 = () => {
const [translateX, setTranslateX] = useState("0");
const [activeItem, setActiveItem] = useState(null);
const handleLinkHover = (item, x) => {
setActiveItem(item || null);
setTranslateX(x);
};
return (
{items.map((item) => (
))}
{activeItem?.items?.map((link) => (
{link}
))}
);
};
================================================
FILE: src/components/navbars/Navbar4/Navbar4.css
================================================
.navbar-4-page {
--color-primary: #5c48cf;
--gradient: linear-gradient(to right, var(--color-primary), #485acf);
background: #202022;
font-family: "Euclid Circular A", "Poppins";
color: #f9f9f9;
margin: 0;
height: 100vh;
display: grid;
place-items: center;
}
.navbar-4 {
position: fixed;
top: 6px;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
background: #161618;
box-shadow: 0 20px 40px rgb(0 0 0 / 12%);
}
.navbar-4 img {
height: 32px;
}
.navbar-4 .end {
width: 120px;
}
.navbar-4 .end:last-child {
text-align: right;
color: #7f7f80;
}
.navbar-4 nav {
position: relative;
font-weight: 400;
font-size: 0;
display: flex;
padding: 0;
width: 80%;
}
.navbar-4 nav .item {
font-size: 15px;
display: inline-block;
position: relative;
padding: 0 20px;
cursor: pointer;
z-index: 5;
min-width: 25%;
height: 60px;
line-height: 60px;
text-align: center;
opacity: 0.7;
transition: 0.3s;
}
.navbar-4 .item:hover {
opacity: 1;
}
.navbar-4 .dropdown {
overflow: hidden;
list-style: none;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 62px;
}
.navbar-4 .dropdown > div {
translate: 0 -100%;
transition: all 0.5s 0.1s;
position: relative;
}
.dropdown a {
display: block;
padding: 0;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
background: #161618;
color: #7f7f80;
transition: background 0.1s;
}
.navbar-4 .dropdown a:hover {
background: var(--gradient);
color: inherit;
}
.navbar-4 .underline {
height: 5px;
background: var(--gradient);
position: absolute;
bottom: 0;
width: 25%;
z-index: 2;
pointer-events: none;
transition: 0.35s;
}
.navbar-4 nav .item:hover > .dropdown > div {
translate: 0;
}
================================================
FILE: src/components/navbars/Navbar4/Navbar4.jsx
================================================
import { useState } from "react";
import "./Navbar4.css";
import logo from "./logo.svg";
const navItems = [
{
name: "Docs",
},
{
name: "Guides",
},
{
name: "Demos",
items: ["React", "Svelte", "Vue"],
},
{
name: "Issues",
},
];
const NavItem = ({ item, onHover }) => (
{item.name}
{!!item.items && (
)}
);
export const Navbar4 = () => {
const [activeItem, setActiveItem] = useState(null);
const onHover = (index) => setActiveItem(index);
return (
{navItems.map((item, index) => (
onHover(index)} />
))}
v1.0.2
);
};
================================================
FILE: src/components/navbars/index.js
================================================
export * from "./Navbar1/Navbar1";
export * from "./Navbar2/Navbar2";
export * from "./Navbar3/Navbar3";
export * from "./Navbar4/Navbar4";
================================================
FILE: src/components/parallax/index.js
================================================
export * from "./parallax-1/Parallax1";
export * from "./parallax-2/Parallax2";
================================================
FILE: src/components/parallax/parallax-1/Parallax1.jsx
================================================
import { useState, useEffect } from "react";
import "./styles.css";
export const Parallax1 = () => {
const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => setScrollPosition(window.scrollY);
useEffect(() => {
window.addEventListener("scroll", handleScroll, { passive: true });
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
What is parallax?
Parallax is a displacement or difference in the apparent position of
an object viewed along two different lines of sight and is measured by
the angle or half-angle of inclination between those two lines. Due to
foreshortening, nearby objects show a larger parallax than farther
objects, so parallax can be used to determine distances.
Parallax also affects optical instruments such as rifle scopes,
binoculars, microscopes, and twin-lens reflex cameras that view
objects from slightly different angles. Many animals, along with
humans, have two eyes with overlapping visual fields that use parallax
to gain depth perception; this process is known as stereopsis. In
computer vision the effect is used for computer stereo vision, and
there is a device called a parallax rangefinder that uses it to find
the range, and in some variations also altitude to a target.
Parallax is a displacement or difference in the apparent position of
an object viewed along two different lines of sight and is measured by
the angle or half-angle of inclination between those two lines. Due to
foreshortening, nearby objects show a larger parallax than farther
objects, so parallax can be used to determine distances.
Parallax also affects optical instruments such as rifle scopes,
binoculars, microscopes, and twin-lens reflex cameras that view
objects from slightly different angles. Many animals, along with
humans, have two eyes with overlapping visual fields that use parallax
to gain depth perception; this process is known as stereopsis. In
computer vision the effect is used for computer stereo vision, and
there is a device called a parallax rangefinder that uses it to find
the range, and in some variations also altitude to a target.
);
};
================================================
FILE: src/components/parallax/parallax-1/styles.css
================================================
.page.parallax-1-page {
background: #0e0d0e;
height: 100%;
font-family: "Euclid Circular A", "Poppins";
}
* {
box-sizing: border-box;
}
.parallax-banner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image: url("./bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 70%;
height: 600px;
width: 100vw;
transition: 0.05s linear;
}
.parallax-banner h2 {
font-size: 48px;
color: #f8f8f8;
padding-top: 0;
margin-top: 0;
margin-bottom: 10px;
}
.parallax-banner button {
border: 0;
background: #ffffff;
color: #222222;
padding: 10px 24px;
border-radius: 30px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
}
.parallax-container {
padding: 0 10%;
}
.parallax-banner h2 {
margin-top: 0;
margin-bottom: 40px;
padding-top: 60px;
}
================================================
FILE: src/components/parallax/parallax-2/Parallax2.css
================================================
.page.parallax-2-page {
margin: 0;
background: #6a8faa;
font-family: "Euclid Circular A", "Poppins";
}
.parallax-2-page section {
position: relative;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.parallax-2-page .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
filter: brightness(0.68);
}
.parallax-2-page h1 {
color: white;
text-shadow: 1px 1px 3px black;
z-index: 1;
font-size: 3em;
font-weight: 400;
}
================================================
FILE: src/components/parallax/parallax-2/Parallax2.jsx
================================================
import { useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/all";
import { useGSAP } from "@gsap/react";
import "./Parallax2.css";
import image1 from "./1.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
gsap.registerPlugin(ScrollTrigger);
const sectionsData = [
{ image: image1, text: "Parallax" },
{ image: image2, text: "So smooth" },
{ image: image3, text: "Nice, right?" },
];
const getRatio = (el) =>
window.innerHeight / (window.innerHeight + el.offsetHeight);
const ParallaxSection = ({ image, text }) => (
);
export const Parallax2 = () => {
const containerRef = useRef(null);
useGSAP(
(context) => {
const sections = gsap.utils.toArray("section", context.scope);
sections.forEach((section, i) => {
const bg = section.querySelector(".bg");
gsap.fromTo(
bg,
{
backgroundPosition: () =>
i
? `50% ${-window.innerHeight * getRatio(section)}px`
: "50% 0px",
},
{
backgroundPosition: () =>
`50% ${window.innerHeight * (1 - getRatio(section))}px`,
ease: "none",
scrollTrigger: {
trigger: section,
start: () => (i ? "top bottom" : "top top"),
end: "bottom top",
scrub: true,
},
}
);
});
},
{ scope: containerRef }
);
return (
{sectionsData.map((s, i) => (
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar1/Sidebar1.jsx
================================================
import { useRef, useState } from "react";
import "./styles.css";
const menuItems = [
{
name: "Home",
icon: "home",
},
{
name: "Settings",
icon: "settings",
items: ["Display", "Editor", "Theme", "Interface"],
},
{
name: "Create",
icon: "add_box",
items: ["Article", "Document", "Report"],
},
{
name: "Account",
icon: "lock",
items: ["Dashboard", "Logout"],
},
{
name: "Products",
icon: "inventory_2",
},
{
name: "Favourites",
icon: "favorite",
},
];
const Icon = ({ icon }) => (
{icon}
);
const NavHeader = () => (
);
const NavButton = ({ onClick, name, icon, isActive, hasSubNav }) => (
onClick(name)}
className={isActive ? "active" : ""}
>
{icon && }
{name}
{hasSubNav && }
);
const SubMenu = ({ item, activeItem, handleClick }) => {
const navRef = useRef(null);
const isSubNavOpen = (item, items) =>
items.some((i) => i === activeItem) || item === activeItem;
return (
{item?.items.map((subItem) => (
))}
);
};
export const Sidebar1 = () => {
const [activeItem, setActiveItem] = useState("");
const handleClick = (item) => {
console.log("activeItem", activeItem);
setActiveItem(item !== activeItem ? item : "");
};
return (
);
};
================================================
FILE: src/components/sidebars/Sidebar1/styles.css
================================================
* {
box-sizing: border-box;
}
.page.sidebar-1-page {
margin: 0;
background: #12131a;
font-family: "Euclid Circular A";
}
.sidebar-1 button {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
text-align: left;
}
.sidebar-1 {
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
gap: 8px;
width: 260px;
height: 100%;
padding: 0 16px;
background: #1d212a;
border-right: 1px solid #2e303e;
transition: width 0.4s;
}
.sidebar-1 .sidebar-header {
display: flex;
align-items: center;
height: 72px;
padding: 0 1.25rem 0 0;
border-bottom: 1px solid #2e303e;
color: #e1ecff;
}
.sidebar-1 .sidebar-header button {
width: 54px;
}
.sidebar-1 .sidebar-logo {
height: 20px;
}
.sidebar-1 button {
position: relative;
display: flex;
gap: 16px;
align-items: center;
height: 50px;
width: 100%;
border-radius: 6px;
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1;
padding: 0 16px;
color: #e1ecff;
transition: background 0.3s;
}
.sidebar-1 button span:nth-child(2) {
flex: 1 1 auto;
}
.sidebar-1 button:is(.active, :hover) {
background: #004fee;
color: #e1ecff;
}
.sidebar-1 button span {
transition: 0.3s;
}
.sidebar-1 button.active > span:nth-child(3) {
rotate: -180deg;
}
.sidebar-1 button:not(.active):hover {
background: #2e303e;
}
.sidebar-1 .sub-nav button.active::before {
background: #e1ecff;
}
.sidebar-1 .sub-nav {
overflow: hidden;
/* height: 0; */
transition: 0.5s;
}
/* .sub-nav.open {
height: 200px;
} */
.sidebar-1 .sub-nav button {
padding-left: 54px;
}
.sidebar-1 .sub-nav button::before {
content: "";
position: absolute;
top: 50%;
left: 25px;
translate: 0 -50%;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #e1ecff;
}
.sidebar-1 .material-symbols-outlined {
font-size: 22px;
}
================================================
FILE: src/components/sidebars/Sidebar10/Sidebar10.css
================================================
.page.sidebar-10-page {
background: url("./bg.jpg") #6a6eb7;
background-size: cover;
background-position: -200px;
font-family: "Euclid Circular B", "Poppins";
}
.page.sidebar-10-page::after {
content: "";
position: fixed;
z-index: 0;
inset: 0;
background: linear-gradient(rgb(0 0 0 / 80%), rgb(0 0 0 / 50%));
}
.sidebar-10 {
position: absolute;
z-index: 2;
top: 20px;
left: 20px;
border-radius: 10px;
width: 280px;
padding: 8px;
background: rgb(255 255 255 / 4%);
backdrop-filter: blur(10px);
}
.sidebar-10-header {
display: flex;
align-items: center;
padding: 0 16px;
gap: 9px;
height: 56px;
padding-bottom: 8px;
font-size: 16px;
font-weight: 400;
}
.sidebar-10-header > span:first-child {
font-size: 20px;
}
.sidebar-10 ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-10 button {
background: transparent;
color: inherit;
border: 0;
border-radius: 12px;
width: 100%;
height: 48px;
padding: 0 16px;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-family: inherit;
cursor: pointer;
opacity: 0.75;
transition: 0.3s;
}
.sidebar-10 button:hover {
opacity: 1;
}
.sidebar-10 button span {
font-size: 20px;
}
.sidebar-10 button span:first-child {
color: #a0a0b8;
}
.sidebar-10 button span:nth-child(3) {
margin-left: auto;
rotate: 90deg;
transition: 0.2s;
}
.sidebar-10 .block.open button span:nth-child(3) {
rotate: 0deg;
}
.sidebar-10 .blocks {
display: grid;
gap: 8px;
}
.sidebar-10 .block {
overflow: hidden;
position: relative;
border-radius: 12px;
background: rgb(255 255 255 / 3%);
transition: 0.3s;
}
.sidebar-10 .block:hover {
background: rgb(255 255 255 / 6%);
}
.sidebar-10 .block.open {
background: rgb(255 255 255 / 6%);
}
.sidebar-10 .block-inner {
height: 0;
overflow: hidden;
transition: height 0.5s;
}
.block-items button {
border-radius: 0;
opacity: 0.55;
transition: 0.3s;
}
.block-items button:hover {
opacity: 1;
background: rgb(255 255 255 / 3%);
}
================================================
FILE: src/components/sidebars/Sidebar10/Sidebar10.jsx
================================================
import { useRef, useState } from "react";
import "./Sidebar10.css";
const blocks = [
{
name: "Hosting",
icon: "storage",
items: [
{ name: "Cloud", icon: "cloud" },
{ name: "DNS", icon: "dns" },
{ name: "API Keys", icon: "key" },
],
},
{
name: "Storage",
icon: "database",
items: [
{ name: "Administration", icon: "build" },
{ name: "Management", icon: "hard_drive" },
],
},
{
name: "Security",
icon: "security",
items: [
{ name: "Firewall", icon: "explosion" },
{ name: "Warnings", icon: "warning" },
{ name: "Alerts", icon: "dangerous" },
{ name: "Blocked", icon: "block" },
],
},
{
name: "Profile",
icon: "account_circle",
items: [
{ name: "Account", icon: "lock" },
{ name: "Theme", icon: "palette" },
{ name: "Apps", icon: "apps" },
],
},
];
const Icon = ({ children }) => (
{children}
);
const Button = ({ name, icon, isOpen, hasToggle, onClick }) => (
{icon}
{name}
{hasToggle && {isOpen ? "remove" : "add"} }
);
const Block = ({ name, icon, items }) => {
const [isOpen, setIsOpen] = useState(false);
const itemsRef = useRef();
return (
setIsOpen(!isOpen)}
/>
{items.map((item) => (
))}
);
};
export const Sidebar10 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
settings
Settings
{blocks.map((block) => (
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar11/Sidebar11.css
================================================
.page.sidebar-11-page {
background: #17132a url("./bg.jpg");
background-position: -400px;
background-size: cover;
overflow: hidden;
}
.page.sidebar-11-page::after {
content: "";
position: fixed;
z-index: 0;
inset: 0;
background: linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 0%));
}
.sidebar-11 {
position: absolute;
z-index: 2;
top: 20px;
left: 20px;
bottom: 26px;
border-radius: 14px;
width: 56px;
background: rgb(0 0 0 / 12%);
backdrop-filter: blur(10px);
transition: width 0.45s;
}
.sidebar-11 button {
border: 0;
background: transparent;
cursor: pointer;
}
.sidebar-11 .material-symbols-outlined {
font-size: 18px;
}
.sidebar-11.open {
width: 190px;
}
.sidebar-11 .inner {
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar-11 header {
display: flex;
align-items: center;
height: 64px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 0 6px;
}
.sidebar-11-burger {
width: 44px;
height: 72px;
display: grid;
place-items: center;
color: #f9f9f9;
}
.sidebar-11 header > img {
height: 18px;
}
.sidebar-11 nav {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 0 6px;
gap: 2px;
}
.sidebar-11 nav > button {
display: flex;
gap: 12px;
align-items: center;
height: 44px;
width: 44px;
font-family: "Euclid Circular B";
font-size: 14px;
text-transform: capitalize;
line-height: 1;
padding: 0 12px;
border-radius: 8px;
opacity: 0.7;
color: #f9f9f9;
transition: 0.3s;
}
.sidebar-11 nav > button:hover {
background: rgb(255 255 255 / 6%);
opacity: 1;
}
.sidebar-11 nav > button:last-child {
margin-top: auto;
margin-bottom: 8px;
}
.sidebar-11:not(.open) nav > button:hover p {
position: relative;
opacity: 1;
background: #121113;
backdrop-filter: blur(10px);
padding: 8px 12px;
border-radius: 6px;
translate: 16px 0;
}
.sidebar-11:not(.open) nav > button:hover p::after {
content: "";
position: absolute;
top: 50%;
left: -4px;
height: 8px;
width: 8px;
translate: 0 -50%;
transform: rotate(45deg);
border-radius: 1px;
background: inherit;
}
.sidebar-11 header > img,
.sidebar-11 nav > button p {
opacity: 0;
pointer-events: none;
transition: 0.25s;
}
.sidebar-11.open :is(nav button p, header > img) {
opacity: 1;
}
.sidebar-11.open nav > button {
width: 100%;
}
================================================
FILE: src/components/sidebars/Sidebar11/Sidebar11.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./Sidebar11.css";
const navItems = ["home", "build", "cloud", "stacks", "mail"];
export const Sidebar11 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
setIsOpen(!isOpen)}
>
{isOpen ? "close" : "menu"}
{navItems.map((item) => (
{item}
{item}
))}
settings
Settings
);
};
================================================
FILE: src/components/sidebars/Sidebar12/Sidebar12.css
================================================
.page.sidebar-12-page {
background: url("./bg.jpg");
background-position: -360px;
background-size: cover;
overflow: hidden;
font-family: "Euclid Circular B", "Poppins", sans-serif;
}
* {
box-sizing: border-box;
}
.sidebar-12 {
position: fixed;
top: 24px;
left: 24px;
bottom: 24px;
display: flex;
flex-direction: column;
gap: 8px;
width: 260px;
border-radius: 16px;
padding: 0 16px;
background: rgb(0 0 0 / 19%);
backdrop-filter: blur(30px);
}
.sidebar-12 header {
display: flex;
align-items: center;
height: 72px;
padding-top: 10px;
border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.sidebar-12 header img {
height: 44px;
}
.sidebar-12 button {
position: relative;
display: flex;
gap: 12px;
align-items: center;
height: 50px;
width: 100%;
border-radius: 6px;
font-size: 16px;
font-family: inherit;
padding: 0 16px;
background: transparent;
border: none;
cursor: pointer;
color: rgb(255 255 255 / 95%);
transition: 0.3s;
}
.sidebar-12 button.active {
background: rgb(0 0 0 / 18%);
}
.sidebar-12 button:not(.active):hover {
background: rgb(0 0 0 / 8%);
}
.sidebar-12 i {
font-size: 20px;
width: 20px;
}
.sidebar-12 button i:last-child {
margin-left: auto;
transition: 0.3s;
}
.sidebar-12 button.active i:last-child {
rotate: -180deg;
}
.sidebar-12 ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-12 .sub-menu {
overflow: hidden;
transition: height 0.5s ease;
}
.sidebar-12 .sub-menu ul {
padding-left: 0;
}
.sidebar-12 .sub-menu button {
padding-left: 48px;
}
.sidebar-12 .sub-menu button::before {
content: "";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: rgb(255 255 255 / 35%);
}
================================================
FILE: src/components/sidebars/Sidebar12/Sidebar12.jsx
================================================
import { useRef, useState } from "react";
import "./Sidebar12.css";
import logo from "./logo.svg";
const SIDEBAR_ITEMS = [
{
id: "dashboard",
label: "Dashboard",
icon: "ai-dashboard",
type: "page",
},
{
id: "create",
label: "Create",
icon: "ai-folder-add",
type: "submenu",
children: [
{ id: "article", label: "Article" },
{ id: "document", label: "Document" },
{ id: "slides", label: "Slides" },
],
},
{
id: "account",
label: "Account",
icon: "ai-lock-on",
type: "submenu",
children: [
{ id: "admin", label: "Admin" },
{ id: "display", label: "Display" },
{ id: "appearance", label: "Appearance" },
{ id: "preferences", label: "Preferences" },
],
},
{
id: "profile",
label: "Profile",
icon: "ai-person",
type: "submenu",
children: [
{ id: "avatar", label: "Avatar" },
{ id: "theme", label: "Theme" },
],
},
{
id: "notifications",
label: "Notifications",
icon: "ai-bell",
type: "page",
},
{
id: "products",
label: "Products",
icon: "ai-cart",
type: "page",
},
{
id: "settings",
label: "Settings",
icon: "ai-gear",
type: "page",
},
];
export const Sidebar12 = () => {
const [activeItem, setActiveItem] = useState("dashboard");
const [openSubmenu, setOpenSubmenu] = useState(null);
const submenuRefs = useRef({});
const getSubmenuHeight = (id) => {
const el = submenuRefs.current[id];
if (!el) return 0;
return el.getBoundingClientRect().height;
};
const handlePageClick = (id) => {
setActiveItem(id);
setOpenSubmenu(null);
};
const handleSubmenuToggle = (id) => {
setActiveItem(id);
setOpenSubmenu((prev) => (prev === id ? null : id));
};
return (
{SIDEBAR_ITEMS.map((item) => (
item.type === "page"
? handlePageClick(item.id)
: handleSubmenuToggle(item.id)
}
>
{item.label}
{item.type === "submenu" && (
)}
{item.type === "submenu" && (
(submenuRefs.current[item.id] = el)}>
{item.children.map((child) => (
handlePageClick(child.id)}
className={activeItem === child.id ? "active" : ""}
>
{child.label}
))}
)}
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar13/Sidebar13.css
================================================
.page.sidebar-13-page {
background: url("./bg.jpg");
background-position: -380px;
background-size: cover;
overflow: hidden;
font-family: "Euclid Circular B", "Poppins", sans-serif;
}
* {
box-sizing: border-box;
}
.title {
position: absolute;
top: 160px;
left: 50%;
translate: -50% 0;
}
.title h2,
.title h3 {
margin: 0;
font-weight: 400;
text-align: center;
text-shadow: 0 0 10px rgb(0 0 0 / 28%);
}
.title h2 {
margin: 0 0 8px;
}
.title h3 {
letter-spacing: 1px;
opacity: 0.6;
font-size: 14px;
}
.sidebar-13 {
position: fixed;
top: 240px;
left: auto;
right: auto;
bottom: -40px;
display: flex;
flex-direction: column;
gap: 8px;
width: 260px;
border-radius: 16px;
padding: 0 16px;
background: rgb(0 0 0 / 19%);
backdrop-filter: blur(30px);
}
.sidebar-13 header {
display: flex;
align-items: center;
height: 72px;
padding-top: 10px;
border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.sidebar-13 header img {
height: 24px;
margin-left: 16px;
}
.sidebar-13 button {
position: relative;
display: flex;
gap: 12px;
align-items: center;
height: 50px;
width: 100%;
border-radius: 6px;
font-size: 16px;
font-family: inherit;
padding: 0 16px;
background: transparent;
border: none;
cursor: pointer;
color: rgb(255 255 255 / 95%);
transition: 0.3s;
}
.sidebar-13 button.active {
background: rgb(0 0 0 / 18%);
}
.sidebar-13 button:not(.active):hover {
background: rgb(0 0 0 / 8%);
}
.sidebar-13 ion-icon {
font-size: 19px;
width: 20px;
}
.sidebar-13 button ion-icon:last-child {
margin-left: auto;
transition: 0.3s;
}
.sidebar-13 button.active ion-icon:last-child {
rotate: -180deg;
}
.sidebar-13 ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-13 .sub-menu {
overflow: hidden;
transition: height 0.5s ease;
}
.sidebar-13 .sub-menu ul {
padding-left: 0;
}
.sidebar-13 .sub-menu button {
padding-left: 48px;
}
.sidebar-13 .sub-menu button::before {
content: "";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: rgb(255 255 255 / 35%);
}
================================================
FILE: src/components/sidebars/Sidebar13/Sidebar13.jsx
================================================
import { useRef, useState, useLayoutEffect } from "react";
import "./Sidebar13.css";
import logo from "./logo.svg";
const SIDEBAR_ITEMS = [
{ id: "dashboard", label: "Dashboard", icon: "grid-outline", type: "page" },
{
id: "create",
label: "Create",
icon: "document-text-outline",
type: "submenu",
children: [
{ id: "article", label: "Article" },
{ id: "document", label: "Document" },
{ id: "slides", label: "Slides" },
],
},
{
id: "account",
label: "Account",
icon: "lock-closed-outline",
type: "submenu",
children: [
{ id: "admin", label: "Admin" },
{ id: "display", label: "Display" },
{ id: "appearance", label: "Appearance" },
{ id: "preferences", label: "Preferences" },
],
},
{
id: "profile",
label: "Profile",
icon: "person-outline",
type: "submenu",
children: [
{ id: "avatar", label: "Avatar" },
{ id: "theme", label: "Theme" },
],
},
{
id: "notifications",
label: "Notifications",
icon: "notifications-outline",
type: "page",
},
{ id: "saved", label: "Favourites", icon: "heart-outline", type: "page" },
{ id: "products", label: "Products", icon: "cart-outline", type: "page" },
{ id: "settings", label: "Settings", icon: "settings-outline", type: "page" },
];
export const Sidebar13 = () => {
const [activeItem, setActiveItem] = useState("dashboard");
const [openSubmenu, setOpenSubmenu] = useState(null);
const handlePageClick = (id) => {
setActiveItem(id);
setOpenSubmenu(null);
};
const handleSubmenuToggle = (id) => {
setActiveItem((prev) => (prev === id ? null : id));
setOpenSubmenu((prev) => (prev === id ? null : id));
};
return (
React Sidebar
@FRONTENDJOE
{SIDEBAR_ITEMS.map((item) => (
))}
);
};
const SidebarItem = ({
item,
activeItem,
isOpen,
onPageClick,
onSubmenuToggle,
}) => {
const isActive = activeItem === item.id;
return (
item.type === "page" ? onPageClick(item.id) : onSubmenuToggle(item.id)
}
>
{item.label}
{item.type === "submenu" && (
)}
{item.type === "submenu" && (
)}
);
};
const Submenu = ({ isOpen, activeItem, items }) => {
const listRef = useRef(null);
const [height, setHeight] = useState(0);
useLayoutEffect(() => {
if (listRef.current) {
setHeight(listRef.current.getBoundingClientRect().height);
}
}, [items]);
return (
{items.map((child) => (
{child.label}
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar14/Sidebar14.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./styles.css";
const navItems = ["home", "build", "cloud", "mail", "favorite"];
const Icon = ({ icon }) => (
{icon}
);
const Button = ({ item }) => (
{item}
);
const Header = () => (
);
export const Sidebar14 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
);
};
================================================
FILE: src/components/sidebars/Sidebar14/styles.css
================================================
.page.sidebar-14-page {
background: #1c1b23;
}
.page.sidebar-14-page button {
background: transparent;
border: 0;
cursor: pointer;
}
.sidebar-14 {
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 56px;
background: #5331ff;
backdrop-filter: blur(10px);
transition: 0.45s;
}
.sidebar-14 .material-symbols-outlined {
font-size: 20px;
}
.sidebar-14.open {
width: 190px;
overflow: hidden;
}
.sidebar-14 .inner {
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar-14 header {
display: flex;
align-items: center;
height: 64px;
padding: 0 6px 0 48px;
}
.sidebar-14-burger {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 56px;
height: 64px;
display: grid;
place-items: center;
color: #f9f9f9;
}
.sidebar-14 header > img {
height: 18px;
}
.sidebar-14 nav {
display: flex;
flex-direction: column;
padding: 0 8px 20px;
gap: 2px;
flex: 1 1 auto;
}
.sidebar-14 nav > button {
display: flex;
gap: 12px;
align-items: center;
height: 40px;
width: 40px;
font-family: "Euclid Circular A";
font-size: 14px;
text-transform: capitalize;
line-height: 1;
padding: 0 10px;
border-radius: 8px;
color: #f9f9f9;
}
.sidebar-14 nav > button:last-child {
margin-top: auto;
}
.sidebar-14 nav > button:hover {
background: rgb(0 0 0 / 24%);
}
.sidebar-14:not(.open) nav p {
visibility: hidden;
}
.sidebar-14:not(.open) nav > button:hover p {
opacity: 1;
visibility: visible;
background: #2e2a47;
padding: 5px 10px;
font-size: 13px;
border-radius: 6px;
translate: 12px 0;
}
.sidebar-14 header > img,
.sidebar-14 nav > button p {
opacity: 0;
transition: 0.25s;
}
.sidebar-14.open :is(nav button p, header > img) {
opacity: 1;
}
.sidebar-14.open nav > button {
width: 100%;
}
@media (width <= 400px) {
.sidebar-14 {
translate: -100% 0;
}
.sidebar-14.open {
translate: 0;
}
.sidebar-14:not(.open) button span {
transition: 0.3s;
opacity: 0;
}
}
================================================
FILE: src/components/sidebars/Sidebar15/Sidebar15.css
================================================
.page.sidebar-15-page {
--color-bg: #f4f6fa;
--color-primary: #121926;
--color-muted: #9fa4af;
--color-hover: #e8ecf4;
margin: 0;
background: #dadee5;
color: #5d6674;
height: 100vh;
font-family: "Euclid Circular A";
}
.sidebar-15 h2,
.sidebar-15 h3 {
margin: 0;
}
.sidebar-15 {
position: fixed;
overflow: hidden;
top: 24px;
left: 18px;
bottom: 28px;
display: flex;
flex-direction: column;
gap: 8px;
width: 80px;
border-radius: 18px;
transition: 0.4s;
background: #ffffff;
}
.sidebar-15 button {
border: 0;
background: transparent;
font-size: 22px;
color: inherit;
border-radius: 8px;
font-family: inherit;
cursor: pointer;
transition: 0.3s;
}
.sidebar-15 .left,
.sidebar-15 .right {
position: absolute;
top: 0;
bottom: 0;
transition: 0.4s;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar-15 .left {
z-index: 1;
left: 0;
width: 80px;
background: #ffffff;
}
.sidebar-15 .left img {
width: 40px;
margin: 24px 0 28px;
}
.sidebar-15 .left button {
width: 44px;
height: 44px;
display: grid;
place-items: center;
}
.sidebar-15 .left button:hover {
background: var(--color-bg);
color: #384251;
}
.sidebar-15 .left div:last-of-type {
margin-top: auto;
margin-bottom: 20px;
}
.sidebar-15 .right {
left: 76px;
height: 100%;
position: relative;
}
.sidebar-15 .right-inner {
position: absolute;
inset: 8px;
left: 4px;
border-radius: 12px;
background: var(--color-bg);
}
.sidebar-15 .right .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 16px 28px;
}
.sidebar-15 .right h2 {
font-size: 16px;
font-weight: 600;
}
.sidebar-15 .right h3 {
font-size: 12px;
font-weight: 500;
color: var(--color-muted);
}
.sidebar-15 .right nav {
padding: 0 12px;
}
.sidebar-15 .right button {
padding: 0 12px;
background: transparent;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 44px;
font-size: 14px;
}
.sidebar-15 .right button i:last-child {
opacity: 0;
font-size: 16px;
margin-left: auto;
transition: 0.3s;
}
.sidebar-15 .right button:hover {
background: var(--color-hover);
color: #384251;
}
.sidebar-15 .right button:hover i:last-child {
opacity: 1;
color: var(--color-muted);
}
.sidebar-15 .right button i {
font-size: 18px;
}
.sidebar-15:hover {
width: 300px;
}
.sidebar-15:hover .right {
width: 225px;
}
.sidebar-15 .submenu {
position: relative;
list-style: none;
margin: 0;
padding: 8px 0 8px 29px;
font-size: 14px;
cursor: pointer;
}
.sidebar-15 .submenu::before {
content: "";
position: absolute;
top: 8px;
left: 21px;
bottom: 8px;
width: 1px;
background: var(--color-muted);
opacity: 0.33;
}
.sidebar-15 .submenu li {
white-space: nowrap;
height: 36px;
padding-left: 12px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.3s;
}
.sidebar-15 .submenu li:hover {
background: var(--color-hover);
color: #384251;
cursor: pointer;
}
.sidebar-15 .submenu .badge {
font-size: 10px;
padding: 3px 5px;
border-radius: 4px;
background: var(--color-primary);
color: #ffffff;
margin-right: 12px;
}
================================================
FILE: src/components/sidebars/Sidebar15/Sidebar15.jsx
================================================
import "./Sidebar15.css";
import logo from "./logo.svg";
const leftTopItems = [
"ai-home-alt1",
"ai-heart",
"ai-mention",
"ai-chat-dots",
"ai-plus",
];
const leftBottomItems = ["ai-gear", "ai-link-out"];
const navItems = [
{ icon: "ai-dashboard", label: "Dashboard" },
{ icon: "ai-shipping-box-v1", label: "Products" },
{ icon: "ai-person", label: "Customers" },
{
icon: "ai-open-envelope",
label: "Messages",
actionIcon: "ai-plus",
submenu: [
{ label: "Drafts", count: 10 },
{ label: "Scheduled", count: 4 },
{ label: "Published", count: 20 },
],
},
{ icon: "ai-image", label: "Images" },
{ icon: "ai-network", label: "Network" },
{ icon: "ai-data", label: "Inventory" },
{ icon: "ai-hashtag", label: "Hashtags" },
];
const IconButton = ({ icon }) => (
);
const LeftSidebar = () => (
{leftTopItems.map((icon) => (
))}
{leftBottomItems.map((icon) => (
))}
);
const SidebarHeader = () => (
Untitled UI
store.untitledui.com
);
const Submenu = ({ items }) => (
{items.map((item) => (
{item.label}
{item.count}
))}
);
const NavItem = ({ item }) => (
<>
{item.label}
{item.actionIcon && }
{item.submenu && }
>
);
const Navigation = () => (
{navItems.map((item) => (
))}
);
const RightSidebar = () => (
);
export const Sidebar15 = () => {
return (
);
};
================================================
FILE: src/components/sidebars/Sidebar2/Sidebar2.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./styles.css";
const navItems = ["home", "settings", "build", "cloud", "mail", "bookmark"];
export const Sidebar2 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
setIsOpen(!isOpen)}
>
{isOpen ? "close" : "menu"}
{navItems.map((item) => (
{item}
{item}
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar2/styles.css
================================================
.page.sidebar-2-page {
background: #17132a;
}
.sidebar-2 {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 56px;
height: 100%;
background: #4f2cd4;
transition: width 0.4s;
}
.sidebar-2.open {
width: 260px;
}
.sidebar-2 .inner {
position: absolute;
top: 0;
left: 0;
width: 260px;
}
.sidebar-2 header {
display: flex;
align-items: center;
height: 64px;
padding: 0 6px;
background: rgb(0 0 0 / 25%);
}
.sidebar-2-burger {
width: 44px;
height: 72px;
display: grid;
place-items: center;
color: #f9f9f9;
}
.sidebar-2 header > img {
height: 28px;
}
.sidebar-2 nav {
display: grid;
padding: 6px;
gap: 2px;
}
.sidebar-2 nav > button {
display: flex;
gap: 12px;
align-items: center;
height: 44px;
width: 44px;
font-family: "Poppins";
font-size: 16px;
text-transform: capitalize;
line-height: 1;
padding: 0 12px;
border-radius: 8px;
color: #f9f9f9;
}
.sidebar-2 nav > button:hover {
background: rgb(0 0 0 / 30%);
}
.sidebar-2 header > img,
.sidebar-2 nav > button p {
opacity: 0;
transition: 0.3s;
}
.sidebar-2.open :is(nav button p, header > img) {
opacity: 1;
}
.sidebar-2.open nav > button {
width: 100%;
}
================================================
FILE: src/components/sidebars/Sidebar3/Sidebar3.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./styles.css";
const navItems = ["home", "settings", "build", "cloud", "mail"];
export const Sidebar3 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
setIsOpen(!isOpen)}
>
{isOpen ? "close" : "menu"}
{navItems.map((item) => (
{item}
{item}
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar3/styles.css
================================================
.page.sidebar-3-page {
background: #17132a url("./bg.jpeg");
background-size: cover;
}
.page.sidebar-3-page::after {
content: "";
position: fixed;
z-index: 0;
inset: 0;
background: rgb(0 0 0 / 15%);
}
.sidebar-3 {
position: absolute;
z-index: 2;
top: 20px;
left: 20px;
bottom: 20px;
border-radius: 8px;
width: 56px;
background: rgb(0 0 0 / 25%);
backdrop-filter: blur(10px);
transition: width 0.45s;
}
.sidebar-3 button {
border: 0;
background: transparent;
cursor: pointer;
}
.sidebar-3 .material-symbols-outlined {
font-size: 20px;
}
.sidebar-3.open {
width: 190px;
}
.sidebar-3 .inner {
position: absolute;
top: 0;
left: 0;
width: 190px;
}
.sidebar-3 header {
display: flex;
align-items: center;
height: 64px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 0 6px;
}
.sidebar-3-burger {
width: 44px;
height: 72px;
display: grid;
place-items: center;
color: #f9f9f9;
}
.sidebar-3 header > img {
height: 18px;
}
.sidebar-3 nav {
display: grid;
padding: 0 6px;
gap: 2px;
}
.sidebar-3 nav > button {
display: flex;
gap: 12px;
align-items: center;
height: 44px;
width: 44px;
font-family: "Poppins";
font-size: 14px;
text-transform: capitalize;
line-height: 1;
padding: 0 12px;
border-radius: 8px;
opacity: 0.7;
color: #f9f9f9;
}
.sidebar-3 nav > button:hover {
background: rgb(0 0 0 / 30%);
opacity: 1;
}
.sidebar-3:not(.open) nav > button:hover p {
opacity: 1;
background: rgb(0 0 0 / 70%);
padding: 4px 8px;
border-radius: 6px;
translate: 10px 0;
}
.sidebar-3 header > img,
.sidebar-3 nav > button p {
opacity: 0;
transition: 0.25s;
}
.sidebar-3.open :is(nav button p, header > img) {
opacity: 1;
}
.sidebar-3.open nav > button {
width: 100%;
}
================================================
FILE: src/components/sidebars/Sidebar4/Sidebar4.css
================================================
* {
box-sizing: border-box;
}
.page.sidebar-4-page {
background: #36367f;
}
.sidebar-4 button {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.sidebar-4 {
position: absolute;
overflow: hidden;
top: 20px;
left: 20px;
bottom: 30px;
width: 64px;
border-radius: 16px;
background: #21214c;
transition: width 0.4s;
}
.sidebar-4:hover {
width: 260px;
}
.sidebar-4 .inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 260px;
}
.sidebar-4 .header {
display: flex;
align-items: center;
height: 72px;
padding: 0 20px;
background: rgb(0 0 0 / 15%);
}
.sidebar-4 .header h1 {
margin-left: 12px;
font-weight: 500;
font-size: 14px;
letter-spacing: 2px;
}
.sidebar-4 .logo {
height: 28px;
scale: 1.1;
transition: 0.5s;
}
.sidebar-4 .menu {
position: relative;
display: grid;
}
.sidebar-4 .menu::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 56px;
width: 6px;
background: #6154f7;
translate: 0 var(--top);
transition: 0.5s;
}
.sidebar-4 .menu button {
display: flex;
gap: 16px;
align-items: center;
height: 56px;
width: 100%;
font-family: "Poppins";
font-size: 17px;
text-transform: capitalize;
line-height: 1;
padding: 0 22px;
color: rgb(255 255 255 / 60%);
cursor: pointer;
opacity: 0.8;
transition: 0.5s;
}
.sidebar-4:hover .menu button:hover:not(.active) {
background: rgb(0 0 0 / 8%);
}
.sidebar-4 .menu :is(button:hover, .active) {
background: rgb(0 0 0 / 35%);
color: rgb(255 255 255 / 100%);
opacity: 1;
}
.sidebar-4:hover .menu .active {
cursor: default;
}
.sidebar-4 .menu button:hover > span {
opacity: 1;
}
.sidebar-4 .menu button p,
.sidebar-4 .header h1 {
opacity: 0;
transition: 0.5s;
}
.sidebar-4:hover :is(.sidebar-4 .menu button p, .sidebar-4 .header h1) {
opacity: 1;
}
.sidebar-4:hover .logo {
scale: 1;
}
.sidebar-4 .menu button > img {
width: 24px;
height: 24px;
}
================================================
FILE: src/components/sidebars/Sidebar4/Sidebar4.jsx
================================================
import { useState } from "react";
import logo from "./logo.png";
import "./Sidebar4.css";
const navItems = [
"home",
"dashboard",
"mail",
"cloud",
"workspaces",
"settings",
];
export const Sidebar4 = () => {
const [active, setActive] = useState(1);
const goto = (index) => setActive(index);
return (
Teams.co
{navItems.map((item, index) => (
goto(index)}
>
{item}
{item}
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar5/Sidebar5.css
================================================
.page.sidebar-5-page {
margin: 0;
background: #1c376d;
height: 100vh;
overflow: hidden;
}
.lni {
font-size: 24px;
}
.sidebar-5 button {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.sidebar-5 {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
bottom: 0;
width: 260px;
background: rgb(0 0 0 / 40%);
}
.sidebar-5 .sidebar-inner {
position: absolute;
top: 0;
left: 0;
width: 260px;
}
.sidebar-5 .sidebar-header {
display: flex;
align-items: center;
height: 72px;
padding-top: 10px;
}
.sidebar-5 .sidebar-burger {
width: 60px;
height: 60px;
display: grid;
place-items: center;
color: #f9f9f9;
}
.sidebar-5 .sidebar-logo {
height: 22px;
}
.sidebar-5 .sidebar-menu {
display: grid;
padding: 0 10px;
}
.sidebar-5 .sidebar-button {
display: flex;
gap: 16px;
align-items: center;
height: 56px;
width: 100%;
font-family: "Poppins";
font-size: 17px;
text-transform: capitalize;
line-height: 1;
padding: 0 10px;
border-radius: 8px;
color: #b8c2d8;
opacity: 0.9;
}
.sidebar-5 .sidebar-button p {
font-size: 15px;
margin-left: 1px;
}
.sidebar-5 .handle {
position: absolute;
z-index: 100;
width: 8px;
top: 0;
bottom: 0;
right: 0;
user-select: none;
transition: 0.3s;
}
.sidebar-5 .handle:hover,
.sidebar-5 .handle:active {
background: rgb(255 255 255 / 6%);
cursor: col-resize;
}
================================================
FILE: src/components/sidebars/Sidebar5/Sidebar5.jsx
================================================
import { useRef, useState } from "react";
import logo from "./logo.svg";
import "./Sidebar5.css";
const items = [
{
name: "home",
icon: "home-2",
},
{
name: "favourites",
icon: "heart",
},
{
name: "products",
icon: "cart-2",
},
{
name: "testimonials",
icon: "comment-1",
},
{
name: "security",
icon: "locked-2",
},
{
name: "settings",
icon: "gear-1",
},
];
const Icon = ({ children }) => ;
export const Sidebar5 = () => {
const [width, setWidth] = useState(60);
const sidebarRef = useRef(null);
const sidebar = sidebarRef.current;
const resize = (e) => {
let newWidth = e.clientX - sidebar?.offsetLeft;
if (newWidth < 60) newWidth = 60;
if (newWidth > 259) newWidth = 260;
setWidth(newWidth);
};
const stopResize = () => {
document.body.style.cursor = "default";
window.removeEventListener("mousemove", resize);
window.removeEventListener("mouseup", stopResize);
};
const initResize = () => {
document.body.style.cursor = "col-resize";
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
};
return (
menu-hamburger-1
{items.map((item) => (
{item.icon}
{item.name}
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar6/Sidebar6.css
================================================
* {
box-sizing: border-box;
}
.sidebar-6 {
--width-open: 260px;
--width-closed: 64px;
}
.page.sidebar-6-page {
background: #474bb7;
}
.sidebar-6 button {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.sidebar-6 {
overflow: hidden;
position: absolute;
top: 20px;
left: 20px;
bottom: 30px;
width: var(--width-closed);
border-radius: 16px;
background: #1a1a36;
transition: width 0.3s;
}
.sidebar-6:hover {
width: var(--width-open);
}
.sidebar-6 .toggle-btn {
position: absolute;
z-index: 2;
top: 24px;
right: -12px;
display: grid;
place-items: center;
padding: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #373153;
color: #8f8d9b;
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
transition: 0.3s;
}
.sidebar-6 .toggle-btn:hover {
color: #f9f9f9;
}
.sidebar-6:hover .toggle-btn {
rotate: 180deg;
}
.sidebar-6 .inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 260px;
display: flex;
flex-direction: column;
}
.sidebar-6 .header {
display: flex;
align-items: center;
height: 72px;
width: var(--width-closed);
padding: 0 20px;
background: rgb(0 0 0 / 15%);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
transition: 0.3s;
}
.sidebar-6:hover .header {
width: var(--width-open);
}
.sidebar-6 .header h1 {
margin-left: 12px;
font-weight: 500;
font-size: 16px;
letter-spacing: 2px;
}
.sidebar-6 .logo {
height: 28px;
}
.sidebar-6 .menu {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.sidebar-6 .menu::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 56px;
width: 6px;
background: #656aff;
translate: 0 var(--top);
transition: 0.3s;
}
.sidebar-6 .menu button {
display: flex;
gap: 16px;
align-items: center;
height: 56px;
width: var(--width-closed);
font-family: "Poppins";
font-size: 17px;
text-transform: capitalize;
line-height: 1;
padding: 0 22px;
color: #9193b3;
cursor: pointer;
opacity: 0.8;
transition: 0.3s;
}
.sidebar-6:hover .menu button {
width: var(--width-open);
}
.sidebar-6 .menu button.active {
color: #f9f9f9;
background: rgb(255 255 255 / 3%);
opacity: 1;
}
.sidebar-6 .menu button:not(.active):hover {
background: rgb(255 255 255 / 2%);
opacity: 0.9;
}
.sidebar-6:hover .menu .active {
cursor: default;
}
.sidebar-6 .menu button:hover > span {
opacity: 1;
}
.sidebar-6 .menu button p,
.sidebar-6 .header h1 {
opacity: 0;
transition: 0.3s;
}
.sidebar-6 .menu button:hover p {
transition: 0.1s;
}
.sidebar-6:hover :is(.sidebar-6 .menu button p, .sidebar-6 .header h1) {
opacity: 1;
}
.sidebar-6 .menu button > img {
width: 24px;
height: 24px;
}
================================================
FILE: src/components/sidebars/Sidebar6/Sidebar6.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./Sidebar6.css";
const navItems = [
"dashboard",
"leaderboard",
"groups",
"analytics",
"message",
"settings",
];
export const Sidebar6 = () => {
const [active, setActive] = useState(1);
const goto = (index) => setActive(index);
return (
Lampo
{navItems.map((item, index) => (
goto(index)}
>
{item}
{item}
))}
);
};
================================================
FILE: src/components/sidebars/Sidebar7/Sidebar7.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./styles.css";
const navItems = ["home", "build", "cloud", "mail", "favorite"];
const Icon = ({ icon }) => (
{icon}
);
const Button = ({ item }) => (
{item}
);
const Header = () => (
);
export const Sidebar7 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
);
};
================================================
FILE: src/components/sidebars/Sidebar7/styles.css
================================================
.page.sidebar-7-page {
background: #1c1b23;
}
.page.sidebar-7-page button {
background: transparent;
border: 0;
cursor: pointer;
}
.sidebar-7 {
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 56px;
background: #5331ff;
backdrop-filter: blur(10px);
transition: 0.45s;
}
.sidebar-7 .material-symbols-outlined {
font-size: 20px;
}
.sidebar-7.open {
width: 190px;
overflow: hidden;
}
.sidebar-7 .inner {
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar-7 header {
display: flex;
align-items: center;
height: 64px;
padding: 0 6px 0 48px;
}
.sidebar-7-burger {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 56px;
height: 64px;
display: grid;
place-items: center;
color: #f9f9f9;
}
.sidebar-7 header > img {
height: 18px;
}
.sidebar-7 nav {
display: flex;
flex-direction: column;
padding: 0 8px 20px;
gap: 2px;
flex: 1 1 auto;
}
.sidebar-7 nav > button {
display: flex;
gap: 12px;
align-items: center;
height: 40px;
width: 40px;
font-family: "Euclid Circular A";
font-size: 14px;
text-transform: capitalize;
line-height: 1;
padding: 0 10px;
border-radius: 8px;
color: #f9f9f9;
}
.sidebar-7 nav > button:last-child {
margin-top: auto;
}
.sidebar-7 nav > button:hover {
background: rgb(0 0 0 / 24%);
}
.sidebar-7:not(.open) nav p {
visibility: hidden;
}
.sidebar-7:not(.open) nav > button:hover p {
opacity: 1;
visibility: visible;
background: #2e2a47;
padding: 5px 10px;
font-size: 13px;
border-radius: 6px;
translate: 12px 0;
}
.sidebar-7 header > img,
.sidebar-7 nav > button p {
opacity: 0;
transition: 0.25s;
}
.sidebar-7.open :is(nav button p, header > img) {
opacity: 1;
}
.sidebar-7.open nav > button {
width: 100%;
}
@media (width <= 400px) {
.sidebar-7 {
translate: -100% 0;
}
.sidebar-7.open {
translate: 0;
}
.sidebar-7:not(.open) button span {
transition: 0.3s;
opacity: 0;
}
}
================================================
FILE: src/components/sidebars/Sidebar8/Sidebar8.css
================================================
.page.sidebar-8-page {
--color-hover: #313132;
--border: 1px solid #2d2d2d;
margin: 0;
background: #141414;
color: #fdffff;
height: 100vh;
font-family: "SF Pro";
}
.sidebar-8 header :is(h2, h3) {
margin: 0;
}
.sidebar-8 {
position: fixed;
overflow: hidden;
top: 24px;
left: 24px;
bottom: 28px;
display: flex;
flex-direction: column;
gap: 8px;
width: 80px;
border-radius: 18px;
border: var(--border);
transition: 0.4s;
background: #1c1c1c;
}
.sidebar-8 button {
border: 0;
background: transparent;
font-size: 22px;
color: inherit;
border-radius: 8px;
font-family: inherit;
cursor: pointer;
transition: 0.3s;
}
.sidebar-8-left,
.sidebar-8-right {
position: absolute;
top: 0;
bottom: 0;
transition: 0.4s;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar-8-left {
z-index: 1;
left: 0;
width: 80px;
}
.sidebar-8-dots {
position: absolute;
top: 10px;
left: 18px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ee6c5f;
}
.sidebar-8-dots::before,
.sidebar-8-dots::after {
content: "";
width: inherit;
height: inherit;
border-radius: inherit;
position: inherit;
}
.sidebar-8-dots::before {
left: 16px;
background: #f7bc50;
}
.sidebar-8-dots::after {
left: 32px;
background: #61c453;
}
.sidebar-8-left img {
width: 40px;
margin: 36px 0 14px;
}
.sidebar-8-left button {
width: 44px;
height: 44px;
display: grid;
place-items: center;
opacity: 0.8;
}
.sidebar-8-left button:hover {
opacity: 1;
background: var(--color-hover);
}
.sidebar-8-left div:last-of-type {
margin-top: auto;
margin-bottom: 16px;
}
.sidebar-8-right {
left: 76px;
height: 100%;
position: relative;
}
.sidebar-8-right-inner {
position: absolute;
inset: 8px;
left: 6px;
border-radius: 12px;
background: #1a1a1a;
border: var(--border);
}
.sidebar-8-right header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 16px 18px;
}
.sidebar-8-right h2 {
font-size: 16px;
font-weight: 600;
}
.sidebar-8-right h3 {
font-size: 12px;
font-weight: 500;
color: #7e7f82;
}
.sidebar-8-right nav {
padding: 0 12px;
}
.sidebar-8-right button {
padding: 0 12px;
background: transparent;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 44px;
font-size: 15px;
opacity: 0.7;
}
.sidebar-8-right button:hover {
opacity: 1;
background: var(--color-hover);
}
.sidebar-8-right button i {
font-size: 18px;
}
.sidebar-8:hover {
width: 300px;
}
.sidebar-8:hover .sidebar-8-right {
width: 225px;
}
================================================
FILE: src/components/sidebars/Sidebar8/Sidebar8.jsx
================================================
import logo from "./logo.svg";
import "./Sidebar8.css";
const navItems = ["home-alt1", "heart", "mention", "plus"];
const footerItems = ["gear", "link-out"];
const innerItems = [
{
name: "Dashboard",
icon: "dashboard",
},
{
name: "Products",
icon: "shipping-box-v1",
},
{
name: "Customers",
icon: "person",
},
{
name: "Messages",
icon: "open-envelope",
},
{
name: "Images",
icon: "image",
},
{
name: "Inventory",
icon: "data",
},
{
name: "Hashtags",
icon: "hashtag",
},
];
const Icon = ({ icon }) => ;
const Button = ({ item }) => (
{item.name}
);
const Header = () => (
);
export const Sidebar8 = () => {
return (
);
};
================================================
FILE: src/components/sidebars/Sidebar9/Sidebar9.css
================================================
.page.sidebar-9-page {
background: #17132a url("./bg.jpg");
background-size: cover;
}
.page.sidebar-9-page::after {
content: "";
position: fixed;
z-index: 0;
inset: 0;
background: linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 0%));
}
.sidebar-9 {
position: absolute;
z-index: 2;
top: 20px;
left: 20px;
bottom: 26px;
border-radius: 14px;
border: 1px solid rgb(255 255 255 / 6%);
width: 56px;
background: rgb(255 255 255 / 6%);
backdrop-filter: blur(10px);
transition: width 0.45s;
}
.sidebar-9 button {
border: 0;
background: transparent;
cursor: pointer;
}
.sidebar-9 .material-symbols-outlined {
font-size: 20px;
}
.sidebar-9.open {
width: 190px;
}
.sidebar-9 .inner {
position: absolute;
top: 0;
left: 0;
width: 190px;
}
.sidebar-9 header {
display: flex;
align-items: center;
height: 64px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 0 6px;
}
.sidebar-9-burger {
width: 44px;
height: 72px;
display: grid;
place-items: center;
color: #f9f9f9;
}
.sidebar-9 header > img {
height: 18px;
}
.sidebar-9 nav {
display: grid;
padding: 0 6px;
gap: 2px;
}
.sidebar-9 nav > button {
display: flex;
gap: 12px;
align-items: center;
height: 44px;
width: 44px;
font-family: "Euclid Circular B";
font-size: 14px;
text-transform: capitalize;
line-height: 1;
padding: 0 12px;
border-radius: 8px;
opacity: 0.7;
color: #f9f9f9;
transition: 0.3s;
}
.sidebar-9 nav > button:hover {
background: rgb(255 255 255 / 6%);
opacity: 1;
}
.sidebar-9:not(.open) nav > button:hover p {
opacity: 1;
background: rgb(0 0 0 / 20%);
backdrop-filter: blur(10px);
padding: 8px 12px;
border-radius: 6px;
translate: 10px 0;
}
.sidebar-9 header > img,
.sidebar-9 nav > button p {
opacity: 0;
pointer-events: none;
transition: 0.25s;
}
.sidebar-9.open :is(nav button p, header > img) {
opacity: 1;
}
.sidebar-9.open nav > button {
width: 100%;
}
================================================
FILE: src/components/sidebars/Sidebar9/Sidebar9.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./Sidebar9.css";
const navItems = ["home", "security", "build", "cloud", "mail", "settings"];
export const Sidebar9 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
setIsOpen(!isOpen)}
>
{isOpen ? "close" : "menu"}
{navItems.map((item) => (
{item}
{item}
))}
);
};
================================================
FILE: src/components/sidebars/index.js
================================================
export * from "./Sidebar1/Sidebar1";
export * from "./Sidebar2/Sidebar2";
export * from "./Sidebar3/Sidebar3";
export * from "./Sidebar4/Sidebar4";
export * from "./Sidebar5/Sidebar5";
export * from "./Sidebar6/Sidebar6";
export * from "./Sidebar7/Sidebar7";
export * from "./Sidebar8/Sidebar8";
export * from "./Sidebar9/Sidebar9";
export * from "./Sidebar10/Sidebar10";
export * from "./Sidebar11/Sidebar11";
export * from "./Sidebar12/Sidebar12";
export * from "./Sidebar13/Sidebar13";
export * from "./Sidebar14/Sidebar14";
export * from "./Sidebar15/Sidebar15";
================================================
FILE: src/components/signups/Signup1/Signup1.css
================================================
.page.signup-1-page {
margin: 0;
background: #f2f3fe;
color: #4b5679;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
font-family: "Euclid Circular B", "Poppins";
}
.signup-1-card {
--color-primary: #6663e6;
position: relative;
overflow: hidden;
width: 660px;
height: 440px;
border-radius: 32px;
background: #ffffff;
box-shadow: 0 12px 80px rgba(0, 0, 0, 0.12);
}
.signup-1-card .card-bg {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
width: 860px;
height: 440px;
rotate: -45deg;
transform-origin: 0% 100%;
background: var(--color-primary);
}
.signup-1-card .card-bg-2 {
background: var(--color-primary);
rotate: 0deg;
opacity: 0;
right: 0;
left: auto;
transform-origin: 100% 100%;
}
.signup-1-card .card-bg-1.register {
animation: card-bg-register 1.5s both;
}
.signup-1-card .card-bg-1.login {
animation: card-bg-login 1.5s both;
}
.signup-1-card .card-bg-2.register {
animation: card-bg-2-register 1.5s both;
}
.signup-1-card .card-bg-2.login {
animation: card-bg-2-login 1.5s both;
}
.signup-1-card .logo {
position: absolute;
top: 70px;
z-index: 2;
height: 24px;
transition: 0.3s;
opacity: 0;
}
.signup-1-card .logo-1 {
translate: -280px 0;
left: 64px;
}
.signup-1-card .logo-2 {
translate: 280px 0;
right: 64px;
}
.signup-1-card .card-bg.login ~ .logo-1,
.signup-1-card .card-bg.register ~ .logo-2 {
opacity: 1;
translate: 0;
transition: 0.3s 1.05s;
}
.signup-1-card .form {
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
width: 50%;
display: grid;
place-items: center;
}
.signup-1-card .form h2 {
text-align: center;
font-weight: 500;
}
.signup-1-card .form form {
display: grid;
gap: 12px;
opacity: 0;
transition: 0.3s;
}
.signup-1-card .form a {
display: inline-flex;
flex-direction: column;
gap: 8px;
color: #a7a7ad;
cursor: pointer;
font-size: 14px;
text-align: center;
}
.signup-1-card .form p {
font-size: 14px;
text-align: center;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
color: #a7a7ad;
}
.signup-1-card .form a em {
display: block;
font-style: normal;
font-size: 15px;
color: var(--color-primary);
}
.signup-1-card .form.register {
translate: 100% 0;
}
.signup-1-card .form.register form {
translate: 320px 0;
}
.signup-1-card .form.login form {
translate: -320px 0;
}
.signup-1-card .form.register.active form,
.signup-1-card .form.login.active form {
opacity: 1;
translate: 0;
transition: 0.5s 1s;
}
.signup-1-card form input {
width: 260px;
padding: 0 12px;
font-size: 14px;
background: #f4f4f7;
}
.signup-1-card form input::placeholder {
color: #a7a7ad;
}
.signup-1-card input,
.signup-1-card button {
border: 0;
border-radius: 12px;
height: 44px;
font-family: inherit;
font-size: 16px;
}
.signup-1-card form button {
color: #f9f9f9;
background: var(--color-primary);
letter-spacing: 1px;
font-size: 14px;
}
/* Animations (Global definitions - prefixes not applied to @keyframe names) */
@keyframes card-bg-register {
0% {
rotate: -45deg;
}
50% {
opacity: 1;
}
50%,
100% {
rotate: 0deg;
}
50.01%,
100% {
opacity: 0;
}
}
@keyframes card-bg-login {
0% {
opacity: 0;
rotate: 0deg;
}
50% {
rotate: 0deg;
opacity: 0;
}
50%,
100% {
rotate: 0;
}
50.01%,
100% {
opacity: 1;
}
100% {
rotate: -45deg;
}
}
@keyframes card-bg-2-register {
0%,
50% {
rotate: 0;
opacity: 0;
}
50.01% {
opacity: 1;
rotate: 0deg;
}
100% {
opacity: 1;
rotate: 45deg;
}
}
@keyframes card-bg-2-login {
0% {
rotate: 45deg;
opacity: 1;
}
50%,
100% {
rotate: 0deg;
opacity: 1;
}
50.01%,
100% {
opacity: 0;
}
}
================================================
FILE: src/components/signups/Signup1/Signup1.jsx
================================================
import { useState } from "react";
import logo from "./logo.svg";
import "./Signup1.css";
const CardBackground = ({ view }) => {
const bgClass = view === "login" ? "register" : "login";
return (
<>
>
);
};
const LogoGroup = ({ logo }) => {
return (
<>
>
);
};
const LoginForm = ({ view, toggleView }) => {
return (
);
};
const RegisterForm = ({ view, toggleView }) => {
return (
);
};
export const Signup1 = () => {
const [view, setView] = useState("login");
const toggleView = () => setView(view === "login" ? "register" : "login");
return (
);
};
================================================
FILE: src/components/signups/index.js
================================================
export * from "./Signup1/Signup1";
================================================
FILE: src/components/tables/Table1/Table1.css
================================================
.table-1-wrapper {
overflow: auto;
position: relative;
z-index: 2;
width: 440px;
min-width: 440px;
max-width: 440px;
}
.table-1-card table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.table-1-card table th {
opacity: 0.5;
font-weight: 400;
user-select: none;
text-transform: capitalize;
background: rgb(255 255 255 / 6%);
}
.table-1-card table :is(th, td) {
position: relative;
overflow: hidden;
white-space: nowrap;
height: 36px;
padding: 0 10px;
border: 1px solid rgb(255 255 255 / 10%);
}
.table-1-card table th .draggable {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
}
================================================
FILE: src/components/tables/Table1/Table1.jsx
================================================
import { useEffect, useRef, useState, createRef } from "react";
import "./Table1.css";
const TableHeader = ({ index, column, columnRef, initResize }) => {
const width = !!initResize ? column.width : "100%";
return (
{column.name}
{!!initResize && (
initResize(e, index)}
>
)}
);
};
export const Table1 = ({ columns, data }) => {
const [columnState, setColumnState] = useState(columns);
const [columnRefs, setColumnRefs] = useState([]);
const wrapperRef = useRef(null);
const activeIndex = useRef(null);
const resize = (e) => {
const columnsCopy = [...columns];
const column = columnsCopy[activeIndex.current];
const columnRef = columnRefs[activeIndex.current];
const nextWidth =
e.clientX -
48 -
columnRef.current.offsetLeft -
(wrapperRef.current.offsetLeft - wrapperRef.current.scrollLeft);
console.log("nextWidth", nextWidth);
column.width = nextWidth;
setColumnState(columnsCopy);
};
const stopResize = () => {
document.body.style.cursor = "default";
window.removeEventListener("mousemove", resize);
window.removeEventListener("mouseup", stopResize);
};
const initResize = (e, index) => {
activeIndex.current = index;
e.stopPropagation();
document.body.style.cursor = "col-resize";
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
};
useEffect(() => {
setColumnRefs(
Array(columns.length)
.fill()
.map((_, i) => columnRefs[i] || createRef())
);
}, []);
return (
{columnState.map((column, index) => (
))}
{data.map((item) => (
{columnState.map((column) => (
{item[column.name]}
))}
))}
);
};
================================================
FILE: src/components/tables/Table1/Table1Example.css
================================================
.page.table-1-page {
background: linear-gradient(45deg, #2c3c5e, #1a2239);
color: #f9f9f9;
display: flex;
align-items: flex-start;
display: grid;
place-items: center;
}
.table-1-card {
background: rgb(255 255 255 / 3%);
border: 2px solid rgb(255 255 255 / 3%);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 24px;
font-size: 12px;
}
.table-1-card .header {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
}
.table-1-card .header h2 {
font-weight: 400;
opacity: 0.6;
display: flex;
align-items: center;
}
.table-1-card .header button {
background: #2e5fdc;
color: rgb(255 255 255 / 96%);
font-size: 12px;
border: 0;
border-radius: 20px;
font-family: inherit;
padding: 8px 14px;
}
================================================
FILE: src/components/tables/Table1/Table1Example.jsx
================================================
import { Table1 } from "./Table1";
import "./Table1Example.css";
import logo from "./logo.svg";
const columns = [
{
name: "name",
width: 125,
},
{
name: "age",
width: 50,
},
{
name: "level",
width: 170,
},
];
const data = [
{
name: "Alice Johnson",
age: 29,
level: "Intermediate",
languages: ["Python", "JavaScript", "HTML"],
},
{
name: "Bob Smith",
age: 35,
level: "Advanced",
languages: ["Java", "Kotlin", "Scala"],
},
{
name: "Charlie Evans",
age: 23,
level: "Beginner",
languages: ["Python", "C++"],
},
{
name: "Diana Lee",
age: 41,
level: "Expert",
languages: ["C#", "F#", "SQL"],
},
{
name: "Edward Kim",
age: 28,
level: "Intermediate",
languages: ["JavaScript", "TypeScript", "Node.js"],
},
{
name: "Fiona Garcia",
age: 32,
level: "Advanced",
languages: ["Ruby", "Go", "Elixir"],
},
{
name: "George Thompson",
age: 26,
level: "Intermediate",
languages: ["PHP", "Python", "JavaScript"],
},
];
export const Table1Example = () => {
return (
);
};
================================================
FILE: src/components/tables/Table2/Table2.css
================================================
.table-2 {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.table-2 thead {
position: sticky;
top: 0;
left: 0;
z-index: 1;
}
.table-2 thead tr th:not(:last-child) {
width: 120px;
max-width: 120px;
}
.table-2 :is(th, td) {
position: relative;
overflow: hidden;
white-space: nowrap;
padding: 0 6px;
height: 50px;
font-size: 13px;
}
.table-2 th {
font-weight: 500;
user-select: none;
text-transform: capitalize;
color: #706d84;
height: 56px;
cursor: pointer;
vertical-align: middle;
transition: 0.3s;
}
.table-2 th i {
font-size: 11px;
translate: 0 -1px;
margin-left: 6px;
}
.table-2 th:is(.active, :hover) {
color: inherit;
}
.table-2 td {
opacity: 0.65;
transition: opacity 0.3s;
}
.table-2 tbody tr:hover td {
opacity: 1;
}
.table-2 tr {
cursor: pointer;
border-bottom: 1px solid #34323c;
}
.table-2 tbody tr:last-child {
border: 0;
}
.table-2 tbody tr:nth-child(odd) {
background: #1e1d25;
}
================================================
FILE: src/components/tables/Table2/Table2.jsx
================================================
import { useState } from "react";
import "./Table2.css";
const TableHeader = ({ column, onSort, sortOrder, sortColumn }) => {
const isActive = column === sortColumn;
return (
onSort(column)}>
{column}
{isActive && (
)}
);
};
export const Table2 = ({ rows, columns }) => {
const [sortColumn, setSortColumn] = useState(columns[0]);
const [sortOrder, setSortOrder] = useState("asc");
const sortedRows = rows.sort((a, b) => {
const [valA, valB] = [a[sortColumn], b[sortColumn]];
return typeof valA === typeof valB
? sortOrder === "asc"
? valA > valB
? 1
: -1
: valA < valB
? 1
: -1
: 0;
});
const handleSort = (column) => {
console.log("name", column);
setSortColumn(column);
setSortOrder(
sortColumn !== column ? "asc" : sortOrder === "asc" ? "desc" : "asc"
);
};
return (
{columns.map((column) => (
))}
{sortedRows.map((row) => (
{columns.map((column) => (
{row[column]}
))}
))}
);
};
================================================
FILE: src/components/tables/Table2/Table2Example.css
================================================
.table-2-page {
background: #222129;
color: #f5f3f9;
margin: 0;
height: 100vh;
font-size: 110%;
font-family: "Euclid Circular A", "Poppins";
}
.table-2-page .wrapper {
overflow: auto;
position: relative;
z-index: 2;
}
.table-2-page header {
position: relative;
overflow: hidden;
margin: 0 0 18px;
}
.table-2-page header .content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
height: 240px;
max-width: 700px;
margin: 0 auto;
padding: 0 70px 60px;
}
.table-2-page header::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 0;
z-index: 0;
background: #5926fc;
width: 500vw;
aspect-ratio: 1/1;
border-radius: 50%;
}
.table-2-page header button {
font-family: inherit;
background: rgb(0 0 0 / 16%);
color: inherit;
border: 0;
border-radius: 8px;
padding: 12px 18px 12px 20px;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 4px;
}
.table-2-page header button span {
font-size: 16px;
translate: 0 -1px;
}
.table-2-page header h2 {
font-size: 20px;
font-weight: 400;
display: flex;
align-items: center;
}
.table-2-page header h2 i {
margin-right: 8px;
background: rgb(0 0 0 / 16%);
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
}
.table-2-page .card {
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 1;
background: #1a191e;
border-radius: 8px;
box-shadow: 0 30px 40px rgb(0 0 0 / 12%);
padding: 10px 18px 18px;
font-size: 12px;
margin: -100px auto 30px;
}
@media (width < 706px) {
.table-2-page .card {
margin: -100px 50px 30px;
}
}
================================================
FILE: src/components/tables/Table2/Table2Example.jsx
================================================
import { Table2 } from "./Table2";
import "./Table2Example.css";
const rows = [
{
name: "Zoe Blogs",
level: "Intermediate",
age: 21,
language: "JavaScript",
location: "USA",
},
{
name: "Jane Doe",
level: "Advanced",
age: 25,
language: "Python",
location: "Canada",
},
{
name: "Alice Smith",
level: "Junior",
age: 22,
language: "Ruby",
location: "UK",
},
{
name: "Bob Kohler",
level: "Senior",
age: 35,
language: "C#",
location: "Germany",
},
{
name: "Dana White",
level: "Junior",
age: 23,
language: "PHP",
location: "France",
},
{
name: "Ethan Hunt",
level: "Advanced",
age: 28,
language: "JavaScript",
location: "USA",
},
{
name: "Fiona Green",
level: "Senior",
age: 40,
language: "Java",
location: "Ireland",
},
{
name: "Luuk Black",
level: "Intermediate",
age: 30,
language: "JavaScript",
location: "Netherlands",
},
{
name: "Hannah Isak",
level: "Junior",
age: 24,
language: "Kotlin",
location: "Sweden",
},
];
const columns = ["name", "level", "language", "location"];
export const Table2Example = () => {
return (
);
};
================================================
FILE: src/components/tables/Table3/Table3.css
================================================
.table-3 {
width: 100%;
border-collapse: collapse;
}
.table-3 td {
padding: 16px;
white-space: nowrap;
}
.table-3 tr td:last-of-type {
text-align: right;
}
.table-3 th:first-of-type {
width: 20px;
}
.table-3 tr td:first-child,
.table-3 tr th:first-child {
padding-right: 2px;
}
.table-3 tr td:last-child,
.table-3 tr th:last-child {
padding-right: 12px;
}
.table-3 th:nth-child(2) {
width: 133px;
max-width: 133px;
min-width: 133px;
}
.table-3 th:nth-child(3) {
width: 180px;
max-width: 180px;
min-width: 180px;
}
.table-3 th {
padding: 20px 16px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
}
.table-3 :is(td, th) {
border-bottom: 1px solid #2d2d2d;
}
.table-3-footer {
display: flex;
align-items: center;
}
.table-3-footer p {
margin: 0;
font-size: 14px;
color: #8a8a8a;
}
.table-3-footer p em {
color: #ffffff;
font-style: normal;
}
.table-3-pagination {
padding: 16px;
display: flex;
}
.table-3-pagination > button {
background: transparent;
border: 1px solid #2d2d2d;
border-right: 0;
color: #ffffff;
font-family: inherit;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
font-size: 14px;
transition: 0.3s;
}
.table-3-pagination > button:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.table-3-pagination > button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-right: 1px solid #2d2d2d;
}
.table-3-pagination > button:hover {
background: rgb(255 255 255 / 1%);
}
.table-3-pagination > button.active {
background: #2d2d2d;
}
================================================
FILE: src/components/tables/Table3/Table3.jsx
================================================
import { useState } from "react";
import "./Table3.css";
import { Checkbox } from "./Table3Example";
const pageSize = 5;
const PaginatedTable = ({ pageNumber, totalPages, totalRows, goToPage }) => {
return (
{[...Array(totalPages)].map((_, index) => (
goToPage(index + 1)}
disabled={pageNumber === index + 1}
className={pageNumber === index + 1 ? "active" : ""}
>
{index + 1}
))}
Viewing{" "}
{pageNumber === 1 ? 1 : (pageNumber - 1) * pageSize + 1}-
{pageNumber * pageSize}
{" "}
of {totalRows} rows
);
};
export const Table3 = ({ columns, rows }) => {
const [pageNumber, setPageNumber] = useState(1);
const totalPages = Math.ceil(rows.length / pageSize);
const paginateArray = (array, pageSize, pageNumber) => {
return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
};
const goToPage = (page) => setPageNumber(page);
return (
<>
{columns.map((column, index) => (
{column}
))}
{paginateArray(rows, pageSize, pageNumber).map((row, index) => (
{row.map((control, index) => (
{control}
))}
))}
>
);
};
================================================
FILE: src/components/tables/Table3/Table3Example.css
================================================
.page.table-3-page {
background: #141414;
font-family: "SF Pro";
font-size: 14px;
overflow: hidden;
}
.table-3-page .card {
background: #1c1c1c;
border-radius: 8px;
width: 600px;
border: 1px solid #2d2d2d;
}
.table-3-page header {
display: flex;
margin-bottom: 16px;
}
.table-3-page header > h2 {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
font-size: 22px;
}
.table-3-page header > h2 > span {
font-size: 19px;
color: #626262;
}
.table-3-page button {
cursor: pointer;
background: #1c1c1c;
}
.table-3-page header > button {
border: 1px solid #2d2d2d;
color: #ffffff;
font-family: inherit;
border-radius: 6px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 44px;
margin-left: 16px;
font-size: 16px;
}
.table-3-page header > button.dropdown {
width: auto;
padding-right: 8px;
gap: 6px;
}
.table-3-switch input {
position: absolute;
scale: 0;
}
.table-3-switch-control {
position: relative;
display: block;
width: 42px;
height: 22px;
border-radius: 32px;
background: #191919;
border: 1px solid #2d2d2d;
cursor: pointer;
}
.table-3-switch input:checked ~ .table-3-switch-control {
background: #353535;
}
.table-3-switch input:checked ~ .table-3-switch-control::after {
translate: 20px 0;
}
.table-3-switch-control::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
height: 16px;
width: 16px;
background: #ffffff;
border-radius: inherit;
}
.table-3-checkbox input {
position: absolute;
scale: 0;
}
.table-3-checkbox-control {
position: relative;
display: block;
width: 20px;
height: 20px;
border-radius: 3px;
background: #191919;
border: 1px solid #2d2d2d;
cursor: pointer;
}
.table-3-checkbox input:checked ~ .table-3-checkbox-control {
background: #ffffff;
}
.table-3-checkbox input:checked ~ .table-3-checkbox-control::after {
opacity: 1;
}
.table-3-checkbox-control::after {
content: "";
position: absolute;
top: 2px;
left: 50%;
translate: -50% 0;
height: 8px;
width: 4px;
border-right: 3px solid #141414;
border-bottom: 3px solid #141414;
rotate: 45deg;
opacity: 0;
}
.table-3-id {
display: flex;
align-items: center;
gap: 8px;
}
.table-3-id-img-wrapper {
background: #353535;
display: grid;
place-items: center;
padding: 7px;
border-radius: 50%;
}
.table-3-id img {
width: 14px;
}
.table-3-status {
position: relative;
border: 1px solid #2d2d2d;
border-radius: 6px;
padding-left: 22px;
padding-right: 8px;
display: inline-flex;
align-items: center;
height: 24px;
font-size: 14px;
text-transform: capitalize;
}
.table-3-status::after {
content: "";
position: absolute;
top: 50%;
left: 8px;
width: 8px;
height: 8px;
border-radius: 3px;
translate: 0 -50%;
background: #ffffff;
}
.table-3-status.available::after {
background: #46ad7c;
}
.table-3-status.issue::after {
background: #f35a42;
}
.table-3-status.busy::after {
background: #fd9d27;
}
.table-3-progress {
position: relative;
display: inline-block;
background: #353535;
width: 100px;
height: 8px;
border-radius: 5px;
margin-right: 12px;
}
.table-3-progress::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--width);
border-radius: inherit;
background: #ffffff;
transition: 0.3s;
}
.page-3-id-header {
display: flex;
align-items: center;
}
.page-3-id-header span {
font-size: 18px;
margin-left: 4px;
}
================================================
FILE: src/components/tables/Table3/Table3Example.jsx
================================================
import { Table3 } from "./Table3";
import "./Table3Example.css";
import image from "./image.svg";
const Icon = ({ children }) => (
{children}
);
const columns = [
Vehicle ID arrow_downward
,
"progress",
"status",
"active",
"",
];
const Progress = ({ progress }) => (
<>
{progress}%
>
);
const Status = ({ status }) => (
{status}
);
export const Checkbox = ({ checked }) => (
);
const Id = ({ id }) => (
);
const Switch = ({ checked }) => (
);
const More = () => more_vert ;
const rows = [
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
[
,
,
,
,
,
,
],
];
export const Table3Example = () => {
return (
Reservations
info
Latest
keyboard_arrow_down
more_vert
);
};
================================================
FILE: src/components/tables/index.js
================================================
export * from "./Table1/Table1Example";
export * from "./Table2/Table2Example";
export * from "./Table3/Table3Example";
================================================
FILE: src/components/widgets/Widget1/Widget1.jsx
================================================
import { createRef, useEffect, useState } from "react";
import "./styles.css";
const buttonWidth = 56;
const tabWidth = 300;
const tabs = [
{
title: "Home",
icon: "home",
content:
"Some information inside the tab widget, that will auto resize it's height.",
},
{
title: "Settings",
icon: "settings",
content:
"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!",
},
{
title: "Account",
icon: "lock",
content:
"Some information inside the tab widget, that will auto resize it's height. This one has extra information so is a bit taller. ",
},
];
const WidgetHeader = ({ onClick, activeIndex }) => {
return (
{tabs.map((tab, index) => (
onClick(index)}
key={tab.title}
className={`material-symbols-outlined ${
activeIndex === index ? "active" : ""
}`}
>
{tab.icon}
))}
);
};
const WidgetTab = ({ tabRef, title, content }) => {
return (
);
};
export const Widget1 = () => {
const [activeIndex, setActiveIndex] = useState(0);
const [height, setHeight] = useState(140);
const [refs, setRefs] = useState([]);
const handleClick = (index) => {
setActiveIndex(index);
setHeight(refs[index].current.clientHeight);
};
useEffect(() => {
setRefs(tabs.map(() => createRef()));
}, []);
useEffect(() => {
if (!refs.length) return;
setHeight(refs[0].current.clientHeight);
}, [refs.length]);
return (
{tabs.map((tab, index) => (
))}
);
};
export const Widget1Example = () => (
);
================================================
FILE: src/components/widgets/Widget1/styles.css
================================================
:root {
--color-primary: #5644fd;
--tab-width: 300px;
--button-width: 56px;
}
.page.widget-1-page {
display: flex;
flex-direction: column;
justify-content: start;
padding-top: 260px;
font-family: "Euclid Circular A", "Poppins";
line-height: 1.5;
background: #24232b;
color: #f9f9f9;
}
.widget {
background: #18181d;
width: var(--tab-width);
border-radius: 8px;
}
.widget h2 {
margin: 0;
}
.widget > header {
position: relative;
display: flex;
border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.widget > header > button {
padding: 20px 0;
font-size: 15px;
width: var(--button-width);
cursor: pointer;
background: transparent;
color: rgb(255 255 255 / 50%);
display: grid;
place-items: center;
border: 0;
font-size: 22px;
transition: 0.5s;
}
.widget > header > button:not(.active) {
opacity: 0.7;
}
.widget > header > button:hover:not(.active) {
opacity: 1;
}
.widget > header > button.active {
color: var(--color-primary);
}
.widget .content {
position: relative;
overflow: hidden;
transition: 0.5s;
}
.widget .content-inner {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: start;
width: calc(var(--tab-width) * 3);
transition: 0.5s;
}
.widget .underline {
position: absolute;
left: 0;
bottom: 0;
width: var(--button-width);
height: 3px;
background: var(--color-primary);
transition: 0.2s;
}
.widget h2 {
margin: 0 0 10px;
font-size: 15px;
font-weight: 400;
}
.widget p {
margin: 0;
font-size: 13px;
opacity: 0.5;
}
.widget .content-inner > div {
width: inherit;
padding: 20px;
}
================================================
FILE: src/components/widgets/Widget2/Widget2.jsx
================================================
import { useState } from "react";
import "./styles.css";
const menuHeight = getComputedStyle(document.body).getPropertyValue(
"--widget-2-menu-height"
);
const items = [
{
name: "Home",
content:
"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.",
},
{
name: "Security",
icon: "Encrypted",
content:
"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.",
},
{
name: "Stacks",
content:
"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.",
},
{
name: "Settings",
content:
"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.",
},
];
export const Widget2 = () => {
const [activeBlock, setActiveBlock] = useState(0);
const toggleMenuBlock = (index) => setActiveBlock(index);
return (
{items.map((item, index) => (
toggleMenuBlock(index)}
>
{item.icon || item.name}
{item.name}
))}
{items.map((item) => (
{item.name}
{item.content}
))}
);
};
================================================
FILE: src/components/widgets/Widget2/styles.css
================================================
:root {
--widget-2-color-primary: #195adc;
--widget-2-sidebar-width: 130px;
--widget-2-menu-height: 200px;
}
.page.widget-2-page {
margin: 0;
display: grid;
place-items: center;
background: linear-gradient(-135deg, var(--widget-2-color-primary), #0f3278);
color: #f0f5ff;
}
.widget-2-card {
display: flex;
padding: 0 20px;
width: 440px;
height: var(--widget-2-menu-height);
border-radius: 10px;
background: #101115;
box-shadow: 0 20px 30px rgba(57, 76, 96, 0.06);
}
.widget-2-card .buttons {
padding-top: 20px;
width: var(--widget-2-sidebar-width);
}
.widget-2-card .buttons button {
margin: 0;
font-size: 14px;
width: 100%;
height: 40px;
padding: 0 0 0 12px;
background: transparent;
border-radius: 6px;
border: 0;
display: flex;
gap: 8px;
align-items: center;
font-weight: 400;
font-family: inherit;
cursor: pointer;
color: inherit;
}
.widget-2-card .buttons button:focus {
outline-color: var(--widget-2-color-primary);
outline-offset: 0;
}
.widget-2-card .buttons button:hover {
background-color: rgb(255 255 255 / 4%);
}
.widget-2-card .buttons button span {
font-size: 16px;
}
.widget-2-card .buttons button.active {
background: var(--widget-2-color-primary);
color: #f9f9f9;
}
.widget-2-card .wrapper {
position: relative;
overflow: hidden;
flex: 1 1 auto;
}
.widget-2-card .wrapper::before,
.widget-2-card .wrapper::after {
content: "";
position: absolute;
z-index: 2;
left: 0;
width: 100%;
height: 36px;
}
.widget-2-card .wrapper::before {
top: 0;
background: linear-gradient(#101115, rgb(24 24 29 / 0%));
}
.widget-2-card .wrapper::after {
bottom: 0;
background: linear-gradient(rgb(24 24 29 / 0%), #101115);
}
.widget-2-card .content {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: calc(var(--widget-2-menu-height) * 3);
transition: 0.6s;
}
.widget-2-card .content p {
display: flex;
align-items: center;
line-height: 1.6;
font-size: 13px;
margin: 0;
opacity: 0.5;
}
.widget-2-card .block {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
height: var(--widget-2-menu-height);
}
.widget-2-card .block h2 {
margin: 0 0 6px;
font-size: 18px;
font-weight: 400;
}
================================================
FILE: src/components/widgets/index.js
================================================
export * from "./Widget1/Widget1";
export * from "./Widget2/Widget2";
================================================
FILE: src/index.css
================================================
body {
margin: 0;
/* background: #6a8faa; */
color: #f9f9f9;
background: #2b2a2f;
font-family: "Euclid Circular B", "Poppins";
overflow: hidden;
}
* {
box-sizing: border-box;
}
.page {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
}
================================================
FILE: src/main.jsx
================================================
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
,
)
================================================
FILE: src/routes.jsx
================================================
import {
AutoSuggestExample,
Card1,
Card2Example,
Card3Example,
Card4Example,
Card5Example,
Card6Example,
Card7Example,
Carousel1,
Carousel2,
Carousel3,
DeleteButton,
Dropdown1Example,
Dropdown2Example,
Dropdown3,
Dropdown4Example,
Dropdown5Example,
Dropdown6Example,
Dropdown7,
EditableTitleExample,
FabButton,
Accordion1Example,
Accordion2Example,
Accordion3Example,
Login1,
Login2,
Login3,
Login4,
Login5,
Login6,
Modal1,
Modal2Example,
Navbar1,
Navbar2,
Navbar3,
Navbar4,
Parallax1,
Parallax2,
PasswordStrengthExample,
PasswordStrength2Example,
PasswordStrength3Example,
PasswordStrength4Example,
PasswordVisibilityExample,
RcSlider,
ReactDropzone,
ReactXarrows,
ScrollReveal,
Sidebar1,
Sidebar2,
Sidebar3,
Sidebar4,
Sidebar5,
Sidebar6,
Sidebar7,
Sidebar8,
Sidebar9,
Sidebar10,
Sidebar11,
Sidebar12,
Sidebar13,
Sidebar14,
Sidebar15,
Signup1,
SliderExample,
Table1Example,
Table2Example,
Table3Example,
TrashButton,
TypedMessageExample,
Widget1Example,
Widget2,
} from "./components";
export const routes = [
{
name: "DeleteButton",
path: "/buttons/delete-button",
element: ,
},
{
name: "TrashButton",
path: "/buttons/trash-button",
element: ,
},
{
name: "Sidebar1",
path: "/sidebars/sidebar-1",
element: ,
},
{
name: "Controls - PasswordStrength",
path: "/controls/password-strength",
element: ,
},
{
name: "ScrollReveal",
path: "/gsap/scroll-reveal",
element: ,
},
{
name: "Accordion1",
path: "/accordions/accordion-1",
element: ,
},
{
name: "Accordion2",
path: "/accordions/accordion-2",
element: ,
},
{
name: "Login1",
path: "/logins/login-1",
element: ,
},
{
name: "Sidebar2",
path: "/sidebars/sidebar-2",
element: ,
},
{
name: "Card1",
path: "/cards/card-1",
element: ,
},
{
name: "Modal1",
path: "/modals/modal-1",
element: ,
},
{
name: "Parallax1",
path: "/parallax/parallax-1",
element: ,
},
{
name: "Dropdown1",
path: "/dropdowns/dropdown-1",
element: ,
},
{
name: "Widget1",
path: "/widgets/widget-1",
element: ,
},
{
name: "Controls - AutoSuggest",
path: "/controls/auto-suggest",
element: ,
},
{
name: "Sidebar3",
path: "/sidebars/sidebar-3",
element: ,
},
{
name: "Carousel1",
path: "/carousels/carousel-1",
element: ,
},
{
name: "RcSlider",
path: "/libraries/rc-slider",
element: ,
},
{
name: "Modal2",
path: "/modals/modal-2",
element: ,
},
{
name: "Navbar1",
path: "/navbars/navbar-1",
element: ,
},
{
name: "Card2",
path: "/cards/card-2",
element: ,
},
{
name: "Sidebar4",
path: "/sidebars/sidebar-4",
element: ,
},
{
name: "Carousel2",
path: "/carousels/carousel-2",
element: ,
},
{
name: "Table1",
path: "/tables/table-1",
element: ,
},
{
name: "Sidebar5",
path: "/sidebars/sidebar-5",
element: ,
},
{
name: "Widget2",
path: "/widgets/widget-2",
element: ,
},
{
name: "Navbar2",
path: "/navbars/navbar-2",
element: ,
},
{
name: "Dropdown2",
path: "/dropdowns/dropdown-2",
element: ,
},
{
name: "Sidebar6",
path: "/sidebars/sidebar-6",
element: ,
},
{
name: "Sidebar7",
path: "/sidebars/sidebar-7",
element: ,
},
{
name: "ReactDropzone",
path: "/libraries/react-dropzone",
element: ,
},
{
name: "Dropdown3",
path: "/dropdowns/dropdown-3",
element: ,
},
{
name: "Table2",
path: "/tables/table-2",
element: ,
},
{
name: "Navbar3",
path: "/navbars/navbar-3",
element: ,
},
{
name: "FabButton",
path: "/button/fab-button",
element: ,
},
{
name: "Controls - PasswordVisibility",
path: "/controls/password-visibility",
element: ,
},
{
name: "Table3",
path: "/tables/table-3",
element: ,
},
{
name: "Dropdown4",
path: "/dropdowns/dropdown-4",
element: ,
},
{
name: "Sidebar8",
path: "/sidebars/sidebar-8",
element: ,
},
{
name: "ReactXarrows",
path: "/libraries/react-xarrows",
element: ,
},
{
name: "GSAP - TypedMessage",
path: "/gsap/typed-message",
element: ,
},
{
name: "Card3",
path: "/cards/card-3",
element: ,
},
{
name: "Controls - EditableText",
path: "/controls/editable-text",
element: ,
},
{
name: "Sidebar9",
path: "/sidebars/sidebar-9",
element: ,
},
{
name: "Sidebar10",
path: "/sidebars/sidebar-10",
element: ,
},
{
name: "Controls - Slider",
path: "/controls/slider",
element: ,
},
{
name: "Carousel3",
path: "/carousels/carousel-3",
element: ,
},
{
name: "Card4",
path: "/cards/card-4",
element: ,
},
{
name: "Parallax2",
path: "/parallax/parallax-2",
element: ,
},
{
name: "Dropdown5",
path: "/dropdown/dropdown-5",
element: ,
},
{
name: "Controls - PasswordStrength2",
path: "/controls/password-strength-2",
element: ,
},
{
name: "Accordion3",
path: "/accordions/accordion-3",
element: ,
},
{
name: "Sidebar11",
path: "/sidebars/sidebar-11",
element: ,
},
{
name: "Card5",
path: "/cards/card-5",
element: ,
},
{
name: "Login2",
path: "/logins/login-2",
element: ,
},
{
name: "Card6",
path: "/cards/card-6",
element: ,
},
{
name: "Dropdown6",
path: "/dropdowns/dropdown-6",
element: ,
},
{
name: "Sidebar12",
path: "/sidebars/sidebar-12",
element: ,
},
{
name: "Login3",
path: "/logins/login-3",
element: ,
},
{
name: "Sidebar13",
path: "/sidebars/sidebar-13",
element: ,
},
{
name: "Sidebar14",
path: "/sidebars/sidebar-14",
element: ,
},
{
name: "Navbar4",
path: "/navbars/navbar-4",
element: ,
},
{
name: "Sidebar15",
path: "/sidebars/sidebars-15",
element: ,
},
{
name: "Login4",
path: "/logins/login-4",
element: ,
},
{
name: "Signup1",
path: "/signup/signup-1",
element: ,
},
{
name: "Card7",
path: "/cards/card-7",
element: ,
},
{
name: "Controls - PasswordStrength3",
path: "/controls/password-strength-3",
element: ,
},
{
name: "Controls - PasswordStrength4",
path: "/controls/password-strength-4",
element: ,
},
{
name: "Dropdown7",
path: "/dropdowns/dropdown-7",
element: ,
},
{
name: "Login5",
path: "/logins/login-5",
element: ,
},
{
name: "Login6",
path: "/logins/login-6",
element: ,
},
];
================================================
FILE: vite.config.js
================================================
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})