simrail/simrail.pro
3
0
Fork 2
Code Issues 2 Pull Requests Actions Packages Projects Releases 27 Wiki Activity

refactor(v3): format files

Browse Source
This commit is contained in:
Aleksander Wilczyński 2024-11-03 00:44:09 +01:00
parent 6f7f2dad52
commit bca728414b
Signed by: alekswilc
GPG Key ID: D4464A248E5F27FE
101 changed files with 5794 additions and 5305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>

6
.idea/compiler.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="TypeScriptCompiler">
<option name="versionType" value="EMBEDDED" />
</component>
</project>

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"npm.packageManager": "yarn"
}

18
packages/frontend/index.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>TailAdmin - Tailwind CSS Admin Dashboard Template</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

10
packages/frontend/postcss.config.cjs
View File

@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

247
packages/frontend/src/App.tsx
View File

@ -1,136 +1,139 @@
import { useEffect, useState } from 'react';
import { Route, Routes, useLocation } from 'react-router-dom';
import { useEffect, useState } from "react";
import { Route, Routes, useLocation } from "react-router-dom";
import { Loader } from './components/mini/loaders/PageLoader.tsx';
import { PageTitle } from './components/mini/util/PageTitle.tsx';
import Chart from './old/Chart.tsx';
import { Home } from './pages/Home';
import Settings from './old/Settings.tsx';
import Alerts from './old/UiElements/Alerts.tsx';
import Buttons from './old/UiElements/Buttons.tsx';
import DefaultLayout from './layout/DefaultLayout';
import { Loader } from "./components/mini/loaders/PageLoader.tsx";
import { PageTitle } from "./components/mini/util/PageTitle.tsx";
import Chart from "./old/Chart.tsx";
import { Home } from "./pages/Home";
import Settings from "./old/Settings.tsx";
import Alerts from "./old/UiElements/Alerts.tsx";
import Buttons from "./old/UiElements/Buttons.tsx";
import DefaultLayout from "./layout/DefaultLayout";
import "./i18n";
import { TrainLeaderboard } from './pages/leaderboard/TrainLeaderboard.tsx';
import { StationLeaderboard } from './pages/leaderboard/StationsLeaderboard.tsx';
import { TrainLogs } from './pages/logs/TrainLogs.tsx';
import { StationLogs } from './pages/logs/StationLogs.tsx';
import { Profile } from './pages/profile/Profile.tsx';
import { TrainLeaderboard } from "./pages/leaderboard/TrainLeaderboard.tsx";
import { StationLeaderboard } from "./pages/leaderboard/StationsLeaderboard.tsx";
import { TrainLogs } from "./pages/logs/TrainLogs.tsx";
import { StationLogs } from "./pages/logs/StationLogs.tsx";
import { Profile } from "./pages/profile/Profile.tsx";
function App() {
const [loading, setLoading] = useState<boolean>(true);
const { pathname } = useLocation();
function App()
{
const [ loading, setLoading ] = useState<boolean>(true);
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
useEffect(() =>
{
window.scrollTo(0, 0);
}, [ pathname ]);
useEffect(() => {
setTimeout(() => setLoading(false), 400);
}, []);
useEffect(() =>
{
setTimeout(() => setLoading(false), 400);
}, []);
return loading ? (
<Loader />
) : (
<DefaultLayout>
<Routes>
<Route
index
element={
<>
<PageTitle title="simrail.alekswilc.dev | Home" />
<Home />
</>
}
/>
<Route
path="/leaderboard/trains"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Train Leaderboard" />
<TrainLeaderboard />
</>
}
/>
return loading ? (
<Loader/>
) : (
<DefaultLayout>
<Routes>
<Route
index
element={
<>
<PageTitle title="simrail.alekswilc.dev | Home"/>
<Home/>
</>
}
/>
<Route
path="/leaderboard/trains"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Train Leaderboard"/>
<TrainLeaderboard/>
</>
}
/>
<Route
path="/logs/trains"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Train logs" />
<TrainLogs />
</>
}
/>
<Route
path="/logs/trains"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Train logs"/>
<TrainLogs/>
</>
}
/>
<Route
path="/logs/stations"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Station logs" />
<StationLogs />
</>
}
/>
<Route
path="/logs/stations"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Station logs"/>
<StationLogs/>
</>
}
/>
<Route
path="/leaderboard/stations"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard" />
<StationLeaderboard />
</>
}
/>
<Route
path="/leaderboard/stations"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard"/>
<StationLeaderboard/>
</>
}
/>
<Route
path="/profile/:id"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard" />
<Profile />
</>
}
/>
<Route
path="/profile/:id"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard"/>
<Profile/>
</>
}
/>
<Route
path="/settings"
element={
<>
<PageTitle title="Settings | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Settings />
</>
}
/>
<Route
path="/chart"
element={
<>
<PageTitle title="Basic Chart | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Chart />
</>
}
/>
<Route
path="/ui/alerts"
element={
<>
<PageTitle title="Alerts | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Alerts />
</>
}
/>
<Route
path="/ui/buttons"
element={
<>
<PageTitle title="Buttons | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Buttons />
</>
}
/>
</Routes>
</DefaultLayout>
);
<Route
path="/settings"
element={
<>
<PageTitle title="Settings | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Settings/>
</>
}
/>
<Route
path="/chart"
element={
<>
<PageTitle title="Basic Chart | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Chart/>
</>
}
/>
<Route
path="/ui/alerts"
element={
<>
<PageTitle title="Alerts | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Alerts/>
</>
}
/>
<Route
path="/ui/buttons"
element={
<>
<PageTitle title="Buttons | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Buttons/>
</>
}
/>
</Routes>
</DefaultLayout>
);
}
export default App;

22
packages/frontend/src/components/mini/alerts/Error.tsx
View File

@ -1,21 +1,21 @@
export const ErrorAlert = ({ title, description }: { title: string, description: string }) =>
<div
className='flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'>
<div className='mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]'>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='<http://www.w3.org/2000/svg>'>
className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path
d='M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z'
fill='#ffffff' stroke='#ffffff'></path>
d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill="#ffffff" stroke="#ffffff"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 font-semibold text-[#B45454]'>
{title}
<div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]">
{ title }
</h5>
<ul>
<li className='leading-relaxed text-[#CD5D5D]'>
{description}
<li className="leading-relaxed text-[#CD5D5D]">
{ description }
</li>
</ul>
</div>
</div>
</div>;

22
packages/frontend/src/components/mini/alerts/Success.tsx
View File

@ -1,19 +1,19 @@
export const SuccessAlert = ({ title, description }: { title: string, description: string }) =>
<div
className='flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'>
<div className='mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]'>
<svg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='<http://www.w3.org/2000/svg>'>
className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path
d='M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z'
fill='white' stroke='white'></path>
d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z"
fill="white" stroke="white"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 text-lg font-semibold text-black dark:text-[#34D399] '>
{title}
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
{ title }
</h5>
<p className='text-base leading-relaxed text-body'>
{description}
<p className="text-base leading-relaxed text-body">
{ description }
</p>
</div>
</div>
</div>;

22
packages/frontend/src/components/mini/alerts/Warning.tsx
View File

@ -1,19 +1,19 @@
export const WarningAlert = ({ title, description }: { title: string, description: string }) =>
<div
className='flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'>
<div className='mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30'>
<svg width='19' height='16' viewBox='0 0 19 16' fill='none' xmlns='<http://www.w3.org/2000/svg>'>
className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path
d='M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z'
fill='#FBBF24'></path>
d="M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z"
fill="#FBBF24"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 text-lg font-semibold text-[#9D5425]'>
{title}
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-[#9D5425]">
{ title }
</h5>
<p className='leading-relaxed text-[#D0915C]'>
{description}
<p className="leading-relaxed text-[#D0915C]">
{ description }
</p>
</div>
</div>
</div>;

89
packages/frontend/src/components/mini/header/DarkModeSwitcher.tsx
View File

@ -1,65 +1,68 @@
import useColorMode from '../../../hooks/useColorMode';
import useColorMode from "../../../hooks/useColorMode";
const DarkModeSwitcher = () => {
const [colorMode, setColorMode] = useColorMode();
const DarkModeSwitcher = () =>
{
const [ colorMode, setColorMode ] = useColorMode();
return (
<li>
<label
className={`relative m-0 block h-7.5 w-14 rounded-full ${
colorMode === 'dark' ? 'bg-primary' : 'bg-stroke'
}`}
>
<input
type="checkbox"
onChange={() => {
if (typeof setColorMode === 'function') {
setColorMode(colorMode === 'light' ? 'dark' : 'light');
}
}}
className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
/>
<span
className={`absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
colorMode === 'dark' && '!right-[3px] !translate-x-full'
}`}
>
return (
<li>
<label
className={ `relative m-0 block h-7.5 w-14 rounded-full ${
colorMode === "dark" ? "bg-primary" : "bg-stroke"
}` }
>
<input
type="checkbox"
onChange={ () =>
{
if (typeof setColorMode === "function")
{
setColorMode(colorMode === "light" ? "dark" : "light");
}
} }
className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
/>
<span
className={ `absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
colorMode === "dark" && "!right-[3px] !translate-x-full"
}` }
>
<span className="dark:hidden">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.99992 12.6666C10.5772 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5772 3.33325 7.99992 3.33325C5.42259 3.33325 3.33325 5.42259 3.33325 7.99992C3.33325 10.5772 5.42259 12.6666 7.99992 12.6666Z"
fill="#969AA1"
d="M7.99992 12.6666C10.5772 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5772 3.33325 7.99992 3.33325C5.42259 3.33325 3.33325 5.42259 3.33325 7.99992C3.33325 10.5772 5.42259 12.6666 7.99992 12.6666Z"
fill="#969AA1"
/>
<path
d="M8.00008 15.3067C7.63341 15.3067 7.33342 15.0334 7.33342 14.6667V14.6134C7.33342 14.2467 7.63341 13.9467 8.00008 13.9467C8.36675 13.9467 8.66675 14.2467 8.66675 14.6134C8.66675 14.9801 8.36675 15.3067 8.00008 15.3067ZM12.7601 13.4267C12.5867 13.4267 12.4201 13.3601 12.2867 13.2334L12.2001 13.1467C11.9401 12.8867 11.9401 12.4667 12.2001 12.2067C12.4601 11.9467 12.8801 11.9467 13.1401 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1001 13.3601 12.9334 13.4267 12.7601 13.4267ZM3.24008 13.4267C3.06675 13.4267 2.90008 13.3601 2.76675 13.2334C2.50675 12.9734 2.50675 12.5534 2.76675 12.2934L2.85342 12.2067C3.11342 11.9467 3.53341 11.9467 3.79341 12.2067C4.05341 12.4667 4.05341 12.8867 3.79341 13.1467L3.70675 13.2334C3.58008 13.3601 3.40675 13.4267 3.24008 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.9801 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38675 8.66675H1.33341C0.966748 8.66675 0.666748 8.36675 0.666748 8.00008C0.666748 7.63341 0.966748 7.33342 1.33341 7.33342C1.70008 7.33342 2.02675 7.63341 2.02675 8.00008C2.02675 8.36675 1.75341 8.66675 1.38675 8.66675ZM12.6734 3.99341C12.5001 3.99341 12.3334 3.92675 12.2001 3.80008C11.9401 3.54008 11.9401 3.12008 12.2001 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.1401 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32675 3.99341C3.15341 3.99341 2.98675 3.92675 2.85342 3.80008L2.76675 3.70675C2.50675 3.44675 2.50675 3.02675 2.76675 2.76675C3.02675 2.50675 3.44675 2.50675 3.70675 2.76675L3.79341 2.85342C4.05341 3.11342 4.05341 3.53341 3.79341 3.79341C3.66675 3.92675 3.49341 3.99341 3.32675 3.99341ZM8.00008 2.02675C7.63341 2.02675 7.33342 1.75341 7.33342 1.38675V1.33341C7.33342 0.966748 7.63341 0.666748 8.00008 0.666748C8.36675 0.666748 8.66675 0.966748 8.66675 1.33341C8.66675 1.70008 8.36675 2.02675 8.00008 2.02675Z"
fill="#969AA1"
d="M8.00008 15.3067C7.63341 15.3067 7.33342 15.0334 7.33342 14.6667V14.6134C7.33342 14.2467 7.63341 13.9467 8.00008 13.9467C8.36675 13.9467 8.66675 14.2467 8.66675 14.6134C8.66675 14.9801 8.36675 15.3067 8.00008 15.3067ZM12.7601 13.4267C12.5867 13.4267 12.4201 13.3601 12.2867 13.2334L12.2001 13.1467C11.9401 12.8867 11.9401 12.4667 12.2001 12.2067C12.4601 11.9467 12.8801 11.9467 13.1401 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1001 13.3601 12.9334 13.4267 12.7601 13.4267ZM3.24008 13.4267C3.06675 13.4267 2.90008 13.3601 2.76675 13.2334C2.50675 12.9734 2.50675 12.5534 2.76675 12.2934L2.85342 12.2067C3.11342 11.9467 3.53341 11.9467 3.79341 12.2067C4.05341 12.4667 4.05341 12.8867 3.79341 13.1467L3.70675 13.2334C3.58008 13.3601 3.40675 13.4267 3.24008 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.9801 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38675 8.66675H1.33341C0.966748 8.66675 0.666748 8.36675 0.666748 8.00008C0.666748 7.63341 0.966748 7.33342 1.33341 7.33342C1.70008 7.33342 2.02675 7.63341 2.02675 8.00008C2.02675 8.36675 1.75341 8.66675 1.38675 8.66675ZM12.6734 3.99341C12.5001 3.99341 12.3334 3.92675 12.2001 3.80008C11.9401 3.54008 11.9401 3.12008 12.2001 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.1401 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32675 3.99341C3.15341 3.99341 2.98675 3.92675 2.85342 3.80008L2.76675 3.70675C2.50675 3.44675 2.50675 3.02675 2.76675 2.76675C3.02675 2.50675 3.44675 2.50675 3.70675 2.76675L3.79341 2.85342C4.05341 3.11342 4.05341 3.53341 3.79341 3.79341C3.66675 3.92675 3.49341 3.99341 3.32675 3.99341ZM8.00008 2.02675C7.63341 2.02675 7.33342 1.75341 7.33342 1.38675V1.33341C7.33342 0.966748 7.63341 0.666748 8.00008 0.666748C8.36675 0.666748 8.66675 0.966748 8.66675 1.33341C8.66675 1.70008 8.36675 2.02675 8.00008 2.02675Z"
fill="#969AA1"
/>
</svg>
</span>
<span className="hidden dark:inline-block">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.3533 10.62C14.2466 10.44 13.9466 10.16 13.1999 10.2933C12.7866 10.3667 12.3666 10.4 11.9466 10.38C10.3933 10.3133 8.98659 9.6 8.00659 8.5C7.13993 7.53333 6.60659 6.27333 6.59993 4.91333C6.59993 4.15333 6.74659 3.42 7.04659 2.72666C7.33993 2.05333 7.13326 1.7 6.98659 1.55333C6.83326 1.4 6.47326 1.18666 5.76659 1.48C3.03993 2.62666 1.35326 5.36 1.55326 8.28666C1.75326 11.04 3.68659 13.3933 6.24659 14.28C6.85993 14.4933 7.50659 14.62 8.17326 14.6467C8.27993 14.6533 8.38659 14.66 8.49326 14.66C10.7266 14.66 12.8199 13.6067 14.1399 11.8133C14.5866 11.1933 14.4666 10.8 14.3533 10.62Z"
fill="#969AA1"
d="M14.3533 10.62C14.2466 10.44 13.9466 10.16 13.1999 10.2933C12.7866 10.3667 12.3666 10.4 11.9466 10.38C10.3933 10.3133 8.98659 9.6 8.00659 8.5C7.13993 7.53333 6.60659 6.27333 6.59993 4.91333C6.59993 4.15333 6.74659 3.42 7.04659 2.72666C7.33993 2.05333 7.13326 1.7 6.98659 1.55333C6.83326 1.4 6.47326 1.18666 5.76659 1.48C3.03993 2.62666 1.35326 5.36 1.55326 8.28666C1.75326 11.04 3.68659 13.3933 6.24659 14.28C6.85993 14.4933 7.50659 14.62 8.17326 14.6467C8.27993 14.6533 8.38659 14.66 8.49326 14.66C10.7266 14.66 12.8199 13.6067 14.1399 11.8133C14.5866 11.1933 14.4666 10.8 14.3533 10.62Z"
fill="#969AA1"
/>
</svg>
</span>
</span>
</label>
</li>
);
</label>
</li>
);
};
export default DarkModeSwitcher;

96
packages/frontend/src/components/mini/header/index.tsx
View File

@ -1,72 +1,74 @@
import DarkModeSwitcher from './DarkModeSwitcher.tsx';
import DarkModeSwitcher from "./DarkModeSwitcher.tsx";
const Header = (props: {
sidebarOpen: string | boolean | undefined;
setSidebarOpen: (arg0: boolean) => void;
}) => {
return (
<header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
<div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
<div className="flex items-center gap-2 sm:gap-4 lg:hidden">
{/* <!-- Hamburger Toggle BTN --> */}
<button
aria-controls="sidebar"
onClick={(e) => {
e.stopPropagation();
props.setSidebarOpen(!props.sidebarOpen);
}}
className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
>
sidebarOpen: string | boolean | undefined;
setSidebarOpen: (arg0: boolean) => void;
}) =>
{
return (
<header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
<div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
<div className="flex items-center gap-2 sm:gap-4 lg:hidden">
{/* <!-- Hamburger Toggle BTN --> */ }
<button
aria-controls="sidebar"
onClick={ (e) =>
{
e.stopPropagation();
props.setSidebarOpen(!props.sidebarOpen);
} }
className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
>
<span className="relative block h-5.5 w-5.5 cursor-pointer">
<span className="du-block absolute right-0 h-full w-full">
<span
className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-300'
}`}
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && "!w-full delay-300"
}` }
></span>
<span
className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && 'delay-400 !w-full'
}`}
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && "delay-400 !w-full"
}` }
></span>
<span
className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-500'
}`}
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && "!w-full delay-500"
}` }
></span>
</span>
<span className="absolute right-0 h-full w-full rotate-45">
<span
className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-[0]'
}`}
className={ `absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && "!h-0 !delay-[0]"
}` }
></span>
<span
className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-200'
}`}
className={ `delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && "!h-0 !delay-200"
}` }
></span>
</span>
</span>
</button>
{/* <!-- Hamburger Toggle BTN --> */}
</button>
{/* <!-- Hamburger Toggle BTN --> */ }
</div>
</div>
<div className="hidden sm:block"></div>
<div className="hidden sm:block"></div>
<div className="flex items-center gap-3 2xsm:gap-7">
<ul className="flex items-center gap-2 2xsm:gap-4">
{/* <!-- Dark Mode Toggler --> */}
<DarkModeSwitcher />
{/* <!-- Dark Mode Toggler --> */}
{/* LanguageSwitcher */}
</ul>
<div className="flex items-center gap-3 2xsm:gap-7">
<ul className="flex items-center gap-2 2xsm:gap-4">
{/* <!-- Dark Mode Toggler --> */ }
<DarkModeSwitcher/>
{/* <!-- Dark Mode Toggler --> */ }
{/* LanguageSwitcher */ }
</ul>
</div>
</div>
</header>
);
</div>
</div>
</header>
);
};
export default Header;

63
packages/frontend/src/components/mini/loaders/ContentLoader.tsx
View File

@ -1,35 +1,41 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
export const LoadError = () => {
export const LoadError = () =>
{
const { t } = useTranslation();
return <div
className='flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'>
<div className='mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]'>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='<http://www.w3.org/2000/svg>'>
className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path
d='M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z'
fill='#ffffff' stroke='#ffffff'></path>
d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill="#ffffff" stroke="#ffffff"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 font-semibold text-[#B45454]'>
{t("contentloader.error.header")}
<div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]">
{ t("contentloader.error.header") }
</h5>
<ul>
<li className='leading-relaxed text-[#CD5D5D]'>
{t("contentloader.error.description")}
<li className="leading-relaxed text-[#CD5D5D]">
{ t("contentloader.error.description") }
</li>
<li className='leading-relaxed text-[#CD5D5D]'>
<li className="leading-relaxed text-[#CD5D5D]">
<div className="pt-4">
{/* TODO: add git issue params */}
{/* TODO: add git issue params */ }
<div className="mb-7.5 flex flex-wrap gap-4">
<Link className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8" to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/issues/new">{t("contentloader.error.report")}</Link>
<Link
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8"
to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/issues/new">{ t("contentloader.error.report") }</Link>
<Link className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8" to="#" onClick={() => window.location.reload()}>{t("contentloader.error.refresh")}</Link>
<Link
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8"
to="#"
onClick={ () => window.location.reload() }>{ t("contentloader.error.refresh") }</Link>
</div>
</div>
@ -38,12 +44,15 @@ export const LoadError = () => {
</ul>
</div>
</div>;
}
};
export const ContentLoader = () => {
const [error, setError] = useState(false);
useEffect(() => {
new Promise(res => setTimeout(res, 5000)).then(() => {
export const ContentLoader = () =>
{
const [ error, setError ] = useState(false);
useEffect(() =>
{
new Promise(res => setTimeout(res, 5000)).then(() =>
{
setError(true);
});
@ -52,9 +61,11 @@ export const ContentLoader = () => {
return (
<>
{error ? <LoadError /> : <div className="flex h-screen items-center justify-center shadow-default bg-white dark:border-strokedark dark:bg-boxdark">
<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
</div>}
{ error ? <LoadError/> : <div
className="flex h-screen items-center justify-center shadow-default bg-white dark:border-strokedark dark:bg-boxdark">
<div
className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
</div> }
</>
);
};

14
packages/frontend/src/components/mini/loaders/PageLoader.tsx
View File

@ -1,7 +1,9 @@
export const Loader = () => {
return (
<div className="flex h-screen items-center justify-center bg-black">
<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
</div>
);
export const Loader = () =>
{
return (
<div className="flex h-screen items-center justify-center bg-black">
<div
className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
</div>
);
};

27
packages/frontend/src/components/mini/sidebar/SidebarLinkGroup.tsx
View File

@ -1,21 +1,24 @@
import { ReactNode, useState } from 'react';
import { ReactNode, useState } from "react";
interface SidebarLinkGroupProps {
children: (handleClick: () => void, open: boolean) => ReactNode;
activeCondition: boolean;
interface SidebarLinkGroupProps
{
children: (handleClick: () => void, open: boolean) => ReactNode;
activeCondition: boolean;
}
const SidebarLinkGroup = ({
children,
activeCondition,
}: SidebarLinkGroupProps) => {
const [open, setOpen] = useState<boolean>(activeCondition);
children,
activeCondition,
}: SidebarLinkGroupProps) =>
{
const [ open, setOpen ] = useState<boolean>(activeCondition);
const handleClick = () => {
setOpen(!open);
};
const handleClick = () =>
{
setOpen(!open);
};
return <li>{children(handleClick, open)}</li>;
return <li>{ children(handleClick, open) }</li>;
};
export default SidebarLinkGroup;

1158
packages/frontend/src/components/mini/sidebar/index.tsx
View File

File diff suppressed because one or more lines are too long

23
packages/frontend/src/components/mini/util/PageTitle.tsx
View File

@ -1,16 +1,19 @@
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
interface PageTitleProps {
title: string;
interface PageTitleProps
{
title: string;
}
export const PageTitle: React.FC<PageTitleProps> = ({ title }) => {
const location = useLocation();
export const PageTitle: React.FC<PageTitleProps> = ({ title }) =>
{
const location = useLocation();
useEffect(() => {
document.title = title;
}, [location, title]);
useEffect(() =>
{
document.title = title;
}, [ location, title ]);
return null; // This component doesn't render anything
return null; // This component doesn't render anything
};

25
packages/frontend/src/components/mini/util/Search.tsx
View File

@ -1,17 +1,22 @@
import { ChangeEventHandler } from 'react';
import { useTranslation } from 'react-i18next';
import { ChangeEventHandler } from "react";
import { useTranslation } from "react-i18next";
export const Search = ({ searchItem, handleInputChange }: { searchItem: string; handleInputChange: ChangeEventHandler }) => {
const { t }= useTranslation();
return <div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
export const Search = ({ searchItem, handleInputChange }: {
searchItem: string;
handleInputChange: ChangeEventHandler
}) =>
{
const { t } = useTranslation();
return <div
className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
<div className="flex justify-center items-center">
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-5 pr-5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text"
onChange={handleInputChange}
value={searchItem}
placeholder={t("logs.search")}
onChange={ handleInputChange }
value={ searchItem }
placeholder={ t("logs.search") }
/>
</div>
</div>
}
</div>;
};

55
packages/frontend/src/components/pages/leaderboard/StationTable.tsx
View File

@ -1,72 +1,75 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TLeaderboardRecord } from '../../../types/leaderboard.ts';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
import { WarningAlert } from "../../mini/alerts/Warning.tsx";
export const StationTable = ({ stations, error }: { stations: TLeaderboardRecord[], error: number }) => {
export const StationTable = ({ stations, error }: { stations: TLeaderboardRecord[], error: number }) =>
{
const { t } = useTranslation();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{error === 0 && <ContentLoader />}
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
{ error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> }
{ error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-3">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.user")}
{ t("leaderboard.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.time")}
{ t("leaderboard.time") }
</h5>
</div>
<div className="hidden p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.actions")}
{ t("leaderboard.actions") }
</h5>
</div>
</div>
{stations.map((station, key) => (
{ stations.map((station, key) => (
<div
className={`grid grid-cols-2 sm:grid-cols-3 ${stations.length === (key + 1) // todo: ...
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={station.id}
className={ `grid grid-cols-2 sm:grid-cols-3 ${ stations.length === (key + 1) // todo: ...
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ station.id }
>
<div className="flex justify-center items-center gap-3 p-5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
<Link to={"/profile/" + station.steam}
className='color-orchid'>{station.steamName}</Link>
<Link to={ "/profile/" + station.steam }
className="color-orchid">{ station.steamName }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(station.dispatcherTime / 3600000)}h</p>
<p className="text-meta-3">{ Math.floor(station.dispatcherTime / 3600000) }h</p>
</div>
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
<Link
to={"/profile/" + station.steam}
to={ "/profile/" + station.steam }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
>
{t("leaderboard.profile")}
{ t("leaderboard.profile") }
</Link>
</div>
</div>
))}
)) }
</div>
</div>}
</div> }
</>
);
}
};

157
packages/frontend/src/components/pages/leaderboard/TrainTable.tsx
View File

@ -1,85 +1,90 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TLeaderboardRecord } from '../../../types/leaderboard.ts';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from "../../mini/alerts/Warning.tsx";
export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], error: number }) => {
const { t } = useTranslation();
export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], error: number }) =>
{
const { t } = useTranslation();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{error === 0 && <ContentLoader />}
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> <div className="flex flex-col">
<div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.user")}
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.points")}
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.distance")}
</h5>
</div>
<div className="p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.time")}
</h5>
</div>
<div className="hidden p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.actions")}
</h5>
</div>
</div>
return (
<>
{ error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> }
{ error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col">
<div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("leaderboard.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("leaderboard.points") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("leaderboard.distance") }
</h5>
</div>
<div className="p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("leaderboard.time") }
</h5>
</div>
<div className="hidden p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("leaderboard.actions") }
</h5>
</div>
</div>
{trains.map((train, key) => (
<div
className={`grid grid-cols-4 sm:grid-cols-5 ${trains.length === (key + 1)
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={train.id}
>
<div className="flex items-center justify-center gap-3 p-5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
<Link to={"/profile/" + train.steam}
className='color-orchid'>{train.steamName}</Link>
</p>
</div>
{ trains.map((train, key) => (
<div
className={ `grid grid-cols-4 sm:grid-cols-5 ${ trains.length === (key + 1)
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ train.id }
>
<div className="flex items-center justify-center gap-3 p-5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
<Link to={ "/profile/" + train.steam }
className="color-orchid">{ train.steamName }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6">{train.trainPoints}</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6">{ train.trainPoints }</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-5">{(train.trainDistance / 1000).toFixed(2)}km</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-5">{ (train.trainDistance / 1000).toFixed(2) }km</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(train.trainTime / 3600000)}h</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{ Math.floor(train.trainTime / 3600000) }h</p>
</div>
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
<Link
to={"/profile/" + train.steam}
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
>
{t("leaderboard.profile")}
</Link>
</div>
</div>
))}
</div> </div>}
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
<Link
to={ "/profile/" + train.steam }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
>
{ t("leaderboard.profile") }
</Link>
</div>
</div>
)) }
</div>
</div> }
</>
);
}
</>
);
};

68
packages/frontend/src/components/pages/logs/StationTable.tsx
View File

@ -1,88 +1,92 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import dayjs from 'dayjs';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { TStationRecord } from '../../../types/station.ts';
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import dayjs from "dayjs";
import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { TStationRecord } from "../../../types/station.ts";
import { WarningAlert } from "../../mini/alerts/Warning.tsx";
// setSearchItem: Dispatch<SetStateAction<string>>
export const StationTable = ({ stations, error }: {
stations: TStationRecord[], error: number
}) => {
}) =>
{
const { t } = useTranslation();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{error === 0 && <ContentLoader />}
{ error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> }
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
{ error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.user")}
{ t("logs.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.station")}
{ t("logs.station") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.time")}
{ t("logs.time") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.actions")}
{ t("logs.actions") }
</h5>
</div>
</div>
{stations.map((station, key) => (
{ stations.map((station, key) => (
<div
className={`grid grid-cols-3 sm:grid-cols-4 ${stations.length === (key + 1)
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={station.id}
className={ `grid grid-cols-3 sm:grid-cols-4 ${ stations.length === (key + 1)
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ station.id }
>
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
<Link to={"/profile/" + station.userSteamId}
className='color-orchid'>{station.userUsername}</Link>
<Link to={ "/profile/" + station.userSteamId }
className="color-orchid">{ station.userUsername }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{station.server.toUpperCase()} - {station.stationName ?? "--"}</p>
<p className="text-meta-6 sm:block break-all">{ station.server.toUpperCase() } - { station.stationName ?? "--" }</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{dayjs(station.leftDate).format('HH:mm DD/MM/YYYY')}</p>
<p className="text-meta-3">{ dayjs(station.leftDate).format("HH:mm DD/MM/YYYY") }</p>
</div>
<div className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<div
className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<Link
to={"/profile/" + station.userSteamId}
to={ "/profile/" + station.userSteamId }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
>
{t("logs.profile")}
{ t("logs.profile") }
</Link>
<Link
to={"/log/" + station.id}
to={ "/log/" + station.id }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
>
{t("logs.record")}
{ t("logs.record") }
</Link>
</div>
</div>
))}
)) }
</div>
</div>}
</div> }
</>
);
}
};

76
packages/frontend/src/components/pages/logs/TrainTable.tsx
View File

@ -1,105 +1,109 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TTrainRecord } from '../../../types/train.ts';
import dayjs from 'dayjs';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TTrainRecord } from "../../../types/train.ts";
import dayjs from "dayjs";
import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from "../../mini/alerts/Warning.tsx";
// setSearchItem: Dispatch<SetStateAction<string>>
export const TrainTable = ({ trains, error }: {
trains: TTrainRecord[], error: number
}) => {
}) =>
{
const { t } = useTranslation();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{error === 0 && <ContentLoader />}
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
{ error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> }
{ error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-6">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.user")}
{ t("logs.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.train")}
{ t("logs.train") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.points")}
{ t("logs.points") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.distance")}
{ t("logs.distance") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.time")}
{ t("logs.time") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.actions")}
{ t("logs.actions") }
</h5>
</div>
</div>
{trains.map((train, key) => (
{ trains.map((train, key) => (
<div
className={`grid grid-cols-3 sm:grid-cols-6 ${trains.length === (key + 1)
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={train.id}
className={ `grid grid-cols-3 sm:grid-cols-6 ${ trains.length === (key + 1)
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ train.id }
>
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
<Link to={"/profile/" + train.userSteamId}
className='color-orchid'>{train.userUsername}</Link>
<Link to={ "/profile/" + train.userSteamId }
className="color-orchid">{ train.userUsername }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{train.server.toUpperCase()} - {train.trainNumber ?? "--"}</p>
<p className="text-meta-6 sm:block break-all">{ train.server.toUpperCase() } - { train.trainNumber ?? "--" }</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6">{train.distance ? train.points : "--"}</p>
<p className="text-meta-6">{ train.distance ? train.points : "--" }</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-5">{train.distance ? `${(train.distance / 1000).toFixed(2)}km` : '--'}</p>
<p className="text-meta-5">{ train.distance ? `${ (train.distance / 1000).toFixed(2) }km` : "--" }</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{dayjs(train.leftDate).format('HH:mm DD/MM/YYYY')}</p>
<p className="text-meta-3">{ dayjs(train.leftDate).format("HH:mm DD/MM/YYYY") }</p>
</div>
<div className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<div
className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<Link
to={"/profile/" + train.userSteamId}
to={ "/profile/" + train.userSteamId }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
>
{t("logs.profile")}
{ t("logs.profile") }
</Link>
<Link
to={"/log/" + train.id}
to={ "/log/" + train.id }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
>
{t("logs.record")}
{ t("logs.record") }
</Link>
</div>
</div>
))}
)) }
</div>
</div>}
</div> }
</>
);
}
};

296
packages/frontend/src/components/pages/profile/Profile.tsx
View File

@ -1,177 +1,181 @@
import { useState } from 'react';
import { TProfileData } from '../../../types/profile.ts';
import { useTranslation } from 'react-i18next';
import { useState } from "react";
import { TProfileData } from "../../../types/profile.ts";
import { useTranslation } from "react-i18next";
export const ProfileCard = ({ data }: { data: TProfileData }) => {
export const ProfileCard = ({ data }: { data: TProfileData }) =>
{
const [showTrains, setShowTrains] = useState(false);
const [showStations, setShowStations] = useState(false);
const [ showTrains, setShowTrains ] = useState(false);
const [ showStations, setShowStations ] = useState(false);
const { t } = useTranslation();
return <div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
return <div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pt-6 text-center lg:pb-8 xl:pb-11.5">
<div className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div
className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2">
<img className='rounded-full' src={data.steam.avatarfull} alt="profile" />
<img className="rounded-full" src={ data.steam.avatarfull } alt="profile"/>
</div>
</div>
<div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{data.steam.personname}
{ data.steam.personname }
</h3>
<div className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-2 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]">
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<div
className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-2 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]">
<div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white">
{Math.floor(data.player.trainDistance / 1000)}km
{ Math.floor(data.player.trainDistance / 1000) }km
</span>
<span className="text-sm text-wrap">{t("profile.stats.distance")}</span>
<span className="text-sm text-wrap">{ t("profile.stats.distance") }</span>
</div>
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white">
{Math.floor(data.player.dispatcherTime / 3600000)}h
{ Math.floor(data.player.dispatcherTime / 3600000) }h
</span>
<span className="text-sm text-wrap">{t("profile.stats.time")}</span>
<span className="text-sm text-wrap">{ t("profile.stats.time") }</span>
</div>
</div>
</div>
</div>
{Object.keys(data.player.trainStats || {}).length > 0 && <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={() => setShowTrains(val => !val)}>
<h1 className='text-xl text-black dark:text-white pb-5'>{t("profile.trains.header")}</h1>
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${showTrains && 'rotate-180'
}`}
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
fill=""
/>
</svg>
</div>
{showTrains && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.train")}
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.distance")}
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.points")}
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.time")}
</h5>
</div>
{ Object.keys(data.player.trainStats || {}).length > 0 &&
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={ () => setShowTrains(val => !val) }>
<h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.trains.header") }</h1>
<svg
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ showTrains && "rotate-180"
}` }
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
fill=""
/>
</svg>
</div>
{Object.keys(data.player.trainStats).map(trainName => {
const train = data.player.trainStats[trainName];
{ showTrains && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("profile.trains.train") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("profile.trains.distance") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("profile.trains.points") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("profile.trains.time") }
</h5>
</div>
</div>
return <div
className={`grid grid-cols-3 sm:grid-cols-4 ${false
? ''
: 'border-t border-t-stroke dark:border-t-strokedark'
}`}
key={1}
{ Object.keys(data.player.trainStats).map(trainName =>
{
const train = data.player.trainStats[ trainName ];
return <div
className={ `grid grid-cols-3 sm:grid-cols-4 border-t border-t-stroke dark:border-t-strokedark` }
key={ 1 }
>
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
{ trainName }
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{ Math.floor(train.distance / 1000) }km</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{ train.score }</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{ Math.floor(train.time / 3600000) }h</p>
</div>
</div>;
}) }
</div> }
</div> }
{ Object.keys(data.player.dispatcherStats || {}).length > 0 &&
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={ () => setShowStations(val => !val) }>
<h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.stations.header") }</h1>
<svg
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ showStations && "rotate-180"
}` }
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
{trainName}
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{Math.floor(train.distance / 1000)}km</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{train.score}</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(train.time / 3600000)}h</p>
</div>
</div>
})}
</div>}
</div>}
{Object.keys(data.player.dispatcherStats || {}).length > 0 && <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={() => setShowStations(val => !val)}>
<h1 className='text-xl text-black dark:text-white pb-5'>{t("profile.stations.header")}</h1>
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${showStations && 'rotate-180'
}`}
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
fill=""
/>
</svg>
</div>
{showStations && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.stations.station")}
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.stations.time")}
</h5>
</div>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
fill=""
/>
</svg>
</div>
{Object.keys(data.player.dispatcherStats).map(stationName => {
const station = data.player.dispatcherStats[stationName];
return <div
className={`grid grid-cols-2 ${false
? ''
: 'border-t border-t-stroke dark:border-t-strokedark'
}`}
key={1}
>
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
{stationName}
</p>
{ showStations && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("profile.stations.station") }
</h5>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(station.time / 3600000)}h</p>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{ t("profile.stations.time") }
</h5>
</div>
</div>;
})}
</div>
{ Object.keys(data.player.dispatcherStats).map(stationName =>
{
const station = data.player.dispatcherStats[ stationName ];
return <div
className={ `grid grid-cols-2 border-t border-t-stroke dark:border-t-strokedark` }
key={ 1 }
>
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all">
{ stationName }
</p>
</div>
</div>}
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{ Math.floor(station.time / 3600000) }h</p>
</div>
</div>;
}) }
</div>}
</div>
}
</div> }
</div> }
</div>;
};

140
packages/frontend/src/css/satoshi.css
View File

@ -21,111 +21,111 @@
*/
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
url('../fonts/Satoshi-Light.woff') format('woff'),
url('../fonts/Satoshi-Light.ttf') format('truetype');
font-weight: 300;
font-display: swap;
font-style: normal;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
url('../fonts/Satoshi-Light.woff') format('woff'),
url('../fonts/Satoshi-Light.ttf') format('truetype');
font-weight: 300;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
url('../fonts/Satoshi-LightItalic.woff') format('woff'),
url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
font-weight: 300;
font-display: swap;
font-style: italic;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
url('../fonts/Satoshi-LightItalic.woff') format('woff'),
url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
font-weight: 300;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
url('../fonts/Satoshi-Regular.woff') format('woff'),
url('../fonts/Satoshi-Regular.ttf') format('truetype');
font-weight: 400;
font-display: swap;
font-style: normal;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
url('../fonts/Satoshi-Regular.woff') format('woff'),
url('../fonts/Satoshi-Regular.ttf') format('truetype');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
url('../fonts/Satoshi-Italic.woff') format('woff'),
url('../fonts/Satoshi-Italic.ttf') format('truetype');
font-weight: 400;
font-display: swap;
font-style: italic;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
url('../fonts/Satoshi-Italic.woff') format('woff'),
url('../fonts/Satoshi-Italic.ttf') format('truetype');
font-weight: 400;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
url('../fonts/Satoshi-Medium.woff') format('woff'),
url('../fonts/Satoshi-Medium.ttf') format('truetype');
font-weight: 500;
font-display: swap;
font-style: normal;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
url('../fonts/Satoshi-Medium.woff') format('woff'),
url('../fonts/Satoshi-Medium.ttf') format('truetype');
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-display: swap;
font-style: italic;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
url('../fonts/Satoshi-Bold.woff') format('woff'),
url('../fonts/Satoshi-Bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: normal;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
url('../fonts/Satoshi-Bold.woff') format('woff'),
url('../fonts/Satoshi-Bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: italic;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
url('../fonts/Satoshi-Black.woff') format('woff'),
url('../fonts/Satoshi-Black.ttf') format('truetype');
font-weight: 900;
font-display: swap;
font-style: normal;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
url('../fonts/Satoshi-Black.woff') format('woff'),
url('../fonts/Satoshi-Black.ttf') format('truetype');
font-weight: 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-display: swap;
font-style: italic;
font-family: 'Satoshi';
src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-display: swap;
font-style: italic;
}

169
packages/frontend/src/css/style.css
View File

@ -3,125 +3,149 @@
@tailwind utilities;
@layer base {
body {
@apply font-satoshi font-normal text-base text-body bg-whiten relative z-1;
}
body {
@apply font-satoshi font-normal text-base text-body bg-whiten relative z-1;
}
}
@layer components {
}
@layer utilities {
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat-height {
@apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
}
.inbox-height {
@apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
}
.chat-height {
@apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
}
.inbox-height {
@apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
}
}
/* third-party libraries CSS */
.tableCheckbox:checked ~ div span {
@apply opacity-100;
@apply opacity-100;
}
.tableCheckbox:checked ~ div {
@apply bg-primary border-primary;
@apply bg-primary border-primary;
}
.apexcharts-legend-text {
@apply !text-body dark:!text-bodydark;
@apply !text-body dark:!text-bodydark;
}
.apexcharts-text {
@apply !fill-body dark:!fill-bodydark;
@apply !fill-body dark:!fill-bodydark;
}
.apexcharts-xcrosshairs {
@apply !fill-stroke dark:!fill-strokedark;
@apply !fill-stroke dark:!fill-strokedark;
}
.apexcharts-gridline {
@apply !stroke-stroke dark:!stroke-strokedark;
@apply !stroke-stroke dark:!stroke-strokedark;
}
.apexcharts-series.apexcharts-pie-series path {
@apply dark:!stroke-transparent;
@apply dark:!stroke-transparent;
}
.apexcharts-legend-series {
@apply !inline-flex gap-1.5;
@apply !inline-flex gap-1.5;
}
.apexcharts-tooltip.apexcharts-theme-light {
@apply dark:!border-strokedark dark:!bg-boxdark;
@apply dark:!border-strokedark dark:!bg-boxdark;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
@apply dark:!border-strokedark dark:!bg-meta-4;
@apply dark:!border-strokedark dark:!bg-meta-4;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
@apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
@apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
}
.apexcharts-xaxistooltip-bottom:after {
@apply !border-b-gray dark:!border-b-meta-4;
@apply !border-b-gray dark:!border-b-meta-4;
}
.apexcharts-xaxistooltip-bottom:before {
@apply !border-b-gray dark:!border-b-meta-4;
@apply !border-b-gray dark:!border-b-meta-4;
}
.apexcharts-xaxistooltip-bottom {
@apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
@apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
}
.apexcharts-tooltip-series-group {
@apply !pl-1.5;
@apply !pl-1.5;
}
.flatpickr-wrapper {
@apply w-full;
@apply w-full;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
@apply !fill-primary;
@apply !fill-primary;
}
.flatpickr-calendar.arrowTop:before {
@apply dark:!border-b-boxdark;
@apply dark:!border-b-boxdark;
}
.flatpickr-calendar.arrowTop:after {
@apply dark:!border-b-boxdark;
@apply dark:!border-b-boxdark;
}
.flatpickr-calendar {
@apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
@apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
}
.flatpickr-day {
@apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
@apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
@apply !top-7 dark:!fill-white dark:!text-white;
@apply !top-7 dark:!fill-white dark:!text-white;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
@apply !left-7;
@apply !left-7;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
@apply !right-7;
@apply !right-7;
}
span.flatpickr-weekday,
.flatpickr-months .flatpickr-month {
@apply dark:!fill-white dark:!text-white;
@apply dark:!fill-white dark:!text-white;
}
.flatpickr-day.inRange {
@apply dark:!shadow-7;
box-shadow: -5px 0 0 #EFF4FB, 5px 0 0 #EFF4FB;
@apply dark:!shadow-7;
box-shadow: -5px 0 0 #EFF4FB, 5px 0 0 #EFF4FB;
}
.color-orchid {
color: orchid;
color: orchid;
}
@ -137,14 +161,16 @@ span.flatpickr-weekday,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
@apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
@apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange {
@apply dark:!text-white;
@apply dark:!text-white;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
@ -163,59 +189,70 @@ span.flatpickr-weekday,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: #3c50e0;
@apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
background: #3c50e0;
@apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
box-shadow: -10px 0 0 #3c50e0;
box-shadow: -10px 0 0 #3c50e0;
}
.map-btn .jvm-zoom-btn {
@apply flex items-center justify-center w-7.5 h-7.5 rounded border border-stroke dark:border-strokedark hover:border-primary dark:hover:border-primary bg-white hover:bg-primary text-body hover:text-white dark:text-bodydark dark:hover:text-white text-2xl leading-none px-0 pt-0 pb-0.5;
@apply flex items-center justify-center w-7.5 h-7.5 rounded border border-stroke dark:border-strokedark hover:border-primary dark:hover:border-primary bg-white hover:bg-primary text-body hover:text-white dark:text-bodydark dark:hover:text-white text-2xl leading-none px-0 pt-0 pb-0.5;
}
.mapOne .jvm-zoom-btn {
@apply left-auto top-auto bottom-0;
@apply left-auto top-auto bottom-0;
}
.mapOne .jvm-zoom-btn.jvm-zoomin {
@apply right-10;
@apply right-10;
}
.mapOne .jvm-zoom-btn.jvm-zoomout {
@apply right-0;
@apply right-0;
}
.mapTwo .jvm-zoom-btn {
@apply top-auto bottom-0;
@apply top-auto bottom-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomin {
@apply left-0;
@apply left-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomout {
@apply left-10;
@apply left-10;
}
.taskCheckbox:checked ~ .box span {
@apply opacity-100;
@apply opacity-100;
}
.taskCheckbox:checked ~ p {
@apply line-through;
@apply line-through;
}
.taskCheckbox:checked ~ .box {
@apply bg-primary border-primary dark:border-primary;
@apply bg-primary border-primary dark:border-primary;
}
.custom-input-date::-webkit-calendar-picker-indicator {
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
}
.custom-input-date-1::-webkit-calendar-picker-indicator {
background-image: url(./images/icon/icon-calendar.svg);
background-image: url(./images/icon/icon-calendar.svg);
}
.custom-input-date-2::-webkit-calendar-picker-indicator {
background-image: url(./images/icon/icon-arrow-down.svg);
background-image: url(./images/icon/icon-arrow-down.svg);
}
[x-cloak] {
display: none !important;
display: none !important;
}

26
packages/frontend/src/hooks/useColorMode.tsx
View File

@ -1,19 +1,21 @@
import { useEffect } from 'react';
import useLocalStorage from './useLocalStorage';
import { useEffect } from "react";
import useLocalStorage from "./useLocalStorage";
const useColorMode = () => {
const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');
const useColorMode = () =>
{
const [ colorMode, setColorMode ] = useLocalStorage("color-theme", "light");
useEffect(() => {
const className = 'dark';
const bodyClass = window.document.body.classList;
useEffect(() =>
{
const className = "dark";
const bodyClass = window.document.body.classList;
colorMode === 'dark'
? bodyClass.add(className)
: bodyClass.remove(className);
}, [colorMode]);
colorMode === "dark"
? bodyClass.add(className)
: bodyClass.remove(className);
}, [ colorMode ]);
return [colorMode, setColorMode];
return [ colorMode, setColorMode ];
};
export default useColorMode;

57
packages/frontend/src/hooks/useLocalStorage.tsx
View File

@ -1,34 +1,41 @@
import { useEffect, useState } from 'react';
import { useEffect, useState } from "react";
type SetValue<T> = T | ((val: T) => T);
function useLocalStorage<T>(
key: string,
initialValue: T
): [T, (value: SetValue<T>) => void] {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.log(error);
return initialValue;
}
});
key: string,
initialValue: T,
): [ T, (value: SetValue<T>) => void ]
{
const [ storedValue, setStoredValue ] = useState(() =>
{
try
{
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error)
{
console.log(error);
return initialValue;
}
});
useEffect(() => {
try {
const valueToStore =
typeof storedValue === 'function'
? storedValue(storedValue)
: storedValue;
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.log(error);
}
}, [key, storedValue]);
useEffect(() =>
{
try
{
const valueToStore =
typeof storedValue === "function"
? storedValue(storedValue)
: storedValue;
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error)
{
console.log(error);
}
}, [ key, storedValue ]);
return [storedValue, setStoredValue];
return [ storedValue, setStoredValue ];
}
export default useLocalStorage;

3
packages/frontend/src/i18n/index.ts
View File

@ -27,7 +27,4 @@ i18n
defaultNS: "translation",
});
export { i18n };

174
packages/frontend/src/i18n/languages/pl.json
View File

@ -1,93 +1,91 @@
{
"_": {
"title": "Simrail Stats"
"_": {
"title": "Simrail Stats"
},
"home": {
"stats": {
"trains": "Pociągi",
"dispatchers": "Dyżurni ruchu",
"profiles": "Profili"
},
"home": {
"stats": {
"trains": "Pociągi",
"dispatchers": "Dyżurni ruchu",
"profiles": "Profili"
},
"title": "Simrail Stats",
"description": "Najbardziej rozbudowana strona z logami i statystykami gry SimRail!",
"buttons": {
"project": "Strona projektu",
"forum": "Strona na forum"
},
"footer": {
"license": "Licencja:",
"powered": "Oparte na:",
"thanks": "Specjalne podziękowania dla <bahu>serwerowni BAHU.PRO</bahu>, <simrailelite>discorda Simrail ELITE</simrailelite>, społeczności Simrail i mojej dziewczyny",
"author": "Stworzone przez <anchor>{{author}}</anchor> z ❤️ dla społeczności Simrail"
}
"title": "Simrail Stats",
"description": "Najbardziej rozbudowana strona z logami i statystykami gry SimRail!",
"buttons": {
"project": "Strona projektu",
"forum": "Strona na forum"
},
"pages": {
"home": "Strona główna",
"logs": "Logi",
"stations": "Stacje",
"trains": "Pociągi",
"leaderboard": "Tablica wyników"
},
"leaderboard": {
"user": "Gracz",
"time": "Czas",
"distance": "Dystans",
"points": "Punkty",
"profile": "Profil",
"actions": "Akcje"
},
"logs": {
"user": "Gracz",
"time": "Czas",
"distance": "Dystans",
"points": "Punkty",
"profile": "Profil",
"record": "Więcej",
"train": "Pociąg",
"actions": "Akcje",
"search": "Wpisz, aby wyszukać",
"station": "Stacja"
},
"contentloader": {
"error": {
"header": "Błąd ładowania strony",
"description": "Sprawdź swoje połączenie z internetem i odśwież strone",
"report": "Zgłoś błąd",
"refresh": "Odśwież"
},
"notfound": {
"header": "Nie znaleziono danych",
"description": "Twoje wyszukiwanie nie zwróciło wyników."
}
},
"profile": {
"stats": {
"distance": "Przejechanych kilometrów",
"time": "Godzin dyżurów"
},
"trains": {
"header": "Statystyki pociągów",
"train": "Pociąg",
"distance": "Dystans",
"points": "Punkty",
"time": "Czas"
},
"stations": {
"header": "Statystyki stacji",
"station": "Stacja",
"time": "Czas"
},
"errors": {
"notfound": {
"title": "Nie znaleziono profilu",
"description": "Profil gracza nie został znaleziony lub posiada on prywatny profil steam."
},
"blacklist": {
"title": "Nie można wyświetlic profilu",
"description": "Profil tego gracza został zablokowany."
}
}
"footer": {
"license": "Licencja:",
"powered": "Oparte na:",
"thanks": "Specjalne podziękowania dla <bahu>serwerowni BAHU.PRO</bahu>, <simrailelite>discorda Simrail ELITE</simrailelite>, społeczności Simrail i mojej dziewczyny",
"author": "Stworzone przez <anchor>{{author}}</anchor> z ❤️ dla społeczności Simrail"
}
},
"pages": {
"home": "Strona główna",
"logs": "Logi",
"stations": "Stacje",
"trains": "Pociągi",
"leaderboard": "Tablica wyników"
},
"leaderboard": {
"user": "Gracz",
"time": "Czas",
"distance": "Dystans",
"points": "Punkty",
"profile": "Profil",
"actions": "Akcje"
},
"logs": {
"user": "Gracz",
"time": "Czas",
"distance": "Dystans",
"points": "Punkty",
"profile": "Profil",
"record": "Więcej",
"train": "Pociąg",
"actions": "Akcje",
"search": "Wpisz, aby wyszukać",
"station": "Stacja"
},
"contentloader": {
"error": {
"header": "Błąd ładowania strony",
"description": "Sprawdź swoje połączenie z internetem i odśwież strone",
"report": "Zgłoś błąd",
"refresh": "Odśwież"
},
"notfound": {
"header": "Nie znaleziono danych",
"description": "Twoje wyszukiwanie nie zwróciło wyników."
}
},
"profile": {
"stats": {
"distance": "Przejechanych kilometrów",
"time": "Godzin dyżurów"
},
"trains": {
"header": "Statystyki pociągów",
"train": "Pociąg",
"distance": "Dystans",
"points": "Punkty",
"time": "Czas"
},
"stations": {
"header": "Statystyki stacji",
"station": "Stacja",
"time": "Czas"
},
"errors": {
"notfound": {
"title": "Nie znaleziono profilu",
"description": "Profil gracza nie został znaleziony lub posiada on prywatny profil steam."
},
"blacklist": {
"title": "Nie można wyświetlic profilu",
"description": "Profil tego gracza został zablokowany."
}
}
}
}

28
packages/frontend/src/images/brand/brand-01.svg
View File

@ -1,14 +1,18 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EEF0F2"/>
<g clip-path="url(#clip0_38_23844)">
<path d="M36.0002 24.2661C36.0147 23.4411 35.9278 22.6174 35.7414 21.8128H24.2451V26.2661H30.9933C30.8655 27.0469 30.5778 27.7943 30.1476 28.4634C29.7174 29.1324 29.1536 29.7093 28.49 30.1593L28.4665 30.3085L32.1016 33.0681L32.3533 33.0928C34.6661 30.9994 35.9997 27.9193 35.9997 24.2661" fill="#4285F4"/>
<path d="M24.2449 36C27.5509 36 30.3264 34.9332 32.3539 33.0932L28.4898 30.1597C27.4559 30.8666 26.0681 31.36 24.2449 31.36C22.6965 31.3511 21.1902 30.8646 19.9398 29.9695C18.6894 29.0744 17.7584 27.8161 17.2789 26.3732L17.1354 26.3852L13.3556 29.2518L13.3062 29.3865C14.3241 31.3747 15.8864 33.0463 17.8183 34.2142C19.7502 35.3822 21.9755 36.0005 24.2454 36" fill="#34A853"/>
<path d="M17.2788 26.3733C17.011 25.6094 16.8728 24.8077 16.8697 24C16.8746 23.1936 17.0077 22.393 17.2642 21.6267L17.2574 21.4677L13.4312 18.5549L13.3061 18.6133C12.4473 20.2842 12 22.129 12 23.9999C12 25.8708 12.4473 27.7156 13.3061 29.3865L17.2788 26.3733Z" fill="#FBBC05"/>
<path d="M24.2449 16.64C25.9995 16.6133 27.6964 17.2537 28.9796 18.4267L32.4355 15.12C30.219 13.0822 27.2838 11.9642 24.2449 12C21.975 11.9995 19.7497 12.6177 17.8179 13.7856C15.886 14.9535 14.3237 16.625 13.3057 18.6132L17.2652 21.6267C17.7495 20.1841 18.6836 18.9268 19.9358 18.0321C21.1881 17.1374 22.6953 16.6505 24.2449 16.64Z" fill="#EB4335"/>
</g>
<defs>
<clipPath id="clip0_38_23844">
<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
</clipPath>
</defs>
<circle cx="24" cy="24" r="24" fill="#EEF0F2"/>
<g clip-path="url(#clip0_38_23844)">
<path d="M36.0002 24.2661C36.0147 23.4411 35.9278 22.6174 35.7414 21.8128H24.2451V26.2661H30.9933C30.8655 27.0469 30.5778 27.7943 30.1476 28.4634C29.7174 29.1324 29.1536 29.7093 28.49 30.1593L28.4665 30.3085L32.1016 33.0681L32.3533 33.0928C34.6661 30.9994 35.9997 27.9193 35.9997 24.2661"
fill="#4285F4"/>
<path d="M24.2449 36C27.5509 36 30.3264 34.9332 32.3539 33.0932L28.4898 30.1597C27.4559 30.8666 26.0681 31.36 24.2449 31.36C22.6965 31.3511 21.1902 30.8646 19.9398 29.9695C18.6894 29.0744 17.7584 27.8161 17.2789 26.3732L17.1354 26.3852L13.3556 29.2518L13.3062 29.3865C14.3241 31.3747 15.8864 33.0463 17.8183 34.2142C19.7502 35.3822 21.9755 36.0005 24.2454 36"
fill="#34A853"/>
<path d="M17.2788 26.3733C17.011 25.6094 16.8728 24.8077 16.8697 24C16.8746 23.1936 17.0077 22.393 17.2642 21.6267L17.2574 21.4677L13.4312 18.5549L13.3061 18.6133C12.4473 20.2842 12 22.129 12 23.9999C12 25.8708 12.4473 27.7156 13.3061 29.3865L17.2788 26.3733Z"
fill="#FBBC05"/>
<path d="M24.2449 16.64C25.9995 16.6133 27.6964 17.2537 28.9796 18.4267L32.4355 15.12C30.219 13.0822 27.2838 11.9642 24.2449 12C21.975 11.9995 19.7497 12.6177 17.8179 13.7856C15.886 14.9535 14.3237 16.625 13.3057 18.6132L17.2652 21.6267C17.7495 20.1841 18.6836 18.9268 19.9358 18.0321C21.1881 17.1374 22.6953 16.6505 24.2449 16.64Z"
fill="#EB4335"/>
</g>
<defs>
<clipPath id="clip0_38_23844">
<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

5
packages/frontend/src/images/brand/brand-02.svg
View File

@ -1,4 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0001" r="24" fill="#2B96F0"/>
<path d="M33.0375 17.7376L34.4625 15.9376C34.875 15.4501 34.9875 15.0751 35.025 14.8876C33.9 15.5626 32.85 15.7876 32.175 15.7876H31.9125L31.7625 15.6376C30.8625 14.8501 29.7375 14.4376 28.5375 14.4376C25.9125 14.4376 23.85 16.6126 23.85 19.1251C23.85 19.2751 23.85 19.5001 23.8875 19.6501L24 20.4001L23.2125 20.3626C18.4125 20.2126 14.475 16.0876 13.8375 15.3751C12.7875 17.2501 13.3875 19.0501 14.025 20.1751L15.3 22.2751L13.275 21.1501C13.3125 22.7251 13.9125 23.9626 15.075 24.8626L16.0875 25.6126L15.075 26.0251C15.7125 27.9376 17.1375 28.7251 18.1875 29.0251L19.575 29.4001L18.2625 30.3001C16.1625 31.8001 13.5375 31.6876 12.375 31.5751C14.7375 33.2251 17.55 33.6001 19.5 33.6001C20.9625 33.6001 22.05 33.4501 22.3125 33.3376C32.8125 30.8626 33.3 21.4876 33.3 19.6126V19.3501L33.525 19.2001C34.8 18.0001 35.325 17.3626 35.625 16.9876C35.5125 17.0251 35.3625 17.1001 35.2125 17.1376L33.0375 17.7376Z" fill="white"/>
<circle cx="24" cy="24.0001" r="24" fill="#2B96F0"/>
<path d="M33.0375 17.7376L34.4625 15.9376C34.875 15.4501 34.9875 15.0751 35.025 14.8876C33.9 15.5626 32.85 15.7876 32.175 15.7876H31.9125L31.7625 15.6376C30.8625 14.8501 29.7375 14.4376 28.5375 14.4376C25.9125 14.4376 23.85 16.6126 23.85 19.1251C23.85 19.2751 23.85 19.5001 23.8875 19.6501L24 20.4001L23.2125 20.3626C18.4125 20.2126 14.475 16.0876 13.8375 15.3751C12.7875 17.2501 13.3875 19.0501 14.025 20.1751L15.3 22.2751L13.275 21.1501C13.3125 22.7251 13.9125 23.9626 15.075 24.8626L16.0875 25.6126L15.075 26.0251C15.7125 27.9376 17.1375 28.7251 18.1875 29.0251L19.575 29.4001L18.2625 30.3001C16.1625 31.8001 13.5375 31.6876 12.375 31.5751C14.7375 33.2251 17.55 33.6001 19.5 33.6001C20.9625 33.6001 22.05 33.4501 22.3125 33.3376C32.8125 30.8626 33.3 21.4876 33.3 19.6126V19.3501L33.525 19.2001C34.8 18.0001 35.325 17.3626 35.625 16.9876C35.5125 17.0251 35.3625 17.1001 35.2125 17.1376L33.0375 17.7376Z"
fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

19
packages/frontend/src/images/brand/brand-03.svg
View File

@ -1,11 +1,12 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0001" r="24" fill="#212529"/>
<g clip-path="url(#clip0_38_23867)">
<path d="M24 12.6751C17.625 12.6751 12.375 17.8501 12.375 24.3001C12.375 29.4001 15.7125 33.7501 20.3625 35.3251C20.9625 35.4376 21.15 35.0626 21.15 34.8001C21.15 34.5376 21.15 33.7876 21.1125 32.7751C17.8875 33.5251 17.2125 31.2001 17.2125 31.2001C16.6875 29.8876 15.9 29.5126 15.9 29.5126C14.85 28.7626 15.9375 28.7626 15.9375 28.7626C17.1 28.8001 17.7375 29.9626 17.7375 29.9626C18.75 31.7626 20.475 31.2376 21.1125 30.9001C21.225 30.1501 21.525 29.6251 21.8625 29.3251C19.3125 29.0626 16.575 28.0501 16.575 23.6251C16.575 22.3501 17.0625 21.3376 17.775 20.5501C17.6625 20.2876 17.25 19.0876 17.8875 17.4751C17.8875 17.4751 18.9 17.1751 21.1125 18.6751C22.05 18.4126 23.025 18.2626 24.0375 18.2626C25.05 18.2626 26.0625 18.3751 26.9625 18.6751C29.175 17.2126 30.15 17.4751 30.15 17.4751C30.7875 19.0501 30.4125 20.2876 30.2625 20.5501C31.0125 21.3376 31.4625 22.3876 31.4625 23.6251C31.4625 28.0501 28.725 29.0626 26.175 29.3251C26.5875 29.7001 26.9625 30.4501 26.9625 31.5001C26.9625 33.0751 26.925 34.3126 26.925 34.6876C26.925 34.9876 27.15 35.3251 27.7125 35.2126C32.2875 33.6751 35.625 29.3626 35.625 24.2251C35.5875 17.8501 30.375 12.6751 24 12.6751Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_38_23867">
<rect width="24" height="24" fill="white" transform="translate(12 12.0001)"/>
</clipPath>
</defs>
<circle cx="24" cy="24.0001" r="24" fill="#212529"/>
<g clip-path="url(#clip0_38_23867)">
<path d="M24 12.6751C17.625 12.6751 12.375 17.8501 12.375 24.3001C12.375 29.4001 15.7125 33.7501 20.3625 35.3251C20.9625 35.4376 21.15 35.0626 21.15 34.8001C21.15 34.5376 21.15 33.7876 21.1125 32.7751C17.8875 33.5251 17.2125 31.2001 17.2125 31.2001C16.6875 29.8876 15.9 29.5126 15.9 29.5126C14.85 28.7626 15.9375 28.7626 15.9375 28.7626C17.1 28.8001 17.7375 29.9626 17.7375 29.9626C18.75 31.7626 20.475 31.2376 21.1125 30.9001C21.225 30.1501 21.525 29.6251 21.8625 29.3251C19.3125 29.0626 16.575 28.0501 16.575 23.6251C16.575 22.3501 17.0625 21.3376 17.775 20.5501C17.6625 20.2876 17.25 19.0876 17.8875 17.4751C17.8875 17.4751 18.9 17.1751 21.1125 18.6751C22.05 18.4126 23.025 18.2626 24.0375 18.2626C25.05 18.2626 26.0625 18.3751 26.9625 18.6751C29.175 17.2126 30.15 17.4751 30.15 17.4751C30.7875 19.0501 30.4125 20.2876 30.2625 20.5501C31.0125 21.3376 31.4625 22.3876 31.4625 23.6251C31.4625 28.0501 28.725 29.0626 26.175 29.3251C26.5875 29.7001 26.9625 30.4501 26.9625 31.5001C26.9625 33.0751 26.925 34.3126 26.925 34.6876C26.925 34.9876 27.15 35.3251 27.7125 35.2126C32.2875 33.6751 35.625 29.3626 35.625 24.2251C35.5875 17.8501 30.375 12.6751 24 12.6751Z"
fill="white"/>
</g>
<defs>
<clipPath id="clip0_38_23867">
<rect width="24" height="24" fill="white" transform="translate(12 12.0001)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

5
packages/frontend/src/images/brand/brand-04.svg
View File

@ -1,4 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0002" r="24" fill="#4DC1FF"/>
<path d="M35.625 18.6002C35.5125 20.8877 33.9375 24.0002 30.8625 27.9377C27.7125 32.0627 25.0125 34.1252 22.8375 34.1252C21.525 34.1252 20.3625 32.9252 19.3875 30.3752C18.75 28.1252 18.1875 25.8002 17.5125 23.4752C16.8375 21.0002 16.0875 19.7252 15.225 19.7252C15.075 19.7252 14.4375 20.1002 13.3875 20.8502L12.375 19.3502C13.5375 18.3377 14.6625 17.3252 15.825 16.2752C17.3625 14.9627 18.45 14.2502 19.275 14.2127C21.075 14.0627 22.1625 15.3377 22.6125 17.9252C23.025 20.7752 23.3625 22.5752 23.55 23.2502C24.075 25.6127 24.675 26.7752 25.2375 26.7752C25.725 26.7752 26.4375 26.0252 27.45 24.4877C28.4625 22.9502 28.9125 21.7502 29.025 20.9627C29.175 19.6502 28.6125 18.9377 27.45 18.9377C26.925 18.9377 26.325 19.0502 25.7625 19.3502C26.8875 15.6002 29.025 13.7627 32.25 13.8377C34.6125 13.9502 35.7375 15.5252 35.625 18.6002Z" fill="white"/>
<circle cx="24" cy="24.0002" r="24" fill="#4DC1FF"/>
<path d="M35.625 18.6002C35.5125 20.8877 33.9375 24.0002 30.8625 27.9377C27.7125 32.0627 25.0125 34.1252 22.8375 34.1252C21.525 34.1252 20.3625 32.9252 19.3875 30.3752C18.75 28.1252 18.1875 25.8002 17.5125 23.4752C16.8375 21.0002 16.0875 19.7252 15.225 19.7252C15.075 19.7252 14.4375 20.1002 13.3875 20.8502L12.375 19.3502C13.5375 18.3377 14.6625 17.3252 15.825 16.2752C17.3625 14.9627 18.45 14.2502 19.275 14.2127C21.075 14.0627 22.1625 15.3377 22.6125 17.9252C23.025 20.7752 23.3625 22.5752 23.55 23.2502C24.075 25.6127 24.675 26.7752 25.2375 26.7752C25.725 26.7752 26.4375 26.0252 27.45 24.4877C28.4625 22.9502 28.9125 21.7502 29.025 20.9627C29.175 19.6502 28.6125 18.9377 27.45 18.9377C26.925 18.9377 26.325 19.0502 25.7625 19.3502C26.8875 15.6002 29.025 13.7627 32.25 13.8377C34.6125 13.9502 35.7375 15.5252 35.625 18.6002Z"
fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1001 B

After

Width:  |  Height:  |  Size: 1019 B

19
packages/frontend/src/images/brand/brand-05.svg
View File

@ -1,11 +1,12 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0002" r="24" fill="#3162C9"/>
<g clip-path="url(#clip0_38_23887)">
<path d="M25.789 35.9983V25.0533H29.3269L29.8566 20.7878H25.789V18.0645C25.789 16.8295 26.1192 15.9879 27.8248 15.9879L30 15.9868V12.1719C29.6236 12.1201 28.3325 12.004 26.8304 12.004C23.6942 12.004 21.5471 13.9917 21.5471 17.6422V20.7879H18V25.0534H21.547V35.9984L25.789 35.9983Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_38_23887">
<rect width="12" height="24" fill="white" transform="translate(18 12.0002)"/>
</clipPath>
</defs>
<circle cx="24" cy="24.0002" r="24" fill="#3162C9"/>
<g clip-path="url(#clip0_38_23887)">
<path d="M25.789 35.9983V25.0533H29.3269L29.8566 20.7878H25.789V18.0645C25.789 16.8295 26.1192 15.9879 27.8248 15.9879L30 15.9868V12.1719C29.6236 12.1201 28.3325 12.004 26.8304 12.004C23.6942 12.004 21.5471 13.9917 21.5471 17.6422V20.7879H18V25.0534H21.547V35.9984L25.789 35.9983Z"
fill="white"/>
</g>
<defs>
<clipPath id="clip0_38_23887">
<rect width="12" height="24" fill="white" transform="translate(18 12.0002)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 631 B

After

Width:  |  Height:  |  Size: 701 B

71
packages/frontend/src/images/country/country-01.svg
View File

@ -1,33 +1,42 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_27)">
<path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z" fill="white"/>
<mask id="mask0_22_27" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14">
<path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z" fill="white"/>
</mask>
<g mask="url(#mask0_22_27)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0295 0.411499H0V1.30039H20.0295V0.411499ZM20.0295 2.18928H0V3.07817H20.0295V2.18928ZM0 3.96705H20.0295V4.85594H0V3.96705ZM20.0295 5.74484H0V6.63372H20.0295V5.74484ZM0 7.52262H20.0295V8.41152H0V7.52262ZM20.0295 9.30037H0V10.1893H20.0295V9.30037ZM0 11.0781H20.0295V11.9671H0V11.0781ZM20.0295 12.856H0V13.7448H20.0295V12.856Z" fill="#D02F44"/>
<path d="M8.5841 0.411499H0V6.63372H8.5841V0.411499Z" fill="#46467F"/>
<g filter="url(#filter0_d_22_27)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.9074 1.74479C1.9074 1.99026 1.69389 2.18924 1.43051 2.18924C1.16713 2.18924 0.953613 1.99026 0.953613 1.74479C0.953613 1.49933 1.16713 1.30035 1.43051 1.30035C1.69389 1.30035 1.9074 1.49933 1.9074 1.74479ZM3.81497 1.74479C3.81497 1.99026 3.60146 2.18924 3.33809 2.18924C3.0747 2.18924 2.86119 1.99026 2.86119 1.74479C2.86119 1.49933 3.0747 1.30035 3.33809 1.30035C3.60146 1.30035 3.81497 1.49933 3.81497 1.74479ZM5.24566 2.18924C5.50903 2.18924 5.72255 1.99026 5.72255 1.74479C5.72255 1.49933 5.50903 1.30035 5.24566 1.30035C4.98228 1.30035 4.76876 1.49933 4.76876 1.74479C4.76876 1.99026 4.98228 2.18924 5.24566 2.18924ZM7.63012 1.74479C7.63012 1.99026 7.41661 2.18924 7.15322 2.18924C6.88985 2.18924 6.67634 1.99026 6.67634 1.74479C6.67634 1.49933 6.88985 1.30035 7.15322 1.30035C7.41661 1.30035 7.63012 1.49933 7.63012 1.74479ZM2.3843 3.07812C2.64768 3.07812 2.86119 2.87914 2.86119 2.63368C2.86119 2.38822 2.64768 2.18924 2.3843 2.18924C2.12092 2.18924 1.9074 2.38822 1.9074 2.63368C1.9074 2.87914 2.12092 3.07812 2.3843 3.07812ZM4.76876 2.63368C4.76876 2.87914 4.55525 3.07812 4.29187 3.07812C4.02849 3.07812 3.81497 2.87914 3.81497 2.63368C3.81497 2.38822 4.02849 2.18924 4.29187 2.18924C4.55525 2.18924 4.76876 2.38822 4.76876 2.63368ZM6.19944 3.07812C6.46282 3.07812 6.67634 2.87914 6.67634 2.63368C6.67634 2.38822 6.46282 2.18924 6.19944 2.18924C5.93606 2.18924 5.72255 2.38822 5.72255 2.63368C5.72255 2.87914 5.93606 3.07812 6.19944 3.07812ZM7.63012 3.52257C7.63012 3.76804 7.41661 3.96702 7.15322 3.96702C6.88985 3.96702 6.67634 3.76804 6.67634 3.52257C6.67634 3.27711 6.88985 3.07814 7.15322 3.07814C7.41661 3.07814 7.63012 3.27711 7.63012 3.52257ZM5.24566 3.96702C5.50903 3.96702 5.72255 3.76804 5.72255 3.52257C5.72255 3.27711 5.50903 3.07814 5.24566 3.07814C4.98228 3.07814 4.76876 3.27711 4.76876 3.52257C4.76876 3.76804 4.98228 3.96702 5.24566 3.96702ZM3.81497 3.52257C3.81497 3.76804 3.60146 3.96702 3.33809 3.96702C3.0747 3.96702 2.86119 3.76804 2.86119 3.52257C2.86119 3.27711 3.0747 3.07814 3.33809 3.07814C3.60146 3.07814 3.81497 3.27711 3.81497 3.52257ZM1.43051 3.96702C1.69389 3.96702 1.9074 3.76804 1.9074 3.52257C1.9074 3.27711 1.69389 3.07814 1.43051 3.07814C1.16713 3.07814 0.953613 3.27711 0.953613 3.52257C0.953613 3.76804 1.16713 3.96702 1.43051 3.96702ZM2.86119 4.41146C2.86119 4.65692 2.64768 4.8559 2.3843 4.8559C2.12092 4.8559 1.9074 4.65692 1.9074 4.41146C1.9074 4.166 2.12092 3.96702 2.3843 3.96702C2.64768 3.96702 2.86119 4.166 2.86119 4.41146ZM4.29187 4.8559C4.55525 4.8559 4.76876 4.65692 4.76876 4.41146C4.76876 4.166 4.55525 3.96702 4.29187 3.96702C4.02849 3.96702 3.81497 4.166 3.81497 4.41146C3.81497 4.65692 4.02849 4.8559 4.29187 4.8559ZM6.67634 4.41146C6.67634 4.65692 6.46282 4.8559 6.19944 4.8559C5.93606 4.8559 5.72255 4.65692 5.72255 4.41146C5.72255 4.166 5.93606 3.96702 6.19944 3.96702C6.46282 3.96702 6.67634 4.166 6.67634 4.41146ZM7.15322 5.74479C7.41661 5.74479 7.63012 5.54581 7.63012 5.30035C7.63012 5.05489 7.41661 4.8559 7.15322 4.8559C6.88985 4.8559 6.67634 5.05489 6.67634 5.30035C6.67634 5.54581 6.88985 5.74479 7.15322 5.74479ZM5.72255 5.30035C5.72255 5.54581 5.50903 5.74479 5.24566 5.74479C4.98228 5.74479 4.76876 5.54581 4.76876 5.30035C4.76876 5.05489 4.98228 4.8559 5.24566 4.8559C5.50903 4.8559 5.72255 5.05489 5.72255 5.30035ZM3.33809 5.74479C3.60146 5.74479 3.81497 5.54581 3.81497 5.30035C3.81497 5.05489 3.60146 4.8559 3.33809 4.8559C3.0747 4.8559 2.86119 5.05489 2.86119 5.30035C2.86119 5.54581 3.0747 5.74479 3.33809 5.74479ZM1.9074 5.30035C1.9074 5.54581 1.69389 5.74479 1.43051 5.74479C1.16713 5.74479 0.953613 5.54581 0.953613 5.30035C0.953613 5.05489 1.16713 4.8559 1.43051 4.8559C1.69389 4.8559 1.9074 5.05489 1.9074 5.30035Z" fill="url(#paint0_linear_22_27)"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_d_22_27" x="-3.04639" y="-1.69965" width="14.6765" height="12.4445" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_27"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_27" result="shape"/>
</filter>
<linearGradient id="paint0_linear_22_27" x1="0.953613" y1="1.30035" x2="0.953613" y2="5.74479" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<clipPath id="clip0_22_27">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_22_27)">
<path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z"
fill="white"/>
<mask id="mask0_22_27" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14">
<path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z"
fill="white"/>
</mask>
<g mask="url(#mask0_22_27)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M20.0295 0.411499H0V1.30039H20.0295V0.411499ZM20.0295 2.18928H0V3.07817H20.0295V2.18928ZM0 3.96705H20.0295V4.85594H0V3.96705ZM20.0295 5.74484H0V6.63372H20.0295V5.74484ZM0 7.52262H20.0295V8.41152H0V7.52262ZM20.0295 9.30037H0V10.1893H20.0295V9.30037ZM0 11.0781H20.0295V11.9671H0V11.0781ZM20.0295 12.856H0V13.7448H20.0295V12.856Z"
fill="#D02F44"/>
<path d="M8.5841 0.411499H0V6.63372H8.5841V0.411499Z" fill="#46467F"/>
<g filter="url(#filter0_d_22_27)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.9074 1.74479C1.9074 1.99026 1.69389 2.18924 1.43051 2.18924C1.16713 2.18924 0.953613 1.99026 0.953613 1.74479C0.953613 1.49933 1.16713 1.30035 1.43051 1.30035C1.69389 1.30035 1.9074 1.49933 1.9074 1.74479ZM3.81497 1.74479C3.81497 1.99026 3.60146 2.18924 3.33809 2.18924C3.0747 2.18924 2.86119 1.99026 2.86119 1.74479C2.86119 1.49933 3.0747 1.30035 3.33809 1.30035C3.60146 1.30035 3.81497 1.49933 3.81497 1.74479ZM5.24566 2.18924C5.50903 2.18924 5.72255 1.99026 5.72255 1.74479C5.72255 1.49933 5.50903 1.30035 5.24566 1.30035C4.98228 1.30035 4.76876 1.49933 4.76876 1.74479C4.76876 1.99026 4.98228 2.18924 5.24566 2.18924ZM7.63012 1.74479C7.63012 1.99026 7.41661 2.18924 7.15322 2.18924C6.88985 2.18924 6.67634 1.99026 6.67634 1.74479C6.67634 1.49933 6.88985 1.30035 7.15322 1.30035C7.41661 1.30035 7.63012 1.49933 7.63012 1.74479ZM2.3843 3.07812C2.64768 3.07812 2.86119 2.87914 2.86119 2.63368C2.86119 2.38822 2.64768 2.18924 2.3843 2.18924C2.12092 2.18924 1.9074 2.38822 1.9074 2.63368C1.9074 2.87914 2.12092 3.07812 2.3843 3.07812ZM4.76876 2.63368C4.76876 2.87914 4.55525 3.07812 4.29187 3.07812C4.02849 3.07812 3.81497 2.87914 3.81497 2.63368C3.81497 2.38822 4.02849 2.18924 4.29187 2.18924C4.55525 2.18924 4.76876 2.38822 4.76876 2.63368ZM6.19944 3.07812C6.46282 3.07812 6.67634 2.87914 6.67634 2.63368C6.67634 2.38822 6.46282 2.18924 6.19944 2.18924C5.93606 2.18924 5.72255 2.38822 5.72255 2.63368C5.72255 2.87914 5.93606 3.07812 6.19944 3.07812ZM7.63012 3.52257C7.63012 3.76804 7.41661 3.96702 7.15322 3.96702C6.88985 3.96702 6.67634 3.76804 6.67634 3.52257C6.67634 3.27711 6.88985 3.07814 7.15322 3.07814C7.41661 3.07814 7.63012 3.27711 7.63012 3.52257ZM5.24566 3.96702C5.50903 3.96702 5.72255 3.76804 5.72255 3.52257C5.72255 3.27711 5.50903 3.07814 5.24566 3.07814C4.98228 3.07814 4.76876 3.27711 4.76876 3.52257C4.76876 3.76804 4.98228 3.96702 5.24566 3.96702ZM3.81497 3.52257C3.81497 3.76804 3.60146 3.96702 3.33809 3.96702C3.0747 3.96702 2.86119 3.76804 2.86119 3.52257C2.86119 3.27711 3.0747 3.07814 3.33809 3.07814C3.60146 3.07814 3.81497 3.27711 3.81497 3.52257ZM1.43051 3.96702C1.69389 3.96702 1.9074 3.76804 1.9074 3.52257C1.9074 3.27711 1.69389 3.07814 1.43051 3.07814C1.16713 3.07814 0.953613 3.27711 0.953613 3.52257C0.953613 3.76804 1.16713 3.96702 1.43051 3.96702ZM2.86119 4.41146C2.86119 4.65692 2.64768 4.8559 2.3843 4.8559C2.12092 4.8559 1.9074 4.65692 1.9074 4.41146C1.9074 4.166 2.12092 3.96702 2.3843 3.96702C2.64768 3.96702 2.86119 4.166 2.86119 4.41146ZM4.29187 4.8559C4.55525 4.8559 4.76876 4.65692 4.76876 4.41146C4.76876 4.166 4.55525 3.96702 4.29187 3.96702C4.02849 3.96702 3.81497 4.166 3.81497 4.41146C3.81497 4.65692 4.02849 4.8559 4.29187 4.8559ZM6.67634 4.41146C6.67634 4.65692 6.46282 4.8559 6.19944 4.8559C5.93606 4.8559 5.72255 4.65692 5.72255 4.41146C5.72255 4.166 5.93606 3.96702 6.19944 3.96702C6.46282 3.96702 6.67634 4.166 6.67634 4.41146ZM7.15322 5.74479C7.41661 5.74479 7.63012 5.54581 7.63012 5.30035C7.63012 5.05489 7.41661 4.8559 7.15322 4.8559C6.88985 4.8559 6.67634 5.05489 6.67634 5.30035C6.67634 5.54581 6.88985 5.74479 7.15322 5.74479ZM5.72255 5.30035C5.72255 5.54581 5.50903 5.74479 5.24566 5.74479C4.98228 5.74479 4.76876 5.54581 4.76876 5.30035C4.76876 5.05489 4.98228 4.8559 5.24566 4.8559C5.50903 4.8559 5.72255 5.05489 5.72255 5.30035ZM3.33809 5.74479C3.60146 5.74479 3.81497 5.54581 3.81497 5.30035C3.81497 5.05489 3.60146 4.8559 3.33809 4.8559C3.0747 4.8559 2.86119 5.05489 2.86119 5.30035C2.86119 5.54581 3.0747 5.74479 3.33809 5.74479ZM1.9074 5.30035C1.9074 5.54581 1.69389 5.74479 1.43051 5.74479C1.16713 5.74479 0.953613 5.54581 0.953613 5.30035C0.953613 5.05489 1.16713 4.8559 1.43051 4.8559C1.69389 4.8559 1.9074 5.05489 1.9074 5.30035Z"
fill="url(#paint0_linear_22_27)"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_d_22_27" x="-3.04639" y="-1.69965" width="14.6765" height="12.4445"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_27"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_27" result="shape"/>
</filter>
<linearGradient id="paint0_linear_22_27" x1="0.953613" y1="1.30035" x2="0.953613" y2="5.74479"
gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<clipPath id="clip0_22_27">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

36
packages/frontend/src/images/country/country-02.svg
View File

@ -1,18 +1,22 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_42)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_42" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_42)">
<path d="M20.0328 0.411499H14.3091V13.7449H20.0328V0.411499Z" fill="#FF3131"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H5.72372V0.411499H0V13.7448Z" fill="#FF3131"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5736 6.51591C11.388 6.68884 11.0901 6.51985 11.1433 6.27182L11.4473 4.85581L10.4933 5.30026L10.0163 3.96692L9.53936 5.30026L8.58542 4.85581L8.8893 6.27182C8.94257 6.51985 8.64468 6.68884 8.45911 6.51591L8.2852 6.35383C8.18556 6.26105 8.03125 6.26105 7.9317 6.35383L7.63144 6.63358L6.67749 6.18915L7.15446 7.07803L6.88105 7.3328C6.77103 7.43532 6.77103 7.60963 6.88105 7.71215L8.10841 8.85584H9.53936L9.77783 10.1891H10.2548L10.4933 8.85584H11.9243L13.1516 7.71215C13.2617 7.60963 13.2617 7.43532 13.1516 7.3328L12.8782 7.07803L13.3551 6.18915L12.4012 6.63358L12.101 6.35383C12.0014 6.26105 11.847 6.26105 11.7475 6.35383L11.5736 6.51591Z" fill="#FF3131"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_42">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_22_42)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_42" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_42)">
<path d="M20.0328 0.411499H14.3091V13.7449H20.0328V0.411499Z" fill="#FF3131"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H5.72372V0.411499H0V13.7448Z" fill="#FF3131"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.5736 6.51591C11.388 6.68884 11.0901 6.51985 11.1433 6.27182L11.4473 4.85581L10.4933 5.30026L10.0163 3.96692L9.53936 5.30026L8.58542 4.85581L8.8893 6.27182C8.94257 6.51985 8.64468 6.68884 8.45911 6.51591L8.2852 6.35383C8.18556 6.26105 8.03125 6.26105 7.9317 6.35383L7.63144 6.63358L6.67749 6.18915L7.15446 7.07803L6.88105 7.3328C6.77103 7.43532 6.77103 7.60963 6.88105 7.71215L8.10841 8.85584H9.53936L9.77783 10.1891H10.2548L10.4933 8.85584H11.9243L13.1516 7.71215C13.2617 7.60963 13.2617 7.43532 13.1516 7.3328L12.8782 7.07803L13.3551 6.18915L12.4012 6.63358L12.101 6.35383C12.0014 6.26105 11.847 6.26105 11.7475 6.35383L11.5736 6.51591Z"
fill="#FF3131"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_42">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

32
packages/frontend/src/images/country/country-03.svg
View File

@ -1,17 +1,19 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_57)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_57" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_57)">
<path d="M20.0331 0.411499H13.3555V13.7449H20.0331V0.411499Z" fill="#F44653"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H6.67767V0.411499H0V13.7448Z" fill="#1035BB"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_57">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_22_57)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_57" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_57)">
<path d="M20.0331 0.411499H13.3555V13.7449H20.0331V0.411499Z" fill="#F44653"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H6.67767V0.411499H0V13.7448Z" fill="#1035BB"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_57">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

32
packages/frontend/src/images/country/country-04.svg
View File

@ -1,17 +1,19 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_71)">
<path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_71" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z" fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_71)">
<path d="M20.0293 0.411682H13.3528V13.7451H20.0293V0.411682Z" fill="#E43D4C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7451H6.67651V0.411682H0V13.7451Z" fill="#1BB65D"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_71">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_22_71)">
<path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_71" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_71)">
<path d="M20.0293 0.411682H13.3528V13.7451H20.0293V0.411682Z" fill="#E43D4C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7451H6.67651V0.411682H0V13.7451Z" fill="#1BB65D"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_71">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

86
packages/frontend/src/images/country/country-05.svg
View File

@ -1,34 +1,56 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_85)">
<path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z" fill="white"/>
<mask id="mask0_22_85" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14">
<path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z" fill="white"/>
</mask>
<g mask="url(#mask0_22_85)">
<path d="M20.033 0.411499H0V13.7449H20.033V0.411499Z" fill="#0A17A7"/>
<path d="M-0.73999 0.152256H5.37038e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84486 -0.0394897V0.411516V0.717082C8.84486 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425L-0.73999 0.152256ZM-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425" fill="#FF2E3B"/>
<path d="M-0.73999 0.152256H5.37069e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84487 -0.0394897V0.411516V0.717082C8.84487 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425M-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425" stroke="white" stroke-width="0.666667"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.63372V4.4115H3.33884V6.55965C3.33884 6.84602 3.57099 7.07816 3.85736 7.07816H4.72822C5.01459 7.07816 5.24674 6.84602 5.24674 6.55965V4.4115H8.54404C8.83042 4.4115 9.06259 4.17935 9.06259 3.89298V3.15224C9.06259 2.86587 8.83042 2.63372 8.54404 2.63372H5.24674V0.411499H3.33884V2.63372H0Z" fill="url(#paint0_linear_22_85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.07816H3.81581V2.63372V0.411499H4.76977V2.63372V3.07816H8.58558V3.96705H4.76977V4.4115V6.63372H3.81581V4.4115V3.96705H0V3.07816Z" fill="url(#paint1_linear_22_85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.29302 11.3003L3.45195 11.7123L3.61258 10.8397L2.93213 10.2216L3.87249 10.0943L4.29302 9.30029L4.71357 10.0943L5.65392 10.2216L4.97348 10.8397L5.1341 11.7123L4.29302 11.3003Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3096 11.9671L13.635 12.1512L13.8326 11.5226L13.635 10.894L14.3096 11.0781L14.9841 10.894L14.7866 11.5226L14.9841 12.1512L14.3096 11.9671Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3096 3.52257L13.635 3.70667L13.8326 3.07812L13.635 2.44958L14.3096 2.63369L14.9841 2.44958L14.7866 3.07812L14.9841 3.70667L14.3096 3.52257Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1711 6.18932L16.4966 6.37342L16.6941 5.74488L16.4966 5.11633L17.1711 5.30043L17.8457 5.11633L17.6482 5.74488L17.8457 6.37342L17.1711 6.18932Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4475 7.07823L10.7729 7.26232L10.9706 6.63379L10.7729 6.00525L11.4475 6.18934L12.1221 6.00525L11.9245 6.63379L12.1221 7.26232L11.4475 7.07823Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7402 8.18925L15.4028 8.28134L15.5017 7.96704L15.4028 7.65277L15.7402 7.74482L16.0774 7.65277L15.9786 7.96704L16.0774 8.28134L15.7402 8.18925Z" fill="white"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_22_85" x1="0" y1="0.411499" x2="0" y2="7.07816" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<linearGradient id="paint1_linear_22_85" x1="0" y1="0.411499" x2="0" y2="6.63372" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF2E3B"/>
<stop offset="1" stop-color="#FC0D1B"/>
</linearGradient>
<clipPath id="clip0_22_85">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_22_85)">
<path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z"
fill="white"/>
<mask id="mask0_22_85" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14">
<path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z"
fill="white"/>
</mask>
<g mask="url(#mask0_22_85)">
<path d="M20.033 0.411499H0V13.7449H20.033V0.411499Z" fill="#0A17A7"/>
<path d="M-0.73999 0.152256H5.37038e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84486 -0.0394897V0.411516V0.717082C8.84486 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425L-0.73999 0.152256ZM-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425"
fill="#FF2E3B"/>
<path d="M-0.73999 0.152256H5.37069e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84487 -0.0394897V0.411516V0.717082C8.84487 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425M-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425"
stroke="white" stroke-width="0.666667"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 2.63372V4.4115H3.33884V6.55965C3.33884 6.84602 3.57099 7.07816 3.85736 7.07816H4.72822C5.01459 7.07816 5.24674 6.84602 5.24674 6.55965V4.4115H8.54404C8.83042 4.4115 9.06259 4.17935 9.06259 3.89298V3.15224C9.06259 2.86587 8.83042 2.63372 8.54404 2.63372H5.24674V0.411499H3.33884V2.63372H0Z"
fill="url(#paint0_linear_22_85)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 3.07816H3.81581V2.63372V0.411499H4.76977V2.63372V3.07816H8.58558V3.96705H4.76977V4.4115V6.63372H3.81581V4.4115V3.96705H0V3.07816Z"
fill="url(#paint1_linear_22_85)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.29302 11.3003L3.45195 11.7123L3.61258 10.8397L2.93213 10.2216L3.87249 10.0943L4.29302 9.30029L4.71357 10.0943L5.65392 10.2216L4.97348 10.8397L5.1341 11.7123L4.29302 11.3003Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.3096 11.9671L13.635 12.1512L13.8326 11.5226L13.635 10.894L14.3096 11.0781L14.9841 10.894L14.7866 11.5226L14.9841 12.1512L14.3096 11.9671Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.3096 3.52257L13.635 3.70667L13.8326 3.07812L13.635 2.44958L14.3096 2.63369L14.9841 2.44958L14.7866 3.07812L14.9841 3.70667L14.3096 3.52257Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.1711 6.18932L16.4966 6.37342L16.6941 5.74488L16.4966 5.11633L17.1711 5.30043L17.8457 5.11633L17.6482 5.74488L17.8457 6.37342L17.1711 6.18932Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.4475 7.07823L10.7729 7.26232L10.9706 6.63379L10.7729 6.00525L11.4475 6.18934L12.1221 6.00525L11.9245 6.63379L12.1221 7.26232L11.4475 7.07823Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.7402 8.18925L15.4028 8.28134L15.5017 7.96704L15.4028 7.65277L15.7402 7.74482L16.0774 7.65277L15.9786 7.96704L16.0774 8.28134L15.7402 8.18925Z"
fill="white"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_22_85" x1="0" y1="0.411499" x2="0" y2="7.07816"
gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<linearGradient id="paint1_linear_22_85" x1="0" y1="0.411499" x2="0" y2="6.63372"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF2E3B"/>
<stop offset="1" stop-color="#FC0D1B"/>
</linearGradient>
<clipPath id="clip0_22_85">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

39
packages/frontend/src/images/country/country-06.svg
View File

@ -1,19 +1,24 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_107)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_107" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_107)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.85594H20.033V0.411499H0V4.85594Z" fill="#FFA44A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7447H20.033V9.30029H0V13.7447Z" fill="#1A9F0B"/>
<path d="M10.0164 8.67075C10.9323 8.67075 11.7065 7.97472 11.7065 7.07819C11.7065 6.18168 10.9323 5.4856 10.0164 5.4856C9.10045 5.4856 8.32617 6.18168 8.32617 7.07819C8.32617 7.97472 9.10045 8.67075 10.0164 8.67075Z" fill="#181A93" fill-opacity="0.15" stroke="#181A93" stroke-width="0.666667"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0166 7.52262C10.28 7.52262 10.4935 7.32363 10.4935 7.07817C10.4935 6.83271 10.28 6.63373 10.0166 6.63373C9.75313 6.63373 9.53955 6.83271 9.53955 7.07817C9.53955 7.32363 9.75313 7.52262 10.0166 7.52262Z" fill="#181A93"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_107">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_22_107)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_107" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask>
<g mask="url(#mask0_22_107)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.85594H20.033V0.411499H0V4.85594Z" fill="#FFA44A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7447H20.033V9.30029H0V13.7447Z" fill="#1A9F0B"/>
<path d="M10.0164 8.67075C10.9323 8.67075 11.7065 7.97472 11.7065 7.07819C11.7065 6.18168 10.9323 5.4856 10.0164 5.4856C9.10045 5.4856 8.32617 6.18168 8.32617 7.07819C8.32617 7.97472 9.10045 8.67075 10.0164 8.67075Z"
fill="#181A93" fill-opacity="0.15" stroke="#181A93" stroke-width="0.666667"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.0166 7.52262C10.28 7.52262 10.4935 7.32363 10.4935 7.07817C10.4935 6.83271 10.28 6.63373 10.0166 6.63373C9.75313 6.63373 9.53955 6.83271 9.53955 7.07817C9.53955 7.32363 9.75313 7.52262 10.0166 7.52262Z"
fill="#181A93"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_107">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

8
packages/frontend/src/images/icon/icon-arrow-down.svg
View File

@ -1,6 +1,6 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.0002 12.825C8.83145 12.825 8.69082 12.7688 8.5502 12.6563L2.08145 6.30002C1.82832 6.0469 1.82832 5.65315 2.08145 5.40002C2.33457 5.1469 2.72832 5.1469 2.98145 5.40002L9.0002 11.2781L15.0189 5.34377C15.2721 5.09065 15.6658 5.09065 15.9189 5.34377C16.1721 5.5969 16.1721 5.99065 15.9189 6.24377L9.45019 12.6C9.30957 12.7406 9.16895 12.825 9.0002 12.825Z"
fill="#64748B"
/>
<path
d="M9.0002 12.825C8.83145 12.825 8.69082 12.7688 8.5502 12.6563L2.08145 6.30002C1.82832 6.0469 1.82832 5.65315 2.08145 5.40002C2.33457 5.1469 2.72832 5.1469 2.98145 5.40002L9.0002 11.2781L15.0189 5.34377C15.2721 5.09065 15.6658 5.09065 15.9189 5.34377C16.1721 5.5969 16.1721 5.99065 15.9189 6.24377L9.45019 12.6C9.30957 12.7406 9.16895 12.825 9.0002 12.825Z"
fill="#64748B"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 493 B

After

Width:  |  Height:  |  Size: 517 B

8
packages/frontend/src/images/icon/icon-calendar.svg
View File

@ -1,6 +1,6 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.7504 2.9812H14.2879V2.36245C14.2879 2.02495 14.0066 1.71558 13.641 1.71558C13.2754 1.71558 12.9941 1.99683 12.9941 2.36245V2.9812H4.97852V2.36245C4.97852 2.02495 4.69727 1.71558 4.33164 1.71558C3.96602 1.71558 3.68477 1.99683 3.68477 2.36245V2.9812H2.25039C1.29414 2.9812 0.478516 3.7687 0.478516 4.75308V14.5406C0.478516 15.4968 1.26602 16.3125 2.25039 16.3125H15.7504C16.7066 16.3125 17.5223 15.525 17.5223 14.5406V4.72495C17.5223 3.7687 16.7066 2.9812 15.7504 2.9812ZM1.77227 8.21245H4.16289V10.9968H1.77227V8.21245ZM5.42852 8.21245H8.38164V10.9968H5.42852V8.21245ZM8.38164 12.2625V15.0187H5.42852V12.2625H8.38164V12.2625ZM9.64727 12.2625H12.6004V15.0187H9.64727V12.2625ZM9.64727 10.9968V8.21245H12.6004V10.9968H9.64727ZM13.8379 8.21245H16.2285V10.9968H13.8379V8.21245ZM2.25039 4.24683H3.71289V4.83745C3.71289 5.17495 3.99414 5.48433 4.35977 5.48433C4.72539 5.48433 5.00664 5.20308 5.00664 4.83745V4.24683H13.0504V4.83745C13.0504 5.17495 13.3316 5.48433 13.6973 5.48433C14.0629 5.48433 14.3441 5.20308 14.3441 4.83745V4.24683H15.7504C16.0316 4.24683 16.2566 4.47183 16.2566 4.75308V6.94683H1.77227V4.75308C1.77227 4.47183 1.96914 4.24683 2.25039 4.24683ZM1.77227 14.5125V12.2343H4.16289V14.9906H2.25039C1.96914 15.0187 1.77227 14.7937 1.77227 14.5125ZM15.7504 15.0187H13.8379V12.2625H16.2285V14.5406C16.2566 14.7937 16.0316 15.0187 15.7504 15.0187Z"
fill="#64748B"
/>
<path
d="M15.7504 2.9812H14.2879V2.36245C14.2879 2.02495 14.0066 1.71558 13.641 1.71558C13.2754 1.71558 12.9941 1.99683 12.9941 2.36245V2.9812H4.97852V2.36245C4.97852 2.02495 4.69727 1.71558 4.33164 1.71558C3.96602 1.71558 3.68477 1.99683 3.68477 2.36245V2.9812H2.25039C1.29414 2.9812 0.478516 3.7687 0.478516 4.75308V14.5406C0.478516 15.4968 1.26602 16.3125 2.25039 16.3125H15.7504C16.7066 16.3125 17.5223 15.525 17.5223 14.5406V4.72495C17.5223 3.7687 16.7066 2.9812 15.7504 2.9812ZM1.77227 8.21245H4.16289V10.9968H1.77227V8.21245ZM5.42852 8.21245H8.38164V10.9968H5.42852V8.21245ZM8.38164 12.2625V15.0187H5.42852V12.2625H8.38164V12.2625ZM9.64727 12.2625H12.6004V15.0187H9.64727V12.2625ZM9.64727 10.9968V8.21245H12.6004V10.9968H9.64727ZM13.8379 8.21245H16.2285V10.9968H13.8379V8.21245ZM2.25039 4.24683H3.71289V4.83745C3.71289 5.17495 3.99414 5.48433 4.35977 5.48433C4.72539 5.48433 5.00664 5.20308 5.00664 4.83745V4.24683H13.0504V4.83745C13.0504 5.17495 13.3316 5.48433 13.6973 5.48433C14.0629 5.48433 14.3441 5.20308 14.3441 4.83745V4.24683H15.7504C16.0316 4.24683 16.2566 4.47183 16.2566 4.75308V6.94683H1.77227V4.75308C1.77227 4.47183 1.96914 4.24683 2.25039 4.24683ZM1.77227 14.5125V12.2343H4.16289V14.9906H2.25039C1.96914 15.0187 1.77227 14.7937 1.77227 14.5125ZM15.7504 15.0187H13.8379V12.2625H16.2285V14.5406C16.2566 14.7937 16.0316 15.0187 15.7504 15.0187Z"
fill="#64748B"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

12
packages/frontend/src/images/icon/icon-copy-alt.svg
View File

@ -1,6 +1,10 @@
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.6875 4.125L14.4062 0.875C14.1875 0.65625 13.875 0.53125 13.5625 0.53125H7.875C6.96875 0.53125 6.21875 1.28125 6.21875 2.1875V13.5937C6.21875 14.5 6.96875 15.25 7.875 15.25H16.375C17.2812 15.25 18.0312 14.5 18.0312 13.5937V4.96875C18.0312 4.65625 17.9062 4.34375 17.6875 4.125ZM14.4687 2.9375L15.6562 4.125H14.4687V2.9375ZM16.375 13.8437H7.875C7.75 13.8437 7.625 13.7187 7.625 13.5937V2.1875C7.625 2.0625 7.75 1.9375 7.875 1.9375H13.0625V4.8125C13.0625 5.1875 13.375 5.53125 13.7812 5.53125H16.625V13.625C16.625 13.75 16.5 13.8437 16.375 13.8437Z" fill="#FFFFFF"/>
<path d="M13.7812 7.03125H9.65625C9.28125 7.03125 8.9375 7.34375 8.9375 7.75C8.9375 8.15625 9.25 8.46875 9.65625 8.46875H13.7812C14.1562 8.46875 14.5 8.15625 14.5 7.75C14.5 7.34375 14.1562 7.03125 13.7812 7.03125Z" fill="#FFFFFF"/>
<path d="M13.7812 9.65625H9.65625C9.28125 9.65625 8.9375 9.96875 8.9375 10.375C8.9375 10.75 9.25 11.0937 9.65625 11.0937H13.7812C14.1562 11.0937 14.5 10.7813 14.5 10.375C14.4687 9.96875 14.1562 9.65625 13.7812 9.65625Z" fill="#FFFFFF"/>
<path d="M13.0625 16.25C12.6875 16.25 12.3438 16.5625 12.3438 16.9687V17.8125C12.3438 17.9375 12.2188 18.0625 12.0938 18.0625H3.625C3.5 18.0625 3.375 17.9375 3.375 17.8125V6.375C3.375 6.25 3.5 6.125 3.625 6.125H4.6875C5.0625 6.125 5.40625 5.8125 5.40625 5.40625C5.40625 5 5.09375 4.6875 4.6875 4.6875H3.625C2.71875 4.6875 1.96875 5.4375 1.96875 6.34375V17.8125C1.96875 18.7188 2.71875 19.4687 3.625 19.4687H12.125C13.0313 19.4687 13.7812 18.7188 13.7812 17.8125V16.9687C13.7812 16.5625 13.4687 16.25 13.0625 16.25Z" fill="#FFFFFF"/>
<path d="M17.6875 4.125L14.4062 0.875C14.1875 0.65625 13.875 0.53125 13.5625 0.53125H7.875C6.96875 0.53125 6.21875 1.28125 6.21875 2.1875V13.5937C6.21875 14.5 6.96875 15.25 7.875 15.25H16.375C17.2812 15.25 18.0312 14.5 18.0312 13.5937V4.96875C18.0312 4.65625 17.9062 4.34375 17.6875 4.125ZM14.4687 2.9375L15.6562 4.125H14.4687V2.9375ZM16.375 13.8437H7.875C7.75 13.8437 7.625 13.7187 7.625 13.5937V2.1875C7.625 2.0625 7.75 1.9375 7.875 1.9375H13.0625V4.8125C13.0625 5.1875 13.375 5.53125 13.7812 5.53125H16.625V13.625C16.625 13.75 16.5 13.8437 16.375 13.8437Z"
fill="#FFFFFF"/>
<path d="M13.7812 7.03125H9.65625C9.28125 7.03125 8.9375 7.34375 8.9375 7.75C8.9375 8.15625 9.25 8.46875 9.65625 8.46875H13.7812C14.1562 8.46875 14.5 8.15625 14.5 7.75C14.5 7.34375 14.1562 7.03125 13.7812 7.03125Z"
fill="#FFFFFF"/>
<path d="M13.7812 9.65625H9.65625C9.28125 9.65625 8.9375 9.96875 8.9375 10.375C8.9375 10.75 9.25 11.0937 9.65625 11.0937H13.7812C14.1562 11.0937 14.5 10.7813 14.5 10.375C14.4687 9.96875 14.1562 9.65625 13.7812 9.65625Z"
fill="#FFFFFF"/>
<path d="M13.0625 16.25C12.6875 16.25 12.3438 16.5625 12.3438 16.9687V17.8125C12.3438 17.9375 12.2188 18.0625 12.0938 18.0625H3.625C3.5 18.0625 3.375 17.9375 3.375 17.8125V6.375C3.375 6.25 3.5 6.125 3.625 6.125H4.6875C5.0625 6.125 5.40625 5.8125 5.40625 5.40625C5.40625 5 5.09375 4.6875 4.6875 4.6875H3.625C2.71875 4.6875 1.96875 5.4375 1.96875 6.34375V17.8125C1.96875 18.7188 2.71875 19.4687 3.625 19.4687H12.125C13.0313 19.4687 13.7812 18.7188 13.7812 17.8125V16.9687C13.7812 16.5625 13.4687 16.25 13.0625 16.25Z"
fill="#FFFFFF"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

17
packages/frontend/src/images/icon/icon-moon.svg
View File

@ -1,10 +1,11 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_512_11103)">
<path d="M8.83697 5.88205C8.8368 7.05058 9.18468 8.19267 9.83625 9.16268C10.4878 10.1327 11.4135 10.8866 12.4953 11.3284C13.5772 11.7701 14.766 11.8796 15.9103 11.6429C17.0546 11.4062 18.1025 10.8341 18.9203 9.99941V10.0834C18.9203 14.7243 15.1584 18.4862 10.5175 18.4862C5.87667 18.4862 2.11475 14.7243 2.11475 10.0834C2.11475 5.44259 5.87667 1.68066 10.5175 1.68066H10.6016C10.042 2.22779 9.59754 2.88139 9.29448 3.60295C8.99143 4.32451 8.83587 5.09943 8.83697 5.88205ZM3.7953 10.0834C3.79469 11.5833 4.29571 13.0403 5.21864 14.2226C6.14157 15.4049 7.4334 16.2446 8.88857 16.608C10.3437 16.9715 11.8787 16.8379 13.2491 16.2284C14.6196 15.6189 15.7469 14.5686 16.4516 13.2446C15.1974 13.54 13.8885 13.5102 12.6492 13.1578C11.4098 12.8054 10.281 12.1422 9.36988 11.2311C8.45877 10.32 7.79557 9.19119 7.44318 7.95181C7.0908 6.71243 7.06093 5.40357 7.3564 4.1494C6.28049 4.72259 5.38073 5.57759 4.75343 6.62288C4.12614 7.66817 3.79495 8.86438 3.7953 10.0834Z" fill="#757693"/>
</g>
<defs>
<clipPath id="clip0_512_11103">
<rect width="20.1667" height="20.1667" fill="#757693" transform="translate(0.434204)"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_512_11103)">
<path d="M8.83697 5.88205C8.8368 7.05058 9.18468 8.19267 9.83625 9.16268C10.4878 10.1327 11.4135 10.8866 12.4953 11.3284C13.5772 11.7701 14.766 11.8796 15.9103 11.6429C17.0546 11.4062 18.1025 10.8341 18.9203 9.99941V10.0834C18.9203 14.7243 15.1584 18.4862 10.5175 18.4862C5.87667 18.4862 2.11475 14.7243 2.11475 10.0834C2.11475 5.44259 5.87667 1.68066 10.5175 1.68066H10.6016C10.042 2.22779 9.59754 2.88139 9.29448 3.60295C8.99143 4.32451 8.83587 5.09943 8.83697 5.88205ZM3.7953 10.0834C3.79469 11.5833 4.29571 13.0403 5.21864 14.2226C6.14157 15.4049 7.4334 16.2446 8.88857 16.608C10.3437 16.9715 11.8787 16.8379 13.2491 16.2284C14.6196 15.6189 15.7469 14.5686 16.4516 13.2446C15.1974 13.54 13.8885 13.5102 12.6492 13.1578C11.4098 12.8054 10.281 12.1422 9.36988 11.2311C8.45877 10.32 7.79557 9.19119 7.44318 7.95181C7.0908 6.71243 7.06093 5.40357 7.3564 4.1494C6.28049 4.72259 5.38073 5.57759 4.75343 6.62288C4.12614 7.66817 3.79495 8.86438 3.7953 10.0834Z"
fill="#757693"/>
</g>
<defs>
<clipPath id="clip0_512_11103">
<rect width="20.1667" height="20.1667" fill="#757693" transform="translate(0.434204)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

17
packages/frontend/src/images/icon/icon-sun.svg
View File

@ -1,10 +1,11 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_1131)">
<path d="M11 16.4998C9.54133 16.4998 8.14238 15.9204 7.11093 14.8889C6.07948 13.8575 5.50002 12.4585 5.50002 10.9998C5.50002 9.54115 6.07948 8.1422 7.11093 7.11075C8.14238 6.0793 9.54133 5.49984 11 5.49984C12.4587 5.49984 13.8577 6.0793 14.8891 7.11075C15.9206 8.1422 16.5 9.54115 16.5 10.9998C16.5 12.4585 15.9206 13.8575 14.8891 14.8889C13.8577 15.9204 12.4587 16.4998 11 16.4998ZM11 14.6665C11.9725 14.6665 12.9051 14.2802 13.5927 13.5926C14.2804 12.9049 14.6667 11.9723 14.6667 10.9998C14.6667 10.0274 14.2804 9.09475 13.5927 8.40711C12.9051 7.71948 11.9725 7.33317 11 7.33317C10.0276 7.33317 9.09493 7.71948 8.4073 8.40711C7.71966 9.09475 7.33335 10.0274 7.33335 10.9998C7.33335 11.9723 7.71966 12.9049 8.4073 13.5926C9.09493 14.2802 10.0276 14.6665 11 14.6665ZM10.0834 0.916504H11.9167V3.6665H10.0834V0.916504ZM10.0834 18.3332H11.9167V21.0832H10.0834V18.3332ZM3.2221 4.51809L4.51827 3.22192L6.46252 5.16617L5.16635 6.46234L3.2221 4.519V4.51809ZM15.5375 16.8335L16.8337 15.5373L18.7779 17.4816L17.4818 18.7778L15.5375 16.8335ZM17.4818 3.221L18.7779 4.51809L16.8337 6.46234L15.5375 5.16617L17.4818 3.22192V3.221ZM5.16635 15.5373L6.46252 16.8335L4.51827 18.7778L3.2221 17.4816L5.16635 15.5373ZM21.0834 10.0832V11.9165H18.3334V10.0832H21.0834ZM3.66669 10.0832V11.9165H0.916687V10.0832H3.66669Z" fill="#757693"/>
</g>
<defs>
<clipPath id="clip0_1_1131">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
<g clip-path="url(#clip0_1_1131)">
<path d="M11 16.4998C9.54133 16.4998 8.14238 15.9204 7.11093 14.8889C6.07948 13.8575 5.50002 12.4585 5.50002 10.9998C5.50002 9.54115 6.07948 8.1422 7.11093 7.11075C8.14238 6.0793 9.54133 5.49984 11 5.49984C12.4587 5.49984 13.8577 6.0793 14.8891 7.11075C15.9206 8.1422 16.5 9.54115 16.5 10.9998C16.5 12.4585 15.9206 13.8575 14.8891 14.8889C13.8577 15.9204 12.4587 16.4998 11 16.4998ZM11 14.6665C11.9725 14.6665 12.9051 14.2802 13.5927 13.5926C14.2804 12.9049 14.6667 11.9723 14.6667 10.9998C14.6667 10.0274 14.2804 9.09475 13.5927 8.40711C12.9051 7.71948 11.9725 7.33317 11 7.33317C10.0276 7.33317 9.09493 7.71948 8.4073 8.40711C7.71966 9.09475 7.33335 10.0274 7.33335 10.9998C7.33335 11.9723 7.71966 12.9049 8.4073 13.5926C9.09493 14.2802 10.0276 14.6665 11 14.6665ZM10.0834 0.916504H11.9167V3.6665H10.0834V0.916504ZM10.0834 18.3332H11.9167V21.0832H10.0834V18.3332ZM3.2221 4.51809L4.51827 3.22192L6.46252 5.16617L5.16635 6.46234L3.2221 4.519V4.51809ZM15.5375 16.8335L16.8337 15.5373L18.7779 17.4816L17.4818 18.7778L15.5375 16.8335ZM17.4818 3.221L18.7779 4.51809L16.8337 6.46234L15.5375 5.16617L17.4818 3.22192V3.221ZM5.16635 15.5373L6.46252 16.8335L4.51827 18.7778L3.2221 17.4816L5.16635 15.5373ZM21.0834 10.0832V11.9165H18.3334V10.0832H21.0834ZM3.66669 10.0832V11.9165H0.916687V10.0832H3.66669Z"
fill="#757693"/>
</g>
<defs>
<clipPath id="clip0_1_1131">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

119
packages/frontend/src/images/logo/logo-dark.svg
View File

@ -1,53 +1,70 @@
<svg width="176" height="32" viewBox="0 0 176 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="#1C2434"/>
<path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z" fill="#1C2434"/>
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z" fill="#1C2434"/>
<path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="#1C2434"/>
<path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z" fill="#1C2434"/>
<path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z" fill="#1C2434"/>
<path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z" fill="#1C2434"/>
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z" fill="#1C2434"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z" fill="#1C2434"/>
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z" fill="#3C50E0"/>
<g filter="url(#filter0_d_521_14075)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z" fill="white"/>
</g>
<g opacity="0.9" filter="url(#filter1_d_521_14075)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z" fill="white"/>
</g>
<g opacity="0.7" filter="url(#filter2_d_521_14075)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_521_14075" x="7.42139" y="6.23706" width="5.36865" height="20.5264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
<filter id="filter1_d_521_14075" x="13.7368" y="12.9734" width="5.36865" height="13.7896" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
<filter id="filter2_d_521_14075" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
</defs>
<path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="#1C2434"/>
<path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z"
fill="#1C2434"/>
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z"
fill="#1C2434"/>
<path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="#1C2434"/>
<path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z"
fill="#1C2434"/>
<path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z"
fill="#1C2434"/>
<path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z"
fill="#1C2434"/>
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z"
fill="#1C2434"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z"
fill="#1C2434"/>
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z"
fill="#3C50E0"/>
<g filter="url(#filter0_d_521_14075)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z"
fill="white"/>
</g>
<g opacity="0.9" filter="url(#filter1_d_521_14075)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z"
fill="white"/>
</g>
<g opacity="0.7" filter="url(#filter2_d_521_14075)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z"
fill="white"/>
</g>
<defs>
<filter id="filter0_d_521_14075" x="7.42139" y="6.23706" width="5.36865" height="20.5264"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
<filter id="filter1_d_521_14075" x="13.7368" y="12.9734" width="5.36865" height="13.7896"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
<filter id="filter2_d_521_14075" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

94
packages/frontend/src/images/logo/logo-icon.svg
View File

@ -1,44 +1,54 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z" fill="#3C50E0"/>
<g filter="url(#filter0_d_521_14078)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z" fill="white"/>
</g>
<g opacity="0.9" filter="url(#filter1_d_521_14078)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z" fill="white"/>
</g>
<g opacity="0.7" filter="url(#filter2_d_521_14078)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_521_14078" x="7.42139" y="6.23706" width="5.36865" height="20.5264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
<filter id="filter1_d_521_14078" x="13.7368" y="12.9734" width="5.36865" height="13.7896" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
<filter id="filter2_d_521_14078" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
</defs>
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z"
fill="#3C50E0"/>
<g filter="url(#filter0_d_521_14078)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z"
fill="white"/>
</g>
<g opacity="0.9" filter="url(#filter1_d_521_14078)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z"
fill="white"/>
</g>
<g opacity="0.7" filter="url(#filter2_d_521_14078)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z"
fill="white"/>
</g>
<defs>
<filter id="filter0_d_521_14078" x="7.42139" y="6.23706" width="5.36865" height="20.5264"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
<filter id="filter1_d_521_14078" x="13.7368" y="12.9734" width="5.36865" height="13.7896"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
<filter id="filter2_d_521_14078" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

119
packages/frontend/src/images/logo/logo.svg
View File

@ -1,53 +1,70 @@
<svg width="176" height="32" viewBox="0 0 176 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="white"/>
<path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z" fill="white"/>
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z" fill="white"/>
<path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="white"/>
<path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z" fill="white"/>
<path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z" fill="white"/>
<path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z" fill="white"/>
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z" fill="white"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z" fill="white"/>
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z" fill="#3C50E0"/>
<g filter="url(#filter0_d_506_10589)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z" fill="white"/>
</g>
<g opacity="0.9" filter="url(#filter1_d_506_10589)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z" fill="white"/>
</g>
<g opacity="0.7" filter="url(#filter2_d_506_10589)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_506_10589" x="7.42139" y="6.23706" width="5.36865" height="20.5264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
<filter id="filter1_d_506_10589" x="13.7368" y="12.9734" width="5.36865" height="13.7896" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
<filter id="filter2_d_506_10589" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
</defs>
<path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="white"/>
<path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z"
fill="white"/>
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z"
fill="white"/>
<path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="white"/>
<path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z"
fill="white"/>
<path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z"
fill="white"/>
<path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z"
fill="white"/>
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z"
fill="white"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z"
fill="white"/>
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z"
fill="#3C50E0"/>
<g filter="url(#filter0_d_506_10589)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z"
fill="white"/>
</g>
<g opacity="0.9" filter="url(#filter1_d_506_10589)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z"
fill="white"/>
</g>
<g opacity="0.7" filter="url(#filter2_d_506_10589)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z"
fill="white"/>
</g>
<defs>
<filter id="filter0_d_506_10589" x="7.42139" y="6.23706" width="5.36865" height="20.5264"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
<filter id="filter1_d_506_10589" x="13.7368" y="12.9734" width="5.36865" height="13.7896"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
<filter id="filter2_d_506_10589" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

37
packages/frontend/src/layout/DefaultLayout.tsx
View File

@ -1,25 +1,26 @@
import React, { useState, ReactNode } from 'react';
import Header from '../components/mini/header/index';
import Sidebar from '../components/mini/sidebar/index';
import React, { useState, ReactNode } from "react";
import Header from "../components/mini/header/index";
import Sidebar from "../components/mini/sidebar/index";
const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) =>
{
const [ sidebarOpen, setSidebarOpen ] = useState(false);
return (
<div className="dark:bg-boxdark-2 dark:text-bodydark">
<div className="flex h-screen overflow-hidden">
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
<main>
<div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
{children}
return (
<div className="dark:bg-boxdark-2 dark:text-bodydark">
<div className="flex h-screen overflow-hidden">
<Sidebar sidebarOpen={ sidebarOpen } setSidebarOpen={ setSidebarOpen }/>
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<Header sidebarOpen={ sidebarOpen } setSidebarOpen={ setSidebarOpen }/>
<main>
<div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
{ children }
</div>
</main>
</div>
</div>
</main>
</div>
</div>
</div>
);
);
};
export default DefaultLayout;

7
packages/frontend/src/lib.d.ts vendored
View File

@ -1,4 +1,5 @@
declare module '*.svg' {
const content: any;
export default content;
declare module "*.svg"
{
const content: any;
export default content;
}

34
packages/frontend/src/main.tsx
View File

@ -1,24 +1,24 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './css/style.css';
import './css/satoshi.css';
import 'flatpickr/dist/flatpickr.min.css';
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
import "./css/style.css";
import "./css/satoshi.css";
import "flatpickr/dist/flatpickr.min.css";
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime.js';
import duration from 'dayjs/plugin/duration.js';
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime.js";
import duration from "dayjs/plugin/duration.js";
dayjs.extend(duration)
dayjs.extend(duration);
dayjs.extend(relativeTime);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>,
);

127
packages/frontend/src/old/CardDataStats.tsx
View File

@ -1,73 +1,76 @@
import React from 'react';
import React from "react";
interface CardDataStatsProps {
title: string;
total: string;
rate?: string;
levelUp?: boolean;
levelDown?: boolean;
interface CardDataStatsProps
{
title: string;
total: string;
rate?: string;
levelUp?: boolean;
levelDown?: boolean;
}
const CardDataStats: React.FC<CardDataStatsProps> = ({
title,
total,
rate,
levelUp,
levelDown,
}) => {
return (
<div className="rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="mt-4 flex items-end justify-between">
<div>
<h4 className="text-title-md font-bold text-black dark:text-white">
{total}
</h4>
<span className="text-sm font-medium">{title}</span>
</div>
title,
total,
rate,
levelUp,
levelDown,
}) =>
{
return (
<div
className="rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="mt-4 flex items-end justify-between">
<div>
<h4 className="text-title-md font-bold text-black dark:text-white">
{ total }
</h4>
<span className="text-sm font-medium">{ title }</span>
</div>
{ rate && <>
{ rate && <>
<span
className={`flex items-center gap-1 text-sm font-medium ${
levelUp && 'text-meta-3'
} ${levelDown && 'text-meta-5'} `}
>
{rate}
className={ `flex items-center gap-1 text-sm font-medium ${
levelUp && "text-meta-3"
} ${ levelDown && "text-meta-5" } ` }
>
{ rate }
{levelUp && (
<svg
className="fill-meta-3"
width="10"
height="11"
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.35716 2.47737L0.908974 5.82987L5.0443e-07 4.94612L5 0.0848689L10 4.94612L9.09103 5.82987L5.64284 2.47737L5.64284 10.0849L4.35716 10.0849L4.35716 2.47737Z"
fill=""
/>
</svg>
)}
{levelDown && (
<svg
className="fill-meta-5"
width="10"
height="11"
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.64284 7.69237L9.09102 4.33987L10 5.22362L5 10.0849L-8.98488e-07 5.22362L0.908973 4.33987L4.35716 7.69237L4.35716 0.0848701L5.64284 0.0848704L5.64284 7.69237Z"
fill=""
/>
</svg>
)}
{ levelUp && (
<svg
className="fill-meta-3"
width="10"
height="11"
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.35716 2.47737L0.908974 5.82987L5.0443e-07 4.94612L5 0.0848689L10 4.94612L9.09103 5.82987L5.64284 2.47737L5.64284 10.0849L4.35716 10.0849L4.35716 2.47737Z"
fill=""
/>
</svg>
) }
{ levelDown && (
<svg
className="fill-meta-5"
width="10"
height="11"
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.64284 7.69237L9.09102 4.33987L10 5.22362L5 10.0849L-8.98488e-07 5.22362L0.908973 4.33987L4.35716 7.69237L4.35716 0.0848701L5.64284 0.0848704L5.64284 7.69237Z"
fill=""
/>
</svg>
) }
</span>
</> }
</div>
</div>
);
</> }
</div>
</div>
);
};
export default CardDataStats;

29
packages/frontend/src/old/Chart.tsx
View File

@ -1,19 +1,20 @@
import React from 'react';
import React from "react";
import ChartOne from './Charts/ChartOne';
import ChartThree from './Charts/ChartThree';
import ChartTwo from './Charts/ChartTwo';
import ChartOne from "./Charts/ChartOne";
import ChartThree from "./Charts/ChartThree";
import ChartTwo from "./Charts/ChartTwo";
const Chart: React.FC = () => {
return (
<>
<div className="grid grid-cols-12 gap-4 md:gap-6 2xl:gap-7.5">
<ChartOne />
<ChartTwo />
<ChartThree />
</div>
</>
);
const Chart: React.FC = () =>
{
return (
<>
<div className="grid grid-cols-12 gap-4 md:gap-6 2xl:gap-7.5">
<ChartOne/>
<ChartTwo/>
<ChartThree/>
</div>
</>
);
};
export default Chart;

349
packages/frontend/src/old/Charts/ChartOne.tsx
View File

@ -1,199 +1,208 @@
import { ApexOptions } from 'apexcharts';
import React, { useState } from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from "apexcharts";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";
const options: ApexOptions = {
legend: {
show: false,
position: 'top',
horizontalAlign: 'left',
},
colors: ['#3C50E0', '#80CAEE'],
chart: {
fontFamily: 'Satoshi, sans-serif',
height: 335,
type: 'area',
dropShadow: {
enabled: true,
color: '#623CEA14',
top: 10,
blur: 4,
left: 0,
opacity: 0.1,
legend: {
show: false,
position: "top",
horizontalAlign: "left",
},
colors: [ "#3C50E0", "#80CAEE" ],
chart: {
fontFamily: "Satoshi, sans-serif",
height: 335,
type: "area",
dropShadow: {
enabled: true,
color: "#623CEA14",
top: 10,
blur: 4,
left: 0,
opacity: 0.1,
},
toolbar: {
show: false,
},
},
responsive: [
{
breakpoint: 1024,
options: {
chart: {
height: 300,
toolbar: {
show: false,
},
},
},
{
breakpoint: 1366,
options: {
chart: {
height: 350,
responsive: [
{
breakpoint: 1024,
options: {
chart: {
height: 300,
},
},
},
{
breakpoint: 1366,
options: {
chart: {
height: 350,
},
},
},
],
stroke: {
width: [ 2, 2 ],
curve: "straight",
},
// labels: {
// show: false,
// position: "top",
// },
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
},
dataLabels: {
enabled: false,
},
markers: {
size: 4,
colors: "#fff",
strokeColors: [ "#3056D3", "#80CAEE" ],
strokeWidth: 3,
strokeOpacity: 0.9,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
hover: {
size: undefined,
sizeOffset: 5,
},
},
},
],
stroke: {
width: [2, 2],
curve: 'straight',
},
// labels: {
// show: false,
// position: "top",
// },
grid: {
xaxis: {
lines: {
show: true,
},
type: "category",
categories: [
"Sep",
"Oct",
"Nov",
"Dec",
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
lines: {
show: true,
},
title: {
style: {
fontSize: "0px",
},
},
min: 0,
max: 100,
},
},
dataLabels: {
enabled: false,
},
markers: {
size: 4,
colors: '#fff',
strokeColors: ['#3056D3', '#80CAEE'],
strokeWidth: 3,
strokeOpacity: 0.9,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
hover: {
size: undefined,
sizeOffset: 5,
},
},
xaxis: {
type: 'category',
categories: [
'Sep',
'Oct',
'Nov',
'Dec',
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
title: {
style: {
fontSize: '0px',
},
},
min: 0,
max: 100,
},
};
interface ChartOneState {
series: {
name: string;
data: number[];
}[];
interface ChartOneState
{
series: {
name: string;
data: number[];
}[];
}
const ChartOne: React.FC = () => {
const [state, setState] = useState<ChartOneState>({
series: [
{
name: 'Product One',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45],
},
const ChartOne: React.FC = () =>
{
const [ state, setState ] = useState<ChartOneState>({
series: [
{
name: "Product One",
data: [ 23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45 ],
},
{
name: 'Product Two',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51],
},
],
});
{
name: "Product Two",
data: [ 30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51 ],
},
],
});
const handleReset = () => {
setState((prevState) => ({
...prevState,
}));
};
handleReset;
const handleReset = () =>
{
setState((prevState) => ({
...prevState,
}));
};
handleReset;
return (
<div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
<div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
<div className="flex w-full flex-wrap gap-3 sm:gap-5">
<div className="flex min-w-47.5">
<span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-primary">
return (
<div
className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
<div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
<div className="flex w-full flex-wrap gap-3 sm:gap-5">
<div className="flex min-w-47.5">
<span
className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-primary">
<span className="block h-2.5 w-full max-w-2.5 rounded-full bg-primary"></span>
</span>
<div className="w-full">
<p className="font-semibold text-primary">Total Revenue</p>
<p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
</div>
</div>
<div className="flex min-w-47.5">
<span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-secondary">
<div className="w-full">
<p className="font-semibold text-primary">Total Revenue</p>
<p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
</div>
</div>
<div className="flex min-w-47.5">
<span
className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-secondary">
<span className="block h-2.5 w-full max-w-2.5 rounded-full bg-secondary"></span>
</span>
<div className="w-full">
<p className="font-semibold text-secondary">Total Sales</p>
<p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
<div className="w-full">
<p className="font-semibold text-secondary">Total Sales</p>
<p className="text-sm font-medium">12.04.2022 - 12.05.2022</p>
</div>
</div>
</div>
<div className="flex w-full max-w-45 justify-end">
<div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
<button
className="rounded bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark">
Day
</button>
<button
className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
Week
</button>
<button
className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
Month
</button>
</div>
</div>
</div>
</div>
</div>
<div className="flex w-full max-w-45 justify-end">
<div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
<button className="rounded bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark">
Day
</button>
<button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
Week
</button>
<button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
Month
</button>
</div>
</div>
</div>
<div>
<div id="chartOne" className="-ml-5">
<ReactApexChart
options={options}
series={state.series}
type="area"
height={350}
/>
<div>
<div id="chartOne" className="-ml-5">
<ReactApexChart
options={ options }
series={ state.series }
type="area"
height={ 350 }
/>
</div>
</div>
</div>
</div>
</div>
);
);
};
export default ChartOne;

278
packages/frontend/src/old/Charts/ChartThree.tsx
View File

@ -1,163 +1,167 @@
import { ApexOptions } from 'apexcharts';
import React, { useState } from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from "apexcharts";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";
interface ChartThreeState {
series: number[];
interface ChartThreeState
{
series: number[];
}
const options: ApexOptions = {
chart: {
fontFamily: 'Satoshi, sans-serif',
type: 'donut',
},
colors: ['#3C50E0', '#6577F3', '#8FD0EF', '#0FADCF'],
labels: ['Desktop', 'Tablet', 'Mobile', 'Unknown'],
legend: {
show: false,
position: 'bottom',
},
chart: {
fontFamily: "Satoshi, sans-serif",
type: "donut",
},
colors: [ "#3C50E0", "#6577F3", "#8FD0EF", "#0FADCF" ],
labels: [ "Desktop", "Tablet", "Mobile", "Unknown" ],
legend: {
show: false,
position: "bottom",
},
plotOptions: {
pie: {
donut: {
size: '65%',
background: 'transparent',
},
},
},
dataLabels: {
enabled: false,
},
responsive: [
{
breakpoint: 2600,
options: {
chart: {
width: 380,
plotOptions: {
pie: {
donut: {
size: "65%",
background: "transparent",
},
},
},
},
{
breakpoint: 640,
options: {
chart: {
width: 200,
dataLabels: {
enabled: false,
},
responsive: [
{
breakpoint: 2600,
options: {
chart: {
width: 380,
},
},
},
},
},
],
{
breakpoint: 640,
options: {
chart: {
width: 200,
},
},
},
],
};
const ChartThree: React.FC = () => {
const [state, setState] = useState<ChartThreeState>({
series: [65, 34, 12, 56],
});
const ChartThree: React.FC = () =>
{
const [ state, setState ] = useState<ChartThreeState>({
series: [ 65, 34, 12, 56 ],
});
const handleReset = () => {
setState((prevState) => ({
...prevState,
series: [65, 34, 12, 56],
}));
};
handleReset;
const handleReset = () =>
{
setState((prevState) => ({
...prevState,
series: [ 65, 34, 12, 56 ],
}));
};
handleReset;
return (
<div className="sm:px-7.5 col-span-12 rounded-sm border border-stroke bg-white px-5 pb-5 pt-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-5">
<div className="mb-3 justify-between gap-4 sm:flex">
<div>
<h5 className="text-xl font-semibold text-black dark:text-white">
Visitors Analytics
</h5>
</div>
<div>
<div className="relative z-20 inline-block">
<select
name=""
id=""
className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
>
<option value="" className="dark:bg-boxdark">
Monthly
</option>
<option value="" className="dark:bg-boxdark">
Yearly
</option>
</select>
<span className="absolute right-3 top-1/2 z-10 -translate-y-1/2">
return (
<div
className="sm:px-7.5 col-span-12 rounded-sm border border-stroke bg-white px-5 pb-5 pt-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-5">
<div className="mb-3 justify-between gap-4 sm:flex">
<div>
<h5 className="text-xl font-semibold text-black dark:text-white">
Visitors Analytics
</h5>
</div>
<div>
<div className="relative z-20 inline-block">
<select
name=""
id=""
className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
>
<option value="" className="dark:bg-boxdark">
Monthly
</option>
<option value="" className="dark:bg-boxdark">
Yearly
</option>
</select>
<span className="absolute right-3 top-1/2 z-10 -translate-y-1/2">
<svg
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.47072 1.08816C0.47072 1.02932 0.500141 0.955772 0.54427 0.911642C0.647241 0.808672 0.809051 0.808672 0.912022 0.896932L4.85431 4.60386C4.92785 4.67741 5.06025 4.67741 5.14851 4.60386L9.09079 0.896932C9.19376 0.793962 9.35557 0.808672 9.45854 0.911642C9.56151 1.01461 9.5468 1.17642 9.44383 1.27939L5.50155 4.98632C5.22206 5.23639 4.78076 5.23639 4.51598 4.98632L0.558981 1.27939C0.50014 1.22055 0.47072 1.16171 0.47072 1.08816Z"
fill="#637381"
d="M0.47072 1.08816C0.47072 1.02932 0.500141 0.955772 0.54427 0.911642C0.647241 0.808672 0.809051 0.808672 0.912022 0.896932L4.85431 4.60386C4.92785 4.67741 5.06025 4.67741 5.14851 4.60386L9.09079 0.896932C9.19376 0.793962 9.35557 0.808672 9.45854 0.911642C9.56151 1.01461 9.5468 1.17642 9.44383 1.27939L5.50155 4.98632C5.22206 5.23639 4.78076 5.23639 4.51598 4.98632L0.558981 1.27939C0.50014 1.22055 0.47072 1.16171 0.47072 1.08816Z"
fill="#637381"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.22659 0.546578L5.00141 4.09604L8.76422 0.557869C9.08459 0.244537 9.54201 0.329403 9.79139 0.578788C10.112 0.899434 10.0277 1.36122 9.77668 1.61224L9.76644 1.62248L5.81552 5.33722C5.36257 5.74249 4.6445 5.7544 4.19352 5.32924C4.19327 5.32901 4.19377 5.32948 4.19352 5.32924L0.225953 1.61241C0.102762 1.48922 -4.20186e-08 1.31674 -3.20269e-08 1.08816C-2.40601e-08 0.905899 0.0780105 0.712197 0.211421 0.578787C0.494701 0.295506 0.935574 0.297138 1.21836 0.539529L1.22659 0.546578ZM4.51598 4.98632C4.78076 5.23639 5.22206 5.23639 5.50155 4.98632L9.44383 1.27939C9.5468 1.17642 9.56151 1.01461 9.45854 0.911642C9.35557 0.808672 9.19376 0.793962 9.09079 0.896932L5.14851 4.60386C5.06025 4.67741 4.92785 4.67741 4.85431 4.60386L0.912022 0.896932C0.809051 0.808672 0.647241 0.808672 0.54427 0.911642C0.500141 0.955772 0.47072 1.02932 0.47072 1.08816C0.47072 1.16171 0.50014 1.22055 0.558981 1.27939L4.51598 4.98632Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M1.22659 0.546578L5.00141 4.09604L8.76422 0.557869C9.08459 0.244537 9.54201 0.329403 9.79139 0.578788C10.112 0.899434 10.0277 1.36122 9.77668 1.61224L9.76644 1.62248L5.81552 5.33722C5.36257 5.74249 4.6445 5.7544 4.19352 5.32924C4.19327 5.32901 4.19377 5.32948 4.19352 5.32924L0.225953 1.61241C0.102762 1.48922 -4.20186e-08 1.31674 -3.20269e-08 1.08816C-2.40601e-08 0.905899 0.0780105 0.712197 0.211421 0.578787C0.494701 0.295506 0.935574 0.297138 1.21836 0.539529L1.22659 0.546578ZM4.51598 4.98632C4.78076 5.23639 5.22206 5.23639 5.50155 4.98632L9.44383 1.27939C9.5468 1.17642 9.56151 1.01461 9.45854 0.911642C9.35557 0.808672 9.19376 0.793962 9.09079 0.896932L5.14851 4.60386C5.06025 4.67741 4.92785 4.67741 4.85431 4.60386L0.912022 0.896932C0.809051 0.808672 0.647241 0.808672 0.54427 0.911642C0.500141 0.955772 0.47072 1.02932 0.47072 1.08816C0.47072 1.16171 0.50014 1.22055 0.558981 1.27939L4.51598 4.98632Z"
fill="#637381"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="mb-2">
<div id="chartThree" className="mx-auto flex justify-center">
<ReactApexChart
options={options}
series={state.series}
type="donut"
/>
</div>
</div>
<div className="mb-2">
<div id="chartThree" className="mx-auto flex justify-center">
<ReactApexChart
options={ options }
series={ state.series }
type="donut"
/>
</div>
</div>
<div className="-mx-8 flex flex-wrap items-center justify-center gap-y-3">
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-primary"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Desktop </span>
<span> 65% </span>
</p>
</div>
<div className="-mx-8 flex flex-wrap items-center justify-center gap-y-3">
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-primary"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Desktop </span>
<span> 65% </span>
</p>
</div>
</div>
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#6577F3]"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Tablet </span>
<span> 34% </span>
</p>
</div>
</div>
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#8FD0EF]"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Mobile </span>
<span> 45% </span>
</p>
</div>
</div>
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#0FADCF]"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Unknown </span>
<span> 12% </span>
</p>
</div>
</div>
</div>
</div>
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#6577F3]"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Tablet </span>
<span> 34% </span>
</p>
</div>
</div>
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#8FD0EF]"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Mobile </span>
<span> 45% </span>
</p>
</div>
</div>
<div className="sm:w-1/2 w-full px-8">
<div className="flex w-full items-center">
<span className="mr-2 block h-3 w-full max-w-3 rounded-full bg-[#0FADCF]"></span>
<p className="flex w-full justify-between text-sm font-medium text-black dark:text-white">
<span> Unknown </span>
<span> 12% </span>
</p>
</div>
</div>
</div>
</div>
);
);
};
export default ChartThree;

254
packages/frontend/src/old/Charts/ChartTwo.tsx
View File

@ -1,149 +1,153 @@
import { ApexOptions } from 'apexcharts';
import React, { useState } from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from "apexcharts";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";
const options: ApexOptions = {
colors: ['#3C50E0', '#80CAEE'],
chart: {
fontFamily: 'Satoshi, sans-serif',
type: 'bar',
height: 335,
stacked: true,
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
responsive: [
{
breakpoint: 1536,
options: {
plotOptions: {
bar: {
borderRadius: 0,
columnWidth: '25%',
},
colors: [ "#3C50E0", "#80CAEE" ],
chart: {
fontFamily: "Satoshi, sans-serif",
type: "bar",
height: 335,
stacked: true,
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 0,
columnWidth: '25%',
borderRadiusApplication: 'end',
borderRadiusWhenStacked: 'last',
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
},
legend: {
position: 'top',
horizontalAlign: 'left',
fontFamily: 'Satoshi',
fontWeight: 500,
fontSize: '14px',
markers: {
radius: 99,
responsive: [
{
breakpoint: 1536,
options: {
plotOptions: {
bar: {
borderRadius: 0,
columnWidth: "25%",
},
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 0,
columnWidth: "25%",
borderRadiusApplication: "end",
borderRadiusWhenStacked: "last",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: [ "M", "T", "W", "T", "F", "S", "S" ],
},
legend: {
position: "top",
horizontalAlign: "left",
fontFamily: "Satoshi",
fontWeight: 500,
fontSize: "14px",
markers: {
radius: 99,
},
},
fill: {
opacity: 1,
},
},
fill: {
opacity: 1,
},
};
interface ChartTwoState {
series: {
name: string;
data: number[];
}[];
interface ChartTwoState
{
series: {
name: string;
data: number[];
}[];
}
const ChartTwo: React.FC = () => {
const [state, setState] = useState<ChartTwoState>({
series: [
{
name: 'Sales',
data: [44, 55, 41, 67, 22, 43, 65],
},
{
name: 'Revenue',
data: [13, 23, 20, 8, 13, 27, 15],
},
],
});
const handleReset = () => {
setState((prevState) => ({
...prevState,
}));
};
handleReset;
const ChartTwo: React.FC = () =>
{
const [ state, setState ] = useState<ChartTwoState>({
series: [
{
name: "Sales",
data: [ 44, 55, 41, 67, 22, 43, 65 ],
},
{
name: "Revenue",
data: [ 13, 23, 20, 8, 13, 27, 15 ],
},
],
});
return (
<div className="col-span-12 rounded-sm border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
<div className="mb-4 justify-between gap-4 sm:flex">
<div>
<h4 className="text-xl font-semibold text-black dark:text-white">
Profit this week
</h4>
</div>
<div>
<div className="relative z-20 inline-block">
<select
name="#"
id="#"
className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
>
<option value="" className='dark:bg-boxdark'>This Week</option>
<option value="" className='dark:bg-boxdark'>Last Week</option>
</select>
<span className="absolute top-1/2 right-3 z-10 -translate-y-1/2">
const handleReset = () =>
{
setState((prevState) => ({
...prevState,
}));
};
handleReset;
return (
<div
className="col-span-12 rounded-sm border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
<div className="mb-4 justify-between gap-4 sm:flex">
<div>
<h4 className="text-xl font-semibold text-black dark:text-white">
Profit this week
</h4>
</div>
<div>
<div className="relative z-20 inline-block">
<select
name="#"
id="#"
className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
>
<option value="" className="dark:bg-boxdark">This Week</option>
<option value="" className="dark:bg-boxdark">Last Week</option>
</select>
<span className="absolute top-1/2 right-3 z-10 -translate-y-1/2">
<svg
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.47072 1.08816C0.47072 1.02932 0.500141 0.955772 0.54427 0.911642C0.647241 0.808672 0.809051 0.808672 0.912022 0.896932L4.85431 4.60386C4.92785 4.67741 5.06025 4.67741 5.14851 4.60386L9.09079 0.896932C9.19376 0.793962 9.35557 0.808672 9.45854 0.911642C9.56151 1.01461 9.5468 1.17642 9.44383 1.27939L5.50155 4.98632C5.22206 5.23639 4.78076 5.23639 4.51598 4.98632L0.558981 1.27939C0.50014 1.22055 0.47072 1.16171 0.47072 1.08816Z"
fill="#637381"
d="M0.47072 1.08816C0.47072 1.02932 0.500141 0.955772 0.54427 0.911642C0.647241 0.808672 0.809051 0.808672 0.912022 0.896932L4.85431 4.60386C4.92785 4.67741 5.06025 4.67741 5.14851 4.60386L9.09079 0.896932C9.19376 0.793962 9.35557 0.808672 9.45854 0.911642C9.56151 1.01461 9.5468 1.17642 9.44383 1.27939L5.50155 4.98632C5.22206 5.23639 4.78076 5.23639 4.51598 4.98632L0.558981 1.27939C0.50014 1.22055 0.47072 1.16171 0.47072 1.08816Z"
fill="#637381"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.22659 0.546578L5.00141 4.09604L8.76422 0.557869C9.08459 0.244537 9.54201 0.329403 9.79139 0.578788C10.112 0.899434 10.0277 1.36122 9.77668 1.61224L9.76644 1.62248L5.81552 5.33722C5.36257 5.74249 4.6445 5.7544 4.19352 5.32924C4.19327 5.32901 4.19377 5.32948 4.19352 5.32924L0.225953 1.61241C0.102762 1.48922 -4.20186e-08 1.31674 -3.20269e-08 1.08816C-2.40601e-08 0.905899 0.0780105 0.712197 0.211421 0.578787C0.494701 0.295506 0.935574 0.297138 1.21836 0.539529L1.22659 0.546578ZM4.51598 4.98632C4.78076 5.23639 5.22206 5.23639 5.50155 4.98632L9.44383 1.27939C9.5468 1.17642 9.56151 1.01461 9.45854 0.911642C9.35557 0.808672 9.19376 0.793962 9.09079 0.896932L5.14851 4.60386C5.06025 4.67741 4.92785 4.67741 4.85431 4.60386L0.912022 0.896932C0.809051 0.808672 0.647241 0.808672 0.54427 0.911642C0.500141 0.955772 0.47072 1.02932 0.47072 1.08816C0.47072 1.16171 0.50014 1.22055 0.558981 1.27939L4.51598 4.98632Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M1.22659 0.546578L5.00141 4.09604L8.76422 0.557869C9.08459 0.244537 9.54201 0.329403 9.79139 0.578788C10.112 0.899434 10.0277 1.36122 9.77668 1.61224L9.76644 1.62248L5.81552 5.33722C5.36257 5.74249 4.6445 5.7544 4.19352 5.32924C4.19327 5.32901 4.19377 5.32948 4.19352 5.32924L0.225953 1.61241C0.102762 1.48922 -4.20186e-08 1.31674 -3.20269e-08 1.08816C-2.40601e-08 0.905899 0.0780105 0.712197 0.211421 0.578787C0.494701 0.295506 0.935574 0.297138 1.21836 0.539529L1.22659 0.546578ZM4.51598 4.98632C4.78076 5.23639 5.22206 5.23639 5.50155 4.98632L9.44383 1.27939C9.5468 1.17642 9.56151 1.01461 9.45854 0.911642C9.35557 0.808672 9.19376 0.793962 9.09079 0.896932L5.14851 4.60386C5.06025 4.67741 4.92785 4.67741 4.85431 4.60386L0.912022 0.896932C0.809051 0.808672 0.647241 0.808672 0.54427 0.911642C0.500141 0.955772 0.47072 1.02932 0.47072 1.08816C0.47072 1.16171 0.50014 1.22055 0.558981 1.27939L4.51598 4.98632Z"
fill="#637381"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div id="chartTwo" className="-ml-5 -mb-9">
<ReactApexChart
options={options}
series={state.series}
type="bar"
height={350}
/>
<div>
<div id="chartTwo" className="-ml-5 -mb-9">
<ReactApexChart
options={ options }
series={ state.series }
type="bar"
height={ 350 }
/>
</div>
</div>
</div>
</div>
</div>
);
);
};
export default ChartTwo;

194
packages/frontend/src/old/Chat/ChatCard.tsx
View File

@ -1,110 +1,112 @@
import { Link } from 'react-router-dom';
import { Chat } from '../../old/chat';
import UserOne from '../../images/user/user-01.png';
import UserTwo from '../../images/user/user-02.png';
import UserThree from '../../images/user/user-03.png';
import UserFour from '../../images/user/user-04.png';
import UserFive from '../../images/user/user-05.png';
import { Link } from "react-router-dom";
import { Chat } from "../../old/chat";
import UserOne from "../../images/user/user-01.png";
import UserTwo from "../../images/user/user-02.png";
import UserThree from "../../images/user/user-03.png";
import UserFour from "../../images/user/user-04.png";
import UserFive from "../../images/user/user-05.png";
const chatData: Chat[] = [
{
avatar: UserOne,
name: 'Devid Heilo',
text: 'How are you?',
time: 12,
textCount: 3,
color: '#10B981',
},
{
avatar: UserTwo,
name: 'Henry Fisher',
text: 'Waiting for you!',
time: 12,
textCount: 0,
color: '#DC3545',
},
{
avatar: UserFour,
name: 'Jhon Doe',
text: "What's up?",
time: 32,
textCount: 0,
color: '#10B981',
},
{
avatar: UserFive,
name: 'Jane Doe',
text: 'Great',
time: 32,
textCount: 2,
color: '#FFBA00',
},
{
avatar: UserOne,
name: 'Jhon Doe',
text: 'How are you?',
time: 32,
textCount: 0,
color: '#10B981',
},
{
avatar: UserThree,
name: 'Jhon Doe',
text: 'How are you?',
time: 32,
textCount: 3,
color: '#FFBA00',
},
{
avatar: UserOne,
name: "Devid Heilo",
text: "How are you?",
time: 12,
textCount: 3,
color: "#10B981",
},
{
avatar: UserTwo,
name: "Henry Fisher",
text: "Waiting for you!",
time: 12,
textCount: 0,
color: "#DC3545",
},
{
avatar: UserFour,
name: "Jhon Doe",
text: "What's up?",
time: 32,
textCount: 0,
color: "#10B981",
},
{
avatar: UserFive,
name: "Jane Doe",
text: "Great",
time: 32,
textCount: 2,
color: "#FFBA00",
},
{
avatar: UserOne,
name: "Jhon Doe",
text: "How are you?",
time: 32,
textCount: 0,
color: "#10B981",
},
{
avatar: UserThree,
name: "Jhon Doe",
text: "How are you?",
time: 32,
textCount: 3,
color: "#FFBA00",
},
];
const ChatCard = () => {
return (
<div className="col-span-12 rounded-sm border border-stroke bg-white py-6 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
<h4 className="mb-6 px-7.5 text-xl font-semibold text-black dark:text-white">
Chats
</h4>
const ChatCard = () =>
{
return (
<div
className="col-span-12 rounded-sm border border-stroke bg-white py-6 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
<h4 className="mb-6 px-7.5 text-xl font-semibold text-black dark:text-white">
Chats
</h4>
<div>
{chatData.map((chat, key) => (
<Link
to="/"
className="flex items-center gap-5 py-3 px-7.5 hover:bg-gray-3 dark:hover:bg-meta-4"
key={key}
>
<div className="relative h-14 w-14 rounded-full">
<img src={chat.avatar} alt="User" />
<span
className="absolute right-0 bottom-0 h-3.5 w-3.5 rounded-full border-2 border-white"
style={{backgroundColor: chat.color}}
></span>
</div>
<div>
{ chatData.map((chat, key) => (
<Link
to="/"
className="flex items-center gap-5 py-3 px-7.5 hover:bg-gray-3 dark:hover:bg-meta-4"
key={ key }
>
<div className="relative h-14 w-14 rounded-full">
<img src={ chat.avatar } alt="User"/>
<span
className="absolute right-0 bottom-0 h-3.5 w-3.5 rounded-full border-2 border-white"
style={ { backgroundColor: chat.color } }
></span>
</div>
<div className="flex flex-1 items-center justify-between">
<div>
<h5 className="font-medium text-black dark:text-white">
{chat.name}
</h5>
<p>
<div className="flex flex-1 items-center justify-between">
<div>
<h5 className="font-medium text-black dark:text-white">
{ chat.name }
</h5>
<p>
<span className="text-sm text-black dark:text-white">
{chat.text}
{ chat.text }
</span>
<span className="text-xs"> . {chat.time} min</span>
</p>
</div>
{chat.textCount !== 0 && (
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary">
<span className="text-xs"> . { chat.time } min</span>
</p>
</div>
{ chat.textCount !== 0 && (
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary">
<span className="text-sm font-medium text-white">
{' '}
{chat.textCount}
{ " " }
{ chat.textCount }
</span>
</div>
)}
</div>
) }
</div>
</Link>
)) }
</div>
</Link>
))}
</div>
</div>
);
</div>
);
};
export default ChatCard;

60
packages/frontend/src/old/Checkboxes/CheckboxFive.tsx
View File

@ -1,35 +1,37 @@
import { useState } from 'react';
import { useState } from "react";
const CheckboxFive = () => {
const [isChecked, setIsChecked] = useState<boolean>(false);
const CheckboxFive = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false);
return (
<div>
<label
htmlFor="checkboxLabelFive"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelFive"
className="sr-only"
onChange={() => {
setIsChecked(!isChecked);
}}
/>
<div
className={`box mr-4 flex h-5 w-5 items-center justify-center rounded-full border border-primary ${
isChecked && '!border-4'
}`}
>
<span className="h-2.5 w-2.5 rounded-full bg-white dark:bg-transparent"></span>
</div>
return (
<div>
<label
htmlFor="checkboxLabelFive"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelFive"
className="sr-only"
onChange={ () =>
{
setIsChecked(!isChecked);
} }
/>
<div
className={ `box mr-4 flex h-5 w-5 items-center justify-center rounded-full border border-primary ${
isChecked && "!border-4"
}` }
>
<span className="h-2.5 w-2.5 rounded-full bg-white dark:bg-transparent"></span>
</div>
</div>
Checkbox Text
</label>
</div>
Checkbox Text
</label>
</div>
);
);
};
export default CheckboxFive;

68
packages/frontend/src/old/Checkboxes/CheckboxFour.tsx
View File

@ -1,41 +1,43 @@
import { useState } from 'react';
import { useState } from "react";
const CheckboxFour = () => {
const [isChecked, setIsChecked] = useState<boolean>(false);
const CheckboxFour = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false);
return (
<div>
<label
htmlFor="checkboxLabelFour"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelFour"
className="sr-only"
onChange={() => {
setIsChecked(!isChecked);
}}
/>
<div
className={`mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${
isChecked && 'border-primary'
}`}
>
<span
className={`h-2.5 w-2.5 rounded-full bg-transparent ${
isChecked && '!bg-primary'
}`}
return (
<div>
<label
htmlFor="checkboxLabelFour"
className="flex cursor-pointer select-none items-center"
>
{' '}
<div className="relative">
<input
type="checkbox"
id="checkboxLabelFour"
className="sr-only"
onChange={ () =>
{
setIsChecked(!isChecked);
} }
/>
<div
className={ `mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${
isChecked && "border-primary"
}` }
>
<span
className={ `h-2.5 w-2.5 rounded-full bg-transparent ${
isChecked && "!bg-primary"
}` }
>
{ " " }
</span>
</div>
</div>
</div>
Checkbox Text
</label>
</div>
Checkbox Text
</label>
</div>
);
);
};
export default CheckboxFour;

60
packages/frontend/src/old/Checkboxes/CheckboxOne.tsx
View File

@ -1,37 +1,39 @@
import { useState } from 'react';
import { useState } from "react";
const CheckboxOne = () => {
const [isChecked, setIsChecked] = useState<boolean>(false);
const CheckboxOne = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false);
return (
<div>
<label
htmlFor="checkboxLabelOne"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelOne"
className="sr-only"
onChange={() => {
setIsChecked(!isChecked);
}}
/>
<div
className={`mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && 'border-primary bg-gray dark:bg-transparent'
}`}
>
return (
<div>
<label
htmlFor="checkboxLabelOne"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelOne"
className="sr-only"
onChange={ () =>
{
setIsChecked(!isChecked);
} }
/>
<div
className={ `mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && "border-primary bg-gray dark:bg-transparent"
}` }
>
<span
className={`h-2.5 w-2.5 rounded-sm ${isChecked && 'bg-primary'}`}
className={ `h-2.5 w-2.5 rounded-sm ${ isChecked && "bg-primary" }` }
></span>
</div>
</div>
</div>
Checkbox Text
</label>
</div>
Checkbox Text
</label>
</div>
);
);
};
export default CheckboxOne;

80
packages/frontend/src/old/Checkboxes/CheckboxThree.tsx
View File

@ -1,53 +1,55 @@
import { useState } from 'react';
import { useState } from "react";
const CheckboxThree = () => {
const [isChecked, setIsChecked] = useState<boolean>(false);
const CheckboxThree = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false);
return (
<div>
<label
htmlFor="checkboxLabelThree"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelThree"
className="sr-only"
onChange={() => {
setIsChecked(!isChecked);
}}
/>
<div
className={`box mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && 'border-primary bg-gray dark:bg-transparent'
}`}
>
return (
<div>
<label
htmlFor="checkboxLabelThree"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelThree"
className="sr-only"
onChange={ () =>
{
setIsChecked(!isChecked);
} }
/>
<div
className={ `box mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && "border-primary bg-gray dark:bg-transparent"
}` }
>
<span
className={`text-primary opacity-0 ${
isChecked && '!opacity-100'
}`}
className={ `text-primary opacity-0 ${
isChecked && "!opacity-100"
}` }
>
<svg
className="h-3.5 w-3.5 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="h-3.5 w-3.5 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</span>
</div>
</div>
</div>
Checkbox Text
</label>
</div>
Checkbox Text
</label>
</div>
);
);
};
export default CheckboxThree;

78
packages/frontend/src/old/Checkboxes/CheckboxTwo.tsx
View File

@ -1,50 +1,52 @@
import { useState } from 'react';
import { useState } from "react";
const CheckboxTwo = () => {
const [isChecked, setIsChecked] = useState<boolean>(false);
const CheckboxTwo = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false);
return (
<div>
<label
htmlFor="checkboxLabelTwo"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelTwo"
className="sr-only"
onChange={() => {
setIsChecked(!isChecked);
}}
/>
<div
className={`mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && 'border-primary bg-gray dark:bg-transparent'
}`}
>
<span className={`opacity-0 ${isChecked && '!opacity-100'}`}>
return (
<div>
<label
htmlFor="checkboxLabelTwo"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="checkboxLabelTwo"
className="sr-only"
onChange={ () =>
{
setIsChecked(!isChecked);
} }
/>
<div
className={ `mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && "border-primary bg-gray dark:bg-transparent"
}` }
>
<span className={ `opacity-0 ${ isChecked && "!opacity-100" }` }>
<svg
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill="#3056D3"
stroke="#3056D3"
strokeWidth="0.4"
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill="#3056D3"
stroke="#3056D3"
strokeWidth="0.4"
></path>
</svg>
</span>
</div>
</div>
</div>
Checkbox Text
</label>
</div>
Checkbox Text
</label>
</div>
);
);
};
export default CheckboxTwo;

89
packages/frontend/src/old/ClickOutside.tsx
View File

@ -1,51 +1,62 @@
import React, { useRef, useEffect } from 'react';
import React, { useRef, useEffect } from "react";
interface Props {
children: React.ReactNode;
exceptionRef?: React.RefObject<HTMLElement>;
onClick: () => void;
className?: string;
interface Props
{
children: React.ReactNode;
exceptionRef?: React.RefObject<HTMLElement>;
onClick: () => void;
className?: string;
}
const ClickOutside: React.FC<Props> = ({
children,
exceptionRef,
onClick,
className,
}) => {
const wrapperRef = useRef<HTMLDivElement>(null);
children,
exceptionRef,
onClick,
className,
}) =>
{
const wrapperRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickListener = (event: MouseEvent) => {
let clickedInside: null | boolean = false;
if (exceptionRef) {
clickedInside =
(wrapperRef.current &&
wrapperRef.current.contains(event.target as Node)) ||
(exceptionRef.current && exceptionRef.current === event.target) ||
(exceptionRef.current &&
exceptionRef.current.contains(event.target as Node));
} else {
clickedInside =
wrapperRef.current &&
wrapperRef.current.contains(event.target as Node);
}
useEffect(() =>
{
const handleClickListener = (event: MouseEvent) =>
{
let clickedInside: null | boolean = false;
if (exceptionRef)
{
clickedInside =
(wrapperRef.current &&
wrapperRef.current.contains(event.target as Node)) ||
(exceptionRef.current && exceptionRef.current === event.target) ||
(exceptionRef.current &&
exceptionRef.current.contains(event.target as Node));
}
else
{
clickedInside =
wrapperRef.current &&
wrapperRef.current.contains(event.target as Node);
}
if (!clickedInside) onClick();
};
if (!clickedInside)
{
onClick();
}
};
document.addEventListener('mousedown', handleClickListener);
document.addEventListener("mousedown", handleClickListener);
return () => {
document.removeEventListener('mousedown', handleClickListener);
};
}, [exceptionRef, onClick]);
return () =>
{
document.removeEventListener("mousedown", handleClickListener);
};
}, [ exceptionRef, onClick ]);
return (
<div ref={wrapperRef} className={`${className || ''}`}>
{children}
</div>
);
return (
<div ref={ wrapperRef } className={ `${ className || "" }` }>
{ children }
</div>
);
};
export default ClickOutside;

253
packages/frontend/src/old/Dropdowns/DropdownDefault.tsx
View File

@ -1,128 +1,143 @@
import { useEffect, useRef, useState } from "react";
const DropdownDefault = () => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const DropdownDefault = () =>
{
const [ dropdownOpen, setDropdownOpen ] = useState(false);
const trigger = useRef<any>(null);
const dropdown = useRef<any>(null);
const trigger = useRef<any>(null);
const dropdown = useRef<any>(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }: MouseEvent) => {
if (!dropdown.current) return;
if (
!dropdownOpen ||
dropdown.current.contains(target) ||
trigger.current.contains(target)
)
return;
setDropdownOpen(false);
};
document.addEventListener("click", clickHandler);
return () => document.removeEventListener("click", clickHandler);
});
// close on click outside
useEffect(() =>
{
const clickHandler = ({ target }: MouseEvent) =>
{
if (!dropdown.current)
{
return;
}
if (
!dropdownOpen ||
dropdown.current.contains(target) ||
trigger.current.contains(target)
)
{
return;
}
setDropdownOpen(false);
};
document.addEventListener("click", clickHandler);
return () => document.removeEventListener("click", clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }: KeyboardEvent) => {
if (!dropdownOpen || keyCode !== 27) return;
setDropdownOpen(false);
};
document.addEventListener("keydown", keyHandler);
return () => document.removeEventListener("keydown", keyHandler);
});
// close if the esc key is pressed
useEffect(() =>
{
const keyHandler = ({ keyCode }: KeyboardEvent) =>
{
if (!dropdownOpen || keyCode !== 27)
{
return;
}
setDropdownOpen(false);
};
document.addEventListener("keydown", keyHandler);
return () => document.removeEventListener("keydown", keyHandler);
});
return (
<div className="relative flex">
<button
className="text-[#98A6AD] hover:text-body"
ref={trigger}
onClick={() => setDropdownOpen(!dropdownOpen)}
>
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.25 11.25C3.49264 11.25 4.5 10.2426 4.5 9C4.5 7.75736 3.49264 6.75 2.25 6.75C1.00736 6.75 0 7.75736 0 9C0 10.2426 1.00736 11.25 2.25 11.25Z"
fill=""
/>
<path
d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z"
fill=""
/>
<path
d="M15.75 11.25C16.9926 11.25 18 10.2426 18 9C18 7.75736 16.9926 6.75 15.75 6.75C14.5074 6.75 13.5 7.75736 13.5 9C13.5 10.2426 14.5074 11.25 15.75 11.25Z"
fill=""
/>
</svg>
</button>
<div
ref={dropdown}
onFocus={() => setDropdownOpen(true)}
onBlur={() => setDropdownOpen(false)}
className={`absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${
dropdownOpen === true ? 'block' : 'hidden'
}`}
>
<button className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
<svg
className="fill-current"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_62_9787)">
<path
d="M15.55 2.97499C15.55 2.77499 15.475 2.57499 15.325 2.42499C15.025 2.12499 14.725 1.82499 14.45 1.52499C14.175 1.24999 13.925 0.974987 13.65 0.724987C13.525 0.574987 13.375 0.474986 13.175 0.449986C12.95 0.424986 12.75 0.474986 12.575 0.624987L10.875 2.32499H2.02495C1.17495 2.32499 0.449951 3.02499 0.449951 3.89999V14C0.449951 14.85 1.14995 15.575 2.02495 15.575H12.15C13 15.575 13.725 14.875 13.725 14V5.12499L15.35 3.49999C15.475 3.34999 15.55 3.17499 15.55 2.97499ZM8.19995 8.99999C8.17495 9.02499 8.17495 9.02499 8.14995 9.02499L6.34995 9.62499L6.94995 7.82499C6.94995 7.79999 6.97495 7.79999 6.97495 7.77499L11.475 3.27499L12.725 4.49999L8.19995 8.99999ZM12.575 14C12.575 14.25 12.375 14.45 12.125 14.45H2.02495C1.77495 14.45 1.57495 14.25 1.57495 14V3.87499C1.57495 3.62499 1.77495 3.42499 2.02495 3.42499H9.72495L6.17495 6.99999C6.04995 7.12499 5.92495 7.29999 5.87495 7.49999L4.94995 10.3C4.87495 10.5 4.92495 10.675 5.02495 10.85C5.09995 10.95 5.24995 11.1 5.52495 11.1H5.62495L8.49995 10.15C8.67495 10.1 8.84995 9.97499 8.97495 9.84999L12.575 6.24999V14ZM13.5 3.72499L12.25 2.49999L13.025 1.72499C13.225 1.92499 14.05 2.74999 14.25 2.97499L13.5 3.72499Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_62_9787">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
Edit
</button>
<button className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
<svg
className="fill-current"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.225 2.20005H10.3V1.77505C10.3 1.02505 9.70005 0.425049 8.95005 0.425049H7.02505C6.27505 0.425049 5.67505 1.02505 5.67505 1.77505V2.20005H3.75005C3.02505 2.20005 2.42505 2.80005 2.42505 3.52505V4.27505C2.42505 4.82505 2.75005 5.27505 3.22505 5.47505L3.62505 13.75C3.67505 14.775 4.52505 15.575 5.55005 15.575H10.4C11.425 15.575 12.275 14.775 12.325 13.75L12.75 5.45005C13.225 5.25005 13.55 4.77505 13.55 4.25005V3.50005C13.55 2.80005 12.95 2.20005 12.225 2.20005ZM6.82505 1.77505C6.82505 1.65005 6.92505 1.55005 7.05005 1.55005H8.97505C9.10005 1.55005 9.20005 1.65005 9.20005 1.77505V2.20005H6.85005V1.77505H6.82505ZM3.57505 3.52505C3.57505 3.42505 3.65005 3.32505 3.77505 3.32505H12.225C12.325 3.32505 12.425 3.40005 12.425 3.52505V4.27505C12.425 4.37505 12.35 4.47505 12.225 4.47505H3.77505C3.67505 4.47505 3.57505 4.40005 3.57505 4.27505V3.52505V3.52505ZM10.425 14.45H5.57505C5.15005 14.45 4.80005 14.125 4.77505 13.675L4.40005 5.57505H11.625L11.25 13.675C11.2 14.1 10.85 14.45 10.425 14.45Z"
fill=""
/>
<path
d="M8.00005 8.1001C7.70005 8.1001 7.42505 8.3501 7.42505 8.6751V11.8501C7.42505 12.1501 7.67505 12.4251 8.00005 12.4251C8.30005 12.4251 8.57505 12.1751 8.57505 11.8501V8.6751C8.57505 8.3501 8.30005 8.1001 8.00005 8.1001Z"
fill=""
/>
<path
d="M9.99994 8.60004C9.67494 8.57504 9.42494 8.80004 9.39994 9.12504L9.24994 11.325C9.22494 11.625 9.44994 11.9 9.77494 11.925C9.79994 11.925 9.79994 11.925 9.82494 11.925C10.1249 11.925 10.3749 11.7 10.3749 11.4L10.5249 9.20004C10.5249 8.87504 10.2999 8.62504 9.99994 8.60004Z"
fill=""
/>
<path
d="M5.97497 8.60004C5.67497 8.62504 5.42497 8.90004 5.44997 9.20004L5.62497 11.4C5.64997 11.7 5.89997 11.925 6.17497 11.925C6.19997 11.925 6.19997 11.925 6.22497 11.925C6.52497 11.9 6.77497 11.625 6.74997 11.325L6.57497 9.12504C6.57497 8.80004 6.29997 8.57504 5.97497 8.60004Z"
fill=""
/>
</svg>
Delete
</button>
</div>
</div>
);
return (
<div className="relative flex">
<button
className="text-[#98A6AD] hover:text-body"
ref={ trigger }
onClick={ () => setDropdownOpen(!dropdownOpen) }
>
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.25 11.25C3.49264 11.25 4.5 10.2426 4.5 9C4.5 7.75736 3.49264 6.75 2.25 6.75C1.00736 6.75 0 7.75736 0 9C0 10.2426 1.00736 11.25 2.25 11.25Z"
fill=""
/>
<path
d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z"
fill=""
/>
<path
d="M15.75 11.25C16.9926 11.25 18 10.2426 18 9C18 7.75736 16.9926 6.75 15.75 6.75C14.5074 6.75 13.5 7.75736 13.5 9C13.5 10.2426 14.5074 11.25 15.75 11.25Z"
fill=""
/>
</svg>
</button>
<div
ref={ dropdown }
onFocus={ () => setDropdownOpen(true) }
onBlur={ () => setDropdownOpen(false) }
className={ `absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${
dropdownOpen === true ? "block" : "hidden"
}` }
>
<button
className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
<svg
className="fill-current"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_62_9787)">
<path
d="M15.55 2.97499C15.55 2.77499 15.475 2.57499 15.325 2.42499C15.025 2.12499 14.725 1.82499 14.45 1.52499C14.175 1.24999 13.925 0.974987 13.65 0.724987C13.525 0.574987 13.375 0.474986 13.175 0.449986C12.95 0.424986 12.75 0.474986 12.575 0.624987L10.875 2.32499H2.02495C1.17495 2.32499 0.449951 3.02499 0.449951 3.89999V14C0.449951 14.85 1.14995 15.575 2.02495 15.575H12.15C13 15.575 13.725 14.875 13.725 14V5.12499L15.35 3.49999C15.475 3.34999 15.55 3.17499 15.55 2.97499ZM8.19995 8.99999C8.17495 9.02499 8.17495 9.02499 8.14995 9.02499L6.34995 9.62499L6.94995 7.82499C6.94995 7.79999 6.97495 7.79999 6.97495 7.77499L11.475 3.27499L12.725 4.49999L8.19995 8.99999ZM12.575 14C12.575 14.25 12.375 14.45 12.125 14.45H2.02495C1.77495 14.45 1.57495 14.25 1.57495 14V3.87499C1.57495 3.62499 1.77495 3.42499 2.02495 3.42499H9.72495L6.17495 6.99999C6.04995 7.12499 5.92495 7.29999 5.87495 7.49999L4.94995 10.3C4.87495 10.5 4.92495 10.675 5.02495 10.85C5.09995 10.95 5.24995 11.1 5.52495 11.1H5.62495L8.49995 10.15C8.67495 10.1 8.84995 9.97499 8.97495 9.84999L12.575 6.24999V14ZM13.5 3.72499L12.25 2.49999L13.025 1.72499C13.225 1.92499 14.05 2.74999 14.25 2.97499L13.5 3.72499Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_62_9787">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Edit
</button>
<button
className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
<svg
className="fill-current"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.225 2.20005H10.3V1.77505C10.3 1.02505 9.70005 0.425049 8.95005 0.425049H7.02505C6.27505 0.425049 5.67505 1.02505 5.67505 1.77505V2.20005H3.75005C3.02505 2.20005 2.42505 2.80005 2.42505 3.52505V4.27505C2.42505 4.82505 2.75005 5.27505 3.22505 5.47505L3.62505 13.75C3.67505 14.775 4.52505 15.575 5.55005 15.575H10.4C11.425 15.575 12.275 14.775 12.325 13.75L12.75 5.45005C13.225 5.25005 13.55 4.77505 13.55 4.25005V3.50005C13.55 2.80005 12.95 2.20005 12.225 2.20005ZM6.82505 1.77505C6.82505 1.65005 6.92505 1.55005 7.05005 1.55005H8.97505C9.10005 1.55005 9.20005 1.65005 9.20005 1.77505V2.20005H6.85005V1.77505H6.82505ZM3.57505 3.52505C3.57505 3.42505 3.65005 3.32505 3.77505 3.32505H12.225C12.325 3.32505 12.425 3.40005 12.425 3.52505V4.27505C12.425 4.37505 12.35 4.47505 12.225 4.47505H3.77505C3.67505 4.47505 3.57505 4.40005 3.57505 4.27505V3.52505V3.52505ZM10.425 14.45H5.57505C5.15005 14.45 4.80005 14.125 4.77505 13.675L4.40005 5.57505H11.625L11.25 13.675C11.2 14.1 10.85 14.45 10.425 14.45Z"
fill=""
/>
<path
d="M8.00005 8.1001C7.70005 8.1001 7.42505 8.3501 7.42505 8.6751V11.8501C7.42505 12.1501 7.67505 12.4251 8.00005 12.4251C8.30005 12.4251 8.57505 12.1751 8.57505 11.8501V8.6751C8.57505 8.3501 8.30005 8.1001 8.00005 8.1001Z"
fill=""
/>
<path
d="M9.99994 8.60004C9.67494 8.57504 9.42494 8.80004 9.39994 9.12504L9.24994 11.325C9.22494 11.625 9.44994 11.9 9.77494 11.925C9.79994 11.925 9.79994 11.925 9.82494 11.925C10.1249 11.925 10.3749 11.7 10.3749 11.4L10.5249 9.20004C10.5249 8.87504 10.2999 8.62504 9.99994 8.60004Z"
fill=""
/>
<path
d="M5.97497 8.60004C5.67497 8.62504 5.42497 8.90004 5.44997 9.20004L5.62497 11.4C5.64997 11.7 5.89997 11.925 6.17497 11.925C6.19997 11.925 6.19997 11.925 6.22497 11.925C6.52497 11.9 6.77497 11.625 6.74997 11.325L6.57497 9.12504C6.57497 8.80004 6.29997 8.57504 5.97497 8.60004Z"
fill=""
/>
</svg>
Delete
</button>
</div>
</div>
);
};
export default DropdownDefault;

90
packages/frontend/src/old/Forms/DatePicker/DatePickerOne.tsx
View File

@ -1,52 +1,54 @@
import flatpickr from 'flatpickr';
import { useEffect } from 'react';
import flatpickr from "flatpickr";
import { useEffect } from "react";
const DatePickerOne = () => {
useEffect(() => {
// Init flatpickr
flatpickr('.form-datepicker', {
mode: 'single',
static: true,
monthSelectorType: 'static',
dateFormat: 'M j, Y',
prevArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
nextArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
});
const DatePickerOne = () =>
{
useEffect(() =>
{
// Init flatpickr
flatpickr(".form-datepicker", {
mode: "single",
static: true,
monthSelectorType: "static",
dateFormat: "M j, Y",
prevArrow:
"<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z\" /></svg>",
nextArrow:
"<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z\" /></svg>",
});
}, []);
return (
<div>
<label className="mb-3 block text-sm font-medium text-black dark:text-white">
Date picker
</label>
<div className="relative">
<input
className="form-datepicker w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
placeholder="mm/dd/yyyy"
data-class="flatpickr-right"
/>
}, []);
<div className="pointer-events-none absolute inset-0 left-auto right-5 flex items-center">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.7504 2.9812H14.2879V2.36245C14.2879 2.02495 14.0066 1.71558 13.641 1.71558C13.2754 1.71558 12.9941 1.99683 12.9941 2.36245V2.9812H4.97852V2.36245C4.97852 2.02495 4.69727 1.71558 4.33164 1.71558C3.96602 1.71558 3.68477 1.99683 3.68477 2.36245V2.9812H2.25039C1.29414 2.9812 0.478516 3.7687 0.478516 4.75308V14.5406C0.478516 15.4968 1.26602 16.3125 2.25039 16.3125H15.7504C16.7066 16.3125 17.5223 15.525 17.5223 14.5406V4.72495C17.5223 3.7687 16.7066 2.9812 15.7504 2.9812ZM1.77227 8.21245H4.16289V10.9968H1.77227V8.21245ZM5.42852 8.21245H8.38164V10.9968H5.42852V8.21245ZM8.38164 12.2625V15.0187H5.42852V12.2625H8.38164V12.2625ZM9.64727 12.2625H12.6004V15.0187H9.64727V12.2625ZM9.64727 10.9968V8.21245H12.6004V10.9968H9.64727ZM13.8379 8.21245H16.2285V10.9968H13.8379V8.21245ZM2.25039 4.24683H3.71289V4.83745C3.71289 5.17495 3.99414 5.48433 4.35977 5.48433C4.72539 5.48433 5.00664 5.20308 5.00664 4.83745V4.24683H13.0504V4.83745C13.0504 5.17495 13.3316 5.48433 13.6973 5.48433C14.0629 5.48433 14.3441 5.20308 14.3441 4.83745V4.24683H15.7504C16.0316 4.24683 16.2566 4.47183 16.2566 4.75308V6.94683H1.77227V4.75308C1.77227 4.47183 1.96914 4.24683 2.25039 4.24683ZM1.77227 14.5125V12.2343H4.16289V14.9906H2.25039C1.96914 15.0187 1.77227 14.7937 1.77227 14.5125ZM15.7504 15.0187H13.8379V12.2625H16.2285V14.5406C16.2566 14.7937 16.0316 15.0187 15.7504 15.0187Z"
fill="#64748B"
/>
</svg>
return (
<div>
<label className="mb-3 block text-sm font-medium text-black dark:text-white">
Date picker
</label>
<div className="relative">
<input
className="form-datepicker w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
placeholder="mm/dd/yyyy"
data-class="flatpickr-right"
/>
<div className="pointer-events-none absolute inset-0 left-auto right-5 flex items-center">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.7504 2.9812H14.2879V2.36245C14.2879 2.02495 14.0066 1.71558 13.641 1.71558C13.2754 1.71558 12.9941 1.99683 12.9941 2.36245V2.9812H4.97852V2.36245C4.97852 2.02495 4.69727 1.71558 4.33164 1.71558C3.96602 1.71558 3.68477 1.99683 3.68477 2.36245V2.9812H2.25039C1.29414 2.9812 0.478516 3.7687 0.478516 4.75308V14.5406C0.478516 15.4968 1.26602 16.3125 2.25039 16.3125H15.7504C16.7066 16.3125 17.5223 15.525 17.5223 14.5406V4.72495C17.5223 3.7687 16.7066 2.9812 15.7504 2.9812ZM1.77227 8.21245H4.16289V10.9968H1.77227V8.21245ZM5.42852 8.21245H8.38164V10.9968H5.42852V8.21245ZM8.38164 12.2625V15.0187H5.42852V12.2625H8.38164V12.2625ZM9.64727 12.2625H12.6004V15.0187H9.64727V12.2625ZM9.64727 10.9968V8.21245H12.6004V10.9968H9.64727ZM13.8379 8.21245H16.2285V10.9968H13.8379V8.21245ZM2.25039 4.24683H3.71289V4.83745C3.71289 5.17495 3.99414 5.48433 4.35977 5.48433C4.72539 5.48433 5.00664 5.20308 5.00664 4.83745V4.24683H13.0504V4.83745C13.0504 5.17495 13.3316 5.48433 13.6973 5.48433C14.0629 5.48433 14.3441 5.20308 14.3441 4.83745V4.24683H15.7504C16.0316 4.24683 16.2566 4.47183 16.2566 4.75308V6.94683H1.77227V4.75308C1.77227 4.47183 1.96914 4.24683 2.25039 4.24683ZM1.77227 14.5125V12.2343H4.16289V14.9906H2.25039C1.96914 15.0187 1.77227 14.7937 1.77227 14.5125ZM15.7504 15.0187H13.8379V12.2625H16.2285V14.5406C16.2566 14.7937 16.0316 15.0187 15.7504 15.0187Z"
fill="#64748B"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
);
);
};
export default DatePickerOne;

90
packages/frontend/src/old/Forms/DatePicker/DatePickerTwo.tsx
View File

@ -1,52 +1,54 @@
import flatpickr from 'flatpickr';
import { useEffect } from 'react';
import flatpickr from "flatpickr";
import { useEffect } from "react";
const DatePickerTwo = () => {
useEffect(() => {
// Init flatpickr
flatpickr('.form-datepicker', {
mode: 'single',
static: true,
monthSelectorType: 'static',
dateFormat: 'M j, Y',
prevArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
nextArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
});
const DatePickerTwo = () =>
{
useEffect(() =>
{
// Init flatpickr
flatpickr(".form-datepicker", {
mode: "single",
static: true,
monthSelectorType: "static",
dateFormat: "M j, Y",
prevArrow:
"<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z\" /></svg>",
nextArrow:
"<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z\" /></svg>",
});
}, []);
return (
<div>
<label className="mb-3 block text-sm font-medium text-black dark:text-white">
Select date
</label>
<div className="relative">
<input
className="form-datepicker w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
placeholder="mm/dd/yyyy"
data-class="flatpickr-right"
/>
}, []);
<div className="pointer-events-none absolute inset-0 left-auto right-5 flex items-center">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.0002 12.8249C8.83145 12.8249 8.69082 12.7687 8.5502 12.6562L2.08145 6.2999C1.82832 6.04678 1.82832 5.65303 2.08145 5.3999C2.33457 5.14678 2.72832 5.14678 2.98145 5.3999L9.0002 11.278L15.0189 5.34365C15.2721 5.09053 15.6658 5.09053 15.9189 5.34365C16.1721 5.59678 16.1721 5.99053 15.9189 6.24365L9.45019 12.5999C9.30957 12.7405 9.16895 12.8249 9.0002 12.8249Z"
fill="#64748B"
/>
</svg>
return (
<div>
<label className="mb-3 block text-sm font-medium text-black dark:text-white">
Select date
</label>
<div className="relative">
<input
className="form-datepicker w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
placeholder="mm/dd/yyyy"
data-class="flatpickr-right"
/>
<div className="pointer-events-none absolute inset-0 left-auto right-5 flex items-center">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.0002 12.8249C8.83145 12.8249 8.69082 12.7687 8.5502 12.6562L2.08145 6.2999C1.82832 6.04678 1.82832 5.65303 2.08145 5.3999C2.33457 5.14678 2.72832 5.14678 2.98145 5.3999L9.0002 11.278L15.0189 5.34365C15.2721 5.09053 15.6658 5.09053 15.9189 5.34365C16.1721 5.59678 16.1721 5.99053 15.9189 6.24365L9.45019 12.5999C9.30957 12.7405 9.16895 12.8249 9.0002 12.8249Z"
fill="#64748B"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
);
);
};
export default DatePickerTwo;

425
packages/frontend/src/old/Forms/MultiSelect.tsx
View File

@ -1,226 +1,251 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef } from "react";
interface Option {
value: string;
text: string;
selected: boolean;
element?: HTMLElement;
interface Option
{
value: string;
text: string;
selected: boolean;
element?: HTMLElement;
}
interface DropdownProps {
id: string;
interface DropdownProps
{
id: string;
}
const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
const [options, setOptions] = useState<Option[]>([]);
const [selected, setSelected] = useState<number[]>([]);
const [show, setShow] = useState(false);
const dropdownRef = useRef<any>(null);
const trigger = useRef<any>(null);
const MultiSelect: React.FC<DropdownProps> = ({ id }) =>
{
const [ options, setOptions ] = useState<Option[]>([]);
const [ selected, setSelected ] = useState<number[]>([]);
const [ show, setShow ] = useState(false);
const dropdownRef = useRef<any>(null);
const trigger = useRef<any>(null);
useEffect(() => {
const loadOptions = () => {
const select = document.getElementById(id) as HTMLSelectElement | null;
if (select) {
const newOptions: Option[] = [];
for (let i = 0; i < select.options.length; i++) {
newOptions.push({
value: select.options[i].value,
text: select.options[i].innerText,
selected: select.options[i].hasAttribute('selected'),
});
}
setOptions(newOptions);
}
useEffect(() =>
{
const loadOptions = () =>
{
const select = document.getElementById(id) as HTMLSelectElement | null;
if (select)
{
const newOptions: Option[] = [];
for (let i = 0; i < select.options.length; i++)
{
newOptions.push({
value: select.options[ i ].value,
text: select.options[ i ].innerText,
selected: select.options[ i ].hasAttribute("selected"),
});
}
setOptions(newOptions);
}
};
loadOptions();
}, [ id ]);
const open = () =>
{
setShow(true);
};
loadOptions();
}, [id]);
const isOpen = () =>
{
return show === true;
};
const open = () => {
setShow(true);
};
const select = (index: number, event: React.MouseEvent) =>
{
const newOptions = [ ...options ];
const isOpen = () => {
return show === true;
};
if (!newOptions[ index ].selected)
{
newOptions[ index ].selected = true;
newOptions[ index ].element = event.currentTarget as HTMLElement;
setSelected([ ...selected, index ]);
}
else
{
const selectedIndex = selected.indexOf(index);
if (selectedIndex !== -1)
{
newOptions[ index ].selected = false;
setSelected(selected.filter((i) => i !== index));
}
}
const select = (index: number, event: React.MouseEvent) => {
const newOptions = [...options];
setOptions(newOptions);
};
if (!newOptions[index].selected) {
newOptions[index].selected = true;
newOptions[index].element = event.currentTarget as HTMLElement;
setSelected([...selected, index]);
} else {
const selectedIndex = selected.indexOf(index);
if (selectedIndex !== -1) {
newOptions[index].selected = false;
setSelected(selected.filter((i) => i !== index));
}
}
const remove = (index: number) =>
{
const newOptions = [ ...options ];
const selectedIndex = selected.indexOf(index);
setOptions(newOptions);
};
if (selectedIndex !== -1)
{
newOptions[ index ].selected = false;
setSelected(selected.filter((i) => i !== index));
setOptions(newOptions);
}
};
const remove = (index: number) => {
const newOptions = [...options];
const selectedIndex = selected.indexOf(index);
const selectedValues = () =>
{
return selected.map((option) => options[ option ].value);
};
if (selectedIndex !== -1) {
newOptions[index].selected = false;
setSelected(selected.filter((i) => i !== index));
setOptions(newOptions);
}
};
const selectedValues = () => {
return selected.map((option) => options[option].value);
};
useEffect(() => {
const clickHandler = ({ target }: MouseEvent) => {
if (!dropdownRef.current) return;
if (
!show ||
dropdownRef.current.contains(target) ||
trigger.current.contains(target)
)
return;
setShow(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
useEffect(() =>
{
const clickHandler = ({ target }: MouseEvent) =>
{
if (!dropdownRef.current)
{
return;
}
if (
!show ||
dropdownRef.current.contains(target) ||
trigger.current.contains(target)
)
{
return;
}
setShow(false);
};
document.addEventListener("click", clickHandler);
return () => document.removeEventListener("click", clickHandler);
});
return (
<div className="relative z-50">
<label className="mb-3 block text-sm font-medium text-black dark:text-white">
Multiselect Dropdown
</label>
<div>
<select className="hidden" id={id}>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
<option value="3">Option 4</option>
<option value="4">Option 5</option>
</select>
return (
<div className="relative z-50">
<label className="mb-3 block text-sm font-medium text-black dark:text-white">
Multiselect Dropdown
</label>
<div>
<select className="hidden" id={ id }>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
<option value="3">Option 4</option>
<option value="4">Option 5</option>
</select>
<div className="flex flex-col items-center">
<input name="values" type="hidden" defaultValue={selectedValues()} />
<div className="relative z-20 inline-block w-full">
<div className="relative flex flex-col items-center">
<div ref={trigger} onClick={open} className="w-full">
<div className="mb-2 flex rounded border border-stroke py-2 pl-3 pr-3 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-auto flex-wrap gap-3">
{selected.map((index) => (
<div
key={index}
className="my-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray px-2.5 py-1.5 text-sm font-medium dark:border-strokedark dark:bg-white/30"
>
<div className="max-w-full flex-initial">
{options[index].text}
</div>
<div className="flex flex-auto flex-row-reverse">
<div
onClick={() => remove(index)}
className="cursor-pointer pl-2 hover:text-danger"
>
<svg
className="fill-current"
role="button"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.35355 3.35355C9.54882 3.15829 9.54882 2.84171 9.35355 2.64645C9.15829 2.45118 8.84171 2.45118 8.64645 2.64645L6 5.29289L3.35355 2.64645C3.15829 2.45118 2.84171 2.45118 2.64645 2.64645C2.45118 2.84171 2.45118 3.15829 2.64645 3.35355L5.29289 6L2.64645 8.64645C2.45118 8.84171 2.45118 9.15829 2.64645 9.35355C2.84171 9.54882 3.15829 9.54882 3.35355 9.35355L6 6.70711L8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L6.70711 6L9.35355 3.35355Z"
fill="currentColor"
></path>
</svg>
</div>
</div>
</div>
))}
{selected.length === 0 && (
<div className="flex-1">
<input
placeholder="Select an option"
className="h-full w-full appearance-none bg-transparent p-1 px-2 outline-none"
defaultValue={selectedValues()}
/>
</div>
)}
</div>
<div className="flex w-8 items-center py-1 pl-1 pr-1">
<button
type="button"
onClick={open}
className="h-6 w-6 cursor-pointer outline-none focus:outline-none"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
></path>
</g>
</svg>
</button>
</div>
</div>
</div>
<div className="w-full px-4">
<div
className={`max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded bg-white shadow dark:bg-form-input ${
isOpen() ? '' : 'hidden'
}`}
ref={dropdownRef}
onFocus={() => setShow(true)}
onBlur={() => setShow(false)}
>
<div className="flex w-full flex-col">
{options.map((option, index) => (
<div key={index}>
<div
className="w-full cursor-pointer rounded-t border-b border-stroke hover:bg-primary/5 dark:border-form-strokedark"
onClick={(event) => select(index, event)}
>
<div
className={`relative flex w-full items-center border-l-2 border-transparent p-2 pl-2 ${
option.selected ? 'border-primary' : ''
}`}
>
<div className="flex w-full items-center">
<div className="mx-2 leading-6">
{option.text}
</div>
<div className="flex flex-col items-center">
<input name="values" type="hidden" defaultValue={ selectedValues() }/>
<div className="relative z-20 inline-block w-full">
<div className="relative flex flex-col items-center">
<div ref={ trigger } onClick={ open } className="w-full">
<div
className="mb-2 flex rounded border border-stroke py-2 pl-3 pr-3 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-auto flex-wrap gap-3">
{ selected.map((index) => (
<div
key={ index }
className="my-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray px-2.5 py-1.5 text-sm font-medium dark:border-strokedark dark:bg-white/30"
>
<div className="max-w-full flex-initial">
{ options[ index ].text }
</div>
<div className="flex flex-auto flex-row-reverse">
<div
onClick={ () => remove(index) }
className="cursor-pointer pl-2 hover:text-danger"
>
<svg
className="fill-current"
role="button"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.35355 3.35355C9.54882 3.15829 9.54882 2.84171 9.35355 2.64645C9.15829 2.45118 8.84171 2.45118 8.64645 2.64645L6 5.29289L3.35355 2.64645C3.15829 2.45118 2.84171 2.45118 2.64645 2.64645C2.45118 2.84171 2.45118 3.15829 2.64645 3.35355L5.29289 6L2.64645 8.64645C2.45118 8.84171 2.45118 9.15829 2.64645 9.35355C2.84171 9.54882 3.15829 9.54882 3.35355 9.35355L6 6.70711L8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L6.70711 6L9.35355 3.35355Z"
fill="currentColor"
></path>
</svg>
</div>
</div>
</div>
)) }
{ selected.length === 0 && (
<div className="flex-1">
<input
placeholder="Select an option"
className="h-full w-full appearance-none bg-transparent p-1 px-2 outline-none"
defaultValue={ selectedValues() }
/>
</div>
) }
</div>
<div className="flex w-8 items-center py-1 pl-1 pr-1">
<button
type="button"
onClick={ open }
className="h-6 w-6 cursor-pointer outline-none focus:outline-none"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
></path>
</g>
</svg>
</button>
</div>
</div>
</div>
<div className="w-full px-4">
<div
className={ `max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded bg-white shadow dark:bg-form-input ${
isOpen() ? "" : "hidden"
}` }
ref={ dropdownRef }
onFocus={ () => setShow(true) }
onBlur={ () => setShow(false) }
>
<div className="flex w-full flex-col">
{ options.map((option, index) => (
<div key={ index }>
<div
className="w-full cursor-pointer rounded-t border-b border-stroke hover:bg-primary/5 dark:border-form-strokedark"
onClick={ (event) => select(index, event) }
>
<div
className={ `relative flex w-full items-center border-l-2 border-transparent p-2 pl-2 ${
option.selected ? "border-primary" : ""
}` }
>
<div className="flex w-full items-center">
<div className="mx-2 leading-6">
{ option.text }
</div>
</div>
</div>
</div>
</div>
)) }
</div>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
};
export default MultiSelect;

105
packages/frontend/src/old/Forms/SelectGroup/SelectGroupOne.tsx
View File

@ -1,67 +1,70 @@
import React, { useState } from 'react';
import React, { useState } from "react";
const SelectGroupOne: React.FC = () => {
const [selectedOption, setSelectedOption] = useState<string>('');
const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);
const SelectGroupOne: React.FC = () =>
{
const [ selectedOption, setSelectedOption ] = useState<string>("");
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
const changeTextColor = () => {
setIsOptionSelected(true);
};
const changeTextColor = () =>
{
setIsOptionSelected(true);
};
return (
<div className="mb-4.5">
<label className="mb-2.5 block text-black dark:text-white">
{' '}
Subject{' '}
</label>
return (
<div className="mb-4.5">
<label className="mb-2.5 block text-black dark:text-white">
{ " " }
Subject{ " " }
</label>
<div className="relative z-20 bg-transparent dark:bg-form-input">
<select
value={selectedOption}
onChange={(e) => {
setSelectedOption(e.target.value);
changeTextColor();
}}
className={`relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-5 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary ${
isOptionSelected ? 'text-black dark:text-white' : ''
}`}
>
<option value="" disabled className="text-body dark:text-bodydark">
Select your subject
</option>
<option value="USA" className="text-body dark:text-bodydark">
USA
</option>
<option value="UK" className="text-body dark:text-bodydark">
UK
</option>
<option value="Canada" className="text-body dark:text-bodydark">
Canada
</option>
</select>
<div className="relative z-20 bg-transparent dark:bg-form-input">
<select
value={ selectedOption }
onChange={ (e) =>
{
setSelectedOption(e.target.value);
changeTextColor();
} }
className={ `relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-5 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary ${
isOptionSelected ? "text-black dark:text-white" : ""
}` }
>
<option value="" disabled className="text-body dark:text-bodydark">
Select your subject
</option>
<option value="USA" className="text-body dark:text-bodydark">
USA
</option>
<option value="UK" className="text-body dark:text-bodydark">
UK
</option>
<option value="Canada" className="text-body dark:text-bodydark">
Canada
</option>
</select>
<span className="absolute top-1/2 right-4 z-30 -translate-y-1/2">
<span className="absolute top-1/2 right-4 z-30 -translate-y-1/2">
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill=""
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill=""
></path>
</g>
</svg>
</span>
</div>
</div>
);
</div>
</div>
);
};
export default SelectGroupOne;

135
packages/frontend/src/old/Forms/SelectGroup/SelectGroupTwo.tsx
View File

@ -1,96 +1,99 @@
import React, { useState } from 'react';
import React, { useState } from "react";
const SelectGroupTwo: React.FC = () => {
const [selectedOption, setSelectedOption] = useState<string>('');
const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);
const SelectGroupTwo: React.FC = () =>
{
const [ selectedOption, setSelectedOption ] = useState<string>("");
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
const changeTextColor = () => {
setIsOptionSelected(true);
};
const changeTextColor = () =>
{
setIsOptionSelected(true);
};
return (
<div>
<label className="mb-3 block text-black dark:text-white">
Select Country
</label>
return (
<div>
<label className="mb-3 block text-black dark:text-white">
Select Country
</label>
<div className="relative z-20 bg-white dark:bg-form-input">
<div className="relative z-20 bg-white dark:bg-form-input">
<span className="absolute top-1/2 left-4 z-30 -translate-y-1/2">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.0007 2.50065C5.85852 2.50065 2.50065 5.85852 2.50065 10.0007C2.50065 14.1428 5.85852 17.5007 10.0007 17.5007C14.1428 17.5007 17.5007 14.1428 17.5007 10.0007C17.5007 5.85852 14.1428 2.50065 10.0007 2.50065ZM0.833984 10.0007C0.833984 4.93804 4.93804 0.833984 10.0007 0.833984C15.0633 0.833984 19.1673 4.93804 19.1673 10.0007C19.1673 15.0633 15.0633 19.1673 10.0007 19.1673C4.93804 19.1673 0.833984 15.0633 0.833984 10.0007Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M10.0007 2.50065C5.85852 2.50065 2.50065 5.85852 2.50065 10.0007C2.50065 14.1428 5.85852 17.5007 10.0007 17.5007C14.1428 17.5007 17.5007 14.1428 17.5007 10.0007C17.5007 5.85852 14.1428 2.50065 10.0007 2.50065ZM0.833984 10.0007C0.833984 4.93804 4.93804 0.833984 10.0007 0.833984C15.0633 0.833984 19.1673 4.93804 19.1673 10.0007C19.1673 15.0633 15.0633 19.1673 10.0007 19.1673C4.93804 19.1673 0.833984 15.0633 0.833984 10.0007Z"
fill="#637381"
></path>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.833984 9.99935C0.833984 9.53911 1.20708 9.16602 1.66732 9.16602H18.334C18.7942 9.16602 19.1673 9.53911 19.1673 9.99935C19.1673 10.4596 18.7942 10.8327 18.334 10.8327H1.66732C1.20708 10.8327 0.833984 10.4596 0.833984 9.99935Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M0.833984 9.99935C0.833984 9.53911 1.20708 9.16602 1.66732 9.16602H18.334C18.7942 9.16602 19.1673 9.53911 19.1673 9.99935C19.1673 10.4596 18.7942 10.8327 18.334 10.8327H1.66732C1.20708 10.8327 0.833984 10.4596 0.833984 9.99935Z"
fill="#637381"
></path>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.50084 10.0008C7.55796 12.5632 8.4392 15.0301 10.0006 17.0418C11.5621 15.0301 12.4433 12.5632 12.5005 10.0008C12.4433 7.43845 11.5621 4.97153 10.0007 2.95982C8.4392 4.97153 7.55796 7.43845 7.50084 10.0008ZM10.0007 1.66749L9.38536 1.10547C7.16473 3.53658 5.90275 6.69153 5.83417 9.98346C5.83392 9.99503 5.83392 10.0066 5.83417 10.0182C5.90275 13.3101 7.16473 16.4651 9.38536 18.8962C9.54325 19.069 9.76655 19.1675 10.0007 19.1675C10.2348 19.1675 10.4581 19.069 10.6159 18.8962C12.8366 16.4651 14.0986 13.3101 14.1671 10.0182C14.1674 10.0066 14.1674 9.99503 14.1671 9.98346C14.0986 6.69153 12.8366 3.53658 10.6159 1.10547L10.0007 1.66749Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M7.50084 10.0008C7.55796 12.5632 8.4392 15.0301 10.0006 17.0418C11.5621 15.0301 12.4433 12.5632 12.5005 10.0008C12.4433 7.43845 11.5621 4.97153 10.0007 2.95982C8.4392 4.97153 7.55796 7.43845 7.50084 10.0008ZM10.0007 1.66749L9.38536 1.10547C7.16473 3.53658 5.90275 6.69153 5.83417 9.98346C5.83392 9.99503 5.83392 10.0066 5.83417 10.0182C5.90275 13.3101 7.16473 16.4651 9.38536 18.8962C9.54325 19.069 9.76655 19.1675 10.0007 19.1675C10.2348 19.1675 10.4581 19.069 10.6159 18.8962C12.8366 16.4651 14.0986 13.3101 14.1671 10.0182C14.1674 10.0066 14.1674 9.99503 14.1671 9.98346C14.0986 6.69153 12.8366 3.53658 10.6159 1.10547L10.0007 1.66749Z"
fill="#637381"
></path>
</g>
</svg>
</span>
<select
value={selectedOption}
onChange={(e) => {
setSelectedOption(e.target.value);
changeTextColor();
}}
className={`relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input ${
isOptionSelected ? 'text-black dark:text-white' : ''
}`}
>
<option value="" disabled className="text-body dark:text-bodydark">
Select Country
</option>
<option value="USA" className="text-body dark:text-bodydark">
USA
</option>
<option value="UK" className="text-body dark:text-bodydark">
UK
</option>
<option value="Canada" className="text-body dark:text-bodydark">
Canada
</option>
</select>
<select
value={ selectedOption }
onChange={ (e) =>
{
setSelectedOption(e.target.value);
changeTextColor();
} }
className={ `relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input ${
isOptionSelected ? "text-black dark:text-white" : ""
}` }
>
<option value="" disabled className="text-body dark:text-bodydark">
Select Country
</option>
<option value="USA" className="text-body dark:text-bodydark">
USA
</option>
<option value="UK" className="text-body dark:text-bodydark">
UK
</option>
<option value="Canada" className="text-body dark:text-bodydark">
Canada
</option>
</select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
></path>
</g>
</svg>
</span>
</div>
</div>
);
</div>
</div>
);
};
export default SelectGroupTwo;

445
packages/frontend/src/old/ModalSettings.tsx
View File

@ -1,238 +1,281 @@
import React, { useState } from "react";
import dataJSON from '../../public/data.json';
import dataJSON from "../../public/data.json";
export const Modal = ({ closeModal, onSubmit, defaultValue }) =>
{
const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_")));
export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
const [formState, setFormState] = useState(
defaultValue || {
id: "",
para: "price",
criterion: "0",
value: "",
type: "0",
const [ formState, setFormState ] = useState(
defaultValue || {
id: "",
para: "price",
criterion: "0",
value: "",
type: "0",
}
);
const [errors, setErrors] = useState<string[]>([]);
},
);
const [ errors, setErrors ] = useState<string[]>([]);
const validateForm = () => {
if (formState.id && formState.value) {
setErrors([]);
return true;
} else {
let errorFields = [];
for (const [key, value] of Object.entries(formState)) {
console.log(key);
console.log(value);
if (!value) {
errorFields.push(key=="id"?"Bond ID":key);
const validateForm = () =>
{
if (formState.id && formState.value)
{
setErrors([]);
return true;
}
else{
if (key=='id'){
if (!(Object.keys(dataJSON).includes(value)||value=="ALL")){
errorFields.push("INVALID_ID_"+value)
}
else
{
let errorFields = [];
for (const [ key, value ] of Object.entries(formState))
{
console.log(key);
console.log(value);
if (!value)
{
errorFields.push(key == "id" ? "Bond ID" : key);
}
else
{
if (key == "id")
{
if (!(Object.keys(dataJSON).includes(value) || value == "ALL"))
{
errorFields.push("INVALID_ID_" + value);
}
}
}
}
console.log(errorFields);
setErrors(errorFields);
return false;
}
}
}
console.log(errorFields);
setErrors(errorFields);
return false;
}
};
};
const handleChange = (e) => {
console.log(formState.criterion);
console.log(e.target.name);
console.log(e.target.name=="para"&&e.target.value=='rating');
console.log(formState.criterion>1&&formState.criterion<4);
console.log(e.target.value);
console.log(e.target.name=="para"&&e.target.value=='rating'&&formState.criterion>1&&formState.criterion<4);
if (e.target.name=="para"&&e.target.value=='rating'&&formState.criterion>1&&formState.criterion<4) {setFormState({ ...formState, ["criterion"]: 0 });}
console.log(formState.criterion);
setFormState({ ...formState, [e.target.name]: e.target.value });
};
const handleChange = (e) =>
{
console.log(formState.criterion);
console.log(e.target.name);
console.log(e.target.name == "para" && e.target.value == "rating");
console.log(formState.criterion > 1 && formState.criterion < 4);
console.log(e.target.value);
console.log(e.target.name == "para" && e.target.value == "rating" && formState.criterion > 1 && formState.criterion < 4);
if (e.target.name == "para" && e.target.value == "rating" && formState.criterion > 1 && formState.criterion < 4)
{
setFormState({ ...formState, [ "criterion" ]: 0 });
}
const handleSubmit = (e) => {
e.preventDefault();
console.log(formState.criterion);
setFormState({ ...formState, [ e.target.name ]: e.target.value });
};
if (!validateForm()) return;
const handleSubmit = (e) =>
{
e.preventDefault();
onSubmit(formState);
if (!validateForm())
{
return;
}
closeModal();
};
onSubmit(formState);
return (
<div
className="modal-container fixed z-50 flex top-25 bottom-5 "
onClick={(e) => {
if (e.target.className === "modal-container") closeModal();
}}
>
<div className="modal rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark overflow-auto">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<div className="w-full flex justify-end">
<strong className="text-xl align-center cursor-pointer "
onClick={closeModal}
>&times;</strong>
</div>
<form>
<div className="grid grid-cols-3 gap-5 justify-normal">
<div className="form-group w-full col-span-3">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="id">Bond ID (Input "ALL" to track all bonds with paramaters below)</label>
<input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="id" onChange={handleChange} value={formState.id} />
</div>
<div className="form-group ">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="para">Parameter</label>
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div>
<span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
{formState.para}
closeModal();
};
return (
<div
className="modal-container fixed z-50 flex top-25 bottom-5 "
onClick={ (e) =>
{
if (e.target.className === "modal-container")
{
closeModal();
}
} }
>
<div
className="modal rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark overflow-auto">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<div className="w-full flex justify-end">
<strong className="text-xl align-center cursor-pointer "
onClick={ closeModal }
>&times;</strong>
</div>
<form>
<div className="grid grid-cols-3 gap-5 justify-normal">
<div className="form-group w-full col-span-3">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="id">Bond ID (Input "ALL" to track all bonds with paramaters
below)</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="id" onChange={ handleChange } value={ formState.id }/>
</div>
<div className="form-group ">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="para">Parameter</label>
<div
className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div>
<span
className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
{ formState.para }
</span>
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="para"
onChange={handleChange}
value={formState.para}
>
{fields.map((item:any,idx:number)=>(<option key={idx} value={item}>{item}</option>))}
</select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="para"
onChange={ handleChange }
value={ formState.para }
>
{ fields.map((item: any, idx: number) => (
<option key={ idx } value={ item }>{ item }</option>)) }
</select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
></path>
</g>
</svg>
</span>
</div>
</div>
<div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="criterion">Criterion</label>
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div>
<span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
{formState.criterion==0?"goes down by":formState.criterion==1?"goes up by":formState.criterion==2?"is smaller than":formState.criterion==3?"is greater than":"is equal to"}
</div>
</div>
<div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="criterion">Criterion</label>
<div
className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div>
<span
className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
{ formState.criterion == 0 ? "goes down by" : formState.criterion == 1 ? "goes up by" : formState.criterion == 2 ? "is smaller than" : formState.criterion == 3 ? "is greater than" : "is equal to" }
</span>
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="criterion"
onChange={handleChange}
value={formState.criterion}
>
<option value="0">goes down by</option>
<option value="1">goes up by</option>
{!(formState.para=='rating')&&<option value="2">is smaller than</option>}
{!(formState.para=='rating')&&<option value="3">is greater than</option>}
<option value="4">is equal to</option>
</select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="criterion"
onChange={ handleChange }
value={ formState.criterion }
>
<option value="0">goes down by</option>
<option value="1">goes up by</option>
{ !(formState.para == "rating") && <option value="2">is smaller than</option> }
{ !(formState.para == "rating") && <option value="3">is greater than</option> }
<option value="4">is equal to</option>
</select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
></path>
</g>
</svg>
</span>
</div>
</div>
<div className="form-group w-full">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="value">Value to give Alert</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="value" onChange={ handleChange } value={ formState.value }/>
</div>
<div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="type">Alert Type</label>
<div
className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div>
<span
className={ `${ formState.type == 0 ? "bg-[#04b20c]" : formState.type == 1 ? "bg-[#eab90f]" : "bg-[#e13f32]" } m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke py-1.5 px-2.5 text-white font-medium dark:border-strokedark` }>
{ formState.type == 0 ? "Info" : formState.type == 1 ? "Warning" : "Alert" }
</span>
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="type"
onChange={ handleChange }
value={ formState.type }
>
<option value="0">Info</option>
<option value="1">Warning</option>
<option value="2">Alert</option>
</select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
></path>
</g>
</svg>
</span>
</div>
</div>
</div>
</div>
<div className="form-group w-full">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="value">Value to give Alert</label>
<input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="value" onChange={handleChange} value={formState.value} />
</div>
<div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="type">Alert Type</label>
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div>
<span className={`${formState.type==0?"bg-[#04b20c]":formState.type==1?"bg-[#eab90f]":"bg-[#e13f32]"} m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke py-1.5 px-2.5 text-white font-medium dark:border-strokedark`}>
{formState.type==0?"Info":formState.type==1?"Warning":"Alert"}
</span>
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="type"
onChange={handleChange}
value={formState.type}
>
<option value="0">Info</option>
<option value="1">Warning</option>
<option value="2">Alert</option>
</select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
fill="#637381"
></path>
</g>
</svg>
</span>
</div>
{ errors.filter((item: string) => (item.startsWith("INVALID_ID"))).length > 0 && <><br/>
<div
className="error">{ errors.filter((item: string) => (item.startsWith("INVALID_ID")))[ 0 ].replace("INVALID_ID_", "") } is
not a valid bond
</div>
</> }
{ errors.filter((item: string) => !(item.startsWith("INVALID_ID"))).length > 0 && (
<div className="error">Please
input { errors.filter((item: string) => !(item.startsWith("INVALID_ID"))).join(", ") }</div>) }
<br></br>
<button
className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1"
type="submit" onClick={ handleSubmit }>
Submit
</button>
</form>
</div>
</div>
{errors.filter((item:string)=>(item.startsWith("INVALID_ID"))).length>0 && <><br/><div className="error">{errors.filter((item:string)=>(item.startsWith("INVALID_ID")))[0].replace("INVALID_ID_","")} is not a valid bond</div></>}
{errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).length>0 && (<div className="error">Please input {errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).join(", ")}</div>)}
<br></br>
<button className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1"
type="submit" onClick={handleSubmit}>
Submit
</button>
</form>
</div>
</div>
</div>
);
</div>
</div>
);
};

526
packages/frontend/src/old/Profile.tsx
View File

@ -1,284 +1,290 @@
import CoverOne from '../images/cover/cover-01.png';
import userSix from '../images/user/user-06.png';
import { Link } from 'react-router-dom';
import CoverOne from "../images/cover/cover-01.png";
import userSix from "../images/user/user-06.png";
import { Link } from "react-router-dom";
const Profile = () => {
return (
<>
<div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="relative z-20 h-35 md:h-65">
<img
src={CoverOne}
alt="profile cover"
className="h-full w-full rounded-tl-sm rounded-tr-sm object-cover object-center"
/>
<div className="absolute bottom-1 right-1 z-10 xsm:bottom-4 xsm:right-4">
<label
htmlFor="cover"
className="flex cursor-pointer items-center justify-center gap-2 rounded bg-primary py-1 px-2 text-sm font-medium text-white hover:bg-opacity-90 xsm:px-4"
>
<input type="file" name="cover" id="cover" className="sr-only" />
<span>
const Profile = () =>
{
return (
<>
<div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="relative z-20 h-35 md:h-65">
<img
src={ CoverOne }
alt="profile cover"
className="h-full w-full rounded-tl-sm rounded-tr-sm object-cover object-center"
/>
<div className="absolute bottom-1 right-1 z-10 xsm:bottom-4 xsm:right-4">
<label
htmlFor="cover"
className="flex cursor-pointer items-center justify-center gap-2 rounded bg-primary py-1 px-2 text-sm font-medium text-white hover:bg-opacity-90 xsm:px-4"
>
<input type="file" name="cover" id="cover" className="sr-only"/>
<span>
<svg
className="fill-current"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.76464 1.42638C4.87283 1.2641 5.05496 1.16663 5.25 1.16663H8.75C8.94504 1.16663 9.12717 1.2641 9.23536 1.42638L10.2289 2.91663H12.25C12.7141 2.91663 13.1592 3.101 13.4874 3.42919C13.8156 3.75738 14 4.2025 14 4.66663V11.0833C14 11.5474 13.8156 11.9925 13.4874 12.3207C13.1592 12.6489 12.7141 12.8333 12.25 12.8333H1.75C1.28587 12.8333 0.840752 12.6489 0.512563 12.3207C0.184375 11.9925 0 11.5474 0 11.0833V4.66663C0 4.2025 0.184374 3.75738 0.512563 3.42919C0.840752 3.101 1.28587 2.91663 1.75 2.91663H3.77114L4.76464 1.42638ZM5.56219 2.33329L4.5687 3.82353C4.46051 3.98582 4.27837 4.08329 4.08333 4.08329H1.75C1.59529 4.08329 1.44692 4.14475 1.33752 4.25415C1.22812 4.36354 1.16667 4.51192 1.16667 4.66663V11.0833C1.16667 11.238 1.22812 11.3864 1.33752 11.4958C1.44692 11.6052 1.59529 11.6666 1.75 11.6666H12.25C12.4047 11.6666 12.5531 11.6052 12.6625 11.4958C12.7719 11.3864 12.8333 11.238 12.8333 11.0833V4.66663C12.8333 4.51192 12.7719 4.36354 12.6625 4.25415C12.5531 4.14475 12.4047 4.08329 12.25 4.08329H9.91667C9.72163 4.08329 9.53949 3.98582 9.4313 3.82353L8.43781 2.33329H5.56219Z"
fill="white"
fillRule="evenodd"
clipRule="evenodd"
d="M4.76464 1.42638C4.87283 1.2641 5.05496 1.16663 5.25 1.16663H8.75C8.94504 1.16663 9.12717 1.2641 9.23536 1.42638L10.2289 2.91663H12.25C12.7141 2.91663 13.1592 3.101 13.4874 3.42919C13.8156 3.75738 14 4.2025 14 4.66663V11.0833C14 11.5474 13.8156 11.9925 13.4874 12.3207C13.1592 12.6489 12.7141 12.8333 12.25 12.8333H1.75C1.28587 12.8333 0.840752 12.6489 0.512563 12.3207C0.184375 11.9925 0 11.5474 0 11.0833V4.66663C0 4.2025 0.184374 3.75738 0.512563 3.42919C0.840752 3.101 1.28587 2.91663 1.75 2.91663H3.77114L4.76464 1.42638ZM5.56219 2.33329L4.5687 3.82353C4.46051 3.98582 4.27837 4.08329 4.08333 4.08329H1.75C1.59529 4.08329 1.44692 4.14475 1.33752 4.25415C1.22812 4.36354 1.16667 4.51192 1.16667 4.66663V11.0833C1.16667 11.238 1.22812 11.3864 1.33752 11.4958C1.44692 11.6052 1.59529 11.6666 1.75 11.6666H12.25C12.4047 11.6666 12.5531 11.6052 12.6625 11.4958C12.7719 11.3864 12.8333 11.238 12.8333 11.0833V4.66663C12.8333 4.51192 12.7719 4.36354 12.6625 4.25415C12.5531 4.14475 12.4047 4.08329 12.25 4.08329H9.91667C9.72163 4.08329 9.53949 3.98582 9.4313 3.82353L8.43781 2.33329H5.56219Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.99992 5.83329C6.03342 5.83329 5.24992 6.61679 5.24992 7.58329C5.24992 8.54979 6.03342 9.33329 6.99992 9.33329C7.96642 9.33329 8.74992 8.54979 8.74992 7.58329C8.74992 6.61679 7.96642 5.83329 6.99992 5.83329ZM4.08325 7.58329C4.08325 5.97246 5.38909 4.66663 6.99992 4.66663C8.61075 4.66663 9.91659 5.97246 9.91659 7.58329C9.91659 9.19412 8.61075 10.5 6.99992 10.5C5.38909 10.5 4.08325 9.19412 4.08325 7.58329Z"
fill="white"
fillRule="evenodd"
clipRule="evenodd"
d="M6.99992 5.83329C6.03342 5.83329 5.24992 6.61679 5.24992 7.58329C5.24992 8.54979 6.03342 9.33329 6.99992 9.33329C7.96642 9.33329 8.74992 8.54979 8.74992 7.58329C8.74992 6.61679 7.96642 5.83329 6.99992 5.83329ZM4.08325 7.58329C4.08325 5.97246 5.38909 4.66663 6.99992 4.66663C8.61075 4.66663 9.91659 5.97246 9.91659 7.58329C9.91659 9.19412 8.61075 10.5 6.99992 10.5C5.38909 10.5 4.08325 9.19412 4.08325 7.58329Z"
fill="white"
/>
</svg>
</span>
<span>Edit</span>
</label>
</div>
</div>
<div className="px-4 pb-6 text-center lg:pb-8 xl:pb-11.5">
<div className="relative z-30 mx-auto -mt-22 h-30 w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2">
<img src={userSix} alt="profile" />
<label
htmlFor="profile"
className="absolute bottom-0 right-0 flex h-8.5 w-8.5 cursor-pointer items-center justify-center rounded-full bg-primary text-white hover:bg-opacity-90 sm:bottom-2 sm:right-2"
>
<svg
className="fill-current"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.76464 1.42638C4.87283 1.2641 5.05496 1.16663 5.25 1.16663H8.75C8.94504 1.16663 9.12717 1.2641 9.23536 1.42638L10.2289 2.91663H12.25C12.7141 2.91663 13.1592 3.101 13.4874 3.42919C13.8156 3.75738 14 4.2025 14 4.66663V11.0833C14 11.5474 13.8156 11.9925 13.4874 12.3207C13.1592 12.6489 12.7141 12.8333 12.25 12.8333H1.75C1.28587 12.8333 0.840752 12.6489 0.512563 12.3207C0.184375 11.9925 0 11.5474 0 11.0833V4.66663C0 4.2025 0.184374 3.75738 0.512563 3.42919C0.840752 3.101 1.28587 2.91663 1.75 2.91663H3.77114L4.76464 1.42638ZM5.56219 2.33329L4.5687 3.82353C4.46051 3.98582 4.27837 4.08329 4.08333 4.08329H1.75C1.59529 4.08329 1.44692 4.14475 1.33752 4.25415C1.22812 4.36354 1.16667 4.51192 1.16667 4.66663V11.0833C1.16667 11.238 1.22812 11.3864 1.33752 11.4958C1.44692 11.6052 1.59529 11.6666 1.75 11.6666H12.25C12.4047 11.6666 12.5531 11.6052 12.6625 11.4958C12.7719 11.3864 12.8333 11.238 12.8333 11.0833V4.66663C12.8333 4.51192 12.7719 4.36354 12.6625 4.25415C12.5531 4.14475 12.4047 4.08329 12.25 4.08329H9.91667C9.72163 4.08329 9.53949 3.98582 9.4313 3.82353L8.43781 2.33329H5.56219Z"
fill=""
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.00004 5.83329C6.03354 5.83329 5.25004 6.61679 5.25004 7.58329C5.25004 8.54979 6.03354 9.33329 7.00004 9.33329C7.96654 9.33329 8.75004 8.54979 8.75004 7.58329C8.75004 6.61679 7.96654 5.83329 7.00004 5.83329ZM4.08337 7.58329C4.08337 5.97246 5.38921 4.66663 7.00004 4.66663C8.61087 4.66663 9.91671 5.97246 9.91671 7.58329C9.91671 9.19412 8.61087 10.5 7.00004 10.5C5.38921 10.5 4.08337 9.19412 4.08337 7.58329Z"
fill=""
/>
</svg>
<input
type="file"
name="profile"
id="profile"
className="sr-only"
/>
</label>
</div>
</div>
<div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
Danish Heilium
</h3>
<p className="font-medium">Ui/Ux Designer</p>
<div className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-3 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]">
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span>Edit</span>
</label>
</div>
</div>
<div className="px-4 pb-6 text-center lg:pb-8 xl:pb-11.5">
<div
className="relative z-30 mx-auto -mt-22 h-30 w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2">
<img src={ userSix } alt="profile"/>
<label
htmlFor="profile"
className="absolute bottom-0 right-0 flex h-8.5 w-8.5 cursor-pointer items-center justify-center rounded-full bg-primary text-white hover:bg-opacity-90 sm:bottom-2 sm:right-2"
>
<svg
className="fill-current"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.76464 1.42638C4.87283 1.2641 5.05496 1.16663 5.25 1.16663H8.75C8.94504 1.16663 9.12717 1.2641 9.23536 1.42638L10.2289 2.91663H12.25C12.7141 2.91663 13.1592 3.101 13.4874 3.42919C13.8156 3.75738 14 4.2025 14 4.66663V11.0833C14 11.5474 13.8156 11.9925 13.4874 12.3207C13.1592 12.6489 12.7141 12.8333 12.25 12.8333H1.75C1.28587 12.8333 0.840752 12.6489 0.512563 12.3207C0.184375 11.9925 0 11.5474 0 11.0833V4.66663C0 4.2025 0.184374 3.75738 0.512563 3.42919C0.840752 3.101 1.28587 2.91663 1.75 2.91663H3.77114L4.76464 1.42638ZM5.56219 2.33329L4.5687 3.82353C4.46051 3.98582 4.27837 4.08329 4.08333 4.08329H1.75C1.59529 4.08329 1.44692 4.14475 1.33752 4.25415C1.22812 4.36354 1.16667 4.51192 1.16667 4.66663V11.0833C1.16667 11.238 1.22812 11.3864 1.33752 11.4958C1.44692 11.6052 1.59529 11.6666 1.75 11.6666H12.25C12.4047 11.6666 12.5531 11.6052 12.6625 11.4958C12.7719 11.3864 12.8333 11.238 12.8333 11.0833V4.66663C12.8333 4.51192 12.7719 4.36354 12.6625 4.25415C12.5531 4.14475 12.4047 4.08329 12.25 4.08329H9.91667C9.72163 4.08329 9.53949 3.98582 9.4313 3.82353L8.43781 2.33329H5.56219Z"
fill=""
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.00004 5.83329C6.03354 5.83329 5.25004 6.61679 5.25004 7.58329C5.25004 8.54979 6.03354 9.33329 7.00004 9.33329C7.96654 9.33329 8.75004 8.54979 8.75004 7.58329C8.75004 6.61679 7.96654 5.83329 7.00004 5.83329ZM4.08337 7.58329C4.08337 5.97246 5.38921 4.66663 7.00004 4.66663C8.61087 4.66663 9.91671 5.97246 9.91671 7.58329C9.91671 9.19412 8.61087 10.5 7.00004 10.5C5.38921 10.5 4.08337 9.19412 4.08337 7.58329Z"
fill=""
/>
</svg>
<input
type="file"
name="profile"
id="profile"
className="sr-only"
/>
</label>
</div>
</div>
<div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
Danish Heilium
</h3>
<p className="font-medium">Ui/Ux Designer</p>
<div
className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-3 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]">
<div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white">
259
</span>
<span className="text-sm">Posts</span>
</div>
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="text-sm">Posts</span>
</div>
<div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white">
129K
</span>
<span className="text-sm">Followers</span>
</div>
<div className="flex flex-col items-center justify-center gap-1 px-4 xsm:flex-row">
<span className="text-sm">Followers</span>
</div>
<div className="flex flex-col items-center justify-center gap-1 px-4 xsm:flex-row">
<span className="font-semibold text-black dark:text-white">
2K
</span>
<span className="text-sm">Following</span>
</div>
</div>
<span className="text-sm">Following</span>
</div>
</div>
<div className="mx-auto max-w-180">
<h4 className="font-semibold text-black dark:text-white">
About Me
</h4>
<p className="mt-4.5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque posuere fermentum urna, eu condimentum mauris
tempus ut. Donec fermentum blandit aliquet. Etiam dictum dapibus
ultricies. Sed vel aliquet libero. Nunc a augue fermentum,
pharetra ligula sed, aliquam lacus.
</p>
</div>
<div className="mx-auto max-w-180">
<h4 className="font-semibold text-black dark:text-white">
About Me
</h4>
<p className="mt-4.5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque posuere fermentum urna, eu condimentum mauris
tempus ut. Donec fermentum blandit aliquet. Etiam dictum dapibus
ultricies. Sed vel aliquet libero. Nunc a augue fermentum,
pharetra ligula sed, aliquam lacus.
</p>
</div>
<div className="mt-6.5">
<h4 className="mb-3.5 font-medium text-black dark:text-white">
Follow me on
</h4>
<div className="flex items-center justify-center gap-3.5">
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_966)">
<path
d="M12.8333 12.375H15.125L16.0416 8.70838H12.8333V6.87504C12.8333 5.93088 12.8333 5.04171 14.6666 5.04171H16.0416V1.96171C15.7428 1.92229 14.6144 1.83337 13.4227 1.83337C10.934 1.83337 9.16663 3.35229 9.16663 6.14171V8.70838H6.41663V12.375H9.16663V20.1667H12.8333V12.375Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_966">
<rect width="22" height="22" fill="white" />
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_970)">
<path
d="M20.9813 5.18472C20.2815 5.49427 19.5393 5.69757 18.7795 5.78789C19.5804 5.30887 20.1798 4.55498 20.4661 3.66672C19.7145 4.11405 18.8904 4.42755 18.0315 4.59714C17.4545 3.97984 16.6898 3.57044 15.8562 3.43259C15.0225 3.29474 14.1667 3.43617 13.4218 3.83489C12.6768 4.2336 12.0845 4.86726 11.7368 5.63736C11.3891 6.40746 11.3056 7.27085 11.4993 8.0933C9.97497 8.0169 8.48376 7.62078 7.12247 6.93066C5.76118 6.24054 4.56024 5.27185 3.59762 4.08747C3.25689 4.67272 3.07783 5.33801 3.07879 6.01522C3.07879 7.34439 3.75529 8.51864 4.78379 9.20614C4.17513 9.18697 3.57987 9.0226 3.04762 8.72672V8.77439C3.04781 9.65961 3.35413 10.5175 3.91465 11.2027C4.47517 11.8878 5.2554 12.3581 6.12304 12.5336C5.55802 12.6868 4.96557 12.7093 4.39054 12.5996C4.63517 13.3616 5.11196 14.028 5.75417 14.5055C6.39637 14.983 7.17182 15.2477 7.97196 15.2626C7.17673 15.8871 6.2662 16.3488 5.29243 16.6212C4.31866 16.8936 3.30074 16.9714 2.29688 16.8502C4.04926 17.9772 6.08921 18.5755 8.17271 18.5735C15.2246 18.5735 19.081 12.7316 19.081 7.66522C19.081 7.50022 19.0765 7.33339 19.0691 7.17022C19.8197 6.62771 20.4676 5.95566 20.9822 5.18564L20.9813 5.18472Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_970">
<rect
width="22"
height="22"
fill="white"
transform="translate(0.666138)"
/>
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_974)">
<path
d="M6.69548 4.58327C6.69523 5.0695 6.50185 5.53572 6.15786 5.87937C5.81387 6.22301 5.34746 6.41593 4.86123 6.41569C4.375 6.41545 3.90878 6.22206 3.56513 5.87807C3.22149 5.53408 3.02857 5.06767 3.02881 4.58144C3.02905 4.09521 3.22244 3.62899 3.56643 3.28535C3.91042 2.9417 4.37683 2.74878 4.86306 2.74902C5.34929 2.74927 5.81551 2.94265 6.15915 3.28664C6.5028 3.63063 6.69572 4.09704 6.69548 4.58327ZM6.75048 7.77327H3.08381V19.2499H6.75048V7.77327ZM12.5438 7.77327H8.89548V19.2499H12.5071V13.2274C12.5071 9.87244 16.8796 9.56077 16.8796 13.2274V19.2499H20.5005V11.9808C20.5005 6.32494 14.0288 6.53577 12.5071 9.31327L12.5438 7.77327Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_974">
<rect
width="22"
height="22"
fill="white"
transform="translate(0.333862)"
/>
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_978)">
<path
d="M18.3233 10.6077C18.2481 9.1648 17.7463 7.77668 16.8814 6.61929C16.6178 6.90312 16.3361 7.16951 16.038 7.41679C15.1222 8.17748 14.0988 8.79838 13.0011 9.25929C13.1542 9.58013 13.2945 9.89088 13.4182 10.1842V10.187C13.4531 10.2689 13.4867 10.3514 13.519 10.4345C14.9069 10.2786 16.3699 10.3355 17.788 10.527C17.9768 10.5527 18.1546 10.5802 18.3233 10.6077ZM9.72038 3.77854C10.6137 5.03728 11.4375 6.34396 12.188 7.69271C13.3091 7.25088 14.2359 6.69354 14.982 6.07296C15.2411 5.8595 15.4849 5.62824 15.7117 5.38088C14.3926 4.27145 12.7237 3.66426 11 3.66671C10.5711 3.66641 10.1429 3.70353 9.72038 3.77762V3.77854ZM3.89862 9.16396C4.52308 9.1482 5.1468 9.11059 5.76863 9.05121C7.27163 8.91677 8.7618 8.66484 10.2255 8.29771C9.46051 6.96874 8.63463 5.67578 7.75046 4.42296C6.80603 4.89082 5.97328 5.55633 5.30868 6.37435C4.64409 7.19236 4.16319 8.14374 3.89862 9.16396ZM5.30113 15.6155C5.65679 15.0957 6.12429 14.5109 6.74488 13.8747C8.07771 12.5089 9.65071 11.4455 11.4712 10.8589L11.528 10.8424C11.3768 10.5087 11.2347 10.2108 11.0917 9.93029C9.40871 10.4207 7.63588 10.7269 5.86946 10.8855C5.00779 10.9634 4.23504 10.9973 3.66671 11.0028C3.66509 12.6827 4.24264 14.3117 5.30204 15.6155H5.30113ZM13.7546 17.7971C13.4011 16.0144 12.9008 14.2641 12.2586 12.5639C10.4235 13.2303 8.96138 14.2047 7.83113 15.367C7.375 15.8276 6.97021 16.3362 6.62388 16.8841C7.88778 17.8272 9.42308 18.3356 11 18.3334C11.9441 18.3347 12.8795 18.1533 13.7546 17.799V17.7971ZM15.4715 16.8117C16.9027 15.7115 17.8777 14.1219 18.2096 12.3475C17.898 12.2696 17.5029 12.1917 17.0684 12.1312C16.1023 11.9921 15.1221 11.9819 14.1534 12.101C14.6988 13.6399 15.1392 15.2141 15.4715 16.8126V16.8117ZM11 20.1667C5.93729 20.1667 1.83337 16.0628 1.83337 11C1.83337 5.93729 5.93729 1.83337 11 1.83337C16.0628 1.83337 20.1667 5.93729 20.1667 11C20.1667 16.0628 16.0628 20.1667 11 20.1667Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_978">
<rect width="22" height="22" fill="white" />
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_982)">
<path
d="M11.6662 1.83337C6.6016 1.83337 2.49951 5.93546 2.49951 11C2.49847 12.9244 3.10343 14.8002 4.22854 16.3613C5.35366 17.9225 6.94181 19.0897 8.76768 19.6974C9.22602 19.7771 9.39743 19.5021 9.39743 19.261C9.39743 19.0438 9.38552 18.3224 9.38552 17.5542C7.08285 17.9786 6.48701 16.9932 6.30368 16.4771C6.2001 16.2131 5.75368 15.4 5.3641 15.1819C5.04326 15.0105 4.58493 14.586 5.35218 14.575C6.07451 14.5631 6.58968 15.2396 6.76201 15.5146C7.58701 16.9006 8.90518 16.511 9.43135 16.2709C9.51202 15.675 9.75218 15.2745 10.0162 15.0453C7.9766 14.8161 5.84535 14.025 5.84535 10.5188C5.84535 9.52146 6.2001 8.69737 6.78493 8.05479C6.69326 7.82562 6.37243 6.88604 6.8766 5.62562C6.8766 5.62562 7.64385 5.38546 9.39743 6.56612C10.1437 6.35901 10.9147 6.25477 11.6891 6.25629C12.4683 6.25629 13.2474 6.35896 13.9808 6.56521C15.7334 5.37354 16.5016 5.62654 16.5016 5.62654C17.0058 6.88696 16.6849 7.82654 16.5933 8.05571C17.1772 8.69737 17.5329 9.51046 17.5329 10.5188C17.5329 14.037 15.3906 14.8161 13.351 15.0453C13.6829 15.3313 13.9698 15.8813 13.9698 16.7411C13.9698 17.9667 13.9579 18.9521 13.9579 19.262C13.9579 19.5021 14.1302 19.7881 14.5885 19.6965C16.4081 19.0821 17.9893 17.9126 19.1094 16.3526C20.2296 14.7926 20.8323 12.9206 20.8329 11C20.8329 5.93546 16.7308 1.83337 11.6662 1.83337Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_982">
<rect
width="22"
height="22"
fill="white"
transform="translate(0.666138)"
/>
</clipPath>
</defs>
</svg>
</Link>
</div>
<div className="mt-6.5">
<h4 className="mb-3.5 font-medium text-black dark:text-white">
Follow me on
</h4>
<div className="flex items-center justify-center gap-3.5">
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_966)">
<path
d="M12.8333 12.375H15.125L16.0416 8.70838H12.8333V6.87504C12.8333 5.93088 12.8333 5.04171 14.6666 5.04171H16.0416V1.96171C15.7428 1.92229 14.6144 1.83337 13.4227 1.83337C10.934 1.83337 9.16663 3.35229 9.16663 6.14171V8.70838H6.41663V12.375H9.16663V20.1667H12.8333V12.375Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_966">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_970)">
<path
d="M20.9813 5.18472C20.2815 5.49427 19.5393 5.69757 18.7795 5.78789C19.5804 5.30887 20.1798 4.55498 20.4661 3.66672C19.7145 4.11405 18.8904 4.42755 18.0315 4.59714C17.4545 3.97984 16.6898 3.57044 15.8562 3.43259C15.0225 3.29474 14.1667 3.43617 13.4218 3.83489C12.6768 4.2336 12.0845 4.86726 11.7368 5.63736C11.3891 6.40746 11.3056 7.27085 11.4993 8.0933C9.97497 8.0169 8.48376 7.62078 7.12247 6.93066C5.76118 6.24054 4.56024 5.27185 3.59762 4.08747C3.25689 4.67272 3.07783 5.33801 3.07879 6.01522C3.07879 7.34439 3.75529 8.51864 4.78379 9.20614C4.17513 9.18697 3.57987 9.0226 3.04762 8.72672V8.77439C3.04781 9.65961 3.35413 10.5175 3.91465 11.2027C4.47517 11.8878 5.2554 12.3581 6.12304 12.5336C5.55802 12.6868 4.96557 12.7093 4.39054 12.5996C4.63517 13.3616 5.11196 14.028 5.75417 14.5055C6.39637 14.983 7.17182 15.2477 7.97196 15.2626C7.17673 15.8871 6.2662 16.3488 5.29243 16.6212C4.31866 16.8936 3.30074 16.9714 2.29688 16.8502C4.04926 17.9772 6.08921 18.5755 8.17271 18.5735C15.2246 18.5735 19.081 12.7316 19.081 7.66522C19.081 7.50022 19.0765 7.33339 19.0691 7.17022C19.8197 6.62771 20.4676 5.95566 20.9822 5.18564L20.9813 5.18472Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_970">
<rect
width="22"
height="22"
fill="white"
transform="translate(0.666138)"
/>
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_974)">
<path
d="M6.69548 4.58327C6.69523 5.0695 6.50185 5.53572 6.15786 5.87937C5.81387 6.22301 5.34746 6.41593 4.86123 6.41569C4.375 6.41545 3.90878 6.22206 3.56513 5.87807C3.22149 5.53408 3.02857 5.06767 3.02881 4.58144C3.02905 4.09521 3.22244 3.62899 3.56643 3.28535C3.91042 2.9417 4.37683 2.74878 4.86306 2.74902C5.34929 2.74927 5.81551 2.94265 6.15915 3.28664C6.5028 3.63063 6.69572 4.09704 6.69548 4.58327ZM6.75048 7.77327H3.08381V19.2499H6.75048V7.77327ZM12.5438 7.77327H8.89548V19.2499H12.5071V13.2274C12.5071 9.87244 16.8796 9.56077 16.8796 13.2274V19.2499H20.5005V11.9808C20.5005 6.32494 14.0288 6.53577 12.5071 9.31327L12.5438 7.77327Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_974">
<rect
width="22"
height="22"
fill="white"
transform="translate(0.333862)"
/>
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_978)">
<path
d="M18.3233 10.6077C18.2481 9.1648 17.7463 7.77668 16.8814 6.61929C16.6178 6.90312 16.3361 7.16951 16.038 7.41679C15.1222 8.17748 14.0988 8.79838 13.0011 9.25929C13.1542 9.58013 13.2945 9.89088 13.4182 10.1842V10.187C13.4531 10.2689 13.4867 10.3514 13.519 10.4345C14.9069 10.2786 16.3699 10.3355 17.788 10.527C17.9768 10.5527 18.1546 10.5802 18.3233 10.6077ZM9.72038 3.77854C10.6137 5.03728 11.4375 6.34396 12.188 7.69271C13.3091 7.25088 14.2359 6.69354 14.982 6.07296C15.2411 5.8595 15.4849 5.62824 15.7117 5.38088C14.3926 4.27145 12.7237 3.66426 11 3.66671C10.5711 3.66641 10.1429 3.70353 9.72038 3.77762V3.77854ZM3.89862 9.16396C4.52308 9.1482 5.1468 9.11059 5.76863 9.05121C7.27163 8.91677 8.7618 8.66484 10.2255 8.29771C9.46051 6.96874 8.63463 5.67578 7.75046 4.42296C6.80603 4.89082 5.97328 5.55633 5.30868 6.37435C4.64409 7.19236 4.16319 8.14374 3.89862 9.16396ZM5.30113 15.6155C5.65679 15.0957 6.12429 14.5109 6.74488 13.8747C8.07771 12.5089 9.65071 11.4455 11.4712 10.8589L11.528 10.8424C11.3768 10.5087 11.2347 10.2108 11.0917 9.93029C9.40871 10.4207 7.63588 10.7269 5.86946 10.8855C5.00779 10.9634 4.23504 10.9973 3.66671 11.0028C3.66509 12.6827 4.24264 14.3117 5.30204 15.6155H5.30113ZM13.7546 17.7971C13.4011 16.0144 12.9008 14.2641 12.2586 12.5639C10.4235 13.2303 8.96138 14.2047 7.83113 15.367C7.375 15.8276 6.97021 16.3362 6.62388 16.8841C7.88778 17.8272 9.42308 18.3356 11 18.3334C11.9441 18.3347 12.8795 18.1533 13.7546 17.799V17.7971ZM15.4715 16.8117C16.9027 15.7115 17.8777 14.1219 18.2096 12.3475C17.898 12.2696 17.5029 12.1917 17.0684 12.1312C16.1023 11.9921 15.1221 11.9819 14.1534 12.101C14.6988 13.6399 15.1392 15.2141 15.4715 16.8126V16.8117ZM11 20.1667C5.93729 20.1667 1.83337 16.0628 1.83337 11C1.83337 5.93729 5.93729 1.83337 11 1.83337C16.0628 1.83337 20.1667 5.93729 20.1667 11C20.1667 16.0628 16.0628 20.1667 11 20.1667Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_978">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
</Link>
<Link
to="#"
className="hover:text-primary"
aria-label="social-icon"
>
<svg
className="fill-current"
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_30_982)">
<path
d="M11.6662 1.83337C6.6016 1.83337 2.49951 5.93546 2.49951 11C2.49847 12.9244 3.10343 14.8002 4.22854 16.3613C5.35366 17.9225 6.94181 19.0897 8.76768 19.6974C9.22602 19.7771 9.39743 19.5021 9.39743 19.261C9.39743 19.0438 9.38552 18.3224 9.38552 17.5542C7.08285 17.9786 6.48701 16.9932 6.30368 16.4771C6.2001 16.2131 5.75368 15.4 5.3641 15.1819C5.04326 15.0105 4.58493 14.586 5.35218 14.575C6.07451 14.5631 6.58968 15.2396 6.76201 15.5146C7.58701 16.9006 8.90518 16.511 9.43135 16.2709C9.51202 15.675 9.75218 15.2745 10.0162 15.0453C7.9766 14.8161 5.84535 14.025 5.84535 10.5188C5.84535 9.52146 6.2001 8.69737 6.78493 8.05479C6.69326 7.82562 6.37243 6.88604 6.8766 5.62562C6.8766 5.62562 7.64385 5.38546 9.39743 6.56612C10.1437 6.35901 10.9147 6.25477 11.6891 6.25629C12.4683 6.25629 13.2474 6.35896 13.9808 6.56521C15.7334 5.37354 16.5016 5.62654 16.5016 5.62654C17.0058 6.88696 16.6849 7.82654 16.5933 8.05571C17.1772 8.69737 17.5329 9.51046 17.5329 10.5188C17.5329 14.037 15.3906 14.8161 13.351 15.0453C13.6829 15.3313 13.9698 15.8813 13.9698 16.7411C13.9698 17.9667 13.9579 18.9521 13.9579 19.262C13.9579 19.5021 14.1302 19.7881 14.5885 19.6965C16.4081 19.0821 17.9893 17.9126 19.1094 16.3526C20.2296 14.7926 20.8323 12.9206 20.8329 11C20.8329 5.93546 16.7308 1.83337 11.6662 1.83337Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_30_982">
<rect
width="22"
height="22"
fill="white"
transform="translate(0.666138)"
/>
</clipPath>
</defs>
</svg>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
</>
);
};
export default Profile;

492
packages/frontend/src/old/Settings.tsx
View File

@ -1,229 +1,232 @@
import userThree from '../images/user/user-03.png';
import userThree from "../images/user/user-03.png";
const Settings = () => {
return (
<>
<div className="mx-auto max-w-270">
<div className="grid grid-cols-5 gap-8">
<div className="col-span-5 xl:col-span-3">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Personal Information
</h3>
</div>
<div className="p-7">
<form action="#">
<div className="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
<div className="w-full sm:w-1/2">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="fullName"
>
Full Name
</label>
<div className="relative">
const Settings = () =>
{
return (
<>
<div className="mx-auto max-w-270">
<div className="grid grid-cols-5 gap-8">
<div className="col-span-5 xl:col-span-3">
<div
className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Personal Information
</h3>
</div>
<div className="p-7">
<form action="#">
<div className="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
<div className="w-full sm:w-1/2">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="fullName"
>
Full Name
</label>
<div className="relative">
<span className="absolute left-4.5 top-4">
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.72039 12.887C4.50179 12.1056 5.5616 11.6666 6.66667 11.6666H13.3333C14.4384 11.6666 15.4982 12.1056 16.2796 12.887C17.061 13.6684 17.5 14.7282 17.5 15.8333V17.5C17.5 17.9602 17.1269 18.3333 16.6667 18.3333C16.2064 18.3333 15.8333 17.9602 15.8333 17.5V15.8333C15.8333 15.1703 15.5699 14.5344 15.1011 14.0655C14.6323 13.5967 13.9964 13.3333 13.3333 13.3333H6.66667C6.00363 13.3333 5.36774 13.5967 4.8989 14.0655C4.43006 14.5344 4.16667 15.1703 4.16667 15.8333V17.5C4.16667 17.9602 3.79357 18.3333 3.33333 18.3333C2.8731 18.3333 2.5 17.9602 2.5 17.5V15.8333C2.5 14.7282 2.93899 13.6684 3.72039 12.887Z"
fill=""
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.99967 3.33329C8.61896 3.33329 7.49967 4.45258 7.49967 5.83329C7.49967 7.214 8.61896 8.33329 9.99967 8.33329C11.3804 8.33329 12.4997 7.214 12.4997 5.83329C12.4997 4.45258 11.3804 3.33329 9.99967 3.33329ZM5.83301 5.83329C5.83301 3.53211 7.69849 1.66663 9.99967 1.66663C12.3009 1.66663 14.1663 3.53211 14.1663 5.83329C14.1663 8.13448 12.3009 9.99996 9.99967 9.99996C7.69849 9.99996 5.83301 8.13448 5.83301 5.83329Z"
fill=""
/>
</g>
</svg>
</span>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text"
name="fullName"
id="fullName"
placeholder="Devid Jhon"
defaultValue="Devid Jhon"
/>
</div>
</div>
<div className="w-full sm:w-1/2">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="phoneNumber"
>
Phone Number
</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 px-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text"
name="phoneNumber"
id="phoneNumber"
placeholder="+990 3343 7865"
defaultValue="+990 3343 7865"
/>
</div>
</div>
<div className="mb-5.5">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="emailAddress"
>
Email Address
</label>
<div className="relative">
<span className="absolute left-4.5 top-4">
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.72039 12.887C4.50179 12.1056 5.5616 11.6666 6.66667 11.6666H13.3333C14.4384 11.6666 15.4982 12.1056 16.2796 12.887C17.061 13.6684 17.5 14.7282 17.5 15.8333V17.5C17.5 17.9602 17.1269 18.3333 16.6667 18.3333C16.2064 18.3333 15.8333 17.9602 15.8333 17.5V15.8333C15.8333 15.1703 15.5699 14.5344 15.1011 14.0655C14.6323 13.5967 13.9964 13.3333 13.3333 13.3333H6.66667C6.00363 13.3333 5.36774 13.5967 4.8989 14.0655C4.43006 14.5344 4.16667 15.1703 4.16667 15.8333V17.5C4.16667 17.9602 3.79357 18.3333 3.33333 18.3333C2.8731 18.3333 2.5 17.9602 2.5 17.5V15.8333C2.5 14.7282 2.93899 13.6684 3.72039 12.887Z"
fill=""
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.99967 3.33329C8.61896 3.33329 7.49967 4.45258 7.49967 5.83329C7.49967 7.214 8.61896 8.33329 9.99967 8.33329C11.3804 8.33329 12.4997 7.214 12.4997 5.83329C12.4997 4.45258 11.3804 3.33329 9.99967 3.33329ZM5.83301 5.83329C5.83301 3.53211 7.69849 1.66663 9.99967 1.66663C12.3009 1.66663 14.1663 3.53211 14.1663 5.83329C14.1663 8.13448 12.3009 9.99996 9.99967 9.99996C7.69849 9.99996 5.83301 8.13448 5.83301 5.83329Z"
fill=""
/>
</g>
</svg>
</span>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text"
name="fullName"
id="fullName"
placeholder="Devid Jhon"
defaultValue="Devid Jhon"
/>
</div>
</div>
<div className="w-full sm:w-1/2">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="phoneNumber"
>
Phone Number
</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 px-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text"
name="phoneNumber"
id="phoneNumber"
placeholder="+990 3343 7865"
defaultValue="+990 3343 7865"
/>
</div>
</div>
<div className="mb-5.5">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="emailAddress"
>
Email Address
</label>
<div className="relative">
<span className="absolute left-4.5 top-4">
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.33301 4.16667C2.87658 4.16667 2.49967 4.54357 2.49967 5V15C2.49967 15.4564 2.87658 15.8333 3.33301 15.8333H16.6663C17.1228 15.8333 17.4997 15.4564 17.4997 15V5C17.4997 4.54357 17.1228 4.16667 16.6663 4.16667H3.33301ZM0.833008 5C0.833008 3.6231 1.9561 2.5 3.33301 2.5H16.6663C18.0432 2.5 19.1663 3.6231 19.1663 5V15C19.1663 16.3769 18.0432 17.5 16.6663 17.5H3.33301C1.9561 17.5 0.833008 16.3769 0.833008 15V5Z"
fill=""
fillRule="evenodd"
clipRule="evenodd"
d="M3.33301 4.16667C2.87658 4.16667 2.49967 4.54357 2.49967 5V15C2.49967 15.4564 2.87658 15.8333 3.33301 15.8333H16.6663C17.1228 15.8333 17.4997 15.4564 17.4997 15V5C17.4997 4.54357 17.1228 4.16667 16.6663 4.16667H3.33301ZM0.833008 5C0.833008 3.6231 1.9561 2.5 3.33301 2.5H16.6663C18.0432 2.5 19.1663 3.6231 19.1663 5V15C19.1663 16.3769 18.0432 17.5 16.6663 17.5H3.33301C1.9561 17.5 0.833008 16.3769 0.833008 15V5Z"
fill=""
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.983719 4.52215C1.24765 4.1451 1.76726 4.05341 2.1443 4.31734L9.99975 9.81615L17.8552 4.31734C18.2322 4.05341 18.7518 4.1451 19.0158 4.52215C19.2797 4.89919 19.188 5.4188 18.811 5.68272L10.4776 11.5161C10.1907 11.7169 9.80879 11.7169 9.52186 11.5161L1.18853 5.68272C0.811486 5.4188 0.719791 4.89919 0.983719 4.52215Z"
fill=""
fillRule="evenodd"
clipRule="evenodd"
d="M0.983719 4.52215C1.24765 4.1451 1.76726 4.05341 2.1443 4.31734L9.99975 9.81615L17.8552 4.31734C18.2322 4.05341 18.7518 4.1451 19.0158 4.52215C19.2797 4.89919 19.188 5.4188 18.811 5.68272L10.4776 11.5161C10.1907 11.7169 9.80879 11.7169 9.52186 11.5161L1.18853 5.68272C0.811486 5.4188 0.719791 4.89919 0.983719 4.52215Z"
fill=""
/>
</g>
</svg>
</span>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="email"
name="emailAddress"
id="emailAddress"
placeholder="devidjond45@gmail.com"
defaultValue="devidjond45@gmail.com"
/>
</div>
</div>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="email"
name="emailAddress"
id="emailAddress"
placeholder="devidjond45@gmail.com"
defaultValue="devidjond45@gmail.com"
/>
</div>
</div>
<div className="mb-5.5">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="Username"
>
Username
</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 px-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text"
name="Username"
id="Username"
placeholder="devidjhon24"
defaultValue="devidjhon24"
/>
</div>
<div className="mb-5.5">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="Username"
>
Username
</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 px-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text"
name="Username"
id="Username"
placeholder="devidjhon24"
defaultValue="devidjhon24"
/>
</div>
<div className="mb-5.5">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="Username"
>
BIO
</label>
<div className="relative">
<div className="mb-5.5">
<label
className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="Username"
>
BIO
</label>
<div className="relative">
<span className="absolute left-4.5 top-4">
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.8" clipPath="url(#clip0_88_10224)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.56524 3.23223C2.03408 2.76339 2.66997 2.5 3.33301 2.5H9.16634C9.62658 2.5 9.99967 2.8731 9.99967 3.33333C9.99967 3.79357 9.62658 4.16667 9.16634 4.16667H3.33301C3.11199 4.16667 2.90003 4.25446 2.74375 4.41074C2.58747 4.56702 2.49967 4.77899 2.49967 5V16.6667C2.49967 16.8877 2.58747 17.0996 2.74375 17.2559C2.90003 17.4122 3.11199 17.5 3.33301 17.5H14.9997C15.2207 17.5 15.4326 17.4122 15.5889 17.2559C15.7452 17.0996 15.833 16.8877 15.833 16.6667V10.8333C15.833 10.3731 16.2061 10 16.6663 10C17.1266 10 17.4997 10.3731 17.4997 10.8333V16.6667C17.4997 17.3297 17.2363 17.9656 16.7674 18.4344C16.2986 18.9033 15.6627 19.1667 14.9997 19.1667H3.33301C2.66997 19.1667 2.03408 18.9033 1.56524 18.4344C1.0964 17.9656 0.833008 17.3297 0.833008 16.6667V5C0.833008 4.33696 1.0964 3.70107 1.56524 3.23223Z"
fill=""
fillRule="evenodd"
clipRule="evenodd"
d="M1.56524 3.23223C2.03408 2.76339 2.66997 2.5 3.33301 2.5H9.16634C9.62658 2.5 9.99967 2.8731 9.99967 3.33333C9.99967 3.79357 9.62658 4.16667 9.16634 4.16667H3.33301C3.11199 4.16667 2.90003 4.25446 2.74375 4.41074C2.58747 4.56702 2.49967 4.77899 2.49967 5V16.6667C2.49967 16.8877 2.58747 17.0996 2.74375 17.2559C2.90003 17.4122 3.11199 17.5 3.33301 17.5H14.9997C15.2207 17.5 15.4326 17.4122 15.5889 17.2559C15.7452 17.0996 15.833 16.8877 15.833 16.6667V10.8333C15.833 10.3731 16.2061 10 16.6663 10C17.1266 10 17.4997 10.3731 17.4997 10.8333V16.6667C17.4997 17.3297 17.2363 17.9656 16.7674 18.4344C16.2986 18.9033 15.6627 19.1667 14.9997 19.1667H3.33301C2.66997 19.1667 2.03408 18.9033 1.56524 18.4344C1.0964 17.9656 0.833008 17.3297 0.833008 16.6667V5C0.833008 4.33696 1.0964 3.70107 1.56524 3.23223Z"
fill=""
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.6664 2.39884C16.4185 2.39884 16.1809 2.49729 16.0056 2.67253L8.25216 10.426L7.81167 12.188L9.57365 11.7475L17.3271 3.99402C17.5023 3.81878 17.6008 3.5811 17.6008 3.33328C17.6008 3.08545 17.5023 2.84777 17.3271 2.67253C17.1519 2.49729 16.9142 2.39884 16.6664 2.39884ZM14.8271 1.49402C15.3149 1.00622 15.9765 0.732178 16.6664 0.732178C17.3562 0.732178 18.0178 1.00622 18.5056 1.49402C18.9934 1.98182 19.2675 2.64342 19.2675 3.33328C19.2675 4.02313 18.9934 4.68473 18.5056 5.17253L10.5889 13.0892C10.4821 13.196 10.3483 13.2718 10.2018 13.3084L6.86847 14.1417C6.58449 14.2127 6.28409 14.1295 6.0771 13.9225C5.87012 13.7156 5.78691 13.4151 5.85791 13.1312L6.69124 9.79783C6.72787 9.65131 6.80364 9.51749 6.91044 9.41069L14.8271 1.49402Z"
fill=""
fillRule="evenodd"
clipRule="evenodd"
d="M16.6664 2.39884C16.4185 2.39884 16.1809 2.49729 16.0056 2.67253L8.25216 10.426L7.81167 12.188L9.57365 11.7475L17.3271 3.99402C17.5023 3.81878 17.6008 3.5811 17.6008 3.33328C17.6008 3.08545 17.5023 2.84777 17.3271 2.67253C17.1519 2.49729 16.9142 2.39884 16.6664 2.39884ZM14.8271 1.49402C15.3149 1.00622 15.9765 0.732178 16.6664 0.732178C17.3562 0.732178 18.0178 1.00622 18.5056 1.49402C18.9934 1.98182 19.2675 2.64342 19.2675 3.33328C19.2675 4.02313 18.9934 4.68473 18.5056 5.17253L10.5889 13.0892C10.4821 13.196 10.3483 13.2718 10.2018 13.3084L6.86847 14.1417C6.58449 14.2127 6.28409 14.1295 6.0771 13.9225C5.87012 13.7156 5.78691 13.4151 5.85791 13.1312L6.69124 9.79783C6.72787 9.65131 6.80364 9.51749 6.91044 9.41069L14.8271 1.49402Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_88_10224">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
<textarea
className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="bio"
id="bio"
rows={6}
placeholder="Write your bio here"
defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris tempus ut. Donec fermentum blandit aliquet."
></textarea>
</div>
</div>
<textarea
className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="bio"
id="bio"
rows={ 6 }
placeholder="Write your bio here"
defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris tempus ut. Donec fermentum blandit aliquet."
></textarea>
</div>
</div>
<div className="flex justify-end gap-4.5">
<button
className="flex justify-center rounded border border-stroke py-2 px-6 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white"
type="submit"
>
Cancel
</button>
<button
className="flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:bg-opacity-90"
type="submit"
>
Save
</button>
</div>
</form>
</div>
</div>
</div>
<div className="col-span-5 xl:col-span-2">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Your Photo
</h3>
</div>
<div className="p-7">
<form action="#">
<div className="mb-4 flex items-center gap-3">
<div className="h-14 w-14 rounded-full">
<img src={userThree} alt="User" />
<div className="flex justify-end gap-4.5">
<button
className="flex justify-center rounded border border-stroke py-2 px-6 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white"
type="submit"
>
Cancel
</button>
<button
className="flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:bg-opacity-90"
type="submit"
>
Save
</button>
</div>
</form>
</div>
</div>
</div>
<div>
<div className="col-span-5 xl:col-span-2">
<div
className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Your Photo
</h3>
</div>
<div className="p-7">
<form action="#">
<div className="mb-4 flex items-center gap-3">
<div className="h-14 w-14 rounded-full">
<img src={ userThree } alt="User"/>
</div>
<div>
<span className="mb-1.5 text-black dark:text-white">
Edit your photo
</span>
<span className="flex gap-2.5">
<span className="flex gap-2.5">
<button className="text-sm hover:text-primary">
Delete
</button>
@ -231,78 +234,79 @@ const Settings = () => {
Update
</button>
</span>
</div>
</div>
</div>
</div>
<div
id="FileUpload"
className="relative mb-5.5 block w-full cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray py-4 px-4 dark:bg-meta-4 sm:py-7.5"
>
<input
type="file"
accept="image/*"
className="absolute inset-0 z-50 m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none"
/>
<div className="flex flex-col items-center justify-center space-y-3">
<span className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark">
<div
id="FileUpload"
className="relative mb-5.5 block w-full cursor-pointer appearance-none rounded border border-dashed border-primary bg-gray py-4 px-4 dark:bg-meta-4 sm:py-7.5"
>
<input
type="file"
accept="image/*"
className="absolute inset-0 z-50 m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none"
/>
<div className="flex flex-col items-center justify-center space-y-3">
<span
className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.99967 9.33337C2.36786 9.33337 2.66634 9.63185 2.66634 10V12.6667C2.66634 12.8435 2.73658 13.0131 2.8616 13.1381C2.98663 13.2631 3.1562 13.3334 3.33301 13.3334H12.6663C12.8431 13.3334 13.0127 13.2631 13.1377 13.1381C13.2628 13.0131 13.333 12.8435 13.333 12.6667V10C13.333 9.63185 13.6315 9.33337 13.9997 9.33337C14.3679 9.33337 14.6663 9.63185 14.6663 10V12.6667C14.6663 13.1971 14.4556 13.7058 14.0806 14.0809C13.7055 14.456 13.1968 14.6667 12.6663 14.6667H3.33301C2.80257 14.6667 2.29387 14.456 1.91879 14.0809C1.54372 13.7058 1.33301 13.1971 1.33301 12.6667V10C1.33301 9.63185 1.63148 9.33337 1.99967 9.33337Z"
fill="#3C50E0"
fillRule="evenodd"
clipRule="evenodd"
d="M1.99967 9.33337C2.36786 9.33337 2.66634 9.63185 2.66634 10V12.6667C2.66634 12.8435 2.73658 13.0131 2.8616 13.1381C2.98663 13.2631 3.1562 13.3334 3.33301 13.3334H12.6663C12.8431 13.3334 13.0127 13.2631 13.1377 13.1381C13.2628 13.0131 13.333 12.8435 13.333 12.6667V10C13.333 9.63185 13.6315 9.33337 13.9997 9.33337C14.3679 9.33337 14.6663 9.63185 14.6663 10V12.6667C14.6663 13.1971 14.4556 13.7058 14.0806 14.0809C13.7055 14.456 13.1968 14.6667 12.6663 14.6667H3.33301C2.80257 14.6667 2.29387 14.456 1.91879 14.0809C1.54372 13.7058 1.33301 13.1971 1.33301 12.6667V10C1.33301 9.63185 1.63148 9.33337 1.99967 9.33337Z"
fill="#3C50E0"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.5286 1.52864C7.78894 1.26829 8.21106 1.26829 8.4714 1.52864L11.8047 4.86197C12.0651 5.12232 12.0651 5.54443 11.8047 5.80478C11.5444 6.06513 11.1223 6.06513 10.8619 5.80478L8 2.94285L5.13807 5.80478C4.87772 6.06513 4.45561 6.06513 4.19526 5.80478C3.93491 5.54443 3.93491 5.12232 4.19526 4.86197L7.5286 1.52864Z"
fill="#3C50E0"
fillRule="evenodd"
clipRule="evenodd"
d="M7.5286 1.52864C7.78894 1.26829 8.21106 1.26829 8.4714 1.52864L11.8047 4.86197C12.0651 5.12232 12.0651 5.54443 11.8047 5.80478C11.5444 6.06513 11.1223 6.06513 10.8619 5.80478L8 2.94285L5.13807 5.80478C4.87772 6.06513 4.45561 6.06513 4.19526 5.80478C3.93491 5.54443 3.93491 5.12232 4.19526 4.86197L7.5286 1.52864Z"
fill="#3C50E0"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99967 1.33337C8.36786 1.33337 8.66634 1.63185 8.66634 2.00004V10C8.66634 10.3682 8.36786 10.6667 7.99967 10.6667C7.63148 10.6667 7.33301 10.3682 7.33301 10V2.00004C7.33301 1.63185 7.63148 1.33337 7.99967 1.33337Z"
fill="#3C50E0"
fillRule="evenodd"
clipRule="evenodd"
d="M7.99967 1.33337C8.36786 1.33337 8.66634 1.63185 8.66634 2.00004V10C8.66634 10.3682 8.36786 10.6667 7.99967 10.6667C7.63148 10.6667 7.33301 10.3682 7.33301 10V2.00004C7.33301 1.63185 7.63148 1.33337 7.99967 1.33337Z"
fill="#3C50E0"
/>
</svg>
</span>
<p>
<span className="text-primary">Click to upload</span> or
drag and drop
</p>
<p className="mt-1.5">SVG, PNG, JPG or GIF</p>
<p>(max, 800 X 800px)</p>
</div>
</div>
<p>
<span className="text-primary">Click to upload</span> or
drag and drop
</p>
<p className="mt-1.5">SVG, PNG, JPG or GIF</p>
<p>(max, 800 X 800px)</p>
</div>
</div>
<div className="flex justify-end gap-4.5">
<button
className="flex justify-center rounded border border-stroke py-2 px-6 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white"
type="submit"
>
Cancel
</button>
<button
className="flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:bg-opacity-90"
type="submit"
>
Save
</button>
</div>
</form>
</div>
<div className="flex justify-end gap-4.5">
<button
className="flex justify-center rounded border border-stroke py-2 px-6 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white"
type="submit"
>
Cancel
</button>
<button
className="flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:bg-opacity-90"
type="submit"
>
Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
</>
);
};
export default Settings;

56
packages/frontend/src/old/Switchers/SwitcherFour.tsx
View File

@ -1,33 +1,35 @@
import { useState } from 'react';
import { useState } from "react";
const SwitcherFour = () => {
const [enabled, setEnabled] = useState<boolean>(false);
const SwitcherFour = () =>
{
const [ enabled, setEnabled ] = useState<boolean>(false);
return (
<div>
<label
htmlFor="toggle4"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="toggle4"
className="sr-only"
onChange={() => {
setEnabled(!enabled);
}}
/>
<div className="block h-8 w-14 rounded-full bg-black"></div>
<div
className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
enabled && '!right-1 !translate-x-full'
}`}
></div>
return (
<div>
<label
htmlFor="toggle4"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="toggle4"
className="sr-only"
onChange={ () =>
{
setEnabled(!enabled);
} }
/>
<div className="block h-8 w-14 rounded-full bg-black"></div>
<div
className={ `absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
enabled && "!right-1 !translate-x-full"
}` }
></div>
</div>
</label>
</div>
</label>
</div>
);
);
};
export default SwitcherFour;

56
packages/frontend/src/old/Switchers/SwitcherOne.tsx
View File

@ -1,33 +1,35 @@
import { useState } from 'react';
import { useState } from "react";
const SwitcherOne = () => {
const [enabled, setEnabled] = useState<boolean>(false);
const SwitcherOne = () =>
{
const [ enabled, setEnabled ] = useState<boolean>(false);
return (
<div>
<label
htmlFor="toggle1"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="toggle1"
className="sr-only"
onChange={() => {
setEnabled(!enabled);
}}
/>
<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
<div
className={`absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition ${
enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white'
}`}
></div>
return (
<div>
<label
htmlFor="toggle1"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="toggle1"
className="sr-only"
onChange={ () =>
{
setEnabled(!enabled);
} }
/>
<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
<div
className={ `absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition ${
enabled && "!right-1 !translate-x-full !bg-primary dark:!bg-white"
}` }
></div>
</div>
</label>
</div>
</label>
</div>
);
);
};
export default SwitcherOne;

98
packages/frontend/src/old/Switchers/SwitcherThree.tsx
View File

@ -1,66 +1,68 @@
import { useState } from 'react';
import { useState } from "react";
const SwitcherThree = () => {
const [enabled, setEnabled] = useState(false);
const SwitcherThree = () =>
{
const [ enabled, setEnabled ] = useState(false);
return (
<div>
<label
htmlFor="toggle3"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="toggle3"
className="sr-only"
onChange={() => {
setEnabled(!enabled);
}}
/>
<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
<div
className={`dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white'
}`}
>
<span className={`hidden ${enabled && '!block'}`}>
return (
<div>
<label
htmlFor="toggle3"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
type="checkbox"
id="toggle3"
className="sr-only"
onChange={ () =>
{
setEnabled(!enabled);
} }
/>
<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
<div
className={ `dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
enabled && "!right-1 !translate-x-full !bg-primary dark:!bg-white"
}` }
>
<span className={ `hidden ${ enabled && "!block" }` }>
<svg
className="fill-white dark:fill-black"
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-white dark:fill-black"
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill=""
stroke=""
strokeWidth="0.4"
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill=""
stroke=""
strokeWidth="0.4"
></path>
</svg>
</span>
<span className={`${enabled && 'hidden'}`}>
<span className={ `${ enabled && "hidden" }` }>
<svg
className="h-4 w-4 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</span>
</div>
</div>
</div>
</label>
</div>
</label>
</div>
);
);
};
export default SwitcherThree;

56
packages/frontend/src/old/Switchers/SwitcherTwo.tsx
View File

@ -1,33 +1,35 @@
import { useState } from 'react';
import { useState } from "react";
const SwitcherTwo = () => {
const [enabled, setEnabled] = useState(false);
const SwitcherTwo = () =>
{
const [ enabled, setEnabled ] = useState(false);
return (
<div x-data="{ switcherToggle: false }">
<label
htmlFor="toggle2"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
id="toggle2"
type="checkbox"
className="sr-only"
onChange={() => {
setEnabled(!enabled);
}}
/>
<div className="h-5 w-14 rounded-full bg-meta-9 shadow-inner dark:bg-[#5A616B]"></div>
<div
className={`dot absolute left-0 -top-1 h-7 w-7 rounded-full bg-white shadow-switch-1 transition ${
enabled && '!right-0 !translate-x-full !bg-primary dark:!bg-white'
}`}
></div>
return (
<div x-data="{ switcherToggle: false }">
<label
htmlFor="toggle2"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<input
id="toggle2"
type="checkbox"
className="sr-only"
onChange={ () =>
{
setEnabled(!enabled);
} }
/>
<div className="h-5 w-14 rounded-full bg-meta-9 shadow-inner dark:bg-[#5A616B]"></div>
<div
className={ `dot absolute left-0 -top-1 h-7 w-7 rounded-full bg-white shadow-switch-1 transition ${
enabled && "!right-0 !translate-x-full !bg-primary dark:!bg-white"
}` }
></div>
</div>
</label>
</div>
</label>
</div>
);
);
};
export default SwitcherTwo;

104
packages/frontend/src/old/TableSettings.tsx
View File

@ -1,68 +1,70 @@
import React from "react";
import { BsFillTrashFill, BsFillPencilFill } from "react-icons/bs";
import dataJSON from '../../public/data.json';
import dataJSON from "../../public/data.json";
export const Table = ({ rows, deleteRow, editRow }) => {
const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
return (
<div className="max-w-full overflow-x-auto table-wrapper">
<table className="table">
<thead>
<tr className="bg-gray-2 text-left dark:bg-meta-4">
<th className="min-w-[220px] py-4 px-4 font-medium text-black dark:text-white xl:pl-11">Bond</th>
<th className="min-w-[150px] py-4 px-4 font-medium text-black dark:text-white">Paramter</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Criterion</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Value to give alert</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Alert type</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Actions</th>
</tr>
</thead>
<tbody>
{rows.map((row:any, idx:number) => {
export const Table = ({ rows, deleteRow, editRow }) =>
{
const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_")));
return (
<tr key={idx} className="content-center">
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{row.id}</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span className={`label label-${row.para}`}>
{row.para}
return (
<div className="max-w-full overflow-x-auto table-wrapper">
<table className="table">
<thead>
<tr className="bg-gray-2 text-left dark:bg-meta-4">
<th className="min-w-[220px] py-4 px-4 font-medium text-black dark:text-white xl:pl-11">Bond</th>
<th className="min-w-[150px] py-4 px-4 font-medium text-black dark:text-white">Paramter</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Criterion</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Value to give alert</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Alert type</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">Actions</th>
</tr>
</thead>
<tbody>
{ rows.map((row: any, idx: number) =>
{
return (
<tr key={ idx } className="content-center">
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{ row.id }</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span className={ `label label-${ row.para }` }>
{ row.para }
</span>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span>
{row.criterion==0?"goes down by":row.criterion==1?"goes up by":row.criterion==2?"is smaller than":row.criterion==3?"is greater than":"is equal to"}
{ row.criterion == 0 ? "goes down by" : row.criterion == 1 ? "goes up by" : row.criterion == 2 ? "is smaller than" : row.criterion == 3 ? "is greater than" : "is equal to" }
</span>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{row.value}</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{ row.value }</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span>
{row.type==0?'Info':row.type==1?"Warning":"Alert"}
{ row.type == 0 ? "Info" : row.type == 1 ? "Warning" : "Alert" }
</span>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span className="actions flex grid-cols-2 gap-4">
<BsFillTrashFill
className="delete-btn cursor-pointer"
onClick={() => deleteRow(idx)} />
className="delete-btn cursor-pointer"
onClick={ () => deleteRow(idx) }/>
<BsFillPencilFill
className="edit-btn cursor-pointer"
onClick={() => editRow(idx)} />
className="edit-btn cursor-pointer"
onClick={ () => editRow(idx) }/>
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</td>
</tr>
);
}) }
</tbody>
</table>
</div>
);
);
};

20
packages/frontend/src/old/Tables.tsx
View File

@ -1,18 +1,18 @@
// import TableOne from '../components/Tables/TableOne';
// import TableThree from '../components/Tables/TableThree';
// import TableTwo from '../components/Tables/TableTwo';
const Tables = () => {
return (
<>
<div className="flex flex-col gap-10">
{/* <TableOne />
const Tables = () =>
{
return (
<>
<div className="flex flex-col gap-10">
{/* <TableOne />
<TableTwo />
<TableThree /> */}
</div>
</>
);
<TableThree /> */ }
</div>
</>
);
};
export default Tables;

302
packages/frontend/src/old/Tables/TableThree.tsx
View File

@ -1,157 +1,159 @@
import { Package } from '../package';
import { Package } from "../package";
const packageData: Package[] = [
{
name: 'Free package',
price: 0.0,
invoiceDate: `Jan 13,2023`,
status: 'Paid',
},
{
name: 'Standard Package',
price: 59.0,
invoiceDate: `Jan 13,2023`,
status: 'Paid',
},
{
name: 'Business Package',
price: 99.0,
invoiceDate: `Jan 13,2023`,
status: 'Unpaid',
},
{
name: 'Standard Package',
price: 59.0,
invoiceDate: `Jan 13,2023`,
status: 'Pending',
},
{
name: "Free package",
price: 0.0,
invoiceDate: `Jan 13,2023`,
status: "Paid",
},
{
name: "Standard Package",
price: 59.0,
invoiceDate: `Jan 13,2023`,
status: "Paid",
},
{
name: "Business Package",
price: 99.0,
invoiceDate: `Jan 13,2023`,
status: "Unpaid",
},
{
name: "Standard Package",
price: 59.0,
invoiceDate: `Jan 13,2023`,
status: "Pending",
},
];
const TableThree = () => {
return (
<div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="max-w-full overflow-x-auto">
<table className="w-full table-auto">
<thead>
<tr className="bg-gray-2 text-left dark:bg-meta-4">
<th className="min-w-[220px] py-4 px-4 font-medium text-black dark:text-white xl:pl-11">
Package
</th>
<th className="min-w-[150px] py-4 px-4 font-medium text-black dark:text-white">
Invoice date
</th>
<th className="min-w-[120px] py-4 px-4 font-medium text-black dark:text-white">
Status
</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">
Actions
</th>
</tr>
</thead>
<tbody>
{packageData.map((packageItem, key) => (
<tr key={key}>
<td className="border-b border-[#eee] py-5 px-4 pl-9 dark:border-strokedark xl:pl-11">
<h5 className="font-medium text-black dark:text-white">
{packageItem.name}
</h5>
<p className="text-sm">${packageItem.price}</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<p className="text-black dark:text-white">
{packageItem.invoiceDate}
</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<p
className={`inline-flex rounded-full bg-opacity-10 py-1 px-3 text-sm font-medium ${
packageItem.status === 'Paid'
? 'bg-success text-success'
: packageItem.status === 'Unpaid'
? 'bg-danger text-danger'
: 'bg-warning text-warning'
}`}
>
{packageItem.status}
</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<div className="flex items-center space-x-3.5">
<button className="hover:text-primary">
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.99981 14.8219C3.43106 14.8219 0.674805 9.50624 0.562305 9.28124C0.47793 9.11249 0.47793 8.88749 0.562305 8.71874C0.674805 8.49374 3.43106 3.20624 8.99981 3.20624C14.5686 3.20624 17.3248 8.49374 17.4373 8.71874C17.5217 8.88749 17.5217 9.11249 17.4373 9.28124C17.3248 9.50624 14.5686 14.8219 8.99981 14.8219ZM1.85605 8.99999C2.4748 10.0406 4.89356 13.5562 8.99981 13.5562C13.1061 13.5562 15.5248 10.0406 16.1436 8.99999C15.5248 7.95936 13.1061 4.44374 8.99981 4.44374C4.89356 4.44374 2.4748 7.95936 1.85605 8.99999Z"
fill=""
/>
<path
d="M9 11.3906C7.67812 11.3906 6.60938 10.3219 6.60938 9C6.60938 7.67813 7.67812 6.60938 9 6.60938C10.3219 6.60938 11.3906 7.67813 11.3906 9C11.3906 10.3219 10.3219 11.3906 9 11.3906ZM9 7.875C8.38125 7.875 7.875 8.38125 7.875 9C7.875 9.61875 8.38125 10.125 9 10.125C9.61875 10.125 10.125 9.61875 10.125 9C10.125 8.38125 9.61875 7.875 9 7.875Z"
fill=""
/>
</svg>
</button>
<button className="hover:text-primary">
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.7535 2.47502H11.5879V1.9969C11.5879 1.15315 10.9129 0.478149 10.0691 0.478149H7.90352C7.05977 0.478149 6.38477 1.15315 6.38477 1.9969V2.47502H4.21914C3.40352 2.47502 2.72852 3.15002 2.72852 3.96565V4.8094C2.72852 5.42815 3.09414 5.9344 3.62852 6.1594L4.07852 15.4688C4.13477 16.6219 5.09102 17.5219 6.24414 17.5219H11.7004C12.8535 17.5219 13.8098 16.6219 13.866 15.4688L14.3441 6.13127C14.8785 5.90627 15.2441 5.3719 15.2441 4.78127V3.93752C15.2441 3.15002 14.5691 2.47502 13.7535 2.47502ZM7.67852 1.9969C7.67852 1.85627 7.79102 1.74377 7.93164 1.74377H10.0973C10.2379 1.74377 10.3504 1.85627 10.3504 1.9969V2.47502H7.70664V1.9969H7.67852ZM4.02227 3.96565C4.02227 3.85315 4.10664 3.74065 4.24727 3.74065H13.7535C13.866 3.74065 13.9785 3.82502 13.9785 3.96565V4.8094C13.9785 4.9219 13.8941 5.0344 13.7535 5.0344H4.24727C4.13477 5.0344 4.02227 4.95002 4.02227 4.8094V3.96565ZM11.7285 16.2563H6.27227C5.79414 16.2563 5.40039 15.8906 5.37227 15.3844L4.95039 6.2719H13.0785L12.6566 15.3844C12.6004 15.8625 12.2066 16.2563 11.7285 16.2563Z"
fill=""
/>
<path
d="M9.00039 9.11255C8.66289 9.11255 8.35352 9.3938 8.35352 9.75942V13.3313C8.35352 13.6688 8.63477 13.9782 9.00039 13.9782C9.33789 13.9782 9.64727 13.6969 9.64727 13.3313V9.75942C9.64727 9.3938 9.33789 9.11255 9.00039 9.11255Z"
fill=""
/>
<path
d="M11.2502 9.67504C10.8846 9.64692 10.6033 9.90004 10.5752 10.2657L10.4064 12.7407C10.3783 13.0782 10.6314 13.3875 10.9971 13.4157C11.0252 13.4157 11.0252 13.4157 11.0533 13.4157C11.3908 13.4157 11.6721 13.1625 11.6721 12.825L11.8408 10.35C11.8408 9.98442 11.5877 9.70317 11.2502 9.67504Z"
fill=""
/>
<path
d="M6.72245 9.67504C6.38495 9.70317 6.1037 10.0125 6.13182 10.35L6.3287 12.825C6.35683 13.1625 6.63808 13.4157 6.94745 13.4157C6.97558 13.4157 6.97558 13.4157 7.0037 13.4157C7.3412 13.3875 7.62245 13.0782 7.59433 12.7407L7.39745 10.2657C7.39745 9.90004 7.08808 9.64692 6.72245 9.67504Z"
fill=""
/>
</svg>
</button>
<button className="hover:text-primary">
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.8754 11.6719C16.5379 11.6719 16.2285 11.9531 16.2285 12.3187V14.8219C16.2285 15.075 16.0316 15.2719 15.7785 15.2719H2.22227C1.96914 15.2719 1.77227 15.075 1.77227 14.8219V12.3187C1.77227 11.9812 1.49102 11.6719 1.12539 11.6719C0.759766 11.6719 0.478516 11.9531 0.478516 12.3187V14.8219C0.478516 15.7781 1.23789 16.5375 2.19414 16.5375H15.7785C16.7348 16.5375 17.4941 15.7781 17.4941 14.8219V12.3187C17.5223 11.9531 17.2129 11.6719 16.8754 11.6719Z"
fill=""
/>
<path
d="M8.55074 12.3469C8.66324 12.4594 8.83199 12.5156 9.00074 12.5156C9.16949 12.5156 9.31012 12.4594 9.45074 12.3469L13.4726 8.43752C13.7257 8.1844 13.7257 7.79065 13.5007 7.53752C13.2476 7.2844 12.8539 7.2844 12.6007 7.5094L9.64762 10.4063V2.1094C9.64762 1.7719 9.36637 1.46252 9.00074 1.46252C8.66324 1.46252 8.35387 1.74377 8.35387 2.1094V10.4063L5.40074 7.53752C5.14762 7.2844 4.75387 7.31252 4.50074 7.53752C4.24762 7.79065 4.27574 8.1844 4.50074 8.43752L8.55074 12.3469Z"
fill=""
/>
</svg>
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
const TableThree = () =>
{
return (
<div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="max-w-full overflow-x-auto">
<table className="w-full table-auto">
<thead>
<tr className="bg-gray-2 text-left dark:bg-meta-4">
<th className="min-w-[220px] py-4 px-4 font-medium text-black dark:text-white xl:pl-11">
Package
</th>
<th className="min-w-[150px] py-4 px-4 font-medium text-black dark:text-white">
Invoice date
</th>
<th className="min-w-[120px] py-4 px-4 font-medium text-black dark:text-white">
Status
</th>
<th className="py-4 px-4 font-medium text-black dark:text-white">
Actions
</th>
</tr>
</thead>
<tbody>
{ packageData.map((packageItem, key) => (
<tr key={ key }>
<td className="border-b border-[#eee] py-5 px-4 pl-9 dark:border-strokedark xl:pl-11">
<h5 className="font-medium text-black dark:text-white">
{ packageItem.name }
</h5>
<p className="text-sm">${ packageItem.price }</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<p className="text-black dark:text-white">
{ packageItem.invoiceDate }
</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<p
className={ `inline-flex rounded-full bg-opacity-10 py-1 px-3 text-sm font-medium ${
packageItem.status === "Paid"
? "bg-success text-success"
: packageItem.status === "Unpaid"
? "bg-danger text-danger"
: "bg-warning text-warning"
}` }
>
{ packageItem.status }
</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<div className="flex items-center space-x-3.5">
<button className="hover:text-primary">
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.99981 14.8219C3.43106 14.8219 0.674805 9.50624 0.562305 9.28124C0.47793 9.11249 0.47793 8.88749 0.562305 8.71874C0.674805 8.49374 3.43106 3.20624 8.99981 3.20624C14.5686 3.20624 17.3248 8.49374 17.4373 8.71874C17.5217 8.88749 17.5217 9.11249 17.4373 9.28124C17.3248 9.50624 14.5686 14.8219 8.99981 14.8219ZM1.85605 8.99999C2.4748 10.0406 4.89356 13.5562 8.99981 13.5562C13.1061 13.5562 15.5248 10.0406 16.1436 8.99999C15.5248 7.95936 13.1061 4.44374 8.99981 4.44374C4.89356 4.44374 2.4748 7.95936 1.85605 8.99999Z"
fill=""
/>
<path
d="M9 11.3906C7.67812 11.3906 6.60938 10.3219 6.60938 9C6.60938 7.67813 7.67812 6.60938 9 6.60938C10.3219 6.60938 11.3906 7.67813 11.3906 9C11.3906 10.3219 10.3219 11.3906 9 11.3906ZM9 7.875C8.38125 7.875 7.875 8.38125 7.875 9C7.875 9.61875 8.38125 10.125 9 10.125C9.61875 10.125 10.125 9.61875 10.125 9C10.125 8.38125 9.61875 7.875 9 7.875Z"
fill=""
/>
</svg>
</button>
<button className="hover:text-primary">
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.7535 2.47502H11.5879V1.9969C11.5879 1.15315 10.9129 0.478149 10.0691 0.478149H7.90352C7.05977 0.478149 6.38477 1.15315 6.38477 1.9969V2.47502H4.21914C3.40352 2.47502 2.72852 3.15002 2.72852 3.96565V4.8094C2.72852 5.42815 3.09414 5.9344 3.62852 6.1594L4.07852 15.4688C4.13477 16.6219 5.09102 17.5219 6.24414 17.5219H11.7004C12.8535 17.5219 13.8098 16.6219 13.866 15.4688L14.3441 6.13127C14.8785 5.90627 15.2441 5.3719 15.2441 4.78127V3.93752C15.2441 3.15002 14.5691 2.47502 13.7535 2.47502ZM7.67852 1.9969C7.67852 1.85627 7.79102 1.74377 7.93164 1.74377H10.0973C10.2379 1.74377 10.3504 1.85627 10.3504 1.9969V2.47502H7.70664V1.9969H7.67852ZM4.02227 3.96565C4.02227 3.85315 4.10664 3.74065 4.24727 3.74065H13.7535C13.866 3.74065 13.9785 3.82502 13.9785 3.96565V4.8094C13.9785 4.9219 13.8941 5.0344 13.7535 5.0344H4.24727C4.13477 5.0344 4.02227 4.95002 4.02227 4.8094V3.96565ZM11.7285 16.2563H6.27227C5.79414 16.2563 5.40039 15.8906 5.37227 15.3844L4.95039 6.2719H13.0785L12.6566 15.3844C12.6004 15.8625 12.2066 16.2563 11.7285 16.2563Z"
fill=""
/>
<path
d="M9.00039 9.11255C8.66289 9.11255 8.35352 9.3938 8.35352 9.75942V13.3313C8.35352 13.6688 8.63477 13.9782 9.00039 13.9782C9.33789 13.9782 9.64727 13.6969 9.64727 13.3313V9.75942C9.64727 9.3938 9.33789 9.11255 9.00039 9.11255Z"
fill=""
/>
<path
d="M11.2502 9.67504C10.8846 9.64692 10.6033 9.90004 10.5752 10.2657L10.4064 12.7407C10.3783 13.0782 10.6314 13.3875 10.9971 13.4157C11.0252 13.4157 11.0252 13.4157 11.0533 13.4157C11.3908 13.4157 11.6721 13.1625 11.6721 12.825L11.8408 10.35C11.8408 9.98442 11.5877 9.70317 11.2502 9.67504Z"
fill=""
/>
<path
d="M6.72245 9.67504C6.38495 9.70317 6.1037 10.0125 6.13182 10.35L6.3287 12.825C6.35683 13.1625 6.63808 13.4157 6.94745 13.4157C6.97558 13.4157 6.97558 13.4157 7.0037 13.4157C7.3412 13.3875 7.62245 13.0782 7.59433 12.7407L7.39745 10.2657C7.39745 9.90004 7.08808 9.64692 6.72245 9.67504Z"
fill=""
/>
</svg>
</button>
<button className="hover:text-primary">
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.8754 11.6719C16.5379 11.6719 16.2285 11.9531 16.2285 12.3187V14.8219C16.2285 15.075 16.0316 15.2719 15.7785 15.2719H2.22227C1.96914 15.2719 1.77227 15.075 1.77227 14.8219V12.3187C1.77227 11.9812 1.49102 11.6719 1.12539 11.6719C0.759766 11.6719 0.478516 11.9531 0.478516 12.3187V14.8219C0.478516 15.7781 1.23789 16.5375 2.19414 16.5375H15.7785C16.7348 16.5375 17.4941 15.7781 17.4941 14.8219V12.3187C17.5223 11.9531 17.2129 11.6719 16.8754 11.6719Z"
fill=""
/>
<path
d="M8.55074 12.3469C8.66324 12.4594 8.83199 12.5156 9.00074 12.5156C9.16949 12.5156 9.31012 12.4594 9.45074 12.3469L13.4726 8.43752C13.7257 8.1844 13.7257 7.79065 13.5007 7.53752C13.2476 7.2844 12.8539 7.2844 12.6007 7.5094L9.64762 10.4063V2.1094C9.64762 1.7719 9.36637 1.46252 9.00074 1.46252C8.66324 1.46252 8.35387 1.74377 8.35387 2.1094V10.4063L5.40074 7.53752C5.14762 7.2844 4.75387 7.31252 4.50074 7.53752C4.24762 7.79065 4.27574 8.1844 4.50074 8.43752L8.55074 12.3469Z"
fill=""
/>
</svg>
</button>
</div>
</td>
</tr>
)) }
</tbody>
</table>
</div>
</div>
);
};
export default TableThree;

196
packages/frontend/src/old/Tables/TableTwo.tsx
View File

@ -1,106 +1,108 @@
import { Product } from '../product';
import ProductOne from '../../images/product/product-01.png';
import ProductTwo from '../../images/product/product-02.png';
import ProductThree from '../../images/product/product-03.png';
import ProductFour from '../../images/product/product-04.png';
import { Product } from "../product";
import ProductOne from "../../images/product/product-01.png";
import ProductTwo from "../../images/product/product-02.png";
import ProductThree from "../../images/product/product-03.png";
import ProductFour from "../../images/product/product-04.png";
const productData: Product[] = [
{
image: ProductOne,
name: 'Apple Watch Series 7',
category: 'Electronics',
price: 296,
sold: 22,
profit: 45,
},
{
image: ProductTwo,
name: 'Macbook Pro M1',
category: 'Electronics',
price: 546,
sold: 12,
profit: 125,
},
{
image: ProductThree,
name: 'Dell Inspiron 15',
category: 'Electronics',
price: 443,
sold: 64,
profit: 247,
},
{
image: ProductFour,
name: 'HP Probook 450',
category: 'Electronics',
price: 499,
sold: 72,
profit: 103,
},
{
image: ProductOne,
name: "Apple Watch Series 7",
category: "Electronics",
price: 296,
sold: 22,
profit: 45,
},
{
image: ProductTwo,
name: "Macbook Pro M1",
category: "Electronics",
price: 546,
sold: 12,
profit: 125,
},
{
image: ProductThree,
name: "Dell Inspiron 15",
category: "Electronics",
price: 443,
sold: 64,
profit: 247,
},
{
image: ProductFour,
name: "HP Probook 450",
category: "Electronics",
price: 499,
sold: 72,
profit: 103,
},
];
const TableTwo = () => {
return (
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="py-6 px-4 md:px-6 xl:px-7.5">
<h4 className="text-xl font-semibold text-black dark:text-white">
Top Products
</h4>
</div>
<div className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
<div className="col-span-3 flex items-center">
<p className="font-medium">Product Name</p>
</div>
<div className="col-span-2 hidden items-center sm:flex">
<p className="font-medium">Category</p>
</div>
<div className="col-span-1 flex items-center">
<p className="font-medium">Price</p>
</div>
<div className="col-span-1 flex items-center">
<p className="font-medium">Sold</p>
</div>
<div className="col-span-1 flex items-center">
<p className="font-medium">Profit</p>
</div>
</div>
{productData.map((product, key) => (
<div
className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5"
key={key}
>
<div className="col-span-3 flex items-center">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
<div className="h-12.5 w-15 rounded-md">
<img src={product.image} alt="Product" />
</div>
<p className="text-sm text-black dark:text-white">
{product.name}
</p>
const TableTwo = () =>
{
return (
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="py-6 px-4 md:px-6 xl:px-7.5">
<h4 className="text-xl font-semibold text-black dark:text-white">
Top Products
</h4>
</div>
</div>
<div className="col-span-2 hidden items-center sm:flex">
<p className="text-sm text-black dark:text-white">
{product.category}
</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-black dark:text-white">
${product.price}
</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-black dark:text-white">{product.sold}</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-meta-3">${product.profit}</p>
</div>
<div
className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
<div className="col-span-3 flex items-center">
<p className="font-medium">Product Name</p>
</div>
<div className="col-span-2 hidden items-center sm:flex">
<p className="font-medium">Category</p>
</div>
<div className="col-span-1 flex items-center">
<p className="font-medium">Price</p>
</div>
<div className="col-span-1 flex items-center">
<p className="font-medium">Sold</p>
</div>
<div className="col-span-1 flex items-center">
<p className="font-medium">Profit</p>
</div>
</div>
{ productData.map((product, key) => (
<div
className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5"
key={ key }
>
<div className="col-span-3 flex items-center">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
<div className="h-12.5 w-15 rounded-md">
<img src={ product.image } alt="Product"/>
</div>
<p className="text-sm text-black dark:text-white">
{ product.name }
</p>
</div>
</div>
<div className="col-span-2 hidden items-center sm:flex">
<p className="text-sm text-black dark:text-white">
{ product.category }
</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-black dark:text-white">
${ product.price }
</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-black dark:text-white">{ product.sold }</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-meta-3">${ product.profit }</p>
</div>
</div>
)) }
</div>
))}
</div>
);
);
};
export default TableTwo;

188
packages/frontend/src/old/UiElements/Alerts.tsx
View File

@ -1,94 +1,102 @@
const Alerts = () => {
return (
<>
<div className="rounded-sm border border-stroke bg-white p-4 shadow-default dark:border-strokedark dark:bg-boxdark md:p-6 xl:p-9">
<div className="flex flex-col gap-7.5">
{/* <!-- Alerts Item --> */}
<div className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
<svg
width="19"
height="16"
viewBox="0 0 19 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z"
fill="#FBBF24"
></path>
</svg>
const Alerts = () =>
{
return (
<>
<div
className="rounded-sm border border-stroke bg-white p-4 shadow-default dark:border-strokedark dark:bg-boxdark md:p-6 xl:p-9">
<div className="flex flex-col gap-7.5">
{/* <!-- Alerts Item --> */ }
<div
className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div
className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
<svg
width="19"
height="16"
viewBox="0 0 19 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z"
fill="#FBBF24"
></path>
</svg>
</div>
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-[#9D5425]">
Attention needed
</h5>
<p className="leading-relaxed text-[#D0915C]">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when
</p>
</div>
</div>
{/* <!-- Alerts Item --> */ }
<div
className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div
className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
<svg
width="16"
height="12"
viewBox="0 0 16 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z"
fill="white"
stroke="white"
></path>
</svg>
</div>
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
Message Sent Successfully
</h5>
<p className="text-base leading-relaxed text-body">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
{/* <!-- Alerts Item --> */ }
<div
className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div
className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg
width="13"
height="13"
viewBox="0 0 13 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill="#ffffff"
stroke="#ffffff"
></path>
</svg>
</div>
<div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]">
There were 1 errors with your submission
</h5>
<ul>
<li className="leading-relaxed text-[#CD5D5D]">
Lorem Ipsum is simply dummy text of the printing
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-[#9D5425]">
Attention needed
</h5>
<p className="leading-relaxed text-[#D0915C]">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when
</p>
</div>
</div>
{/* <!-- Alerts Item --> */}
<div className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
<svg
width="16"
height="12"
viewBox="0 0 16 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z"
fill="white"
stroke="white"
></path>
</svg>
</div>
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
Message Sent Successfully
</h5>
<p className="text-base leading-relaxed text-body">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
{/* <!-- Alerts Item --> */}
<div className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg
width="13"
height="13"
viewBox="0 0 13 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill="#ffffff"
stroke="#ffffff"
></path>
</svg>
</div>
<div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]">
There were 1 errors with your submission
</h5>
<ul>
<li className="leading-relaxed text-[#CD5D5D]">
Lorem Ipsum is simply dummy text of the printing
</li>
</ul>
</div>
</div>
</div>
</div>
</>
);
</>
);
};
export default Alerts;

616
packages/frontend/src/old/UiElements/Buttons.tsx
View File

@ -1,469 +1,471 @@
import { Link } from 'react-router-dom';
import { Link } from "react-router-dom";
const Buttons = () =>
{
return (
<>
{/* <!-- Normal Button Items --> */ }
<div
className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Normal Button
</h3>
</div>
const Buttons = () => {
return (
<>
{/* <!-- Normal Button Items --> */}
<div className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Normal Button
</h3>
</div>
<div className="p-4 md:p-6 xl:p-9">
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-20">
<Link
to="#"
className="inline-flex items-center justify-center bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<div className="p-4 md:p-6 xl:p-9">
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-20">
<Link
to="#"
className="inline-flex items-center justify-center bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-full bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-full bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
</div>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
</div>
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-20">
<Link
to="#"
className="inline-flex items-center justify-center bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-20">
<Link
to="#"
className="inline-flex items-center justify-center bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-full bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-full bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md border border-meta-3 py-4 px-10 text-center font-medium text-meta-3 hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
</div>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md border border-meta-3 py-4 px-10 text-center font-medium text-meta-3 hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
</div>
<div className="flex flex-wrap gap-5 xl:gap-20">
<Link
to="#"
className="inline-flex items-center justify-center bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<div className="flex flex-wrap gap-5 xl:gap-20">
<Link
to="#"
className="inline-flex items-center justify-center bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-full bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-full bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md border border-black py-4 px-10 text-center font-medium text-black hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
</div>
</div>
</div>
<Link
to="#"
className="inline-flex items-center justify-center rounded-md border border-black py-4 px-10 text-center font-medium text-black hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Button
</Link>
</div>
</div>
</div>
{/* <!-- Button With Icon Items --> */ }
<div
className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Button With Icon
</h3>
</div>
{/* <!-- Button With Icon Items --> */}
<div className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Button With Icon
</h3>
</div>
<div className="p-4 md:p-6 xl:p-9">
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-7.5">
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<div className="p-4 md:p-6 xl:p-9">
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-7.5">
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
/>
<path
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
/>
<path
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
/>
<path
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
d="M17.8125 16.6656H2.1875C1.69022 16.6656 1.21331 16.4681 0.861675 16.1164C0.510044 15.7648 0.3125 15.2879 0.3125 14.7906V5.20935C0.3125 4.71207 0.510044 4.23516 0.861675 3.88353C1.21331 3.53189 1.69022 3.33435 2.1875 3.33435H17.8125C18.3098 3.33435 18.7867 3.53189 19.1383 3.88353C19.49 4.23516 19.6875 4.71207 19.6875 5.20935V14.7906C19.6875 15.2879 19.49 15.7648 19.1383 16.1164C18.7867 16.4681 18.3098 16.6656 17.8125 16.6656ZM2.1875 4.58435C2.02174 4.58435 1.86277 4.6502 1.74556 4.76741C1.62835 4.88462 1.5625 5.04359 1.5625 5.20935V14.7906C1.5625 14.9564 1.62835 15.1153 1.74556 15.2325C1.86277 15.3498 2.02174 15.4156 2.1875 15.4156H17.8125C17.9783 15.4156 18.1372 15.3498 18.2544 15.2325C18.3717 15.1153 18.4375 14.9564 18.4375 14.7906V5.20935C18.4375 5.04359 18.3717 4.88462 18.2544 4.76741C18.1372 4.6502 17.9783 4.58435 17.8125 4.58435H2.1875Z"
fill=""
/>
<path
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
d="M9.9996 10.6438C9.63227 10.6437 9.2721 10.5421 8.95898 10.35L0.887102 5.45001C0.744548 5.36381 0.642073 5.22452 0.602222 5.06277C0.58249 4.98268 0.578725 4.89948 0.591144 4.81794C0.603563 4.73639 0.631922 4.65809 0.674602 4.58751C0.717281 4.51692 0.773446 4.45543 0.839888 4.40655C0.906331 4.35767 0.981751 4.32236 1.06184 4.30263C1.22359 4.26277 1.39455 4.28881 1.5371 4.37501L9.60898 9.28126C9.7271 9.35331 9.8628 9.39143 10.0012 9.39143C10.1395 9.39143 10.2752 9.35331 10.3934 9.28126L18.4621 4.37501C18.5323 4.33233 18.6102 4.30389 18.6913 4.29131C18.7725 4.27873 18.8554 4.28227 18.9352 4.30171C19.015 4.32115 19.0901 4.35612 19.1564 4.40462C19.2227 4.45312 19.2788 4.51421 19.3215 4.58438C19.3642 4.65456 19.3926 4.73245 19.4052 4.81362C19.4177 4.89478 19.4142 4.97763 19.3948 5.05743C19.3753 5.13723 19.3404 5.21242 19.2919 5.27871C19.2434 5.34499 19.1823 5.40108 19.1121 5.44376L11.0402 10.35C10.7271 10.5421 10.3669 10.6437 9.9996 10.6438Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
</div>
Button With Icon
</Link>
</div>
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-7.5">
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<div className="mb-7.5 flex flex-wrap gap-5 xl:gap-7.5">
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
/>
<path
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
/>
<path
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
/>
<path
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
/>
<path
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
/>
<path
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
/>
<path
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-md border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
d="M18.0758 0.849976H16.0695C15.819 0.851233 15.5774 0.942521 15.3886 1.10717C15.1999 1.27183 15.0766 1.49887 15.0414 1.74685L14.4789 5.80935H13.3976V3.4031C13.3952 3.1654 13.3002 2.93802 13.1327 2.76935C12.9652 2.60068 12.7384 2.50403 12.5008 2.49998H10.082C10.0553 2.27763 9.94981 2.07221 9.78472 1.92089C9.61964 1.76956 9.40584 1.68233 9.18202 1.67498H6.45389C6.32885 1.67815 6.20571 1.70632 6.09172 1.75782C5.97773 1.80932 5.8752 1.8831 5.79017 1.97484C5.70513 2.06657 5.63932 2.17439 5.59659 2.29195C5.55387 2.40951 5.5351 2.53443 5.54139 2.65935V3.32498H3.15077C2.91396 3.32162 2.68544 3.41207 2.51507 3.57659C2.3447 3.7411 2.24632 3.96632 2.24139 4.2031V5.81248C2.0999 5.81539 1.96078 5.84937 1.83387 5.91201C1.70697 5.97466 1.59538 6.06443 1.50702 6.17498C1.41616 6.29094 1.35267 6.42593 1.32128 6.56986C1.2899 6.7138 1.29143 6.86297 1.32577 7.00623C1.32443 7.02182 1.32443 7.0375 1.32577 7.0531L3.23827 12.9375C3.29323 13.1432 3.4153 13.3247 3.58513 13.4532C3.75496 13.5818 3.96282 13.6499 4.17577 13.6468H13.3883C13.7379 13.6464 14.0756 13.5197 14.3391 13.29C14.6027 13.0603 14.7744 12.7431 14.8226 12.3968L16.2508 2.09998H18.0726C18.2384 2.09998 18.3974 2.03413 18.5146 1.91692C18.6318 1.79971 18.6976 1.64074 18.6976 1.47498C18.6976 1.30922 18.6318 1.15024 18.5146 1.03303C18.3974 0.915824 18.2384 0.849976 18.0726 0.849976H18.0758ZM12.1383 5.79373H10.0945V3.74998H12.1476L12.1383 5.79373ZM6.79139 2.9156H8.84452V3.39998V5.7906H6.79139V2.9156ZM3.49139 4.5656H5.54139V5.79373H3.49139V4.5656ZM13.5851 12.225C13.579 12.2727 13.5556 12.3166 13.5193 12.3483C13.4831 12.38 13.4364 12.3972 13.3883 12.3968H4.37577L2.65389 7.04998H14.3039L13.5851 12.225Z"
fill=""
/>
<path
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
d="M5.31172 15.1125C4.9118 15.1094 4.51997 15.2252 4.18594 15.4451C3.85191 15.665 3.59073 15.9792 3.43553 16.3478C3.28034 16.7164 3.23813 17.1228 3.31425 17.5154C3.39037 17.908 3.58139 18.2692 3.86309 18.5531C4.14478 18.837 4.50445 19.0308 4.89647 19.11C5.28849 19.1891 5.6952 19.1501 6.06499 18.9978C6.43477 18.8454 6.75099 18.5867 6.97351 18.2544C7.19603 17.9221 7.31483 17.5312 7.31485 17.1312C7.31608 16.8671 7.26522 16.6053 7.16518 16.3608C7.06515 16.1164 6.91789 15.894 6.73184 15.7065C6.5458 15.519 6.3246 15.3701 6.08092 15.2681C5.83725 15.1662 5.57586 15.1133 5.31172 15.1125ZM5.31172 17.9C5.15905 17.9031 5.00891 17.8607 4.88045 17.7781C4.75199 17.6955 4.65103 17.5766 4.59045 17.4364C4.52986 17.2962 4.51239 17.1412 4.54026 16.9911C4.56814 16.8409 4.64009 16.7025 4.74695 16.5934C4.85382 16.4843 4.99075 16.4096 5.14028 16.3786C5.28981 16.3477 5.44518 16.3619 5.58656 16.4196C5.72794 16.4773 5.84894 16.5758 5.93412 16.7026C6.0193 16.8293 6.06481 16.9785 6.06484 17.1312C6.06651 17.3329 5.9882 17.5271 5.84705 17.6712C5.70589 17.8152 5.51341 17.8975 5.31172 17.9Z"
fill=""
/>
<path
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
d="M12.9504 15.1125C12.5505 15.1094 12.1586 15.2252 11.8246 15.4451C11.4906 15.665 11.2294 15.9792 11.0742 16.3478C10.919 16.7164 10.8768 17.1228 10.9529 17.5154C11.029 17.908 11.2201 18.2692 11.5018 18.5531C11.7835 18.837 12.1431 19.0308 12.5351 19.11C12.9272 19.1891 13.3339 19.1501 13.7037 18.9978C14.0734 18.8454 14.3897 18.5867 14.6122 18.2544C14.8347 17.9221 14.9535 17.5312 14.9535 17.1312C14.9552 16.598 14.7452 16.086 14.3696 15.7075C13.994 15.329 13.4836 15.115 12.9504 15.1125ZM12.9504 17.9C12.7977 17.9031 12.6476 17.8607 12.5191 17.7781C12.3907 17.6955 12.2897 17.5766 12.2291 17.4364C12.1685 17.2962 12.1511 17.1412 12.1789 16.9911C12.2068 16.8409 12.2788 16.7025 12.3856 16.5934C12.4925 16.4843 12.6294 16.4096 12.779 16.3786C12.9285 16.3477 13.0838 16.3619 13.2252 16.4196C13.3666 16.4773 13.4876 16.5758 13.5728 16.7026C13.658 16.8293 13.7035 16.9785 13.7035 17.1312C13.7052 17.3329 13.6269 17.5271 13.4857 17.6712C13.3446 17.8152 13.1521 17.8975 12.9504 17.9Z"
fill=""
/>
</svg>
</span>
Button With Icon
</Link>
</div>
Button With Icon
</Link>
</div>
<div className="flex flex-wrap gap-5 xl:gap-7.5">
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<div className="flex flex-wrap gap-5 xl:gap-7.5">
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_182_46495)">
<path
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full bg-meta-3 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_182_46495)">
<path
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full bg-black py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_182_46495)">
<path
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</Link>
Button With Icon
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<Link
to="#"
className="inline-flex items-center justify-center gap-2.5 rounded-full border border-primary py-4 px-10 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
>
<span>
<svg
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_182_46495)">
<path
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</Link>
</div>
</div>
</div>
</>
);
Button With Icon
</Link>
</div>
</div>
</div>
</>
);
};
export default Buttons;

12
packages/frontend/src/old/brand.ts
View File

@ -1,8 +1,8 @@
export type BRAND = {
logo: string;
name: string;
visitors: number;
revenues: string;
sales: number;
conversion: number;
logo: string;
name: string;
visitors: number;
revenues: string;
sales: number;
conversion: number;
};

12
packages/frontend/src/old/chat.ts
View File

@ -1,8 +1,8 @@
export type Chat = {
avatar: string;
name: string;
text: string;
time: number;
textCount: number;
color: string;
avatar: string;
name: string;
text: string;
time: number;
textCount: number;
color: string;
};

167
packages/frontend/src/old/fireToast.tsx
View File

@ -1,56 +1,57 @@
import toast from 'react-hot-toast';
import dataJSON from '../../public/data.json';
import toast from "react-hot-toast";
import dataJSON from "../../public/data.json";
//TODO: rewrite
const createToast = (title: string, msg: string, type: number) => {
toast.custom((t) => (
const createToast = (title: string, msg: string, type: number) =>
{
toast.custom((t) => (
<div
className={`${t.visible ? 'animate-enter' : 'animate-leave'
}
max-w-md w-full ${type === 0 ? "bg-[#04b20c]" : type === 1 ? "bg-[#eab90f]" : "bg-[#e13f32]"} shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
>
<div className="flex-1 w-0 p-4 ">
<div className="flex items-start">
<div
className={ `${ t.visible ? "animate-enter" : "animate-leave"
}
max-w-md w-full ${ type === 0 ? "bg-[#04b20c]" : type === 1 ? "bg-[#eab90f]" : "bg-[#e13f32]" } shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5` }
>
<div className="flex-1 w-0 p-4 ">
<div className="flex items-start">
<div className="ml-3 flex-1">
<p className="text-sm font-medium text-white">
{title}
</p>
<p className="mt-1 text-sm text-white">
{msg}
</p>
</div>
</div>
</div>
<div className="flex">
<div className="ml-3 flex-1">
<p className="text-sm font-medium text-white">
{ title }
</p>
<p className="mt-1 text-sm text-white">
{ msg }
</p>
</div>
</div>
</div>
<div className="flex">
<button
onClick={() => toast.dismiss(t.id)}
type="button"
className="mr-2 box-content rounded-none border-none opacity-100 hover:no-underline hover:opacity-50 focus:opacity-50 focus:shadow-none focus:outline-none text-white"
data-te-toast-dismiss
aria-label="Close">
<button
onClick={ () => toast.dismiss(t.id) }
type="button"
className="mr-2 box-content rounded-none border-none opacity-100 hover:no-underline hover:opacity-50 focus:opacity-50 focus:shadow-none focus:outline-none text-white"
data-te-toast-dismiss
aria-label="Close">
<span
className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="h-6 w-6">
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12" />
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"/>
</svg>
</span>
</button>
</button>
</div>
</div>
))
</div>
</div>
));
};
// let dataJSON: any;
// let headers = new Headers();
@ -65,47 +66,55 @@ const createToast = (title: string, msg: string, type: number) => {
// console.log(data);
// dataJSON=data;
// })
const fireToast = () => {
const alertSettings = localStorage.getItem("alertSettings");
if (alertSettings) {
for (const alertSetting of JSON.parse(alertSettings)) {
console.log(alertSetting);
const fireToast = () =>
{
const alertSettings = localStorage.getItem("alertSettings");
if (alertSettings)
{
for (const alertSetting of JSON.parse(alertSettings))
{
console.log(alertSetting);
const value = isNaN(parseFloat(alertSetting.value)) ? alertSetting.value : parseFloat(alertSetting.value);
const para = alertSetting.criterion < 2 ? "delta_" + alertSetting.para : alertSetting.para;
if (alertSetting.id == "ALL") {
Object.keys(dataJSON).map((id: string) => {
const condition = alertSetting.criterion == '0' ? value <= -1 * dataJSON[id][para] :
alertSetting.criterion == '1' || alertSetting.criterion == '3' ? value >= dataJSON[id][para] :
alertSetting.criterion == '2' ? value <= dataJSON[id][para] :
value == dataJSON[id][para];
const realValue = alertSetting.criterion == '0' ? dataJSON[id][para] * -1 : dataJSON[id][para];
if (condition) {
const msg = `${alertSetting.para} of ${id} ${alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to"} ${realValue}`;
createToast(id, msg, alertSetting.type)
}
const value = isNaN(parseFloat(alertSetting.value)) ? alertSetting.value : parseFloat(alertSetting.value);
const para = alertSetting.criterion < 2 ? "delta_" + alertSetting.para : alertSetting.para;
if (alertSetting.id == "ALL")
{
Object.keys(dataJSON).map((id: string) =>
{
const condition = alertSetting.criterion == "0" ? value <= -1 * dataJSON[ id ][ para ] :
alertSetting.criterion == "1" || alertSetting.criterion == "3" ? value >= dataJSON[ id ][ para ] :
alertSetting.criterion == "2" ? value <= dataJSON[ id ][ para ] :
value == dataJSON[ id ][ para ];
const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ];
if (condition)
{
const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`;
createToast(id, msg, alertSetting.type);
}
},
);
}
else
{
const id = alertSetting.id;
const condition = alertSetting.criterion == "0" ? value >= -1 * dataJSON[ id ][ para ] :
alertSetting.criterion == "1" || alertSetting.criterion == "3" ? value >= dataJSON[ id ][ para ] :
alertSetting.criterion == "2" ? value <= dataJSON[ id ][ para ] :
value == dataJSON[ id ][ para ];
const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ];
if (condition)
{
const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`;
createToast(id, msg, alertSetting.type);
}
}
}
);
}
else {
const id = alertSetting.id;
const condition = alertSetting.criterion == '0' ? value >= -1 * dataJSON[id][para] :
alertSetting.criterion == '1' || alertSetting.criterion == '3' ? value >= dataJSON[id][para] :
alertSetting.criterion == '2' ? value <= dataJSON[id][para] :
value == dataJSON[id][para];
const realValue = alertSetting.criterion == '0' ? dataJSON[id][para] * -1 : dataJSON[id][para];
if (condition) {
const msg = `${alertSetting.para} of ${id} ${alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to"} ${realValue}`;
createToast(id, msg, alertSetting.type)
}
}
};
}
}
}
};
export default fireToast;

8
packages/frontend/src/old/package.ts
View File

@ -1,6 +1,6 @@
export type Package = {
name: string;
price: number;
invoiceDate: string;
status: string;
name: string;
price: number;
invoiceDate: string;
status: string;
};

12
packages/frontend/src/old/product.ts
View File

@ -1,8 +1,8 @@
export type Product = {
image: string;
name: string;
category: string;
price: number;
sold: number;
profit: number;
image: string;
name: string;
category: string;
price: number;
sold: number;
profit: number;
};

173
packages/frontend/src/pages/Home.tsx
View File

@ -1,98 +1,107 @@
import React, { useEffect, useState } from 'react';
import CardDataStats from '../old/CardDataStats';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TStatsResponse } from '../types/stats.ts';
import React, { useEffect, useState } from "react";
import CardDataStats from "../old/CardDataStats";
import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom";
import { TStatsResponse } from "../types/stats.ts";
export const Home: React.FC = () => {
const { t } = useTranslation();
export const Home: React.FC = () =>
{
const { t } = useTranslation();
const [commit, setCommit] = useState("");
const [version, setVersion] = useState("");
const [trains, setTrains] = useState(0);
const [dispatchers, setDispatchers] = useState(0);
const [profiles, setProfiles] = useState(0);
const [ commit, setCommit ] = useState("");
const [ version, setVersion ] = useState("");
const [ trains, setTrains ] = useState(0);
const [ dispatchers, setDispatchers ] = useState(0);
const [ profiles, setProfiles ] = useState(0);
useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}/stats/`).then(x => x.json()).then((data: TStatsResponse) => {
data.data.git.commit && setCommit(data.data.git.commit);
data.data.git.version && setVersion(data.data.git.version);
useEffect(() =>
{
fetch(`${ import.meta.env.VITE_API_URL }/stats/`).then(x => x.json()).then((data: TStatsResponse) =>
{
data.data.git.commit && setCommit(data.data.git.commit);
data.data.git.version && setVersion(data.data.git.version);
setTrains(data.data.stats.trains);
setDispatchers(data.data.stats.dispatchers);
setProfiles(data.data.stats.profiles);
});
}, [])
// ADD ALERT IF API DOESN'T WORK! toast?
setTrains(data.data.stats.trains);
setDispatchers(data.data.stats.dispatchers);
setProfiles(data.data.stats.profiles);
});
}, []);
return (
<>
<div className="flex flex-col gap-10">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6 xl:grid-cols-3 2xl:gap-7.5">
<CardDataStats title={ t("home.stats.trains") } total={ trains.toString() }/>
<CardDataStats title={ t("home.stats.dispatchers") } total={ dispatchers.toString() }/>
<CardDataStats title={ t("home.stats.profiles") } total={ profiles.toString() }/>
</div>
<div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pb-6 text-center">
<div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{ t("home.title") }
</h3>
<p className="font-medium">{ t("home.description") }</p>
<div className="p-4 md:p-6 xl:p-9 flex gap-2 justify-center">
<Link
to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
{ t("home.buttons.project") }
</Link>
<Link
to="https://forum.simrail.eu/topic/9142-logowanie-wyj%C5%9B%C4%87-z-posterunk%C3%B3w/"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
{ t("home.buttons.forum") }
</Link>
</div>
</div>
</div>
</div>
useEffect(() => { }, []);
<div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pb-6 text-center">
return (
<>
<div className="flex flex-col gap-10">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6 xl:grid-cols-3 2xl:gap-7.5">
<CardDataStats title={t('home.stats.trains')} total={trains.toString()} />
<CardDataStats title={t('home.stats.dispatchers')} total={dispatchers.toString()} />
<CardDataStats title={t('home.stats.profiles')} total={profiles.toString()} />
</div>
<div className="mt-6.5">
<p><Trans
i18nKey={ t("home.footer.author") }
values={ { author: "alekswilc" } }
components={ {
anchor: <Link className="color-orchid" to={ "https://www.alekswilc.dev" }/>,
} }
/></p>
<p><Trans
i18nKey={ t("home.footer.thanks") }
components={ {
bahu: <Link className="color-orchid" to={ "https://bahu.pro/" }/>,
simrailelite: <Link className="color-orchid" to={ "https://bahu.pro/" }/>,
} }
/></p>
<p>{ t("home.footer.license") } <Link className="color-orchid"
to={ "https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/src/branch/main/LICENSE" }>GNU
AGPL V3</Link></p>
<p>{ t("home.footer.powered") } <Link className="color-orchid"
to={ "https://tailadmin.com/" }>TailAdmin</Link></p>
<p>{ version && <Link className="color-orchid"
to={ `https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/releases/tag/${ version }` }>{ version }</Link> }{ version && commit && " | " }{ commit &&
<Link className="color-orchid"
to={ `https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/commit/${ commit }` }>{ commit }</Link> }</p>
<div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pb-6 text-center">
<div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{t('home.title')}
</h3>
<p className="font-medium">{t('home.description')}</p>
<div className="p-4 md:p-6 xl:p-9 flex gap-2 justify-center">
<Link
to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
{t('home.buttons.project')}
</Link>
<Link
to="https://forum.simrail.eu/topic/9142-logowanie-wyj%C5%9B%C4%87-z-posterunk%C3%B3w/"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
{t('home.buttons.forum')}
</Link>
</div>
</div>
</div>
</div>
<div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pb-6 text-center">
<div className="mt-6.5">
<p><Trans
i18nKey={t("home.footer.author")}
values={{ author: 'alekswilc' }}
components={{ anchor: <Link className='color-orchid' to={"https://www.alekswilc.dev"} /> }}
/></p>
<p><Trans
i18nKey={t("home.footer.thanks")}
components={{ bahu: <Link className='color-orchid' to={"https://bahu.pro/"} />, simrailelite: <Link className='color-orchid' to={"https://bahu.pro/"} /> }}
/></p>
<p>{t("home.footer.license")} <Link className='color-orchid' to={'https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/src/branch/main/LICENSE'}>GNU AGPL V3</Link></p>
<p>{t("home.footer.powered")} <Link className='color-orchid' to={"https://tailadmin.com/"}>TailAdmin</Link></p>
<p>{version && <Link className='color-orchid' to={`https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/releases/tag/${version}`}>{version}</Link>}{version && commit && " | "}{commit && <Link className='color-orchid' to={`https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/commit/${commit}`}>{commit}</Link>}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
</>
);
};

42
packages/frontend/src/pages/leaderboard/StationsLeaderboard.tsx
View File

@ -1,39 +1,45 @@
import { TLeaderboardRecord } from '../../types/leaderboard.ts';
import { ChangeEvent, useEffect, useState } from 'react';
import { StationTable } from '../../components/pages/leaderboard/StationTable.tsx';
import { useDebounce } from 'use-debounce';
import { Search } from '../../components/mini/util/Search.tsx';
import { TLeaderboardRecord } from "../../types/leaderboard.ts";
import { ChangeEvent, useEffect, useState } from "react";
import { StationTable } from "../../components/pages/leaderboard/StationTable.tsx";
import { useDebounce } from "use-debounce";
import { Search } from "../../components/mini/util/Search.tsx";
export const StationLeaderboard = () => {
const [data, setData] = useState<TLeaderboardRecord[]>([]);
useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}leaderboard/station/`).then(x => x.json()).then(x => {
export const StationLeaderboard = () =>
{
const [ data, setData ] = useState<TLeaderboardRecord[]>([]);
useEffect(() =>
{
fetch(`${ import.meta.env.VITE_API_URL }leaderboard/station/`).then(x => x.json()).then(x =>
{
setData(x.data.records);
});
}, []);
const [searchItem, setSearchItem] = useState('');
const [searchValue] = useDebounce(searchItem, 500);
const [error, setError] = useState<0 | 1 | 2>(0);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0);
useEffect(() => {
useEffect(() =>
{
setData([]);
setError(0);
fetch(`${import.meta.env.VITE_API_URL}/leaderboard/station/?q=${searchValue}`).then(x => x.json()).then(x => {
fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/station/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2);
});
}, [searchValue])
}, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value);
};
return (
<>
<div className="flex flex-col gap-10">
<Search handleInputChange={handleInputChange} searchItem={searchItem} />
<StationTable stations={data} error={error} />
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<StationTable stations={ data } error={ error }/>
</div>
</>
);

74
packages/frontend/src/pages/leaderboard/TrainLeaderboard.tsx
View File

@ -1,41 +1,47 @@
import { TLeaderboardRecord } from '../../types/leaderboard.ts';
import { ChangeEvent, useEffect, useState } from 'react';
import { TrainTable } from '../../components/pages/leaderboard/TrainTable.tsx';
import { useDebounce } from 'use-debounce';
import { Search } from '../../components/mini/util/Search.tsx';
import { TLeaderboardRecord } from "../../types/leaderboard.ts";
import { ChangeEvent, useEffect, useState } from "react";
import { TrainTable } from "../../components/pages/leaderboard/TrainTable.tsx";
import { useDebounce } from "use-debounce";
import { Search } from "../../components/mini/util/Search.tsx";
export const TrainLeaderboard = () => {
const [data, setData] = useState<TLeaderboardRecord[]>([]);
useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}/leaderboard/train/`).then(x => x.json()).then(x => {
setData(x.data.records);
});
}, []);
export const TrainLeaderboard = () =>
{
const [ data, setData ] = useState<TLeaderboardRecord[]>([]);
useEffect(() =>
{
fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/`).then(x => x.json()).then(x =>
{
setData(x.data.records);
});
}, []);
const [searchItem, setSearchItem] = useState('');
const [searchValue] = useDebounce(searchItem, 500);
const [error, setError] = useState<0 | 1 | 2>(0);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0);
useEffect(() => {
setData([]);
setError(0);
fetch(`${import.meta.env.VITE_API_URL}/leaderboard/train/?q=${searchValue}`).then(x => x.json()).then(x => {
setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2);
});
}, [searchValue])
useEffect(() =>
{
setData([]);
setError(0);
fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2);
});
}, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setSearchItem(e.target.value);
};
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value);
};
return (
<>
<div className="flex flex-col gap-10">
<Search handleInputChange={handleInputChange} searchItem={searchItem} />
<TrainTable trains={data} error={error} />
return (
<>
<div className="flex flex-col gap-10">
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<TrainTable trains={ data } error={ error }/>
</div>
</>
);
</div>
</>
);
};

43
packages/frontend/src/pages/logs/StationLogs.tsx
View File

@ -1,37 +1,44 @@
import { ChangeEvent, useEffect, useState } from 'react';
import { StationTable } from '../../components/pages/logs/StationTable.tsx';
import { useDebounce } from 'use-debounce';
import { TStationRecord } from '../../types/station.ts';
import { Search } from '../../components/mini/util/Search.tsx';
export const StationLogs = () => {
const [data, setData] = useState<TStationRecord[]>([]);
useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}/stations/`).then(x => x.json()).then(x => {
import { ChangeEvent, useEffect, useState } from "react";
import { StationTable } from "../../components/pages/logs/StationTable.tsx";
import { useDebounce } from "use-debounce";
import { TStationRecord } from "../../types/station.ts";
import { Search } from "../../components/mini/util/Search.tsx";
export const StationLogs = () =>
{
const [ data, setData ] = useState<TStationRecord[]>([]);
useEffect(() =>
{
fetch(`${ import.meta.env.VITE_API_URL }/stations/`).then(x => x.json()).then(x =>
{
setData(x.data.records);
});
}, []);
const [error, setError] = useState<0 | 1 | 2>(0);
const [searchItem, setSearchItem] = useState('');
const [searchValue] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500);
useEffect(() => {
useEffect(() =>
{
setData([]);
setError(0);
fetch(`${import.meta.env.VITE_API_URL}/stations/?q=${searchValue}`).then(x => x.json()).then(x => {
fetch(`${ import.meta.env.VITE_API_URL }/stations/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2);
});
}, [searchValue])
}, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value);
};
return (
<>
<div className="flex flex-col gap-10">
<Search handleInputChange={handleInputChange} searchItem={searchItem} />
<StationTable stations={data} error={error} />
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<StationTable stations={ data } error={ error }/>
</div>
</>
);

42
packages/frontend/src/pages/logs/TrainLogs.tsx
View File

@ -1,38 +1,44 @@
import { ChangeEvent, useEffect, useState } from 'react';
import { TTrainRecord } from '../../types/train.ts';
import { TrainTable } from '../../components/pages/logs/TrainTable.tsx';
import { useDebounce } from 'use-debounce';
import { Search } from '../../components/mini/util/Search.tsx';
import { ChangeEvent, useEffect, useState } from "react";
import { TTrainRecord } from "../../types/train.ts";
import { TrainTable } from "../../components/pages/logs/TrainTable.tsx";
import { useDebounce } from "use-debounce";
import { Search } from "../../components/mini/util/Search.tsx";
export const TrainLogs = () => {
const [data, setData] = useState<TTrainRecord[]>([]);
useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}/trains/`).then(x => x.json()).then(x => {
export const TrainLogs = () =>
{
const [ data, setData ] = useState<TTrainRecord[]>([]);
useEffect(() =>
{
fetch(`${ import.meta.env.VITE_API_URL }/trains/`).then(x => x.json()).then(x =>
{
setData(x.data.records);
});
}, []);
const [error, setError] = useState<0 | 1 | 2>(0);
const [searchItem, setSearchItem] = useState('');
const [searchValue] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500);
useEffect(() => {
useEffect(() =>
{
setData([]);
setError(0);
fetch(`${import.meta.env.VITE_API_URL}/trains/?q=${searchValue}`).then(x => x.json()).then(x => {
fetch(`${ import.meta.env.VITE_API_URL }/trains/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2);
});
}, [searchValue])
}, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value);
};
return (
<>
<div className="flex flex-col gap-10">
<Search handleInputChange={handleInputChange} searchItem={searchItem} />
<TrainTable trains={data} error={error} />
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<TrainTable trains={ data } error={ error }/>
</div>
</>
);

52
packages/frontend/src/pages/profile/Profile.tsx
View File

@ -1,21 +1,25 @@
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { TProfileData, TProfileResponse } from '../../types/profile.ts';
import { ContentLoader } from '../../components/mini/loaders/ContentLoader.tsx';
import { WarningAlert } from '../../components/mini/alerts/Warning.tsx';
import { ProfileCard } from '../../components/pages/profile/Profile.tsx';
import { useTranslation } from 'react-i18next';
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { TProfileData, TProfileResponse } from "../../types/profile.ts";
import { ContentLoader } from "../../components/mini/loaders/ContentLoader.tsx";
import { WarningAlert } from "../../components/mini/alerts/Warning.tsx";
import { ProfileCard } from "../../components/pages/profile/Profile.tsx";
import { useTranslation } from "react-i18next";
export const Profile = () => {
export const Profile = () =>
{
const { id } = useParams();
const [error, setError] = useState<0 | 1 | 2 | 3>(0);
const [data, setData] = useState<TProfileData>(undefined!);
const [ error, setError ] = useState<0 | 1 | 2 | 3>(0);
const [ data, setData ] = useState<TProfileData>(undefined!);
useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}/profiles/${id}`).then(x => x.json()).then((data: TProfileResponse) => {
switch (data.code) {
useEffect(() =>
{
fetch(`${ import.meta.env.VITE_API_URL }/profiles/${ id }`).then(x => x.json()).then((data: TProfileResponse) =>
{
switch (data.code)
{
case 404:
setError(2);
break;
@ -28,21 +32,23 @@ export const Profile = () => {
console.log(data.data.steam);
break;
}
})
}, [])
});
}, []);
const { t } = useTranslation();
return (
<>
{/* LOADING */}
{error === 0 && <ContentLoader />}
{/* NOT FOUND */}
{error === 2 && <WarningAlert title={t("profile.errors.notfound.title")} description={t("profile.errors.notfound.description")} />}
{/* BLACKLISTED PROFILE */}
{error === 3 && <WarningAlert title={t("profile.errors.blacklist.title")} description={t("profile.errors.blacklist.description")} />}
{/* SUCCESS */}
{error === 1 && <ProfileCard data={data} />}
{/* LOADING */ }
{ error === 0 && <ContentLoader/> }
{/* NOT FOUND */ }
{ error === 2 && <WarningAlert title={ t("profile.errors.notfound.title") }
description={ t("profile.errors.notfound.description") }/> }
{/* BLACKLISTED PROFILE */ }
{ error === 3 && <WarningAlert title={ t("profile.errors.blacklist.title") }
description={ t("profile.errors.blacklist.description") }/> }
{/* SUCCESS */ }
{ error === 1 && <ProfileCard data={ data }/> }
</>
);
};

18
packages/frontend/src/react-app-env.d.ts vendored
View File

@ -1,15 +1,17 @@
/// <reference types="vite/client" />
declare module '*.png';
declare module '*.svg';
declare module '*.jpeg';
declare module '*.jpg';
declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";
interface ImportMetaEnv {
readonly VITE_API_URL: string
interface ImportMetaEnv
{
readonly VITE_API_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv
interface ImportMeta
{
readonly env: ImportMetaEnv;
}

19
packages/frontend/src/types/leaderboard.ts
View File

@ -1,14 +1,17 @@
export interface TLeaderboardResponse {
export interface TLeaderboardResponse
{
success: boolean;
data: TLeaderboardData;
code: number;
}
export interface TLeaderboardData {
export interface TLeaderboardData
{
records: TLeaderboardRecord[];
}
export interface TLeaderboardRecord {
export interface TLeaderboardRecord
{
id: string;
steam: string;
steamName: string;
@ -16,15 +19,17 @@ export interface TLeaderboardRecord {
trainPoints: number;
trainDistance: number;
dispatcherTime: number;
dispatcherStats?: { [key: string]: TLeaderboardDispatcherStat };
trainStats?: { [key: string]: TLeaderboardTrainStat };
dispatcherStats?: { [ key: string ]: TLeaderboardDispatcherStat };
trainStats?: { [ key: string ]: TLeaderboardTrainStat };
}
export interface TLeaderboardDispatcherStat {
export interface TLeaderboardDispatcherStat
{
time: number;
}
export interface TLeaderboardTrainStat {
export interface TLeaderboardTrainStat
{
distance: number;
score: number;
time: number;

30
packages/frontend/src/types/profile.ts
View File

@ -1,24 +1,28 @@
export type TProfileResponse = TProfileErrorResponse | TProfileSuccessResponse;
export interface TProfileErrorResponse {
export interface TProfileErrorResponse
{
success: false;
data: string;
code: 404 | 403;
}
export interface TProfileSuccessResponse {
export interface TProfileSuccessResponse
{
success: true;
data: TProfileData;
code: 200;
}
export interface TProfileData {
export interface TProfileData
{
player: TProfilePlayer;
steam: TProfileSteam;
steamStats: TProfileSteamStats;
}
export interface TProfilePlayer {
export interface TProfilePlayer
{
id: string;
steam: string;
steamName: string;
@ -30,34 +34,40 @@ export interface TProfilePlayer {
trainPoints: number;
}
export interface TProfileDispatcherStatsRecord {
export interface TProfileDispatcherStatsRecord
{
time: number;
}
export interface TProfileTrainStatsRecord {
export interface TProfileTrainStatsRecord
{
distance: number;
score: number;
time: number;
}
export interface TProfileSteam {
export interface TProfileSteam
{
personname: string;
avatarfull: string;
}
export interface TProfileSteamStats {
export interface TProfileSteamStats
{
steamID: string;
gameName: string;
stats: TProfileSteamStatsAchievementStat[];
achievements: TProfileSteamStatsAchievement[];
}
export interface TProfileSteamStatsAchievement {
export interface TProfileSteamStatsAchievement
{
name: string;
achieved: number;
}
export interface TProfileSteamStatsAchievementStat {
export interface TProfileSteamStatsAchievementStat
{
name: string;
value: number;
}

9
packages/frontend/src/types/station.ts
View File

@ -1,14 +1,17 @@
export interface TStationResponse {
export interface TStationResponse
{
success: boolean;
data: TStationData;
code: number;
}
export interface TStationData {
export interface TStationData
{
records: TStationRecord[];
}
export interface TStationRecord {
export interface TStationRecord
{
id: string;
userSteamId: string;
userUsername: string;

22
packages/frontend/src/types/stats.ts
View File

@ -1,21 +1,25 @@
export interface TStatsResponse {
export interface TStatsResponse
{
success: boolean;
data: TStatsData;
code: number;
data: TStatsData;
code: number;
}
export interface TStatsData {
git: TStatsGit;
export interface TStatsData
{
git: TStatsGit;
stats: TStatsStats;
}
export interface TStatsGit {
export interface TStatsGit
{
commit?: string;
version?: string;
}
export interface TStatsStats {
trains: number;
export interface TStatsStats
{
trains: number;
dispatchers: number;
profiles: number;
profiles: number;
}

9
packages/frontend/src/types/train.ts
View File

@ -1,14 +1,17 @@
export interface TTrainResponse {
export interface TTrainResponse
{
success: boolean;
data: TTrainData;
code: number;
}
export interface TTrainData {
export interface TTrainData
{
records: TTrainRecord[];
}
export interface TTrainRecord {
export interface TTrainRecord
{
id: string;
trainNumber: string;
userSteamId: string;

500
packages/frontend/tailwind.config.cjs
View File

@ -1,254 +1,254 @@
const defaultTheme = require('tailwindcss/defaultTheme')
const defaultTheme = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
/** @type {import("tailwindcss").Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
fontFamily: {
satoshi: ['Satoshi', 'sans-serif'],
},
screens: {
'2xsm': '375px',
xsm: '425px',
'3xl': '2000px',
...defaultTheme.screens,
},
extend: {
colors: {
current: 'currentColor',
transparent: 'transparent',
white: '#FFFFFF',
black: '#1C2434',
'black-2': '#010101',
body: '#64748B',
bodydark: '#AEB7C0',
bodydark1: '#DEE4EE',
bodydark2: '#8A99AF',
primary: '#3C50E0',
secondary: '#80CAEE',
stroke: '#E2E8F0',
gray: '#EFF4FB',
graydark: '#333A48',
'gray-2': '#F7F9FC',
'gray-3': '#FAFAFA',
whiten: '#F1F5F9',
whiter: '#F5F7FD',
boxdark: '#24303F',
'boxdark-2': '#1A222C',
strokedark: '#2E3A47',
'form-strokedark': '#3d4d60',
'form-input': '#1d2a39',
'meta-1': '#DC3545',
'meta-2': '#EFF2F7',
'meta-3': '#10B981',
'meta-4': '#313D4A',
'meta-5': '#259AE6',
'meta-6': '#FFBA00',
'meta-7': '#FF6766',
'meta-8': '#F0950C',
'meta-9': '#E5E7EB',
success: '#219653',
danger: '#D34053',
warning: '#FFA70B',
},
fontSize: {
'title-xxl': ['44px', '55px'],
'title-xl': ['36px', '45px'],
'title-xl2': ['33px', '45px'],
'title-lg': ['28px', '35px'],
'title-md': ['24px', '30px'],
'title-md2': ['26px', '30px'],
'title-sm': ['20px', '26px'],
'title-xsm': ['18px', '24px'],
},
spacing: {
4.5: '1.125rem',
5.5: '1.375rem',
6.5: '1.625rem',
7.5: '1.875rem',
8.5: '2.125rem',
9.5: '2.375rem',
10.5: '2.625rem',
11: '2.75rem',
11.5: '2.875rem',
12.5: '3.125rem',
13: '3.25rem',
13.5: '3.375rem',
14: '3.5rem',
14.5: '3.625rem',
15: '3.75rem',
15.5: '3.875rem',
16: '4rem',
16.5: '4.125rem',
17: '4.25rem',
17.5: '4.375rem',
18: '4.5rem',
18.5: '4.625rem',
19: '4.75rem',
19.5: '4.875rem',
21: '5.25rem',
21.5: '5.375rem',
22: '5.5rem',
22.5: '5.625rem',
24.5: '6.125rem',
25: '6.25rem',
25.5: '6.375rem',
26: '6.5rem',
27: '6.75rem',
27.5: '6.875rem',
29: '7.25rem',
29.5: '7.375rem',
30: '7.5rem',
31: '7.75rem',
32.5: '8.125rem',
34: '8.5rem',
34.5: '8.625rem',
35: '8.75rem',
36.5: '9.125rem',
37.5: '9.375rem',
39: '9.75rem',
39.5: '9.875rem',
40: '10rem',
42.5: '10.625rem',
44: '11rem',
45: '11.25rem',
46: '11.5rem',
47.5: '11.875rem',
49: '12.25rem',
50: '12.5rem',
52: '13rem',
52.5: '13.125rem',
54: '13.5rem',
54.5: '13.625rem',
55: '13.75rem',
55.5: '13.875rem',
59: '14.75rem',
60: '15rem',
62.5: '15.625rem',
65: '16.25rem',
67: '16.75rem',
67.5: '16.875rem',
70: '17.5rem',
72.5: '18.125rem',
73: '18.25rem',
75: '18.75rem',
90: '22.5rem',
94: '23.5rem',
95: '23.75rem',
100: '25rem',
115: '28.75rem',
125: '31.25rem',
132.5: '33.125rem',
150: '37.5rem',
171.5: '42.875rem',
180: '45rem',
187.5: '46.875rem',
203: '50.75rem',
230: '57.5rem',
242.5: '60.625rem',
},
maxWidth: {
2.5: '0.625rem',
3: '0.75rem',
4: '1rem',
11: '2.75rem',
13: '3.25rem',
14: '3.5rem',
15: '3.75rem',
22.5: '5.625rem',
25: '6.25rem',
30: '7.5rem',
34: '8.5rem',
35: '8.75rem',
40: '10rem',
42.5: '10.625rem',
44: '11rem',
45: '11.25rem',
70: '17.5rem',
90: '22.5rem',
94: '23.5rem',
125: '31.25rem',
132.5: '33.125rem',
142.5: '35.625rem',
150: '37.5rem',
180: '45rem',
203: '50.75rem',
230: '57.5rem',
242.5: '60.625rem',
270: '67.5rem',
280: '70rem',
292.5: '73.125rem',
},
maxHeight: {
35: '8.75rem',
70: '17.5rem',
90: '22.5rem',
550: '34.375rem',
300: '18.75rem',
},
minWidth: {
22.5: '5.625rem',
42.5: '10.625rem',
47.5: '11.875rem',
75: '18.75rem',
},
zIndex: {
999999: '999999',
99999: '99999',
9999: '9999',
999: '999',
99: '99',
9: '9',
1: '1',
},
opacity: {
65: '.65',
},
backgroundImage: {
video: "url('../images/video/video.png')",
},
content: {
'icon-copy': 'url("../images/icon/icon-copy-alt.svg")',
},
transitionProperty: { width: 'width', stroke: 'stroke' },
borderWidth: {
6: '6px',
},
boxShadow: {
default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
card: '0px 1px 3px rgba(0, 0, 0, 0.12)',
'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',
switcher:
'0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',
'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)',
1: '0px 1px 3px rgba(0, 0, 0, 0.08)',
2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
3: '0px 1px 5px rgba(0, 0, 0, 0.14)',
4: '0px 4px 10px rgba(0, 0, 0, 0.12)',
5: '0px 1px 1px rgba(0, 0, 0, 0.15)',
6: '0px 3px 15px rgba(0, 0, 0, 0.1)',
7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A',
8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)',
},
dropShadow: {
1: '0px 1px 0px #E2E8F0',
2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
},
keyframes: {
rotating: {
'0%, 100%': { transform: 'rotate(360deg)' },
'50%': { transform: 'rotate(0deg)' },
content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}" ],
darkMode: "class",
theme: {
fontFamily: {
satoshi: [ "Satoshi", "sans-serif" ],
},
screens: {
"2xsm": "375px",
xsm: "425px",
"3xl": "2000px",
...defaultTheme.screens,
},
extend: {
colors: {
current: "currentColor",
transparent: "transparent",
white: "#FFFFFF",
black: "#1C2434",
"black-2": "#010101",
body: "#64748B",
bodydark: "#AEB7C0",
bodydark1: "#DEE4EE",
bodydark2: "#8A99AF",
primary: "#3C50E0",
secondary: "#80CAEE",
stroke: "#E2E8F0",
gray: "#EFF4FB",
graydark: "#333A48",
"gray-2": "#F7F9FC",
"gray-3": "#FAFAFA",
whiten: "#F1F5F9",
whiter: "#F5F7FD",
boxdark: "#24303F",
"boxdark-2": "#1A222C",
strokedark: "#2E3A47",
"form-strokedark": "#3d4d60",
"form-input": "#1d2a39",
"meta-1": "#DC3545",
"meta-2": "#EFF2F7",
"meta-3": "#10B981",
"meta-4": "#313D4A",
"meta-5": "#259AE6",
"meta-6": "#FFBA00",
"meta-7": "#FF6766",
"meta-8": "#F0950C",
"meta-9": "#E5E7EB",
success: "#219653",
danger: "#D34053",
warning: "#FFA70B",
},
fontSize: {
"title-xxl": [ "44px", "55px" ],
"title-xl": [ "36px", "45px" ],
"title-xl2": [ "33px", "45px" ],
"title-lg": [ "28px", "35px" ],
"title-md": [ "24px", "30px" ],
"title-md2": [ "26px", "30px" ],
"title-sm": [ "20px", "26px" ],
"title-xsm": [ "18px", "24px" ],
},
spacing: {
4.5: "1.125rem",
5.5: "1.375rem",
6.5: "1.625rem",
7.5: "1.875rem",
8.5: "2.125rem",
9.5: "2.375rem",
10.5: "2.625rem",
11: "2.75rem",
11.5: "2.875rem",
12.5: "3.125rem",
13: "3.25rem",
13.5: "3.375rem",
14: "3.5rem",
14.5: "3.625rem",
15: "3.75rem",
15.5: "3.875rem",
16: "4rem",
16.5: "4.125rem",
17: "4.25rem",
17.5: "4.375rem",
18: "4.5rem",
18.5: "4.625rem",
19: "4.75rem",
19.5: "4.875rem",
21: "5.25rem",
21.5: "5.375rem",
22: "5.5rem",
22.5: "5.625rem",
24.5: "6.125rem",
25: "6.25rem",
25.5: "6.375rem",
26: "6.5rem",
27: "6.75rem",
27.5: "6.875rem",
29: "7.25rem",
29.5: "7.375rem",
30: "7.5rem",
31: "7.75rem",
32.5: "8.125rem",
34: "8.5rem",
34.5: "8.625rem",
35: "8.75rem",
36.5: "9.125rem",
37.5: "9.375rem",
39: "9.75rem",
39.5: "9.875rem",
40: "10rem",
42.5: "10.625rem",
44: "11rem",
45: "11.25rem",
46: "11.5rem",
47.5: "11.875rem",
49: "12.25rem",
50: "12.5rem",
52: "13rem",
52.5: "13.125rem",
54: "13.5rem",
54.5: "13.625rem",
55: "13.75rem",
55.5: "13.875rem",
59: "14.75rem",
60: "15rem",
62.5: "15.625rem",
65: "16.25rem",
67: "16.75rem",
67.5: "16.875rem",
70: "17.5rem",
72.5: "18.125rem",
73: "18.25rem",
75: "18.75rem",
90: "22.5rem",
94: "23.5rem",
95: "23.75rem",
100: "25rem",
115: "28.75rem",
125: "31.25rem",
132.5: "33.125rem",
150: "37.5rem",
171.5: "42.875rem",
180: "45rem",
187.5: "46.875rem",
203: "50.75rem",
230: "57.5rem",
242.5: "60.625rem",
},
maxWidth: {
2.5: "0.625rem",
3: "0.75rem",
4: "1rem",
11: "2.75rem",
13: "3.25rem",
14: "3.5rem",
15: "3.75rem",
22.5: "5.625rem",
25: "6.25rem",
30: "7.5rem",
34: "8.5rem",
35: "8.75rem",
40: "10rem",
42.5: "10.625rem",
44: "11rem",
45: "11.25rem",
70: "17.5rem",
90: "22.5rem",
94: "23.5rem",
125: "31.25rem",
132.5: "33.125rem",
142.5: "35.625rem",
150: "37.5rem",
180: "45rem",
203: "50.75rem",
230: "57.5rem",
242.5: "60.625rem",
270: "67.5rem",
280: "70rem",
292.5: "73.125rem",
},
maxHeight: {
35: "8.75rem",
70: "17.5rem",
90: "22.5rem",
550: "34.375rem",
300: "18.75rem",
},
minWidth: {
22.5: "5.625rem",
42.5: "10.625rem",
47.5: "11.875rem",
75: "18.75rem",
},
zIndex: {
999999: "999999",
99999: "99999",
9999: "9999",
999: "999",
99: "99",
9: "9",
1: "1",
},
opacity: {
65: ".65",
},
backgroundImage: {
video: "url('../images/video/video.png')",
},
content: {
"icon-copy": "url(\"../images/icon/icon-copy-alt.svg\")",
},
transitionProperty: { width: "width", stroke: "stroke" },
borderWidth: {
6: "6px",
},
boxShadow: {
default: "0px 8px 13px -3px rgba(0, 0, 0, 0.07)",
card: "0px 1px 3px rgba(0, 0, 0, 0.12)",
"card-2": "0px 1px 2px rgba(0, 0, 0, 0.05)",
switcher:
"0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)",
"switch-1": "0px 0px 5px rgba(0, 0, 0, 0.15)",
1: "0px 1px 3px rgba(0, 0, 0, 0.08)",
2: "0px 1px 4px rgba(0, 0, 0, 0.12)",
3: "0px 1px 5px rgba(0, 0, 0, 0.14)",
4: "0px 4px 10px rgba(0, 0, 0, 0.12)",
5: "0px 1px 1px rgba(0, 0, 0, 0.15)",
6: "0px 3px 15px rgba(0, 0, 0, 0.1)",
7: "-5px 0 0 #313D4A, 5px 0 0 #313D4A",
8: "1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)",
},
dropShadow: {
1: "0px 1px 0px #E2E8F0",
2: "0px 1px 4px rgba(0, 0, 0, 0.12)",
},
keyframes: {
rotating: {
"0%, 100%": { transform: "rotate(360deg)" },
"50%": { transform: "rotate(0deg)" },
},
},
animation: {
"ping-once": "ping 5s cubic-bezier(0, 0, 0.2, 1)",
rotating: "rotating 30s linear infinite",
"spin-1.5": "spin 1.5s linear infinite",
"spin-2": "spin 2s linear infinite",
"spin-3": "spin 3s linear infinite",
},
},
},
animation: {
'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)',
rotating: 'rotating 30s linear infinite',
'spin-1.5': 'spin 1.5s linear infinite',
'spin-2': 'spin 2s linear infinite',
'spin-3': 'spin 3s linear infinite',
},
},
},
plugins: [],
}
plugins: [],
};

13
packages/frontend/tsconfig.json
View File

@ -1,10 +1,13 @@
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
@ -12,12 +15,14 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src", "src/lib.d.ts"],
"include": [
"src",
"src/lib.d.ts"
]
}

Some files were not shown because too many files have changed in this diff Show More