feat: add meta data (embeds) #49
@ -20,6 +20,7 @@
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-country-flag": "^3.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet-async": "^2.0.5",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-i18next": "^15.0.2",
|
||||
"react-icons": "^4.10.1",
|
||||
|
||||
@ -2,11 +2,7 @@ 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 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';
|
||||
@ -19,6 +15,8 @@ import { Log } from './pages/log/Log.tsx';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
import { ToastContainer } from 'react-toastify';
|
||||
import useColorMode from './hooks/useColorMode.tsx';
|
||||
import { HelmetProvider } from 'react-helmet-async';
|
||||
import { PageMeta } from './components/mini/util/PageMeta.tsx';
|
||||
|
||||
function App() {
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
@ -32,7 +30,10 @@ function App() {
|
||||
setTimeout(() => setLoading(false), 400);
|
||||
}, []);
|
||||
|
||||
return loading ? (
|
||||
return <HelmetProvider>
|
||||
|
||||
|
||||
{loading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
@ -52,7 +53,8 @@ function App() {
|
||||
index
|
||||
element={
|
||||
<>
|
||||
<PageTitle title="simrail.alekswilc.dev | Home" />
|
||||
<PageMeta title="simrail.alekswilc.dev | Home"
|
||||
description="Simrail Stats - The best SimRail logs and statistics site!" />
|
||||
<Home />
|
||||
</>
|
||||
}
|
||||
@ -61,7 +63,8 @@ function App() {
|
||||
path="/leaderboard/trains"
|
||||
element={
|
||||
<>
|
||||
<PageTitle title="simrail.alekswilc.dev | Train Leaderboard" />
|
||||
<PageMeta title="simrail.alekswilc.dev | Train Leaderboard"
|
||||
description="Simrail Stats - The best SimRail logs and statistics site!" />
|
||||
<TrainLeaderboard />
|
||||
</>
|
||||
}
|
||||
@ -71,7 +74,8 @@ function App() {
|
||||
path="/logs/trains"
|
||||
element={
|
||||
<>
|
||||
<PageTitle title="simrail.alekswilc.dev | Train logs" />
|
||||
<PageMeta title="simrail.alekswilc.dev | Trains Logs"
|
||||
description="Simrail Stats - The best SimRail logs and statistics site!" />
|
||||
<TrainLogs />
|
||||
</>
|
||||
}
|
||||
@ -81,7 +85,8 @@ function App() {
|
||||
path="/logs/stations"
|
||||
element={
|
||||
<>
|
||||
<PageTitle title="simrail.alekswilc.dev | Station logs" />
|
||||
<PageMeta title="simrail.alekswilc.dev | Stations Logs"
|
||||
description="Simrail Stats - The best SimRail logs and statistics site!" />
|
||||
<StationLogs />
|
||||
</>
|
||||
}
|
||||
@ -91,7 +96,8 @@ function App() {
|
||||
path="/leaderboard/stations"
|
||||
element={
|
||||
<>
|
||||
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard" />
|
||||
<PageMeta title="simrail.alekswilc.dev | Station Leaderboard"
|
||||
description="Simrail Stats - The best SimRail logs and statistics site!" />
|
||||
<StationLeaderboard />
|
||||
</>
|
||||
}
|
||||
@ -101,8 +107,9 @@ function App() {
|
||||
path="/profile/:id"
|
||||
element={
|
||||
<>
|
||||
<PageTitle title="simrail.alekswilc.dev | User Profile" />
|
||||
{/* page title is modified after API response */}
|
||||
<PageMeta title="simrail.alekswilc.dev | Profile"
|
||||
description="Simrail Stats - The best SimRail logs and statistics site!" />
|
||||
{/* page meta is modified in component! */}
|
||||
<Profile />
|
||||
</>
|
||||
}
|
||||
@ -112,7 +119,8 @@ function App() {
|
||||
path="/log/:id"
|
||||
element={
|
||||
<>
|
||||
<PageTitle title="simrail.alekswilc.dev | Log" />
|
||||
<PageMeta title="simrail.alekswilc.dev | Log"
|
||||
description="Simrail Stats - The best SimRail logs and statistics site!" />
|
||||
{/* page title is modified after API response */}
|
||||
<Log />
|
||||
</>
|
||||
@ -121,7 +129,8 @@ function App() {
|
||||
</Routes>
|
||||
</DefaultLayout>
|
||||
</>
|
||||
);
|
||||
)}
|
||||
</HelmetProvider>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
70
packages/frontend/src/components/mini/util/CardDataStats.tsx
Normal file
70
packages/frontend/src/components/mini/util/CardDataStats.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
|
||||
interface CardDataStatsProps {
|
||||
title: string;
|
||||
total: string;
|
||||
rate?: string;
|
||||
levelUp?: boolean;
|
||||
levelDown?: boolean;
|
||||
}
|
||||
|
||||
export 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>
|
||||
|
||||
{rate && <span
|
||||
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>
|
||||
)}
|
||||
</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
29
packages/frontend/src/components/mini/util/PageMeta.tsx
Normal file
29
packages/frontend/src/components/mini/util/PageMeta.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
|
||||
// https://dev.to/facubotta/meta-data-in-react-1p93
|
||||
export const PageMeta = ({ title = '', description = '', image = '', name = '' }) => {
|
||||
return (
|
||||
<Helmet>
|
||||
{ /* Standard metadata tags */}
|
||||
<title>{title}</title>
|
||||
<link rel="canonical" href={window.location.href} />
|
||||
<meta name="description" content={description} />
|
||||
{ /* Open Graph tags (OG) */}
|
||||
<meta property="og:url" content={window.location.href} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
{/* OG image tags */}
|
||||
<meta property="og:image" content={image} />
|
||||
<meta property="og:image:secure_url" content={image} />
|
||||
<meta property="og:image:type" content="image/jpeg" />
|
||||
<meta property="og:image:width" content="200" />
|
||||
<meta property="og:image:alt" content={`Image of ${title} site`} />
|
||||
{ /* Twitter tags */}
|
||||
{name && <meta name="twitter:creator" content={name} />}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
</Helmet>
|
||||
);
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
interface PageTitleProps {
|
||||
title: string;
|
||||
}
|
||||
|
||||
export const PageTitle: React.FC<PageTitleProps> = ({ title }) => {
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
document.title = title;
|
||||
}, [location, title]);
|
||||
|
||||
return null; // This component doesn't render anything
|
||||
};
|
||||
@ -95,7 +95,7 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
|
||||
<p className="text-meta-3">{train.score}</p>
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
|
||||
<div className="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>;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"profiles": "Profiles"
|
||||
},
|
||||
"title": "Simrail Stats",
|
||||
"description": "The most complete SimRail logs and statistics site!",
|
||||
"description": "Simrail Stats - The best SimRail logs and statistics site!",
|
||||
"buttons": {
|
||||
"project": "Project page",
|
||||
"forum": "Forum Page"
|
||||
|
||||
@ -1,76 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
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>
|
||||
|
||||
{ rate && <>
|
||||
<span
|
||||
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>
|
||||
) }
|
||||
</span>
|
||||
</> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardDataStats;
|
||||
@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chart;
|
||||
@ -1,208 +0,0 @@
|
||||
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,
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
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,
|
||||
},
|
||||
},
|
||||
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[];
|
||||
}[];
|
||||
}
|
||||
|
||||
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 ],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
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">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartOne;
|
||||
@ -1,167 +0,0 @@
|
||||
import { ApexOptions } from "apexcharts";
|
||||
import React, { useState } from "react";
|
||||
import ReactApexChart from "react-apexcharts";
|
||||
|
||||
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",
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: "65%",
|
||||
background: "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
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 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">
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</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="-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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartThree;
|
||||
@ -1,153 +0,0 @@
|
||||
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%",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="chartTwo" className="-ml-5 -mb-9">
|
||||
<ReactApexChart
|
||||
options={ options }
|
||||
series={ state.series }
|
||||
type="bar"
|
||||
height={ 350 }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartTwo;
|
||||
@ -1,112 +0,0 @@
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
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 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 }
|
||||
</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-sm font-medium text-white">
|
||||
{ " " }
|
||||
{ chat.textCount }
|
||||
</span>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</Link>
|
||||
)) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatCard;
|
||||
@ -1,37 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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>
|
||||
</div>
|
||||
Checkbox Text
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckboxFive;
|
||||
@ -1,43 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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"
|
||||
}` }
|
||||
>
|
||||
{ " " }
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Checkbox Text
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckboxFour;
|
||||
@ -1,39 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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"
|
||||
}` }
|
||||
>
|
||||
<span
|
||||
className={ `h-2.5 w-2.5 rounded-sm ${ isChecked && "bg-primary" }` }
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
Checkbox Text
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckboxOne;
|
||||
@ -1,55 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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"
|
||||
}` }
|
||||
>
|
||||
<span
|
||||
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"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Checkbox Text
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckboxThree;
|
||||
@ -1,52 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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" }` }>
|
||||
<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"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Checkbox Text
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckboxTwo;
|
||||
@ -1,62 +0,0 @@
|
||||
import React, { useRef, useEffect } from "react";
|
||||
|
||||
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);
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickListener);
|
||||
|
||||
return () =>
|
||||
{
|
||||
document.removeEventListener("mousedown", handleClickListener);
|
||||
};
|
||||
}, [ exceptionRef, onClick ]);
|
||||
|
||||
return (
|
||||
<div ref={ wrapperRef } className={ `${ className || "" }` }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClickOutside;
|
||||
@ -1,143 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const DropdownDefault = () =>
|
||||
{
|
||||
const [ dropdownOpen, setDropdownOpen ] = useState(false);
|
||||
|
||||
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 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownDefault;
|
||||
@ -1,54 +0,0 @@
|
||||
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>",
|
||||
});
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatePickerOne;
|
||||
@ -1,54 +0,0 @@
|
||||
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>",
|
||||
});
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatePickerTwo;
|
||||
@ -1,251 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
|
||||
interface Option
|
||||
{
|
||||
value: string;
|
||||
text: string;
|
||||
selected: boolean;
|
||||
element?: HTMLElement;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
const isOpen = () =>
|
||||
{
|
||||
return show === true;
|
||||
};
|
||||
|
||||
const select = (index: number, event: React.MouseEvent) =>
|
||||
{
|
||||
const newOptions = [ ...options ];
|
||||
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
setOptions(newOptions);
|
||||
};
|
||||
|
||||
const remove = (index: number) =>
|
||||
{
|
||||
const newOptions = [ ...options ];
|
||||
const selectedIndex = selected.indexOf(index);
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MultiSelect;
|
||||
@ -1,70 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const SelectGroupOne: React.FC = () =>
|
||||
{
|
||||
const [ selectedOption, setSelectedOption ] = useState<string>("");
|
||||
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
|
||||
|
||||
const changeTextColor = () =>
|
||||
{
|
||||
setIsOptionSelected(true);
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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=""
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectGroupOne;
|
||||
@ -1,99 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const SelectGroupTwo: React.FC = () =>
|
||||
{
|
||||
const [ selectedOption, setSelectedOption ] = useState<string>("");
|
||||
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
|
||||
|
||||
const changeTextColor = () =>
|
||||
{
|
||||
setIsOptionSelected(true);
|
||||
};
|
||||
|
||||
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">
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
></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"
|
||||
></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"
|
||||
></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>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectGroupTwo;
|
||||
@ -1,281 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
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_")));
|
||||
|
||||
const [ formState, setFormState ] = useState(
|
||||
defaultValue || {
|
||||
id: "",
|
||||
para: "price",
|
||||
criterion: "0",
|
||||
value: "",
|
||||
type: "0",
|
||||
|
||||
},
|
||||
);
|
||||
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);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (key == "id")
|
||||
{
|
||||
if (!(Object.keys(dataJSON).includes(value) || value == "ALL"))
|
||||
{
|
||||
errorFields.push("INVALID_ID_" + value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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 handleSubmit = (e) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm())
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
onSubmit(formState);
|
||||
|
||||
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 }
|
||||
>×</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">
|
||||
<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 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">
|
||||
<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 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>
|
||||
{ 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>
|
||||
|
||||
);
|
||||
};
|
||||
@ -1,290 +0,0 @@
|
||||
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>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</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 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="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="font-semibold text-black dark:text-white">
|
||||
2K
|
||||
</span>
|
||||
<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="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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
@ -1,312 +0,0 @@
|
||||
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">
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</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>
|
||||
|
||||
<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">
|
||||
<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" 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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_88_10224">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<div>
|
||||
<span className="mb-1.5 text-black dark:text-white">
|
||||
Edit your photo
|
||||
</span>
|
||||
<span className="flex gap-2.5">
|
||||
<button className="text-sm hover:text-primary">
|
||||
Delete
|
||||
</button>
|
||||
<button className="text-sm hover:text-primary">
|
||||
Update
|
||||
</button>
|
||||
</span>
|
||||
</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">
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@ -1,35 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwitcherFour;
|
||||
@ -1,35 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwitcherOne;
|
||||
@ -1,68 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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" }` }>
|
||||
<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"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
<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"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwitcherThree;
|
||||
@ -1,35 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
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>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwitcherTwo;
|
||||
@ -1,70 +0,0 @@
|
||||
import React from "react";
|
||||
import { BsFillTrashFill, BsFillPencilFill } from "react-icons/bs";
|
||||
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) =>
|
||||
{
|
||||
|
||||
|
||||
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">
|
||||
<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" }
|
||||
</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">
|
||||
<span>
|
||||
{ row.type == 0 ? "Info" : row.type == 1 ? "Warning" : "Alert" }
|
||||
</span>
|
||||
</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) }/>
|
||||
|
||||
<BsFillPencilFill
|
||||
className="edit-btn cursor-pointer"
|
||||
onClick={ () => editRow(idx) }/>
|
||||
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}) }
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
@ -1,18 +0,0 @@
|
||||
// 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 />
|
||||
<TableTwo />
|
||||
<TableThree /> */ }
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tables;
|
||||
@ -1,159 +0,0 @@
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
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;
|
||||
@ -1,108 +0,0 @@
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableTwo;
|
||||
@ -1,102 +0,0 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Alerts;
|
||||
@ -1,471 +0,0 @@
|
||||
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>
|
||||
|
||||
<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-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>
|
||||
|
||||
<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-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>
|
||||
|
||||
<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-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>
|
||||
|
||||
{/* <!-- 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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
<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=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_182_46495">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_182_46495">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_182_46495">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<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=""
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_182_46495">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
Button With Icon
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Buttons;
|
||||
@ -1,8 +0,0 @@
|
||||
export type BRAND = {
|
||||
logo: string;
|
||||
name: string;
|
||||
visitors: number;
|
||||
revenues: string;
|
||||
sales: number;
|
||||
conversion: number;
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
export type Chat = {
|
||||
avatar: string;
|
||||
name: string;
|
||||
text: string;
|
||||
time: number;
|
||||
textCount: number;
|
||||
color: string;
|
||||
};
|
||||
@ -1,120 +0,0 @@
|
||||
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) => (
|
||||
|
||||
<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">
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
};
|
||||
// let dataJSON: any;
|
||||
// let headers = new Headers();
|
||||
// headers.append('Access-Control-Allow-Origin', 'http://127.0.0.1:8000');
|
||||
// headers.append("Access-Control-Allow-Methods", 'POST');
|
||||
// headers.append("Access-Control-Allow-Headers", 'Content-Type, Authorization');
|
||||
// fetch("http://127.0.0.1:8000/data",{method:'POST',headers:headers})
|
||||
// .then(response => {
|
||||
// return response
|
||||
// })
|
||||
// .then(data => {
|
||||
// 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 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
export default fireToast;
|
||||
@ -1,6 +0,0 @@
|
||||
export type Package = {
|
||||
name: string;
|
||||
price: number;
|
||||
invoiceDate: string;
|
||||
status: string;
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
export type Product = {
|
||||
image: string;
|
||||
name: string;
|
||||
category: string;
|
||||
price: number;
|
||||
sold: number;
|
||||
profit: number;
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
this folder contains old unused files. remove before release!
|
||||
@ -1,9 +1,9 @@
|
||||
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 { WarningAlert } from '../components/mini/alerts/Warning.tsx';
|
||||
import { CardDataStats } from '../components/mini/util/CardDataStats.tsx';
|
||||
|
||||
export const Home: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@ -3,10 +3,10 @@ import { useParams } from 'react-router-dom';
|
||||
import { ContentLoader } from '../../components/mini/loaders/ContentLoader.tsx';
|
||||
import { WarningAlert } from '../../components/mini/alerts/Warning.tsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { PageTitle } from '../../components/mini/util/PageTitle.tsx';
|
||||
import { TLogResponse, TLogStationData, TLogTrainData } from '../../types/log.ts';
|
||||
import { StationLog } from '../../components/pages/log/StationLog.tsx';
|
||||
import { TrainLog } from '../../components/pages/log/TrainLog.tsx';
|
||||
import { PageMeta } from '../../components/mini/util/PageMeta.tsx';
|
||||
|
||||
export const Log = () => {
|
||||
const { id } = useParams();
|
||||
@ -41,20 +41,26 @@ export const Log = () => {
|
||||
{/* LOADING */}
|
||||
{error === 0 && <ContentLoader />}
|
||||
{/* NOT FOUND */}
|
||||
{error === 2 && <PageTitle title={`simrail.alekswilc.dev | Profile not found`} />}
|
||||
{error === 2 && <PageMeta title="simrail.alekswilc.dev | Record not found"
|
||||
description="This record could not be found." />}
|
||||
{error === 2 && <WarningAlert title={t('log.errors.notfound.title')}
|
||||
description={t('log.errors.notfound.description')} />}
|
||||
{/* BLACKLISTED PROFILE */}
|
||||
{error === 3 && <PageTitle title={`simrail.alekswilc.dev | Blacklisted profile`} />}
|
||||
{/* BLACKLISTED LOG */}
|
||||
{error === 3 && <PageMeta title="simrail.alekswilc.dev | Blacklisted record"
|
||||
description="The record has been blocked." />}
|
||||
{error === 3 && <WarningAlert title={t('log.errors.blacklist.title')}
|
||||
description={t('log.errors.blacklist.description')} />}
|
||||
{/* SUCCESS */}
|
||||
{error === 1 && stationData && <PageTitle
|
||||
title={`simrail.alekswilc.dev | ${stationData.userUsername} | ${stationData.stationName}`} />}
|
||||
{error === 1 && stationData && <PageMeta
|
||||
title={`simrail.alekswilc.dev | ${stationData.userUsername}`}
|
||||
image={stationData.userAvatar}
|
||||
description={`${stationData.stationName} - ${stationData.stationShort}`} />}
|
||||
{error === 1 && stationData && < StationLog data={stationData} />}
|
||||
|
||||
{error === 1 && trainData && <PageTitle
|
||||
title={`simrail.alekswilc.dev | ${trainData.userUsername} | ${trainData.trainName} ${trainData.trainNumber}`} />}
|
||||
{error === 1 && trainData && <PageMeta
|
||||
title={`simrail.alekswilc.dev | ${trainData.userUsername}`}
|
||||
image={trainData.userAvatar}
|
||||
description={`${trainData.trainName} - ${trainData.trainNumber}`} />}
|
||||
{error === 1 && trainData && < TrainLog data={trainData} />}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,26 +1,22 @@
|
||||
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 { PageTitle } from "../../components/mini/util/PageTitle.tsx";
|
||||
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 { PageMeta } from '../../components/mini/util/PageMeta.tsx';
|
||||
|
||||
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;
|
||||
@ -39,19 +35,24 @@ export const Profile = () =>
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* LOADING */ }
|
||||
{ error === 0 && <ContentLoader/> }
|
||||
{/* NOT FOUND */ }
|
||||
{ error === 2 && <PageTitle title={ `simrail.alekswilc.dev | Profile not found` }/> }
|
||||
{ error === 2 && <WarningAlert title={ t("profile.errors.notfound.title") }
|
||||
description={ t("profile.errors.notfound.description") }/> }
|
||||
{/* BLACKLISTED PROFILE */ }
|
||||
{ error === 3 && <PageTitle title={ `simrail.alekswilc.dev | Blacklisted profile` }/> }
|
||||
{ error === 3 && <WarningAlert title={ t("profile.errors.blacklist.title") }
|
||||
description={ t("profile.errors.blacklist.description") }/> }
|
||||
{/* SUCCESS */ }
|
||||
{ error === 1 && <PageTitle title={ `simrail.alekswilc.dev | ${ data.steam.personname }'s profile` }/> }
|
||||
{ error === 1 && <ProfileCard data={ data }/> }
|
||||
{/* LOADING */}
|
||||
{error === 0 && <ContentLoader />}
|
||||
{/* NOT FOUND */}
|
||||
{error === 2 && <PageMeta title="simrail.alekswilc.dev | Profile not found"
|
||||
description="Player's profile could not be found or the player has a private Steam profile." />}
|
||||
{error === 2 && <WarningAlert title={t('profile.errors.notfound.title')}
|
||||
description={t('profile.errors.notfound.description')} />}
|
||||
{/* BLACKLISTED PROFILE */}
|
||||
{error === 3 && <PageMeta title="simrail.alekswilc.dev | Blacklisted profile"
|
||||
description="This player's profile has been blocked." />}
|
||||
{error === 3 && <WarningAlert title={t('profile.errors.blacklist.title')}
|
||||
description={t('profile.errors.blacklist.description')} />}
|
||||
{/* SUCCESS */}
|
||||
{error === 1 && <PageMeta image={data.steam.avatarfull}
|
||||
title={`simrail.alekswilc.dev | ${data.steam.personname}'s profile`}
|
||||
description={`${data.player.trainDistance ? 0 : ((data.player.trainDistance / 1000).toFixed(2))} kilometers travelled |
|
||||
${data.player.dispatcherTime ? 0 : Math.floor(data.player.dispatcherTime / 3600000)}h dispatchers hours`} />}
|
||||
{error === 1 && <ProfileCard data={data} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
28
yarn.lock
28
yarn.lock
@ -1722,6 +1722,13 @@ inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@~2.0.1, inherits@~2.0.3:
|
||||
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
|
||||
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
|
||||
|
||||
invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
ipaddr.js@1.9.1:
|
||||
version "1.9.1"
|
||||
resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
|
||||
@ -1875,7 +1882,7 @@ lodash@^4.17.21:
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
@ -2318,6 +2325,20 @@ react-dom@^18.2.0:
|
||||
loose-envify "^1.1.0"
|
||||
scheduler "^0.23.2"
|
||||
|
||||
react-fast-compare@^3.2.2:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
|
||||
integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
|
||||
|
||||
react-helmet-async@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
|
||||
integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
|
||||
dependencies:
|
||||
invariant "^2.2.4"
|
||||
react-fast-compare "^3.2.2"
|
||||
shallowequal "^1.1.0"
|
||||
|
||||
react-hot-toast@^2.4.1:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
|
||||
@ -2565,6 +2586,11 @@ setprototypeof@1.2.0:
|
||||
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
|
||||
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
|
||||
|
||||
shallowequal@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
|
||||
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
|
||||
|
||||
shebang-command@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user