Showing preview only (406K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Components</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://cdn.lineicons.com/5.0/lineicons.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<!-- <link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
/> -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://unpkg.com/akar-icons-fonts"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
></script>
</body>
</html>
================================================
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: <Layout />,
},
...routes,
]);
function App() {
return <RouterProvider router={router} />;
}
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 (
<main className="layout">
<header className="layout-header">
<div className="content">
<h2>
{/* <i className="fa-solid fa-code" /> */}
React Components
</h2>
<button type="button">
<i
className="fa-solid fa-gear"
style={{
fontSize: "12.5px",
translate: "0 1px",
marginRight: "1px",
}}
></i>
Settings
<i className="fa-solid fa-angle-down"></i>
</button>
</div>
</header>
<div className="layout-card">
<div className="layout-table-wrapper">
<table className="layout-table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{sortedRoutes.map((route) => (
<tr onClick={() => navigate(route.path)} key={route.path}>
<td>
<Link to={route.path}>{route.name}</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</main>
);
};
================================================
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 (
<section className=" page image-accordion-page">
<div
className="bg"
style={{ backgroundImage: `url(${items[active].image}` }}
/>
<div className="image-accordion">
{items.map((item, index) => {
const isActive = active === index ? "active" : "";
return (
<div
key={item.image}
className={`image-accordion-item ${isActive}`}
onClick={() => handleToggle(index)}
>
<img src={item.image} />
<div className="content">
<span className="material-symbols-outlined">photo_camera</span>
<div>
<h2>{item.header}</h2>
<p>{item.text}</p>
</div>
</div>
</div>
);
})}
</div>
</section>
);
};
================================================
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 = () => <Accordion1 items={coolImages} />;
================================================
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 (
<li className="accordion-2-item">
<h2
className={active === index ? "active" : ""}
onClick={() => handleToggle(index)}
>
{header}
<span className="material-symbols-outlined">expand_more</span>
</h2>
<div
ref={contentEl}
className="accordion-2-content"
style={
active === index
? { height: contentEl?.current?.scrollHeight }
: { height: 0 }
}
>
<p>{content}</p>
</div>
</li>
);
};
export const Accordion2 = ({ items }) => {
const [active, setActive] = useState(null);
const handleToggle = (index) => setActive(active === index ? null : index);
return (
<ul className="accordion-2">
{items.map((item, index) => {
return (
<AccordionItem
key={index}
index={index}
active={active}
handleToggle={handleToggle}
item={item}
/>
);
})}
</ul>
);
};
================================================
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: (
<div className="accordion-2-header">
<span class="material-symbols-outlined">mail</span> Delivery
</div>
),
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: (
<div className="accordion-2-header">
<span class="material-symbols-outlined">credit_card</span> Returns &
Refunds
</div>
),
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: (
<div className="accordion-2-header">
<span class="material-symbols-outlined">warning</span> Order Issues
</div>
),
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: (
<div className="accordion-2-header">
<span class="material-symbols-outlined">package_2</span> Products &
Stock
</div>
),
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 = () => (
<section className="page accordion-2-page">
<div className="accordion-2-card">
<Accordion2 items={faqs} />
</div>
</section>
);
================================================
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 (
<section className="page accordion-3-page">
<div
className="bg"
style={{ backgroundImage: `url(${items[active].image}` }}
/>
<div className="accordion-3">
{items.map((item, index) => {
const isActive = active === index ? "active" : "";
return (
<div
key={item.image}
className={`accordion-3-item ${isActive}`}
onClick={() => handleToggle(index)}
>
<img src={item.image} />
<div className="content">
<span className="icon material-symbols-outlined">
photo_camera
</span>
<div>
<h2>{item.header}</h2>
<p>{item.text}</p>
</div>
</div>
</div>
);
})}
</div>
</section>
);
};
================================================
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 = () => <Accordion3 items={coolImages} />;
================================================
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 (
<div className="page delete-button-page">
<button
onClick={handleClick}
className={`delete-button ${isDeleting || isDeleted ? "deleting" : ""}`}
disabled={isDeleting || isDeleted}
>
<span className="button-text">
{isDeleting || isDeleted ? "Deleting" : "Delete"}
</span>
<span className="animation">
<span className="balls"></span>
<span className="lid"></span>
<span className="can">
<span className="filler"></span>
</span>
</span>
</button>
</div>
);
};
================================================
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 }) => (
<span className="material-symbols-outlined">{children}</span>
);
export const FabButton = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<section className="page fab-button-page">
<div className={`fab ${isOpen ? "open" : ""}`}>
<button onClick={() => setIsOpen(!isOpen)}>
<Icon>add</Icon>
</button>
<div className="fab-menu">
<button>
<Icon>favorite</Icon>
</button>
<button>
<Icon>sell</Icon>
</button>
<button>
<Icon>settings</Icon>
</button>
</div>
</div>
</section>
);
};
================================================
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 (
<div className="page trash-button-page">
<button
onClick={handleClick}
className={`trash-button ${isDeleting ? "deleting" : ""}`}
disabled={isDeleting}
>
<span className="loader"></span>
<span className="button-text">Delete</span>
<span className="animation">
<span className="paper-wrapper">
<img src={paper} className="paper" />
</span>
<span className="shredded-wrapper">
<img src={shredded} className="shredded" />
</span>
<span className="lid"></span>
<span className="can">
<span className="filler"></span>
</span>
</span>
</button>
</div>
);
};
================================================
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 (
<section className="page card-1-page">
<div className="cards">
{cards.map((card) => (
<label id={card.name}>
<input type="checkbox" />
<div className="card">
<div className="front">
<header>
<h2>{card.name}</h2>
<span className="material-symbols-outlined"> more_vert </span>
</header>
<var>{card.total}</var>
<h3>{card.description}</h3>
<h4>{card.footer}</h4>
</div>
<div className="back">
<header>
<h2>{card.name}</h2>
<span className="material-symbols-outlined"> close </span>
</header>
<p>More Information</p>
</div>
</div>
</label>
))}
</div>
</section>
);
};
================================================
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,
}) => (
<div className="card-2">
<img src={image} />
<div>
<h2>{title}</h2>
<h3>{subtitle}</h3>
<p>{description}</p>
<div className="buttons">
<button onClick={onProfile}>Profile</button>
<button onClick={onFollow} className="primary">
Follow
</button>
</div>
</div>
</div>
);
================================================
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 (
<section className="page card-2-example-page">
<Card2
image={image}
title="Jess Wilson"
subtitle="UX Engineer"
description="Empowering users through captivating interfaces, turning ideas into pixel-perfect realities."
onProfile={handleProfile}
onFollow={handleFollow}
/>
</section>
);
};
================================================
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,
}) => (
<div class="card-3">
<img src={logo} />
<div class="main">
<h2>{company}</h2>
<h3>{level}</h3>
<h4>{role}</h4>
<h5>
{location} {isRemote && <em>(Remote)</em>}
</h5>
</div>
<div class="details">
<span class="salary">
{" "}
{salary}
<em>/month</em>{" "}
</span>
<span class="date">{when}</span>
</div>
<div class="footer">
<div class="badge">
<img src={avatar} />
<p>
<em> {profileMatch}% </em>
<span class="text"> profile match</span>
</p>
</div>
<button onClick={onShare}>
<span class="material-symbols-outlined"> share </span>
</button>
<button onClick={onSave}>
<span class="material-symbols-outlined"> bookmark </span>
</button>
</div>
</div>
);
================================================
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 (
<section className="page card-3-page">
<Card3
company="Google"
isRemote
level="Junior"
location="Florida, US"
onSave={onSave}
onShare={onShare}
profileMatch={64}
role="AI Engineer"
salary="10k"
when="3 hours ago"
/>
</section>
);
};
================================================
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 }) => (
<div className="card-4">
<img src={image} />
<div className="card-4-content">
<h2>{name}</h2>
<h3>{role}</h3>
<p>{bio}</p>
<div className="card-4-socials">
{socials.map((social) => (
<button key={social} onClick={() => onSocialClick(social)}>
<i className={`fa-brands fa-${social}`}></i>
</button>
))}
</div>
</div>
</div>
);
================================================
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 (
<section className="page card-4-page">
<Card4
name="Karen Smith"
role="Prompt Engineer"
bio="Turning ideas into the real thing, making interfaces that proper inspire and keep folks buzzing."
socials={socials}
onSocialClck={handleSocialClick}
/>
</section>
);
};
================================================
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 (
<div className="card-5">
<div className="card-5-header">
<h2>{title}</h2>
<Dropdown items={days} selectedItem={day} onSelect={handleDayChanged} />
</div>
<div className="card-5-chart">
<div className="card-5-chart-y-axis">
{yValues.map((v) => (
<label>{v} g</label>
))}
</div>
<div className="card-5-chart-bars">
{activeData.values.map((v) => (
<div className="card-5-chart-bar-wrapper">
<div
className="card-5-chart-bar"
style={{ height: `${v.value / 1.675}px` }}
></div>
<label>{v.name}</label>
<div className="card-5-chart-tooltip">
<h3>Energy</h3>
<var>{v.energy} kcal</var>
</div>
</div>
))}
</div>
</div>
</div>
);
};
================================================
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 = () => (
<section className="page card-5-page">
<Card5 title="Food balance" />
</section>
);
================================================
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 (
<div className="card-5-dropdown">
<button type="button" onClick={() => setIsOpen(!isOpen)}>
{selectedItem}
<i class="ai-chevron-down"></i>
</button>
<div className={`card-5-menu ${isOpen ? "open" : ""}`}>
{items.map((item) => (
<button
className={selectedItem === item ? "active" : ""}
type="button"
onClick={() => handleSelect(item)}
>
{item}
</button>
))}
</div>
</div>
);
};
================================================
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 (
<div className="card-6">
<div className="card-6-hero">
<img src={img} />
<button className="share-btn">
<i className="ai-share-box"></i>
</button>
</div>
<div className="card-6-content">
<div>
<h2>{name}</h2>
<h3>{role}</h3>
<ul className="tags">
{tags.map((tag) => (
<li key={tag}>{tag}</li>
))}
</ul>
</div>
<ul className="stats">
{stats.map((stat, index) => (
<li key={index}>{stat}</li>
))}
</ul>
<div className="actions">
<button className="contact-btn">Get in touch</button>
<button className="save-btn">
<i className="ai-ribbon" />
</button>
</div>
</div>
</div>
);
};
================================================
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 = () => <var className="card-6-rating">4.58</var>;
const stats = [
<>
<Rating />
<label>Rating</label>
</>,
<>
<var>$15k</var>
<label>Earned</label>
</>,
<>
<var>32h</var>
<label>Hours</label>
</>,
];
export const Card6Example = () => (
<section className="page card-6-page">
<Card6
name="Kai Harris"
role="Product designer"
img={avatar}
tags={tags}
stats={stats}
/>
</section>
);
================================================
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 (
<div className="card-7">
<img src={image} />
<div>
<h2>{name}</h2>
<h3>{role}</h3>
<p>{bio}</p>
<div className="socials">
{socials.map((social) => (
<button>
<i className={`fa-brands fa-${social}`}></i>
</button>
))}
</div>
</div>
</div>
);
};
================================================
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 = () => (
<section className="page card-7-page">
<Card7
name="Jill Scott"
role="UX Designer"
image={image}
bio="Transforming ideas into realities, creating interfaces that inspire
and engage users dreams."
socials={socials}
/>
</section>
);
================================================
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 (
<section className="page carousel-1-page">
<Swiper
grabCursor
centeredSlides
slidesPerView={2}
effect="coverflow"
loop
pagination={{ clickable: true }}
coverflowEffect={{
rotate: 0,
stretch: 0,
depth: 100,
modifier: 3,
slideShadows: true,
}}
modules={[Pagination, EffectCoverflow]}
>
{slides.map((slide) => (
<SwiperSlide
key={slide.title}
style={{
backgroundImage: `url(${slide.image})`,
}}
>
<div>
<div>
<h2>{slide.title}</h2>
<a>explore</a>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</section>
);
};
================================================
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 (
<section className="page carousel-2-page">
<Swiper
grabCursor
centeredSlides
slidesPerView="auto"
effect="coverflow"
loop
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
}}
modules={[EffectCoverflow]}
>
<div className="swiper-wrapper">
{slides.map((slide) => (
<SwiperSlide
key={slide}
style={{
backgroundImage: `url(${slide})`,
}}
/>
))}
</div>
<div className="swiper-pagination"></div>
</Swiper>
</section>
);
};
================================================
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 (
<section className="page carousel-3-page">
<Swiper
grabCursor
centeredSlides
slidesPerView={3}
speed={600}
effect="coverflow"
loop
loopAdditionalSlides
mousewheel
pagination={{ clickable: true }}
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
}}
modules={[EffectCoverflow, Pagination]}
>
<div className="swiper-wrapper">
{slides.map((slide) => (
<SwiperSlide
key={slide.name}
style={{
backgroundImage: `url(${slide.src})`,
}}
>
<div>
<h2>{slide.name}</h2>
<a>explore</a>
</div>
</SwiperSlide>
))}
</div>
<div className="swiper-pagination"></div>
</Swiper>
</section>
);
};
================================================
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 = () => <img src={logo} />;
const Footer = () => (
<>
<div className="auto-suggest-buttons">
<button>Joegle Search</button>
<button>I'm Feeling Lucky</button>
</div>
<p>
<a>Shop final Black Friday device deals</a> on the Joegle Store today.
</p>
</>
);
const AutoSuggest = ({ onSearch, results, search }) => (
<div className="auto-suggest">
<span className="material-symbols-outlined">search</span>
<input value={search} spellCheck={false} type="text" onInput={onSearch} />
<div className="menu">
<div>
{results.map((name) => (
<button key={name}>{name}</button>
))}
</div>
</div>
</div>
);
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 (
<section className="page auto-suggest-page">
<Header />
<AutoSuggest search={search} onSearch={handleSearch} results={results} />
<Footer />
</section>
);
};
================================================
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 }) => (
<button onClick={onClick} type="button">
<span className="material-symbols-outlined">{children}</span>
</button>
);
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 (
<span className={`editable-text ${className}`}>
<span
className={`editable-text-value ${isEditing ? "is-editing" : ""}`}
contentEditable={isEditing}
defaultValue={defaultValue}
ref={spanRef}
name={name}
onInput={handleChange}
suppressContentEditableWarning
>
{defaultValue}
</span>
<span className="editable-text-buttons">
{isEditing ? (
<>
<IconButton onClick={handleSave}>check_circle</IconButton>
<IconButton onClick={toggleIsEditing}>cancel</IconButton>
</>
) : (
<IconButton onClick={toggleIsEditing}>edit</IconButton>
)}
</span>
</span>
);
};
================================================
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 (
<section className="page editable-text-page">
<div className="editable-text-card">
<img src={image} />
<div>
<EditableText
className="editable-text-card-title"
name="title"
defaultValue={title}
onSave={handleSave}
/>
<EditableText
className="editable-text-card-role"
name="role"
defaultValue={role}
onSave={handleSave}
/>
<p>
Transforming ideas into realities, creating interfaces that inspire
and engage users dreams.
</p>
<div className="editable-text-socials">
<button>
<i className="fa-brands fa-dribbble"></i>
</button>
<button>
<i className="fa-brands fa-pinterest"></i>
</button>
<button>
<i className="fa-brands fa-codepen"></i>
</button>
</div>
</div>
</div>
</section>
);
};
================================================
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 (
<>
<input
name="password"
spellCheck="false"
className="control"
type="password"
placeholder={placeholder}
onChange={handleChange}
/>
<div className={`bars ${strength}`}>
<div></div>
</div>
<div className="strength">{strength && `${strength} password`}</div>
</>
);
};
export const PasswordStrengthExample = () => {
const handleChange = (value) => console.log(value);
return (
<div className="page password-strength-page">
<div className="login-card">
<img src={logo} />
<h2>Sign Up</h2>
<form className="login-form">
<div className="username">
<input
autoComplete="off"
spellCheck="false"
className="control"
type="email"
placeholder="Email"
defaultValue="joe@gmail.com"
/>
<div id="spinner" className="spinner"></div>
</div>
<PasswordStrength placeholder="Password" onChange={handleChange} />
<button className="control" type="button">
Join Now
</button>
</form>
</div>
</div>
);
};
================================================
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 (
<>
<div className="textbox">
<input
name="password"
spellCheck="false"
className="password-strength"
type="password"
onChange={handleChange}
/>
<label>{placeholder}</label>
</div>
<div>
<div className={`bars ${strength}`}>
<div></div>
</div>
<div className="strength">{strength && `${strength} password`}</div>
</div>
</>
);
};
export const PasswordStrength2Example = () => {
const handleChange = (value) => console.log(value);
return (
<section className="page password-strength-2-page">
<img src={blob} className="blob" />
<div className="orbit"></div>
<div className="card">
<img src={logo} />
<h2>Welcome to Lockr!</h2>
<h3>We keep your data locked!</h3>
<form>
<div className="textbox">
<input required type="text" />
<label>Email</label>
</div>
<PasswordStrength placeholder="Password" onChange={handleChange} />
<button type="submit">Sign Up</button>
</form>
<a>Privacy Policy</a>
<p className="footer">
Already have an account? <a>Login!</a>
</p>
</div>
</section>
);
};
================================================
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 (
<>
<div className="textbox">
<input
name="password"
spellCheck="false"
className="password-strength"
type="password"
onChange={handleChange}
/>
<label>{placeholder}</label>
</div>
<div>
<div className={`bars ${strength}`}>
<div></div>
</div>
<div className="strength">{strength && `${strength} password`}</div>
</div>
</>
);
};
export const PasswordStrength3Example = () => {
const handleChange = (value) => console.log(value);
return (
<section className="page password-strength-2-page">
<img src={blob} className="blob" />
<div className="orbit"></div>
<div className="card">
<img src={logo} />
<h2>Welcome to Lockr!</h2>
<h3>We keep your data locked!</h3>
<form>
<div className="textbox">
<input required type="text" />
<label>Email</label>
</div>
<PasswordStrength placeholder="Password" onChange={handleChange} />
<button type="submit">Sign Up</button>
</form>
<a>Privacy Policy</a>
<p className="footer">
Already have an account? <a>Login!</a>
</p>
</div>
</section>
);
};
================================================
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 = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
);
const EyeOffIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
<line x1="2" x2="22" y1="2" y2="22" />
</svg>
);
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 (
<>
<div className="textbox">
<input
id={id}
name="password"
spellCheck="false"
className="password-strength"
type={visible ? "text" : "password"}
onChange={handleChange}
required
/>
<label htmlFor={id}>{placeholder}</label>
<button
type="button"
className="toggle-visibility"
aria-label={visible ? "Hide password" : "Show password"}
onClick={() => setVisible((v) => !v)}
>
{visible ? <EyeOffIcon /> : <EyeIcon />}
</button>
</div>
<div>
<div className={`bars ${strength}`}>
<div></div>
</div>
<div className="strength">{strength && `${strength} password`}</div>
</div>
</>
);
};
export const PasswordStrength4Example = () => {
const handleChange = (value) => console.log(value);
return (
<section className="page password-strength-4-page">
<img src={blob} className="blob" alt="" />
<div className="orbit" aria-hidden="true"></div>
<div className="card">
<img src={logo} alt="Lockr logo" />
<h2>Cube.ai</h2>
<form>
<div className="textbox">
<input id="ps4-email" required type="email" autoComplete="email" />
<label htmlFor="ps4-email">Email</label>
</div>
<PasswordStrength
id="ps4-password"
placeholder="Password"
onChange={handleChange}
/>
<button type="submit">Sign Up</button>
</form>
<p className="footer">
Already have an account? <a href="#">Login!</a>
</p>
</div>
</section>
);
};
================================================
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 }) => (
<span className="material-symbols-outlined">{children}</span>
);
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 (
<div className="password-control">
<input
onInput={handleInput}
type={showPassword ? "text" : "password"}
required
/>
<label>{name}</label>
<Icon>lock</Icon>
<button type="button" onMouseDown={handleMouseDown}>
<Icon>{showPassword ? "visibility_off" : "visibility"}</Icon>
</button>
<div className="border" />
</div>
);
};
================================================
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 (
<section className="page password-visibility-page">
<img className="password-visibility-clouds" src={bg} />
<div className="password-visibility">
<h2>Login</h2>
<h3>Welcome back Jack!</h3>
<form>
<Password onInput={handleInput} name="password" />
<button disabled={!state.password.length}>
Login
<Icon>arrow_forward</Icon>
</button>
</form>
</div>
</section>
);
};
================================================
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 (
<div className="slider-wrapper">
<label className="slider-label" htmlFor={id}>
{label}
</label>
<div className="slider">
<input
id={id}
type="range"
min={min}
max={max}
value={Number(value) || 0}
onInput={onInput}
/>
<div className="track"></div>
<div className="markers">
{MARKERS.map((marker) => (
<div
key={marker}
className={`marker ${
marker <= Number(value) ? "marker-active" : ""
}`}
style={{ "--left": `${marker}%` }}
></div>
))}
</div>
<div className="bar" style={{ width: barWidth }}></div>
</div>
<div className="numeric-input-wrapper">
<input
type="text"
className="numeric-input"
value={value}
onInput={onInput}
maxLength={3}
/>
<span className="numeric-input-suffix"> % </span>
</div>
</div>
);
};
================================================
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 = () => (
<section className="page slider-page">
<Slider id="my-slider" label="Amount" min={0} max={100} initialValue="50" />
</section>
);
================================================
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 (
<button onClick={() => (onClick ? onClick(index, subMenuHeight) : null)}>
<span className="material-symbols-outlined">{icon || name}</span>
{name}
{hasSubItems && (
<span className="chevron material-symbols-outlined">chevron_right</span>
)}
</button>
);
};
const MenuItem = ({ name, icon, index, activeSubMenu, subItems, onClick }) => {
const subMenuRef = useRef();
const isActive = activeSubMenu === index;
return (
<>
<MenuButton
onClick={subItems ? onClick : () => null}
name={name}
icon={icon || name}
index={index}
hasSubItems={Boolean(subItems)}
subMenuHeight={subMenuRef.current?.clientHeight}
/>
{subItems?.length && (
<div ref={subMenuRef} className={`sub-menu ${isActive ? "open" : ""}`}>
<>
<MenuButton onClick={onClick} icon="arrow_back" name={name} />
{subItems.map((subItem) => (
<MenuButton key={subItem} name={subItem} />
))}
</>
</div>
)}
</>
);
};
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 (
<div className={`dropdown-1 ${isOpen ? "open" : ""}`}>
<button onClick={() => setIsOpen(!isOpen)}>
<span className="material-symbols-outlined"> account_circle </span>
Joe Harrison
<span className="chevron material-symbols-outlined"> expand_more </span>
</button>
<div
style={{ height: `${subMenuHeight || 168}px` }}
className="dropdown-1-menu"
>
<div className={`menu-inner ${isSubMenuOpen ? "open" : ""}`}>
<div className="main-menu">
{items.map((item, index) => (
<MenuItem
key={item.name}
name={item.displayName || item.name}
icon={item.name}
index={index}
activeSubMenu={activeSubMenu}
onClick={handleClick}
subItems={item.subItems}
/>
))}
</div>
</div>
</div>
</div>
);
};
================================================
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 (
<section className="page dropdown-1-page">
<nav className="dropdown-1-nav">
<span className="material-symbols-outlined">menu</span>
<h1>Dashboard</h1>
<Dropdown1 items={items} />
</nav>
</section>
);
};
================================================
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 }) => (
<div
onClick={onClick}
className={`dropdown-2-overlay ${isOpen ? "open" : ""}`}
></div>
);
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 (
<div
ref={menuRef}
className={`dropdown-2-menu ${isOpen ? "open" : ""}`}
style={{ top, left }}
>
<button>
<img src={joe} />
<span>Account</span>
</button>
<button>
<span></span>
<span>Search</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1794px" }}></span>
<span>Maps</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -3174px" }}></span>
<span>YouTube</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -897px" }}></span>
<span>Play</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -414px" }}></span>
<span>News</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -2415px" }}></span>
<span>Gmail</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1104px" }}></span>
<span>Meet</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -69px" }}></span>
<span>Chat</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1449px" }}></span>
<span>Contacts</span>
</button>
<button>
<span style={{ backgroundPosition: "0 0" }}></span>
<span>Drive</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -759px" }}></span>
<span>Calendar</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -2346px" }}></span>
<span>Translate</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -966px" }}></span>
<span>Photos</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -2070px" }}></span>
<span>Ad Centre</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1932px" }}></span>
<span>Shopping</span>
</button>
</div>
);
};
export const Dropdown2 = () => {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null);
return (
<div ref={dropdownRef} className={`dropdown-2 ${isOpen ? "open" : ""}`}>
<button
className="material-symbols-outlined"
onClick={() => setIsOpen(true)}
>
apps
</button>
{createPortal(
<Overlay isOpen={isOpen} onClick={() => setIsOpen(false)} />,
document.body
)}
{createPortal(
<Menu isOpen={isOpen} dropdownRef={dropdownRef} />,
document.body
)}
</div>
);
};
================================================
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 (
<section className="page dropdown-2-page">
<nav className="dropdown-2-nav">
<div className="logo">
<span className="material-symbols-outlined"> menu </span>
<img src={logo} />
<h2>Joemail</h2>
</div>
<div className="nav-right">
<span className="material-symbols-outlined"> help </span>
<span className="material-symbols-outlined"> settings </span>
<Dropdown2 />
<img src={joe} />
</div>
</nav>
</section>
);
};
================================================
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 }) => (
<span className={`${className} material-symbols-outlined`}>{icon}</span>
);
const MenuButton = ({
name,
icon,
index,
hasSubItems,
subMenuHeight,
onClick,
}) => {
return (
<button onClick={() => (onClick ? onClick(index, subMenuHeight) : null)}>
<Icon icon={icon || name} />
{name}
{hasSubItems && <Icon icon="chevron_right" className="chevron" />}
</button>
);
};
const MenuItem = ({ name, index, activeSubMenu, subItems, onClick }) => {
const subMenuRef = useRef(null);
const isActive = activeSubMenu === index;
return (
<>
<MenuButton
onClick={subItems ? onClick : () => null}
name={name}
index={index}
hasSubItems={Boolean(subItems)}
subMenuHeight={subMenuRef.current?.clientHeight}
/>
{subItems?.length && (
<div ref={subMenuRef} className={`sub-menu ${isActive ? "open" : ""}`}>
<>
<MenuButton onClick={onClick} icon="arrow_back" name={name} />
{subItems.map((subItem) => (
<MenuButton key={subItem} name={subItem} />
))}
</>
</div>
)}
</>
);
};
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 (
<section className="page dropdown-3-page">
<div
style={{ translate: "0 -50px" }}
className={`dropdown-3 ${isOpen ? "open" : ""}`}
>
<button onClick={() => setIsOpen(!isOpen)}>
<Icon icon="account_circle" />
Kim Wilson
<Icon className="chevron" icon="expand_more" />
</button>
<div style={{ height: `${subMenuHeight || 168}px` }} className="menu">
<div className={`menu-inner ${isSubMenuOpen ? "open" : ""}`}>
<div className="main-menu">
{items.map((item, index) => (
<MenuItem
key={item.name}
name={item.name}
index={index}
activeSubMenu={activeSubMenu}
onClick={handleClick}
subItems={item.subItems}
/>
))}
</div>
</div>
</div>
</div>
</section>
);
};
================================================
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 (
<div className={`dropdown-4 ${isOpen ? "open" : ""}`} ref={dropdownRef}>
<button onClick={toggleIsOpen}>
<span className="button-inner">
{buttonText}
<span className="material-symbols-outlined">arrow_drop_down</span>
</span>
</button>
<ul>
{items.map((item) => (
<li key={item}>
<button onClick={() => handleItemClick(item)}>
<i class={`fa-brands fa-${item}`}></i>
{item}
</button>
</li>
))}
</ul>
</div>
);
};
================================================
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 (
<>
<ToastContainer />
<section className="page dropdown-4-page">
<div>
<Dropdown4
buttonText="Follow Us"
items={items}
onItemClick={handleItemClick}
/>
</div>
</section>
</>
);
};
================================================
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 (
<div
ref={menuRef}
className={`dropdown-5-menu ${isOpen ? "open" : ""}`}
style={{ top, left }}
>
<div className="dropdown-5-menu-inner">
<button>
<img src={joe} />
<span>Account</span>
</button>
<button>
<span style={{ backgroundPosition: "0 0" }}></span>
<span>Drive</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -2415px" }}></span>
<span>Gmail</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -3174px" }}></span>
<span>YouTube</span>
</button>
<button>
<img src={gemini} />
<span>Gemini</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1794px" }}></span>
<span>Maps</span>
</button>
<button>
<span></span>
<span>Search</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -759px" }}></span>
<span>Calendar</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -897px" }}></span>
<span>Play</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -414px" }}></span>
<span>News</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -966px" }}></span>
<span>Photos</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1104px" }}></span>
<span>Meet</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -69px" }}></span>
<span>Chat</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -2346px" }}></span>
<span>Translate</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1449px" }}></span>
<span>Contacts</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -2070px" }}></span>
<span>Ad Centre</span>
</button>
<button>
<span style={{ backgroundPosition: "0 -1932px" }}></span>
<span>Shopping</span>
</button>
</div>
</div>
);
};
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 (
<div ref={dropdownRef} className={`dropdown-5 ${isOpen ? "open" : ""}`}>
<button
className="material-symbols-outlined"
onClick={() => setIsOpen(!isOpen)}
>
apps
</button>
{createPortal(
<Menu isOpen={isOpen} dropdownRef={dropdownRef} menuRef={menuRef} />,
document.body
)}
</div>
);
};
================================================
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 (
<section className="page dropdown-5-page">
<nav className="dropdown-5-nav">
<div className="logo">
<span className="material-symbols-outlined"> menu </span>
<img src={logo} />
<h2>Drive</h2>
</div>
<div className="nav-right">
<span className="material-symbols-outlined"> help </span>
<span className="material-symbols-outlined"> settings </span>
<Dropdown5 />
<img src={joe} />
</div>
</nav>
</section>
);
};
================================================
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 (
<div className={`dropdown-6 ${open ? "open" : ""}`} ref={wrapperRef}>
<input
ref={inputRef}
type="text"
placeholder="What you looking for?"
value={search}
onChange={(e) => setSearch(e.target.value)}
onFocus={handleFocus}
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
/>
<button type="button" onClick={handleSearch}>
<span className="material-symbols-outlined">search</span>
</button>
<div className="dropdown-menu">
{items.map((item, index) => {
const isDefault = defaultItems.includes(item);
return (
<div key={index} className="dropdown-item">
<button type="button" className="item-btn">
<span className="material-symbols-outlined item-icon">
{isDefault ? "search" : "schedule"}
</span>
{item}
</button>
</div>
);
})}
</div>
</div>
);
};
================================================
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 (
<a
className={isActive ? "active" : ""}
ref={linkRef}
onMouseEnter={handleHover}
>
{item.name}
</a>
);
};
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 (
<div
className="menu"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{items.map((item, index) => (
<Link
key={item.name}
isActive={item.name === activeItem?.name && !isHidden}
item={item}
index={index}
onHover={handleLinkHover}
/>
))}
<div
style={{
translate: `${translateX} 0`,
}}
className={`navbar-2-dropdown ${
activeItem && !isHidden ? "visible" : ""
}`}
>
{activeItem?.items?.map((link) => (
<a key={link}>{link}</a>
))}
</div>
</div>
);
};
export const Dropdown6Example = () => {
return (
<section className="page dropdown-6-page">
<nav>
<img src={logo} />
<Dropdown6 />
<CoolNav items={items} />
<img className="avatar" src={avatar} />
</nav>
</section>
);
};
================================================
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 = "" }) => (
<i className={`ai ${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 (
<section className="page dropdown-7-page">
<div className={`dropdown-7 ${open ? "open" : ""}`}>
<button onClick={() => setOpen((o) => !o)}>
<Icon icon="ai-person" />
Joseph Harrison
<Icon icon="ai-chevron-down" className="chevron" />
</button>
<div className="menu" style={{ height }}>
<div className={`menu-inner ${active !== null ? "open" : ""}`}>
<div className="main-menu">
{items.map((item, i) => (
<button
key={item.name}
onClick={() => item.subItems && setActive(i)}
>
<Icon icon={item.icon} />
{item.name}
{item.subItems && (
<Icon icon="ai-chevron-right" className="chevron" />
)}
</button>
))}
</div>
{activeItem?.subItems && (
<div ref={subRef} className="sub-menu open">
<button onClick={() => setActive(null)}>
<Icon icon="ai-arrow-left" />
{activeItem.name}
</button>
{activeItem.subItems.map((sub) => (
<button key={sub.name}>
<Icon icon={sub.icon} />
{sub.name}
</button>
))}
</div>
)}
</div>
</div>
</div>
</section>
);
};
================================================
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 (
<section className="scroll-reveal">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
);
};
================================================
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 (
<h2 className="message" ref={blockRef} onClick={handleClick}>
{message}
</h2>
);
};
================================================
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 (
<section className="typed-message-page">
<nav>
<img src={logo} className="typed-message-logo" />
<div className="typed-message-search">
<span className="material-symbols-outlined">search</span>
<input type="text" placeholder="e.g London, United Kingdom" />
</div>
<div className="typed-message-links">
<span className="material-symbols-outlined">mail</span>
<span className="material-symbols-outlined">notifications</span>
<span className="material-symbols-outlined">menu</span>
</div>
</nav>
<div className="typed-message-banner">
<video autoPlay muted loop playsInline className="background-video">
<source src={video} type="video/mp4" />
Your browser does not support the video tag.
</video>
<div className="typed-message-banner-content">
<div className="typed-message-wrapper">
<TypedMessage message="Explore the world with Travyl" />
</div>
</div>
</div>
<div className="banner-overlay" />
</section>
);
};
================================================
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 (
<section className="page rc-slider-page">
<div className="slider-card">
<header>
<h2>Mortgage Value</h2>
<var>
<abbr>$</abbr>
{value.toLocaleString("en-US")}
</var>
</header>
<Slider step={25} max={100000} value={value} onChange={handleChange} />
</div>
</section>
);
};
================================================
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) => (
<li key={file.path}>{file.path}</li>
));
return (
<section className="page dropzone-page">
<div className="dropzone-card">
<div>
<h2>Upload Files</h2>
<h3>Fast and easy</h3>
</div>
<div className="dropzone" {...getRootProps()}>
<img src={icon} />
<input {...getInputProps()} />
{isDragActive ? (
<p>Drop the files here ...</p>
) : (
<p>Drag 'n' drop some files here, or click to select files</p>
)}
</div>
{files.length > 0 && (
<>
<h4>Files</h4>
<ul>{files}</ul>
</>
)}
</div>
</section>
);
};
================================================
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 (
<Draggable onDrag={updateXarrow} onStop={updateXarrow}>
<div id={id} style={boxStyle}>
{id}
</div>
</Draggable>
);
};
export const ReactXarrows = () => {
return (
<div
style={{ display: "flex", justifyContent: "space-evenly", width: "100%" }}
>
<Xwrapper>
<DraggableBox id={"elem1"} />
<DraggableBox id={"elem2"} />
<Xarrow start={"elem1"} end="elem2" path="smooth" curveness={1} />
</Xwrapper>
</div>
);
};
================================================
FILE: src/components/logins/Login1/Login1.jsx
================================================
import "./styles.css";
import logo from "./logo.svg";
export const Login1 = () => {
return (
<section className="page login-1">
<div className="login-1-background"></div>
<div className="login-1-card">
<img src={logo} />
<h2>Welcome back</h2>
<form>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign In</button>
</form>
<footer>
Need an account? Sign up <a href="#">here</a>
</footer>
</div>
</section>
);
};
================================================
FILE: src/components/logins/Login1/styles.css
================================================
.page.login-1 {
display: grid;
place-items: center;
gap: 50
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
SYMBOL INDEX (5 symbols across 4 files)
FILE: src/App.jsx
function App (line 13) | function App() {
FILE: src/components/logins/Login6/useWebGLBackground.js
constant VERT (line 3) | const VERT = `
constant FRAG (line 10) | const FRAG = `
FILE: src/components/sidebars/Sidebar12/Sidebar12.jsx
constant SIDEBAR_ITEMS (line 5) | const SIDEBAR_ITEMS = [
FILE: src/components/sidebars/Sidebar13/Sidebar13.jsx
constant SIDEBAR_ITEMS (line 5) | const SIDEBAR_ITEMS = [
Condensed preview — 215 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (401K chars).
[
{
"path": ".eslintrc.cjs",
"chars": 526,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": ".gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "README.md",
"chars": 451,
"preview": "# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCur"
},
{
"path": "index.html",
"chars": 1634,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "package.json",
"chars": 971,
"preview": "{\n \"name\": \"react-components\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \""
},
{
"path": "src/App.jsx",
"chars": 332,
"preview": "import { createBrowserRouter, RouterProvider } from \"react-router-dom\";\nimport { Layout } from \"./Layout\";\nimport { rout"
},
{
"path": "src/Layout.css",
"chars": 2769,
"preview": ".layout {\n background: #222129;\n color: #f5f3f9;\n margin: 0;\n height: 100vh;\n font-size: 16px;\n}\n\n.layout-table-wra"
},
{
"path": "src/Layout.jsx",
"chars": 1937,
"preview": "import { Link, useNavigate } from \"react-router-dom\";\nimport { routes } from \"./routes\";\nimport \"./Layout.css\";\n\nexport "
},
{
"path": "src/components/accordions/Accordion1/Accordion1.jsx",
"chars": 1085,
"preview": "import { useState } from \"react\";\nimport \"./styles.css\";\n\nexport const Accordion1 = ({ items }) => {\n const [active, se"
},
{
"path": "src/components/accordions/Accordion1/Accordion1Example.jsx",
"chars": 712,
"preview": "import { Accordion1 } from \"./Accordion1\";\nimport image1 from \"./6.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 fro"
},
{
"path": "src/components/accordions/Accordion1/styles.css",
"chars": 1896,
"preview": ".page.image-accordion-page {\n background: #141415;\n}\n\n.page.image-accordion-page .bg {\n background-size: cover;\n posi"
},
{
"path": "src/components/accordions/Accordion2/Accordion2.css",
"chars": 863,
"preview": ".accordion-2 {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.accordion-2-item h2 {\n display: flex;\n align-items: "
},
{
"path": "src/components/accordions/Accordion2/Accordion2.jsx",
"chars": 1260,
"preview": "import { useRef, useState } from \"react\";\nimport \"./Accordion2.css\";\n\nconst AccordionItem = (props) => {\n const content"
},
{
"path": "src/components/accordions/Accordion2/Accordion2Example.css",
"chars": 443,
"preview": ".page.accordion-2-page {\n display: grid;\n place-items: center;\n height: 100vh;\n color: #ffffff;\n background: #14131"
},
{
"path": "src/components/accordions/Accordion2/Accordion2Example.jsx",
"chars": 1825,
"preview": "import { Accordion2 } from \"./Accordion2\";\nimport \"./Accordion2Example.css\";\n\nconst faqs = [\n {\n header: (\n <di"
},
{
"path": "src/components/accordions/Accordion3/Accordion3.css",
"chars": 1821,
"preview": ".page.accordion-3-page {\n background: #141415;\n}\n\n.page.accordion-3-page .bg {\n background-size: cover;\n position: fi"
},
{
"path": "src/components/accordions/Accordion3/Accordion3.jsx",
"chars": 1117,
"preview": "import { useState } from \"react\";\nimport \"./Accordion3.css\";\n\nexport const Accordion3 = ({ items }) => {\n const [active"
},
{
"path": "src/components/accordions/Accordion3/Accordion3Example.jsx",
"chars": 711,
"preview": "import { Accordion3 } from \"./Accordion3\";\nimport image1 from \"./6.jpg\";\nimport image2 from \"./2.jpg\";\nimport image3 fro"
},
{
"path": "src/components/accordions/index.js",
"chars": 185,
"preview": "export * from \"./Accordion1/Accordion1\";\nexport * from \"./Accordion1/Accordion1Example\";\nexport * from \"./Accordion2/Acc"
},
{
"path": "src/components/buttons/DeleteButton/DeleteButton.jsx",
"chars": 1065,
"preview": "import { useState } from \"react\";\nimport \"./styles.css\";\n\nexport const DeleteButton = () => {\n const [isDeleting, setIs"
},
{
"path": "src/components/buttons/DeleteButton/styles.css",
"chars": 2129,
"preview": ".page.delete-button-page {\n background: #141414;\n}\n\n.delete-button {\n display: flex;\n align-items: center;\n justify-"
},
{
"path": "src/components/buttons/FabButton/FabButton.css",
"chars": 1316,
"preview": ".page.fab-button-page {\n background: #16151b;\n}\n\n.fab {\n position: fixed;\n right: 30px;\n bottom: 38px;\n border-radi"
},
{
"path": "src/components/buttons/FabButton/FabButton.jsx",
"chars": 753,
"preview": "import { useState } from \"react\";\nimport \"./FabButton.css\";\n\nconst Icon = ({ children }) => (\n <span className=\"materia"
},
{
"path": "src/components/buttons/TrashButton/TrashButton.css",
"chars": 2642,
"preview": ".page.trash-button-page {\n background: #141414;\n}\n\n.trash-button {\n --color-icon: #f9f9f9;\n position: relative;\n ove"
},
{
"path": "src/components/buttons/TrashButton/TrashButton.jsx",
"chars": 1131,
"preview": "import { useState } from \"react\";\nimport \"./TrashButton.css\";\nimport paper from \"./paper.svg\";\nimport shredded from \"./s"
},
{
"path": "src/components/buttons/index.js",
"chars": 127,
"preview": "export * from \"./DeleteButton/DeleteButton\";\nexport * from \"./TrashButton/TrashButton\";\nexport * from \"./FabButton/FabBu"
},
{
"path": "src/components/cards/Card1/Card1.jsx",
"chars": 1400,
"preview": "import \"./styles.css\";\n\nconst cards = [\n {\n name: \"summary\",\n total: 21,\n description: \"Due Tasks\",\n footer"
},
{
"path": "src/components/cards/Card1/styles.css",
"chars": 1631,
"preview": ".page.card-1-page {\n margin: 0;\n height: 100vh;\n display: grid;\n place-items: center;\n color: #f7f7f7;\n background"
},
{
"path": "src/components/cards/Card2/Card2.css",
"chars": 2019,
"preview": ".page.card-2-example-page {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n height: 10"
},
{
"path": "src/components/cards/Card2/Card2.jsx",
"chars": 474,
"preview": "import \"./Card2.css\";\n\nexport const Card2 = ({\n image,\n title,\n subtitle,\n description,\n onProfile,\n onFollow,\n}) "
},
{
"path": "src/components/cards/Card2/Card2Example.jsx",
"chars": 589,
"preview": "import { Card2 } from \"./Card2\";\nimport image from \"./image.jpg\";\n\nexport const Card2Example = () => {\n const handlePro"
},
{
"path": "src/components/cards/Card3/Card3.css",
"chars": 2611,
"preview": ".card-3 {\n --color-primary: #356aff;\n --color-muted: #9895a2;\n --color-highlight: #242328;\n --border: 1px solid #2f2"
},
{
"path": "src/components/cards/Card3/Card3.jsx",
"chars": 1085,
"preview": "import logo from \"./logo.svg\";\nimport avatar from \"./avatar.png\";\nimport \"./Card3.css\";\n\nexport const Card3 = ({\n compa"
},
{
"path": "src/components/cards/Card3/Card3Example.css",
"chars": 180,
"preview": ".page.card-3-page {\n background: #111116;\n color: #ffffff;\n height: 100vh;\n margin: 0;\n display: grid;\n place-item"
},
{
"path": "src/components/cards/Card3/Card3Example.jsx",
"chars": 537,
"preview": "import { Card3 } from \"./Card3\";\nimport \"./Card3Example.css\";\n\nexport const Card3Example = () => {\n const onShare = () "
},
{
"path": "src/components/cards/Card4/Card4.css",
"chars": 1760,
"preview": ".card-4 {\n display: flex;\n align-items: center;\n width: 75vw;\n max-width: 650px;\n padding: 24px 30px 24px 20px;\n b"
},
{
"path": "src/components/cards/Card4/Card4.jsx",
"chars": 548,
"preview": "import image from \"./image.jpg\";\nimport \"./Card4.css\";\n\nexport const Card4 = ({ name, role, bio, socials, onSocialClick "
},
{
"path": "src/components/cards/Card4/Card4Example.css",
"chars": 240,
"preview": ".page.card-4-page {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n height: 100vh;\n b"
},
{
"path": "src/components/cards/Card4/Card4Example.jsx",
"chars": 593,
"preview": "import { Card4 } from \"./Card4\";\nimport \"./Card4Example.css\";\n\nexport const Card4Example = () => {\n const handleSocialC"
},
{
"path": "src/components/cards/Card5/Card5.css",
"chars": 2353,
"preview": ".card-5 {\n background: #ffffff;\n border-radius: 28px;\n padding: 24px;\n width: 400px;\n box-shadow: 0 40px 80px rgba("
},
{
"path": "src/components/cards/Card5/Card5.jsx",
"chars": 1901,
"preview": "import { useState } from \"react\";\nimport \"./Card5.css\";\nimport { Dropdown } from \"./Dropdown\";\n\nconst days = [\"today\", \""
},
{
"path": "src/components/cards/Card5/Card5Example.css",
"chars": 97,
"preview": ".page.card-5-page {\n background: linear-gradient(135deg, #dfd0ff, #ffffff);\n color: #1f1b29;\n}\n"
},
{
"path": "src/components/cards/Card5/Card5Example.jsx",
"chars": 191,
"preview": "import { Card5 } from \"./Card5\";\nimport \"./Card5Example.css\";\n\nexport const Card5Example = () => (\n <section className="
},
{
"path": "src/components/cards/Card5/Dropdown.css",
"chars": 1061,
"preview": ".card-5-dropdown {\n position: relative;\n}\n\n.card-5-dropdown button {\n cursor: pointer;\n font-family: inherit;\n paddi"
},
{
"path": "src/components/cards/Card5/Dropdown.jsx",
"chars": 789,
"preview": "import { useState } from \"react\";\nimport \"./Dropdown.css\";\n\nexport const Dropdown = ({ items, selectedItem, onSelect }) "
},
{
"path": "src/components/cards/Card6/Card6.css",
"chars": 3205,
"preview": ".card-6 {\n --color-muted: rgb(255 255 255 / 50%);\n position: relative;\n background: rgb(0 0 0 / 25%);\n border-radius"
},
{
"path": "src/components/cards/Card6/Card6.jsx",
"chars": 940,
"preview": "import \"./Card6.css\";\n\nexport const Card6 = ({ name, role, tags, img, stats }) => {\n return (\n <div className=\"card-"
},
{
"path": "src/components/cards/Card6/Card6Example.css",
"chars": 83,
"preview": ".page.card-6-page {\n background: #2b2a2f;\n color: #f9f9f9;\n}\n\n.card-6-rating {\n}\n"
},
{
"path": "src/components/cards/Card6/Card6Example.jsx",
"chars": 610,
"preview": "import { Card6 } from \"./Card6\";\nimport \"./Card6Example.css\";\nimport avatar from \"./avatar.png\";\n\nconst tags = [\"Figma\","
},
{
"path": "src/components/cards/Card7/Card7.css",
"chars": 2145,
"preview": ".card-7 {\n --card: #272524;\n display: flex;\n align-items: center;\n width: 75vw;\n max-width: 650px;\n padding: 44px "
},
{
"path": "src/components/cards/Card7/Card7.jsx",
"chars": 468,
"preview": "import \"./Card7.css\";\n\nexport const Card7 = ({ name, image, role, bio, socials }) => {\n return (\n <div className=\"ca"
},
{
"path": "src/components/cards/Card7/Card7Example.css",
"chars": 240,
"preview": ".page.card-7-page {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n height: 100vh;\n b"
},
{
"path": "src/components/cards/Card7/Card7Example.jsx",
"chars": 470,
"preview": "import { Card7 } from \"./Card7\";\nimport image from \"./image.jpg\";\nimport \"./Card7Example.css\";\n\nconst socials = [\"dribbb"
},
{
"path": "src/components/cards/index.js",
"chars": 259,
"preview": "export * from \"./Card1/Card1\";\nexport * from \"./Card2/Card2Example\";\nexport * from \"./Card3/Card3Example\";\nexport * from"
},
{
"path": "src/components/carousels/Carousel1/Carousel1.jsx",
"chars": 1528,
"preview": "import { Swiper, SwiperSlide } from \"swiper/react\";\nimport { EffectCoverflow, Pagination } from \"swiper/modules\";\nimport"
},
{
"path": "src/components/carousels/Carousel1/styles.css",
"chars": 1925,
"preview": "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.page.carousel-1-page {\n position: relative;\n display: fle"
},
{
"path": "src/components/carousels/Carousel2/Carousel2.jsx",
"chars": 1306,
"preview": "import { Swiper, SwiperSlide } from \"swiper/react\";\nimport { EffectCoverflow } from \"swiper/modules\";\n\nimport \"swiper/cs"
},
{
"path": "src/components/carousels/Carousel2/styles.css",
"chars": 558,
"preview": ".page.carousel-2-page {\n background: #010101;\n font-size: 14px;\n color: #010101;\n margin: 0;\n padding: 0;\n height:"
},
{
"path": "src/components/carousels/Carousel3/Carousel3.css",
"chars": 2023,
"preview": ".page.carousel-3-page {\n background: linear-gradient(45deg, #8647b3, #40429c);\n font-size: 14px;\n color: #f9f9f9;\n m"
},
{
"path": "src/components/carousels/Carousel3/Carousel3.jsx",
"chars": 1633,
"preview": "import { Swiper, SwiperSlide } from \"swiper/react\";\nimport { EffectCoverflow, Pagination } from \"swiper/modules\";\n\nimpor"
},
{
"path": "src/components/carousels/index.js",
"chars": 117,
"preview": "export * from \"./Carousel1/Carousel1\";\nexport * from \"./Carousel2/Carousel2\";\nexport * from \"./Carousel3/Carousel3\";\n"
},
{
"path": "src/components/controls/AutoSuggest/AutoSuggest.jsx",
"chars": 13455,
"preview": "import { useEffect, useState } from \"react\";\nimport logo from \"./Joegle.svg\";\nimport \"./styles.css\";\n\nconst names = [\n "
},
{
"path": "src/components/controls/AutoSuggest/styles.css",
"chars": 1729,
"preview": ".page.auto-suggest-page {\n background: #18181b;\n display: flex;\n flex-direction: column;\n justify-content: center;\n "
},
{
"path": "src/components/controls/EditableText/EditableText.css",
"chars": 657,
"preview": ".editable-text {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.editable-text-value.is-editing ~ .editable-text"
},
{
"path": "src/components/controls/EditableText/EditableText.jsx",
"chars": 2012,
"preview": "import { useLayoutEffect, useRef, useState } from \"react\";\nimport \"./EditableText.css\";\n\nconst setCaret = (el) => {\n if"
},
{
"path": "src/components/controls/EditableText/EditableTextExample.css",
"chars": 2580,
"preview": ".page.editable-text-page {\n --gradient: linear-gradient(45deg, #ff7c7d, #ffda67);\n --card: #272524;\n display: flex;\n "
},
{
"path": "src/components/controls/EditableText/EditableTextExample.jsx",
"chars": 1486,
"preview": "import image from \"./image.jpg\";\nimport \"./EditableTextExample.css\";\nimport { EditableText } from \"./EditableText\";\nimpo"
},
{
"path": "src/components/controls/PasswordStrength/PasswordStrength.jsx",
"chars": 2020,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst strengthLabels = [\"weak\","
},
{
"path": "src/components/controls/PasswordStrength/styles.css",
"chars": 1807,
"preview": "* {\n box-sizing: border-box;\n}\n\n.page.password-strength-page {\n display: grid;\n place-items: center;\n margin: 0;\n b"
},
{
"path": "src/components/controls/PasswordStrength2/PasswordStrength2.css",
"chars": 3830,
"preview": "* {\n box-sizing: border-box;\n}\n\n.page.password-strength-2-page {\n display: grid;\n place-items: center;\n margin: 0;\n "
},
{
"path": "src/components/controls/PasswordStrength2/PasswordStrength2.jsx",
"chars": 2138,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.png\";\nimport blob from \"./blob.svg\";\nimport \"./PasswordStreng"
},
{
"path": "src/components/controls/PasswordStrength3/PasswordStrength3.css",
"chars": 3830,
"preview": "* {\n box-sizing: border-box;\n}\n\n.page.password-strength-2-page {\n display: grid;\n place-items: center;\n margin: 0;\n "
},
{
"path": "src/components/controls/PasswordStrength3/PasswordStrength3.jsx",
"chars": 2138,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.png\";\nimport blob from \"./blob.svg\";\nimport \"./PasswordStreng"
},
{
"path": "src/components/controls/PasswordStrength4/PasswordStrength4.css",
"chars": 5594,
"preview": "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\");\n\n* {\n box-sizing: "
},
{
"path": "src/components/controls/PasswordStrength4/PasswordStrength4.jsx",
"chars": 3505,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport blob from \"./blob.svg\";\nimport \"./PasswordStreng"
},
{
"path": "src/components/controls/PasswordVisibility/Password.css",
"chars": 2017,
"preview": ".password-control input {\n --color-primary: #0088ff;\n --color-muted: #5a616c;\n border: 0;\n width: 100%;\n height: 60"
},
{
"path": "src/components/controls/PasswordVisibility/Password.jsx",
"chars": 857,
"preview": "import { useState } from \"react\";\nimport \"./Password.css\";\n\nexport const Icon = ({ children }) => (\n <span className=\"m"
},
{
"path": "src/components/controls/PasswordVisibility/PasswordVisibilityExample.css",
"chars": 1826,
"preview": ".page.password-visibility-page {\n display: grid;\n place-items: center;\n margin: 0;\n padding: 0 20px;\n background: #"
},
{
"path": "src/components/controls/PasswordVisibility/PasswordVisibilityExample.jsx",
"chars": 859,
"preview": "import { useState } from \"react\";\nimport bg from \"./bg.svg\";\nimport \"./PasswordVisibilityExample.css\";\nimport { Icon, Pa"
},
{
"path": "src/components/controls/Slider/Slider.css",
"chars": 2819,
"preview": ".slider-wrapper {\n --color-border: red;\n --color-border-hover: blue;\n --color-card: black;\n --color-hover: white;\n "
},
{
"path": "src/components/controls/Slider/Slider.jsx",
"chars": 1915,
"preview": "import { useState } from \"react\";\nimport \"./Slider.css\";\n\nconst getBarWidth = (numValue) => {\n const THUMB_SIZE = 19;\n "
},
{
"path": "src/components/controls/Slider/SliderExample.css",
"chars": 45,
"preview": ".page.slider-page {\n background: #222222;\n}\n"
},
{
"path": "src/components/controls/Slider/SliderExample.jsx",
"chars": 241,
"preview": "import { Slider } from \"./Slider\";\nimport \"./SliderExample.css\";\n\nexport const SliderExample = () => (\n <section classN"
},
{
"path": "src/components/controls/index.js",
"chars": 417,
"preview": "export * from \"./PasswordStrength/PasswordStrength\";\nexport * from \"./AutoSuggest/AutoSuggest\";\nexport * from \"./Passwor"
},
{
"path": "src/components/dropdowns/Dropdown1/Dropdown1.css",
"chars": 2208,
"preview": ".dropdown-1 {\n position: relative;\n perspective: 1000px;\n width: 144px;\n}\n\n.dropdown-1 button {\n display: flex;\n al"
},
{
"path": "src/components/dropdowns/Dropdown1/Dropdown1.jsx",
"chars": 2669,
"preview": "import { useRef, useState } from \"react\";\nimport \"./Dropdown1.css\";\n\nconst MenuButton = ({\n name,\n icon,\n index,\n ha"
},
{
"path": "src/components/dropdowns/Dropdown1/Dropdown1Example.jsx",
"chars": 622,
"preview": "import { Dropdown1 } from \"./Dropdown1\";\nimport \"./Dropdown1.css\";\n\nconst items = [\n {\n name: \"settings\",\n subIte"
},
{
"path": "src/components/dropdowns/Dropdown2/Dropdown2.css",
"chars": 1826,
"preview": ".dropdown-2 {\n position: relative;\n display: grid;\n place-items: center;\n height: 72px;\n}\n\n.dropdown-2-overlay {\n p"
},
{
"path": "src/components/dropdowns/Dropdown2/Dropdown2.jsx",
"chars": 3183,
"preview": "import { useRef, useState } from \"react\";\nimport \"./Dropdown2.css\";\nimport joe from \"./joe.png\";\nimport { createPortal }"
},
{
"path": "src/components/dropdowns/Dropdown2/Dropdown2Example.css",
"chars": 1048,
"preview": ".page.dropdown-2-page {\n color: #6d696b;\n background: #f7f7f7;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.drop"
},
{
"path": "src/components/dropdowns/Dropdown2/Dropdown2Example.jsx",
"chars": 721,
"preview": "import { Dropdown2 } from \"./Dropdown2\";\nimport joe from \"./joe.png\";\nimport logo from \"./logo.svg\";\nimport \"./Dropdown2"
},
{
"path": "src/components/dropdowns/Dropdown3/Dropdown3.css",
"chars": 1583,
"preview": ".page.dropdown-3-page {\n margin: 0;\n display: grid;\n place-items: center;\n background: #1b1921;\n height: 100vh;\n -"
},
{
"path": "src/components/dropdowns/Dropdown3/Dropdown3.jsx",
"chars": 2905,
"preview": "import { useRef, useState } from \"react\";\nimport \"./Dropdown3.css\";\n\nconst items = [\n {\n name: \"build\",\n subItems"
},
{
"path": "src/components/dropdowns/Dropdown4/Dropdown4.css",
"chars": 1576,
"preview": ".dropdown-4 {\n position: relative;\n perspective: 400px;\n color: #f9f9f9;\n font-family: \"Euclid Circular A\", \"Poppins"
},
{
"path": "src/components/dropdowns/Dropdown4/Dropdown4.jsx",
"chars": 1431,
"preview": "import { useRef, useEffect, useState } from \"react\";\nimport \"./Dropdown4.css\";\n\n// Example items\n\n// const items = [\n// "
},
{
"path": "src/components/dropdowns/Dropdown4/Dropdown4Example.css",
"chars": 272,
"preview": ".page.dropdown-4-page {\n background: #fdfcf1;\n color: #5f5a67;\n}\n\n.page.dropdown-4-page > div {\n translate: 0 -60px;\n"
},
{
"path": "src/components/dropdowns/Dropdown4/Dropdown4Example.jsx",
"chars": 732,
"preview": "import { useState } from \"react\";\nimport { ToastContainer, toast, cssTransition } from \"react-toastify\";\nimport { Dropdo"
},
{
"path": "src/components/dropdowns/Dropdown5/Dropdown5.css",
"chars": 2113,
"preview": ".dropdown-5 {\n position: relative;\n display: grid;\n place-items: center;\n height: 72px;\n}\n\n.dropdown-5-overlay {\n p"
},
{
"path": "src/components/dropdowns/Dropdown5/Dropdown5.jsx",
"chars": 3809,
"preview": "import { useRef, useState, useEffect } from \"react\";\nimport \"./Dropdown5.css\";\nimport joe from \"./joe.png\";\nimport gemin"
},
{
"path": "src/components/dropdowns/Dropdown5/Dropdown5Example.css",
"chars": 1190,
"preview": ".page.dropdown-5-page {\n color: #c5c7c5;\n background: #1b1b1b;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.drop"
},
{
"path": "src/components/dropdowns/Dropdown5/Dropdown5Example.jsx",
"chars": 719,
"preview": "import { Dropdown5 } from \"./Dropdown5\";\nimport joe from \"./joe.png\";\nimport logo from \"./logo.svg\";\nimport \"./Dropdown5"
},
{
"path": "src/components/dropdowns/Dropdown6/Dropdown6.css",
"chars": 1660,
"preview": ".dropdown-6 {\n flex: 1 1 auto;\n position: relative;\n}\n\n.dropdown-6 input {\n border: 0;\n border-radius: 52px;\n heigh"
},
{
"path": "src/components/dropdowns/Dropdown6/Dropdown6.jsx",
"chars": 2225,
"preview": "import { useState, useRef, useEffect } from \"react\";\nimport \"./Dropdown6.css\";\n\nconst defaultItems = [\n \"login\",\n \"car"
},
{
"path": "src/components/dropdowns/Dropdown6/Dropdown6Example.css",
"chars": 1561,
"preview": ".page.dropdown-6-page {\n background: #fbfbfb;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.dropdown-6-page nav {\n"
},
{
"path": "src/components/dropdowns/Dropdown6/Dropdown6Example.jsx",
"chars": 2180,
"preview": "import { useRef, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport avatar from \"./avatar.png\";\nimport { Dro"
},
{
"path": "src/components/dropdowns/Dropdown7/Dropdown7.css",
"chars": 2024,
"preview": ".page.dropdown-7-page {\n margin: 0;\n display: grid;\n place-items: center;\n background: url(\"bg.jpg\");\n background-s"
},
{
"path": "src/components/dropdowns/Dropdown7/Dropdown7.jsx",
"chars": 2475,
"preview": "import { useRef, useState } from \"react\";\nimport \"./Dropdown7.css\";\n\nconst items = [\n {\n name: \"Settings\",\n icon:"
},
{
"path": "src/components/dropdowns/index.js",
"chars": 308,
"preview": "export * from \"./Dropdown1/Dropdown1Example\";\nexport * from \"./Dropdown2/Dropdown2Example\";\nexport * from \"./Dropdown3/D"
},
{
"path": "src/components/gsap/ScrollReveal/ScrollReveal.jsx",
"chars": 3343,
"preview": "import gsap from \"gsap\";\nimport { useGSAP } from \"@gsap/react\";\nimport { ScrollTrigger } from \"gsap/all\";\nimport \"./styl"
},
{
"path": "src/components/gsap/ScrollReveal/styles.css",
"chars": 312,
"preview": ".scroll-reveal {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 20px;\n padding: 20px 0;\n margin"
},
{
"path": "src/components/gsap/TypedMessage/TypedMessage.css",
"chars": 122,
"preview": ".message {\n font-weight: inherit;\n line-height: inherit;\n font-size: 80px;\n text-shadow: 0 0 10px rgb(0 0 0 / 10%);\n"
},
{
"path": "src/components/gsap/TypedMessage/TypedMessage.jsx",
"chars": 1463,
"preview": "import React, { useRef } from \"react\";\nimport { gsap } from \"gsap\";\nimport { SplitText } from \"gsap/all\";\nimport { useGS"
},
{
"path": "src/components/gsap/TypedMessage/TypedMessageExample.css",
"chars": 2200,
"preview": ".typed-message-page {\n color: #222222;\n min-height: 100vh;\n background: url(\"./image.jpg\");\n background-size: cover;"
},
{
"path": "src/components/gsap/TypedMessage/TypedMessageExample.jsx",
"chars": 1361,
"preview": "import { TypedMessage } from \"./TypedMessage\";\nimport \"./TypedMessageExample.css\";\nimport image from \"./image.jpg\";\nimpo"
},
{
"path": "src/components/gsap/index.js",
"chars": 97,
"preview": "export * from \"./ScrollReveal/ScrollReveal\";\nexport * from \"./TypedMessage/TypedMessageExample\";\n"
},
{
"path": "src/components/index.js",
"chars": 436,
"preview": "export * from \"./buttons\";\nexport * from \"./carousels\";\nexport * from \"./controls\";\nexport * from \"./sidebars\";\nexport *"
},
{
"path": "src/components/libraries/index.js",
"chars": 132,
"preview": "export * from \"./rc-slider/RcSlider\";\nexport * from \"./react-dropzone/ReactDropzone\";\nexport * from \"./react-xarrows/Rea"
},
{
"path": "src/components/libraries/rc-slider/RcSlider.css",
"chars": 1079,
"preview": ".page.rc-slider-page {\n background: #393965;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.slider-card {\n --color"
},
{
"path": "src/components/libraries/rc-slider/RcSlider.jsx",
"chars": 645,
"preview": "import Slider from \"rc-slider\";\nimport \"rc-slider/assets/index.css\";\nimport { useState } from \"react\";\nimport \"./RcSlide"
},
{
"path": "src/components/libraries/react-dropzone/ReactDropzone.css",
"chars": 925,
"preview": ".page.dropzone-page {\n background: #212224;\n --color-card: #161718;\n}\n\n.dropzone-card {\n border-radius: 6px;\n backgr"
},
{
"path": "src/components/libraries/react-dropzone/ReactDropzone.jsx",
"chars": 1081,
"preview": "import \"./ReactDropzone.css\";\nimport { useDropzone } from \"react-dropzone\";\nimport icon from \"./icon.svg\";\n\nexport const"
},
{
"path": "src/components/libraries/react-xarrows/ReactXarrows.css",
"chars": 0,
"preview": ""
},
{
"path": "src/components/libraries/react-xarrows/ReactXarrows.jsx",
"chars": 802,
"preview": "import React from \"react\";\nimport Xarrow, { useXarrow, Xwrapper } from \"react-xarrows\";\nimport Draggable from \"react-dra"
},
{
"path": "src/components/logins/Login1/Login1.jsx",
"chars": 583,
"preview": "import \"./styles.css\";\nimport logo from \"./logo.svg\";\n\nexport const Login1 = () => {\n return (\n <section className=\""
},
{
"path": "src/components/logins/Login1/styles.css",
"chars": 2079,
"preview": ".page.login-1 {\n display: grid;\n place-items: center;\n gap: 50px;\n margin: 0;\n height: 100vh;\n padding: 0 32px;\n "
},
{
"path": "src/components/logins/Login2/Login2.jsx",
"chars": 3434,
"preview": "import \"./styles.css\";\nimport logo from \"./logo.svg\";\nimport signin from \"./signin.svg\";\nimport signup from \"./signup.sv"
},
{
"path": "src/components/logins/Login2/styles.css",
"chars": 3856,
"preview": ".page.login-2-page {\n --color-primary: #6387ff;\n --color-dark: #496cf5;\n --color-muted: hsl(226, 12%, 51%);\n margin:"
},
{
"path": "src/components/logins/Login3/Login3.css",
"chars": 3251,
"preview": ".page.login-3-page {\n --gradient: linear-gradient(-35deg, #8d00ff, #365fe7);\n --muted: #8d889d;\n background: #1e1b2b;"
},
{
"path": "src/components/logins/Login3/Login3.jsx",
"chars": 2204,
"preview": "import { useState } from \"react\";\nimport \"./Login3.css\";\n\nconst SSOButtons = () => (\n <div className=\"sso\">\n <a clas"
},
{
"path": "src/components/logins/Login4/Login4.css",
"chars": 3560,
"preview": ".login-4-card * {\n box-sizing: border-box;\n}\n\n.login-4-page.page {\n margin: 0;\n background: #f2f3fe;\n color: #4b5679"
},
{
"path": "src/components/logins/Login4/Login4.jsx",
"chars": 2664,
"preview": "import { useState } from \"react\";\nimport \"./Login4.css\";\n\nconst CardBackground = ({ activeView }) => {\n return <div cla"
},
{
"path": "src/components/logins/Login5/Login5.jsx",
"chars": 851,
"preview": "import \"./styles.css\";\nimport logo from \"./logo.svg\";\n\nconst Textbox = ({ placeholder, type, icon }) => (\n <div classNa"
},
{
"path": "src/components/logins/Login5/styles.css",
"chars": 2516,
"preview": ".page.login-5 {\n display: grid;\n place-items: center;\n gap: 50px;\n margin: 0;\n height: 100vh;\n padding: 0 32px;\n "
},
{
"path": "src/components/logins/Login6/Login6.jsx",
"chars": 1616,
"preview": "import { useRef } from \"react\";\nimport \"./styles.css\";\nimport logo from \"./logo.svg\";\nimport googleIcon from \"./google.s"
},
{
"path": "src/components/logins/Login6/styles.css",
"chars": 4564,
"preview": ".page.login-6 {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n min-height: 100dvh;\n "
},
{
"path": "src/components/logins/Login6/useWebGLBackground.js",
"chars": 2525,
"preview": "import { useEffect } from \"react\";\n\nconst VERT = `\nattribute vec2 position;\nvoid main() {\n gl_Position = vec4(position,"
},
{
"path": "src/components/logins/index.js",
"chars": 198,
"preview": "export * from \"./Login1/Login1\";\nexport * from \"./Login2/Login2\";\nexport * from \"./Login3/Login3\";\nexport * from \"./Logi"
},
{
"path": "src/components/modals/Modal1/Modal1.jsx",
"chars": 2713,
"preview": "import { useState } from \"react\";\nimport \"./styles.css\";\nimport logo from \"./logo.svg\";\n\nexport const Modal1 = () => {\n "
},
{
"path": "src/components/modals/Modal1/styles.css",
"chars": 4119,
"preview": ".page.modal-1-page {\n background: #ffffff;\n}\n\n.container {\n max-width: 700px;\n margin: 0 auto;\n}\n\n.modal-1-footer {\n "
},
{
"path": "src/components/modals/Modal2/Modal2 copy.css",
"chars": 1419,
"preview": ".overlay,\n.dialog {\n position: fixed;\n}\n\n@keyframes overlay-in {\n 0% {\n scale: 0 0.003;\n }\n 33%,\n 36% {\n scal"
},
{
"path": "src/components/modals/Modal2/Modal2.css",
"chars": 1515,
"preview": ".modal-2-overlay,\n.modal-2-modal {\n position: fixed;\n}\n\n@keyframes overlay-in {\n 0% {\n scale: 0 0.003;\n }\n 33%,\n "
},
{
"path": "src/components/modals/Modal2/Modal2.jsx",
"chars": 717,
"preview": "import { createPortal } from \"react-dom\";\nimport \"./Modal2.css\";\n\nexport const Modal2 = ({\n title,\n subtitle,\n modalC"
},
{
"path": "src/components/modals/Modal2/Modal2Example.css",
"chars": 2434,
"preview": ".page.modal-2-page {\n background: #ffffff;\n}\n\n.page.modal-2-page .container {\n max-width: 700px;\n margin: 0 auto;\n}\n\n"
},
{
"path": "src/components/modals/Modal2/Modal2Example.jsx",
"chars": 2445,
"preview": "import { useState } from \"react\";\nimport \"./Modal2Example.css\";\nimport { Modal2 } from \"./Modal2\";\nimport logo from \"./l"
},
{
"path": "src/components/modals/index.js",
"chars": 106,
"preview": "export * from \"./Modal1/Modal1\";\nexport * from \"./Modal2/Modal2\";\nexport * from \"./Modal2/Modal2Example\";\n"
},
{
"path": "src/components/navbars/Navbar1/Navbar1.css",
"chars": 1468,
"preview": ".page.navbar-1-page {\n background: #09090b;\n color: #faf9f5;\n font-family: \"Euclid Circular A\", \"Poppins\";\n padding-"
},
{
"path": "src/components/navbars/Navbar1/Navbar1.jsx",
"chars": 3344,
"preview": "import { useEffect, useRef, useState } from \"react\";\nimport image1 from \"./1.svg\";\nimport image2 from \"./2.svg\";\nimport "
},
{
"path": "src/components/navbars/Navbar2/Navbar2.css",
"chars": 2126,
"preview": ".page.navbar-2-page {\n background: #f3f3f6;\n font-family: \"Euclid Circular B\", \"Poppins\";\n}\n\n.navbar-2 {\n --color-pri"
},
{
"path": "src/components/navbars/Navbar2/Navbar2.jsx",
"chars": 2396,
"preview": "import { useEffect, useRef, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport avatar from \"./avatar.png\";\ni"
},
{
"path": "src/components/navbars/Navbar3/Navbar3.css",
"chars": 1833,
"preview": ".page.navbar-3-page {\n background: #f8f7ff;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.navbar-3 {\n --color-pri"
},
{
"path": "src/components/navbars/Navbar3/Navbar3.jsx",
"chars": 1901,
"preview": "import { useRef, useState } from \"react\";\nimport avatar from \"./avatar.png\";\nimport \"./Navbar3.css\";\n\nconst items = [\n "
},
{
"path": "src/components/navbars/Navbar4/Navbar4.css",
"chars": 1844,
"preview": ".navbar-4-page {\n --color-primary: #5c48cf;\n --gradient: linear-gradient(to right, var(--color-primary), #485acf);\n b"
},
{
"path": "src/components/navbars/Navbar4/Navbar4.jsx",
"chars": 1275,
"preview": "import { useState } from \"react\";\nimport \"./Navbar4.css\";\nimport logo from \"./logo.svg\";\n\nconst navItems = [\n {\n nam"
},
{
"path": "src/components/navbars/index.js",
"chars": 140,
"preview": "export * from \"./Navbar1/Navbar1\";\nexport * from \"./Navbar2/Navbar2\";\nexport * from \"./Navbar3/Navbar3\";\nexport * from \""
},
{
"path": "src/components/parallax/index.js",
"chars": 80,
"preview": "export * from \"./parallax-1/Parallax1\";\nexport * from \"./parallax-2/Parallax2\";\n"
},
{
"path": "src/components/parallax/parallax-1/Parallax1.jsx",
"chars": 2932,
"preview": "import { useState, useEffect } from \"react\";\nimport \"./styles.css\";\n\nexport const Parallax1 = () => {\n const [scrollPos"
},
{
"path": "src/components/parallax/parallax-1/styles.css",
"chars": 888,
"preview": ".page.parallax-1-page {\n background: #0e0d0e;\n height: 100%;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n* {\n b"
},
{
"path": "src/components/parallax/parallax-2/Parallax2.css",
"chars": 574,
"preview": ".page.parallax-2-page {\n margin: 0;\n background: #6a8faa;\n font-family: \"Euclid Circular A\", \"Poppins\";\n}\n\n.parallax-"
},
{
"path": "src/components/parallax/parallax-2/Parallax2.jsx",
"chars": 1795,
"preview": "import { useRef } from \"react\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/all\";\nimport { useGSAP } fr"
},
{
"path": "src/components/sidebars/Sidebar1/Sidebar1.jsx",
"chars": 3036,
"preview": "import { useRef, useState } from \"react\";\nimport \"./styles.css\";\n\nconst menuItems = [\n {\n name: \"Home\",\n icon: \"h"
},
{
"path": "src/components/sidebars/Sidebar1/styles.css",
"chars": 1901,
"preview": "* {\n box-sizing: border-box;\n}\n\n.page.sidebar-1-page {\n margin: 0;\n background: #12131a;\n font-family: \"Euclid Circu"
},
{
"path": "src/components/sidebars/Sidebar10/Sidebar10.css",
"chars": 2050,
"preview": ".page.sidebar-10-page {\n background: url(\"./bg.jpg\") #6a6eb7;\n background-size: cover;\n background-position: -200px;\n"
},
{
"path": "src/components/sidebars/Sidebar10/Sidebar10.jsx",
"chars": 2455,
"preview": "import { useRef, useState } from \"react\";\nimport \"./Sidebar10.css\";\n\nconst blocks = [\n {\n name: \"Hosting\",\n icon:"
},
{
"path": "src/components/sidebars/Sidebar11/Sidebar11.css",
"chars": 2446,
"preview": ".page.sidebar-11-page {\n background: #17132a url(\"./bg.jpg\");\n background-position: -400px;\n background-size: cover;\n"
},
{
"path": "src/components/sidebars/Sidebar11/Sidebar11.jsx",
"chars": 1238,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar11.css\";\n\nconst navItems = [\"home\", \"b"
},
{
"path": "src/components/sidebars/Sidebar12/Sidebar12.css",
"chars": 1811,
"preview": ".page.sidebar-12-page {\n background: url(\"./bg.jpg\");\n background-position: -360px;\n background-size: cover;\n overfl"
},
{
"path": "src/components/sidebars/Sidebar12/Sidebar12.jsx",
"chars": 3565,
"preview": "import { useRef, useState } from \"react\";\nimport \"./Sidebar12.css\";\nimport logo from \"./logo.svg\";\n\nconst SIDEBAR_ITEMS "
},
{
"path": "src/components/sidebars/Sidebar13/Sidebar13.css",
"chars": 2182,
"preview": ".page.sidebar-13-page {\n background: url(\"./bg.jpg\");\n background-position: -380px;\n background-size: cover;\n overfl"
},
{
"path": "src/components/sidebars/Sidebar13/Sidebar13.jsx",
"chars": 3778,
"preview": "import { useRef, useState, useLayoutEffect } from \"react\";\nimport \"./Sidebar13.css\";\nimport logo from \"./logo.svg\";\n\ncon"
},
{
"path": "src/components/sidebars/Sidebar14/Sidebar14.jsx",
"chars": 1112,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"buil"
},
{
"path": "src/components/sidebars/Sidebar14/styles.css",
"chars": 2080,
"preview": ".page.sidebar-14-page {\n background: #1c1b23;\n}\n\n.page.sidebar-14-page button {\n background: transparent;\n border: 0;"
},
{
"path": "src/components/sidebars/Sidebar15/Sidebar15.css",
"chars": 3272,
"preview": ".page.sidebar-15-page {\n --color-bg: #f4f6fa;\n --color-primary: #121926;\n --color-muted: #9fa4af;\n --color-hover: #e"
},
{
"path": "src/components/sidebars/Sidebar15/Sidebar15.jsx",
"chars": 2369,
"preview": "import \"./Sidebar15.css\";\nimport logo from \"./logo.svg\";\n\nconst leftTopItems = [\n \"ai-home-alt1\",\n \"ai-heart\",\n \"ai-m"
},
{
"path": "src/components/sidebars/Sidebar2/Sidebar2.jsx",
"chars": 1084,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"sett"
},
{
"path": "src/components/sidebars/Sidebar2/styles.css",
"chars": 1215,
"preview": ".page.sidebar-2-page {\n background: #17132a;\n}\n\n.sidebar-2 {\n position: absolute;\n overflow: hidden;\n top: 0;\n left"
},
{
"path": "src/components/sidebars/Sidebar3/Sidebar3.jsx",
"chars": 1072,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"sett"
},
{
"path": "src/components/sidebars/Sidebar3/styles.css",
"chars": 1811,
"preview": ".page.sidebar-3-page {\n background: #17132a url(\"./bg.jpeg\");\n background-size: cover;\n}\n\n.page.sidebar-3-page::after "
},
{
"path": "src/components/sidebars/Sidebar4/Sidebar4.css",
"chars": 1981,
"preview": "* {\n box-sizing: border-box;\n}\n\n.page.sidebar-4-page {\n background: #36367f;\n}\n\n.sidebar-4 button {\n background: tran"
},
{
"path": "src/components/sidebars/Sidebar4/Sidebar4.jsx",
"chars": 1152,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.png\";\nimport \"./Sidebar4.css\";\n\nconst navItems = [\n \"home\",\n"
},
{
"path": "src/components/sidebars/Sidebar5/Sidebar5.css",
"chars": 1420,
"preview": ".page.sidebar-5-page {\n margin: 0;\n background: #1c376d;\n height: 100vh;\n overflow: hidden;\n}\n\n.lni {\n font-size: 2"
},
{
"path": "src/components/sidebars/Sidebar5/Sidebar5.jsx",
"chars": 2078,
"preview": "import { useRef, useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar5.css\";\n\nconst items = [\n {\n "
},
{
"path": "src/components/sidebars/Sidebar6/Sidebar6.css",
"chars": 2775,
"preview": "* {\n box-sizing: border-box;\n}\n\n.sidebar-6 {\n --width-open: 260px;\n --width-closed: 64px;\n}\n\n.page.sidebar-6-page {\n "
},
{
"path": "src/components/sidebars/Sidebar6/Sidebar6.jsx",
"chars": 1159,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar6.css\";\n\nconst navItems = [\n \"dashboa"
},
{
"path": "src/components/sidebars/Sidebar7/Sidebar7.jsx",
"chars": 1108,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./styles.css\";\n\nconst navItems = [\"home\", \"buil"
},
{
"path": "src/components/sidebars/Sidebar7/styles.css",
"chars": 2058,
"preview": ".page.sidebar-7-page {\n background: #1c1b23;\n}\n\n.page.sidebar-7-page button {\n background: transparent;\n border: 0;\n "
},
{
"path": "src/components/sidebars/Sidebar8/Sidebar8.css",
"chars": 2634,
"preview": ".page.sidebar-8-page {\n --color-hover: #313132;\n --border: 1px solid #2d2d2d;\n margin: 0;\n background: #141414;\n co"
},
{
"path": "src/components/sidebars/Sidebar8/Sidebar8.jsx",
"chars": 1780,
"preview": "import logo from \"./logo.svg\";\nimport \"./Sidebar8.css\";\n\nconst navItems = [\"home-alt1\", \"heart\", \"mention\", \"plus\"];\n\nco"
},
{
"path": "src/components/sidebars/Sidebar9/Sidebar9.css",
"chars": 1984,
"preview": ".page.sidebar-9-page {\n background: #17132a url(\"./bg.jpg\");\n background-size: cover;\n}\n\n.page.sidebar-9-page::after {"
},
{
"path": "src/components/sidebars/Sidebar9/Sidebar9.jsx",
"chars": 1086,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Sidebar9.css\";\n\nconst navItems = [\"home\", \"se"
},
{
"path": "src/components/sidebars/index.js",
"chars": 567,
"preview": "export * from \"./Sidebar1/Sidebar1\";\nexport * from \"./Sidebar2/Sidebar2\";\nexport * from \"./Sidebar3/Sidebar3\";\nexport * "
},
{
"path": "src/components/signups/Signup1/Signup1.css",
"chars": 3880,
"preview": ".page.signup-1-page {\n margin: 0;\n background: #f2f3fe;\n color: #4b5679;\n height: 100vh;\n display: grid;\n place-it"
},
{
"path": "src/components/signups/Signup1/Signup1.jsx",
"chars": 1984,
"preview": "import { useState } from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./Signup1.css\";\n\nconst CardBackground = ({ view"
},
{
"path": "src/components/signups/index.js",
"chars": 35,
"preview": "export * from \"./Signup1/Signup1\";\n"
},
{
"path": "src/components/tables/Table1/Table1.css",
"chars": 685,
"preview": ".table-1-wrapper {\n overflow: auto;\n position: relative;\n z-index: 2;\n width: 440px;\n min-width: 440px;\n max-width"
},
{
"path": "src/components/tables/Table1/Table1.jsx",
"chars": 2728,
"preview": "import { useEffect, useRef, useState, createRef } from \"react\";\nimport \"./Table1.css\";\n\nconst TableHeader = ({ index, co"
},
{
"path": "src/components/tables/Table1/Table1Example.css",
"chars": 767,
"preview": ".page.table-1-page {\n background: linear-gradient(45deg, #2c3c5e, #1a2239);\n color: #f9f9f9;\n display: flex;\n align-"
},
{
"path": "src/components/tables/Table1/Table1Example.jsx",
"chars": 1420,
"preview": "import { Table1 } from \"./Table1\";\nimport \"./Table1Example.css\";\nimport logo from \"./logo.svg\";\n\nconst columns = [\n {\n "
},
{
"path": "src/components/tables/Table2/Table2.css",
"chars": 984,
"preview": ".table-2 {\n border-collapse: collapse;\n text-align: left;\n width: 100%;\n}\n\n.table-2 thead {\n position: sticky;\n top"
},
{
"path": "src/components/tables/Table2/Table2.jsx",
"chars": 1644,
"preview": "import { useState } from \"react\";\nimport \"./Table2.css\";\n\nconst TableHeader = ({ column, onSort, sortOrder, sortColumn }"
},
{
"path": "src/components/tables/Table2/Table2Example.css",
"chars": 1721,
"preview": ".table-2-page {\n background: #222129;\n color: #f5f3f9;\n margin: 0;\n height: 100vh;\n font-size: 110%;\n font-family:"
}
]
// ... and 15 more files (download for full content)
About this extraction
This page contains the full source code of the frontend-joe/react-components GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 215 files (351.9 KB), approximately 118.7k tokens, and a symbol index with 5 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.