Added Market + many improvements

This commit is contained in:
Deltora72 2022-12-03 21:27:06 +03:30
parent e1757260b3
commit b84ceef647
194 changed files with 10839 additions and 21528 deletions

3
.env
View File

@ -1 +1,2 @@
SITE_URL="https://flierland.ca"
SITE_URL="https://flierland.ca"
NEXTAUTH_SECRET="kCor5acFgplogZSuKu8dvT7DS3p+/sQQok0RZCA3kv4="

View File

@ -1,12 +0,0 @@
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": "@storybook/react"
}

View File

@ -1,9 +0,0 @@
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}

View File

@ -11,15 +11,10 @@ const withPWA = require('next-pwa')({
const nextConfig = {
reactStrictMode: true,
// i18n: {
// locales: ['fa'],
// defaultLocale: 'fa',
// localeDetection: false,
// images: {
// loader: 'custom',
// domains: ['localhost', '192.168.1.105'],
// },
images: {
loader: 'custom',
domains: ['localhost'],
},
swcMinify: true,
compiler: {
removeConsole: process.env.NODE_ENV !== 'development',

22522
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -7,45 +7,38 @@
"start": "next start",
"lint": "next lint",
"test": "jest --watch",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"postbuild": "next-sitemap"
},
"dependencies": {
"@apollo/client": "^3.5.9",
"@reduxjs/toolkit": "^1.8.0",
"@reduxjs/toolkit": "^1.9.1",
"@types/react-redux": "^7.1.23",
"concurrently": "^7.6.0",
"embla-carousel-react": "^7.0.3",
"graphql": "^16.3.0",
"html-react-parser": "^3.0.1",
"next": "^12.3.1",
"next": "^13.0.5",
"next-auth": "^4.10.3",
"next-pwa": "^5.6.0",
"next-sitemap": "^3.1.22",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2"
"react-redux": "^8.0.5",
"swr": "^1.3.0"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-interactions": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^13.4.0",
"@types/node": "^17.0.21",
"@types/react": "^17.0.40",
"autoprefixer": "^10.4.2",
"babel-loader": "^8.2.3",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"eslint-plugin-storybook": "^0.5.7",
"eslint-config-next": "^13.0.5",
"jest": "^27.5.1",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.18",
"tailwindcss": "^3.2.4",
"typescript": "^4.6.2"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 627 KiB

BIN
public/asd.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 912 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
public/login-bg-1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/market/45t45g.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

BIN
public/market/65s4df.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

BIN
public/market/asdasd.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/market/asdasd.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

BIN
public/market/asddfgdfg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

BIN
public/market/fdgdfh.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 981 KiB

BIN
public/market/fdgh.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 KiB

BIN
public/market/fdsghdfg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 KiB

BIN
public/market/market-1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/market/market-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/market/market-3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 KiB

BIN
public/market/market-4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
public/market/market-5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
public/market/market-6.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 569 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 419 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 514 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 626 KiB

BIN
public/market/nfgfgfg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

BIN
public/market/sports-1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 92 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 92 KiB

View File

@ -67,21 +67,9 @@ if (!self.define) {
});
};
}
define(['./workbox-eac1af49'], (function (workbox) { 'use strict';
define(['./workbox-327c579b'], (function (workbox) { 'use strict';
/**
* Welcome to your Workbox-powered service worker!
*
* You'll need to register this file in your web app.
* See https://goo.gl/nhQhGp
*
* The rest of the code is auto-generated. Please don't update this file
* directly; instead, make changes to your Workbox build configuration
* and re-run your build process.
* See https://goo.gl/2aRDsh
*/
importScripts();
importScripts("worker-development.js");
self.skipWaiting();
workbox.clientsClaim();
workbox.registerRoute("/", new workbox.NetworkFirst({
@ -100,7 +88,6 @@ define(['./workbox-eac1af49'], (function (workbox) { 'use strict';
headers: response.headers
});
}
return response;
}
}]

File diff suppressed because one or more lines are too long

BIN
public/toronto-skyline.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,5 @@
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
self.__WB_DISABLE_DEV_LOGS = true;
/******/ })()
;

View File

@ -1,284 +0,0 @@
import React, { useEffect, useState } from "react"
import { useQuery, gql } from "@apollo/client";
import client from "../../common/data/apollo-client";
import { useSelector, useDispatch } from 'react-redux'
import { setGlobalData } from '../../common/redux/slices/global'
import { GeneralData } from '../../common/data/fragments/general'
import { useRouter } from 'next/router'
import Parser from "components/parser/parser";
import { whatsApp, telegram, copy } from 'services/social/social'
import Image from "components/image/image";
import Button from "components/button/button"
import Popover from "components/popover/popover"
import Breadcrumb from "components/breadcrumb/breadcrumb"
import Meta from "components/meta/meta"
import { url, basePath, serverAddress } from 'services/general/general'
import translate from 'services/translation/translation'
const Article = (data) => {
const router = useRouter();
const billboard = data.data.Billboards[0];
const dispatch = useDispatch();
const metaData = {
title: billboard.title,
description: billboard.meta_description,
og: {
title: billboard.title,
url: `${basePath()}/magazine/${url(billboard.title)}`,
image: `https://cdn.flierland.ca/assets/${billboard.gallery[0].directus_files_id.id}?withoutEnlargement=true&format=webp&height=${Math.round(billboard.gallery[0].directus_files_id.width > 1800 ? 1800 * 0.5235 : billboard.gallery[0].directus_files_id.height)}&quality=100`,
type: `website`,
}
}
useEffect(() => {
dispatch(setGlobalData({
billboard_categories: data.data.billboard_categories,
magazine_categories: data.data.magazine_categories,
dictionary: data.data.dictionary,
}));
}, [])
const Gallery = ({ pics }) => {
const cover = pics[0].directus_files_id;
return <div className="grid grid-cols-1 gap-1 mt-2 sm:grid-cols-5 sm:gap-2 lg:mt-0">
<Image
src={cover.id}
alt={billboard.title}
width={cover.width}
height={cover.height}
quality={75}
ar={['1.91/1', '1.91/1', '1.91/1', '1.91/1']}
imageSizes={[600, 700, 800, 930]}
priority={true}
className="rounded-[3px] sm:col-span-4"
figureClass="aspect-1.91/1 w-full sm:col-span-4"
/>
<div className="grid grid-cols-3 gap-1 sm:grid-cols-1 sm:col-span-1 sm:gap-2">
{pics.slice(1, 4).map((x, i) => (
(pics.length > 4 && i === 2) ?
<div key={x.directus_files_id.id} className="relative">
<span className="grid justify-center items-center absolute w-full h-full rounded-[3px] bg-black bg-opacity-50 text-white text-2xl lg:text-3xl font-bold select-none z-10">{pics.length - 4} +</span>
<Image
key={x.directus_files_id.id}
src={x.directus_files_id.id}
alt={billboard.title}
width={x.directus_files_id.width}
height={x.directus_files_id.height}
quality={75}
ar={['1.91/1', '1.91/1', '1.91/1', '1.91/1']}
imageSizes={[225, 225, 225, 225]}
priority={true}
className="rounded-[3px]"
figureClass=""
/>
</div>
:
<Image
key={x.directus_files_id.id}
src={x.directus_files_id.id}
alt={billboard.title}
width={x.directus_files_id.width}
height={x.directus_files_id.height}
quality={75}
ar={['1.91/1', '1.91/1', '1.91/1', '1.91/1']}
imageSizes={[225, 225, 225, 225]}
priority={true}
className="rounded-[3px]"
figureClass=""
/>
))}
</div>
</div>
}
const Header = ({ billboard }) => {
return <>
<Breadcrumb className="mt-3" data={billboard.billboard_category[0].billboard_categories_id.name} />
<h1 className="text-lg mt-3 mb-4">{billboard.title}</h1>
</>
}
const Title = ({ title, ...props }) => {
return <span className="flex items-center w-full bg-light-gray py-2 px-3 rounded text-sm text-secondary lg:px-2">
{props.children}
{title}
</span>
}
const Dscription = ({ content }) => {
return <div className="border-t pt-4"><Parser text={content} className="lg:text-sm" /></div>
}
const Contact = ({ billboard }) => {
const ContactDetails = () => {
return <div className="grid gap-3 pt-3 pb-1 px-2 lg:px-2">
<span className="w-full block text-[0.8rem]"><span className="text-lg text-primary leading-4 font-bold pl-2"></span>{billboard.address}</span>
<a className="link w-full block text-[0.8rem]" href={`tel:${billboard.phone_number}`}><span className="text-lg text-primary leading-4 font-bold pl-2"></span>{billboard.phone_number}</a>
<a className="link w-full block text-[0.8rem]" href={billboard.website} target="blank"><span className="text-lg text-primary leading-4 font-bold pl-2"></span>{billboard.website}</a>
</div>
}
const SocialMedia = () => {
if (billboard.instagram || billboard.facebook || billboard.twitter || billboard.youtube) {
return <ul className="flex w-[calc(100%_-_1rem)] border-b border-dashed mx-2 list-none py-3 lg:mx-2">
{billboard.instagram &&
<li className="inline-block ml-2">
<a href={billboard.instagram} target="blank" className="block p-2 rounded-full cursor-pointer bg-light-gray">
<svg className="w-6 h-6 fill-[#c13584]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
</a>
</li>
}
{billboard.facebook &&
<li className="inline-block ml-2">
<a href={billboard.facebook} target="blank" className="block p-2 rounded-full cursor-pointer bg-light-gray">
<svg className="w-6 h-6 fill-[#3b5998]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>
</a>
</li>
}
{billboard.twitter &&
<li className="inline-block ml-2">
<a href={billboard.twitter} target="blank" className="block p-2 rounded-full cursor-pointer bg-light-gray">
<svg className="w-6 h-6 fill-[#1da1f2]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
</a>
</li>
}
{billboard.youtube &&
<li className="inline-block ml-2">
<a href={billboard.youtube} target="blank" className="block p-2 rounded-full cursor-pointer bg-light-gray">
<svg className="w-6 h-6 fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>
</a>
</li>
}
</ul>
}
return ''
}
const Map = () => {
return <a
href={`https://www.google.com/maps/dir/?api=1&origin=&destination=${encodeURIComponent(billboard.address)}&dir_action=navigate`}
target="blank"
className="flex justify-center items-center w-full mt-3 mb-2 p-3 bg-sunny rounded shadow lg:flex-col lg:p-8"
>
<img
src="/map-1.png"
alt=""
className="block w-10 lg:w-24"
/>
{/* <svg className="w-24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 256C43 256 0 299 0 352S96 512 96 512S192 405 192 352S149 256 96 256ZM16 352C16 308 52 272 96 272S176 308 176 352C176 382 131 446 96 488C61 446 16 382 16 352ZM96 320C78 320 64 334 64 352S78 384 96 384S128 370 128 352S114 320 96 320ZM96 368C87 368 80 361 80 352S87 336 96 336C105 336 112 343 112 352S105 368 96 368ZM512 96C512 43 469 0 416 0S320 43 320 96S416 256 416 256S512 149 512 96ZM416 16C460 16 496 52 496 96C496 126 451 190 416 232C381 190 336 126 336 96C336 52 372 16 416 16ZM448 96C448 78 434 64 416 64S384 78 384 96S398 128 416 128S448 114 448 96ZM400 96C400 87 407 80 416 80C425 80 432 87 432 96S425 112 416 112C407 112 400 105 400 96ZM440 368H312C281 368 256 343 256 312S281 256 312 256H352C356 256 360 252 360 248S356 240 352 240H312C272 240 240 272 240 312S272 384 312 384H440C471 384 496 409 496 440S471 496 440 496H160C156 496 152 500 152 504S156 512 160 512H440C480 512 512 480 512 440S480 368 440 368Z"></path></svg> */}
<span className="text-secondary text-xl font-bold mr-2 lg:mr-0 lg:mt-5 lg:text-2xl">{translate('billboard-navigation-text')}</span>
</a>
}
return <div className="py-1">
<Title title={translate("billboard-page-headers-contact")}>
<svg className="block w-4 h-4 fill-secondary float-right ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M485 331C485 331 485 331 485 331L383 287C364 279 343 285 330 300L297 341C244 312 200 268 172 215L212 182C228 169 233 148 225 129L181 27C173 7 151 -4 130 1L35 23C14 28 0 46 0 67C0 312 200 512 445 512C466 512 484 498 489 477L511 382C516 361 505 339 485 331ZM458 470C456 476 451 480 445 480C217 480 32 295 32 67C32 61 36 56 42 54L137 32C138 32 139 32 140 32C145 32 150 35 152 40L196 142C198 147 196 154 192 157L141 199C136 203 134 211 137 218C170 286 226 342 294 375C301 378 309 377 313 371L355 320C359 316 365 314 370 316L472 360C478 363 481 369 480 375L458 470Z"></path></svg>
</Title>
<ContactDetails />
<SocialMedia />
<Map />
</div>
}
const WorkingHours = ({ days }) => {
const Days = ({ days }) => {
return <ul className="block w-full pt-2 pb-1 px-2 divide-y divide-dashed lg:px-2">
{days.map((item, i) => (
<li key={i} className="flex flex-row-reverse justify-between items-center w-full">
<span className="text-[0.8rem]">{item.weekday}</span>
<span className="text-[0.8rem]">{`${item.to.slice(0, 5)} - ${item.from.slice(0, 5)}`}</span>
</li>
))}
</ul>
}
return <div className="pt-1">
<Title title={translate("billboard-page-headers-hours")}>
<svg className="block w-4 h-4 fill-secondary float-right ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 16C123 16 16 123 16 256C16 389 123 496 256 496S496 389 496 256C496 123 389 16 256 16ZM256 464C141 464 48 371 48 256S141 48 256 48S464 141 464 256S371 464 256 464ZM272 249V128C272 119 265 112 256 112S240 119 240 128V256C240 260 242 264 245 267L325 347C328 350 332 352 336 352S344 350 347 347C354 341 354 331 347 325L272 249Z"></path></svg>
</Title>
<Days days={days} />
</div>
}
return (
<article className="fullscreen grid grid-cols-1 gap-0 pt-2 pb-3 lg:bg-transparent lg:w-full lg:grid-cols-12 lg:grid-flow-row-dense lg:gap-6 lg:my-8 lg:pt-4 lg:pb-4 lg:px-0 lg:max-w-[var(--max-width)] lg:mx-auto">
<div className="lg:col-span-8 lg:bg-white lg:shadow-strong lg:p-4 rounded-lg lg:row-span-2">
<Meta data={metaData} />
<Gallery pics={billboard.gallery} />
<Header billboard={billboard} />
<Dscription content={billboard.body} />
</div>
<div className="lg:col-span-4 lg:bg-white lg:shadow-strong lg:p-4 rounded-lg">
<WorkingHours days={billboard.working_hours} />
<Contact billboard={billboard} />
</div>
</article>
)
}
export default Article
export async function getStaticPaths() {
const { data } = await client.query({
query: gql`
query GetBillboardData {
Billboards {
title
}
}
`
});
const paths = data.Billboards.map((x) => ({
params: { billboard: url(x.title) },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const { data } = await client.query({
query: gql`
${GeneralData}
query GetGeneralData {
...GeneralData
Billboards(filter: { title: { _eq: "${params.billboard.replace(/-/g, ' ') }" } }) {
id
title
body
neighborhood {
name
}
city {
name
}
address
phone_number
email
website
instagram
facebook
twitter
youtube
working_hours
billboard_category {
billboard_categories_id {
name
}
}
meta_description
gallery {
directus_files_id {
id
description
width
height
}
}
}
}
`
});
return {
props: {
data
},
};
}

View File

@ -1,109 +0,0 @@
import React, { useEffect } from "react"
import { useQuery, gql } from "@apollo/client";
import client from "../../../common/data/apollo-client";
import { useSelector, useDispatch } from 'react-redux'
import { setGlobalData } from '../../../common/redux/slices/global'
import { GeneralData } from '../../../common/data/fragments/general'
import { useRouter } from 'next/router'
import Parser from "components/parser/parser";
import { whatsApp, telegram, copy } from 'services/social/social'
import Image from "components/image/image";
import Button from "components/button/button"
import Breadcrumb from "components/breadcrumb/breadcrumb"
import Link from "components/link/link"
import { url } from 'services/general/general'
import translate from 'services/translation/translation'
import LatestBillboards from '../../../common/templates/billboard/latest-billboards'
const Category = ({ data, params }) => {
const router = useRouter();
const billboards = data.Billboards;
const dispatch = useDispatch();
useEffect(() => {
dispatch(setGlobalData({
billboard_categories: data.billboard_categories,
magazine_categories: data.magazine_categories,
dictionary: data.dictionary,
}));
}, [])
return (
<div className="block pt-6 w-screen -mx-gi bg-white 2xl:w-full 2xl:mx-0">
<Breadcrumb className="mt-3 mb-2 px-gi" />
<h1 className="text-lg mb-5 px-gi"><span className="text-xl font-semibold text-title-color ml-1"></span>{params.category.replace(/-/g, ' ')}</h1>
<LatestBillboards billboards={billboards} />
</div>
)
}
export default Category
export async function getStaticPaths() {
const { data } = await client.query({
query: gql`
query GetCategoriesData {
billboard_categories {
name
}
}
`
});
const paths = data.billboard_categories.map((x) => ({
params: { category: url(x.name) },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const { data } = await client.query({
query: gql`
${GeneralData}
query GetCategoryData {
...GeneralData
Billboards(filter: { billboard_category: { billboard_categories_id: { name: { _eq: "${params.category.replace(/-/g, ' ')}" } }}}, sort: ["sort", "-date_created"]) {
id
title
body
neighborhood {
name
}
city {
name
}
address
phone_number
email
website
instagram
facebook
twitter
youtube
working_hours
billboard_category {
billboard_categories_id {
name
}
}
meta_description
gallery {
directus_files_id {
id
description
width
height
}
}
}
}
`
});
return {
props: {
data,
params
},
};
}

View File

@ -1,79 +0,0 @@
import React, { useEffect } from "react"
import { useQuery, gql } from "@apollo/client";
import client from "../../common/data/apollo-client";
import { useSelector, useDispatch } from 'react-redux'
import { setGlobalData } from '../../common/redux/slices/global'
import { GeneralData } from '../../common/data/fragments/general'
import LatestBillboards from '../../common/templates/billboard/latest-billboards'
const Magazine = (data) => {
const dispatch = useDispatch();
const billboards = data.data.Billboards;
useEffect(() => {
dispatch(setGlobalData({
billboard_categories: data.data.billboard_categories,
magazine_categories: data.data.magazine_categories,
dictionary: data.data.dictionary,
}));
}, [])
return (
<div className="block pt-6 w-screen -mx-gi bg-white 2xl:w-full 2xl:mx-0">
<h1 className="px-gi">Magazine page</h1>
<LatestBillboards billboards={billboards} />
</div>
)
}
export default Magazine;
export async function getStaticProps() {
const { data } = await client.query({
query: gql`
${GeneralData}
query GetGeneralData {
...GeneralData
Billboards {
id
title
body
neighborhood {
name
}
city {
name
}
address
phone_number
email
website
instagram
facebook
twitter
youtube
working_hours
billboard_category {
billboard_categories_id {
name
}
}
meta_description
gallery {
directus_files_id {
id
description
width
height
}
}
}
}
`
});
return {
props: {
data
},
};
}

View File

@ -1,8 +0,0 @@
import Image from 'next/image'
const Contact = () => {
return (
<div className="mt-2"></div>
)
}
export default Contact;

View File

@ -1,22 +0,0 @@
import '../common/styles/globals.css'
import Layout from '../common/templates/general/layout/layout'
import { store } from '../common/redux/store/store'
import { Provider } from 'react-redux'
import Head from 'next/head'
function MyApp({ children }) {
return (
<Provider store={store}>
<Head>
<link rel="icon" href="/favicon.svg" />
<link rel="preload" href="/fonts/IRANSansWeb.woff2" as="font" type="font/woff2" crossOrigin="" key="webFont" />
<link rel="preload" href="/fonts/IRANSansWeb_Medium.woff2" as="font" type="font/woff2" crossOrigin="" key="webFont" />
</Head>
<Layout>
{children}
</Layout>
</Provider>
)
}
export default MyApp

View File

@ -1,198 +0,0 @@
import React, { useEffect, useState } from "react"
import { useQuery, gql } from "@apollo/client";
import client from "../../common/data/apollo-client";
import { useSelector, useDispatch } from 'react-redux'
import { setGlobalData } from '../../common/redux/slices/global'
import { GeneralData } from '../../common/data/fragments/general'
import { useRouter } from 'next/router'
import Parser from "components/parser/parser";
import { whatsApp, telegram, copy } from 'services/social/social'
import Image from "components/image/image";
import Button from "components/button/button"
import Popover from "components/popover/popover"
import Breadcrumb from "components/breadcrumb/breadcrumb"
import Meta from "components/meta/meta"
import { url, basePath, serverAddress } from 'services/general/general'
import translate from 'services/translation/translation'
const Article = (data) => {
const router = useRouter();
const article = data.data.Articles[0];
const dispatch = useDispatch();
const metaData = {
title: article.title,
description: article.meta_description,
og: {
title: article.title,
url: `${basePath()}/magazine/${url(article.title)}`,
image: `https://cdn.flierland.ca/assets/${article.cover_photo.id}?withoutEnlargement=true&format=webp&height=${Math.round(article.cover_photo.width > 1800 ? 1800 * 0.5235 : article.cover_photo.height)}&quality=100`,
type: `article`,
}
}
const [copyPopoverText, setCopyPopoverText] = useState('copy-success');
const [copyPopoverOpen, setCopyPopoverOpen] = useState(false);
useEffect(() => {
dispatch(setGlobalData({
billboard_categories: data.data.billboard_categories,
magazine_categories: data.data.magazine_categories,
dictionary: data.data.dictionary,
}));
}, [])
const copyUrl = () => {
copy(router, setCopyPopoverText);
setCopyPopoverOpen(true);
}
return (
<div className="w-screen -mx-[var(--gi)] sm:w-full sm:mx-0 grid xl:grid-cols-5">
<Meta data={metaData} />
<article className="sm:mb-4 pt-6 pb-2 xl:col-span-3 max-w-[850px] mx-auto px-5 bg-white rounded-sm">
<header>
{/* cover photo */}
<Image
src={article.cover_photo.id}
alt={article.cover_photo.alt}
width={article.cover_photo.width}
height={article.cover_photo.height}
quality={75}
ar={['1.91/1', '1.91/1', '1.91/1', '1.91/1']}
imageSizes={[600, 700, 800, 930]}
priority={true}
className="rounded"
figureClass="aspect-1.91/1 mt-4 mb-5"
/>
{/* title */}
<Breadcrumb className="mt-3" data={article.article_category[0].magazine_categories_id.name} />
<h1 className="text-xl font-semibold leading-7 my-3 lg:text-2xl">{article.title}</h1>
{/* meta info */}
<div className="flex flex-row items-center h-12 mt-6 pb-3 border-b border-solid border-border-gray-bottom">
{article.user_created.avatar &&
<Image
src={article.user_created.avatar.id}
alt={article.user_created.first_name}
width={article.user_created.avatar.width}
height={article.user_created.avatar.height}
ar={['1/1']}
imageSizes={[50]}
simple
className="block w-12 h-12 rounded-full object-cover bg-secondary ml-3 shrink-0"
/>
}
<div className="flex flex-col justify-between w-full h-12">
<span className="text-primary text-sm">{`${article.user_created.first_name + ' '} ${article.user_created.last_name ? article.user_created.last_name : ''}`}</span>
<time className="text-sm text-gray-600" dateTime={article.date_created.replace('T', ' ').slice(0, 16)}>{article.date_created.slice(0, 10).split("-").reverse().join("-")}</time>
</div>
</div>
</header>
{/* digest */}
<p className="text-sm leading-6 bg-digest border border-digest-border p-3 mt-4 mb-3 rounded text-right lg:text-base lg:leading-8">{article.digest}</p>
{/* body */}
<Parser text={article.body} />
{/* social share buttons */}
<div className="pb-2 block mb-4">
<span className="text-sm mt-4 mb-3 block">{translate("article-share-title")}</span>
<div className="grid grid-cols-3 gap-2 items-center justify-start max-w-[316px] lg:max-w-[337px]">
<a className="w-[100px] lg:w-[107px] h-8" target="blank" href={whatsApp(router)}>
<Button
text="article-share-whatsapp"
className="bg-[#25d366] text-white text-xs lg:text-sm w-[100px] lg:w-[107px] h-8 p-2 inline-flex justify-center items-center"
leftIcon={<svg className="w-4 h-4 lg:w-6 lg:h-6 fill-current ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>}
/>
</a>
<a className="w-[100px] lg:w-[107px] h-8" target="blank" href={telegram(article.title, router)}>
<Button
text="article-share-telegram"
className="bg-[#08c] text-white text-xs lg:text-sm w-[100px] lg:w-[107px] h-8 p-2 inline-flex justify-center items-center"
leftIcon={<svg className="w-4 h-4 lg:w-6 lg:h-6 fill-current ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"></path></svg>}
/>
</a>
<div className="flex relative">
<Button
text="article-share-copy"
onClick={copyUrl}
className="bg-sky text-white text-xs lg:text-sm w-[100px] lg:w-[107px] h-8 p-2 inline-flex justify-center items-center"
leftIcon={<svg className="w-4 h-4 sm:w-6 sm:h-6 fill-current ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg>}
/>
<Popover position="top" content={translate(copyPopoverText)} open={copyPopoverOpen} onClose={(e) => setCopyPopoverOpen(e)} />
</div>
</div>
</div>
</article>
</div>
)
}
export default Article
export async function getStaticPaths() {
const { data } = await client.query({
query: gql`
query GetArticleData {
Articles {
title
}
}
`
});
const paths = data.Articles.map((x) => ({
params: { article: url(x.title) },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const { data } = await client.query({
query: gql`
${GeneralData}
query GetGeneralData {
...GeneralData
Articles(filter: { title: { _eq: "${params.article.replace(/-/g, ' ')}" } }) {
id
title
meta_description
article_category {
magazine_categories_id {
name
}
}
user_created {
first_name
last_name
avatar {
id
width
height
}
}
date_created
digest
body
cover_photo {
id
title
description
filename_download
width
height
type
}
}
}
`
});
return {
props: {
data
},
};
}

View File

@ -1,103 +0,0 @@
import React, { useEffect } from "react"
import { useQuery, gql } from "@apollo/client";
import client from "../../../common/data/apollo-client";
import { useSelector, useDispatch } from 'react-redux'
import { setGlobalData } from '../../../common/redux/slices/global'
import { GeneralData } from '../../../common/data/fragments/general'
import { useRouter } from 'next/router'
import Parser from "components/parser/parser";
import { whatsApp, telegram, copy } from 'services/social/social'
import Image from "components/image/image";
import Button from "components/button/button"
import Breadcrumb from "components/breadcrumb/breadcrumb"
import Link from "components/link/link"
import { url } from 'services/general/general'
import translate from 'services/translation/translation'
import LatestArticles from '../../../common/templates/magazine/latest-articles'
const Category = ({ data, params }) => {
const router = useRouter();
const articles = data.Articles;
const dispatch = useDispatch();
useEffect(() => {
dispatch(setGlobalData({
billboard_categories: data.billboard_categories,
magazine_categories: data.magazine_categories,
dictionary: data.dictionary,
}));
}, [])
return (
<div className="block pt-6 pb-4 w-screen sm:w-full -mx-gi bg-white">
<Breadcrumb className="mt-3 mb-2 px-gi" />
<h1 className="text-lg mb-5 px-gi"><span className="text-xl font-semibold text-title-color ml-1"></span>{params.category.replace(/-/g, ' ')}</h1>
<LatestArticles articles={articles} showAll />
</div>
)
}
export default Category
export async function getStaticPaths() {
const { data } = await client.query({
query: gql`
query GetCategoriesData {
magazine_categories {
name
}
}
`
});
const paths = data.magazine_categories.map((x) => ({
params: { category: url(x.name) },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const { data } = await client.query({
query: gql`
${GeneralData}
query GetCategoryData {
...GeneralData
Articles(filter: { article_category: { magazine_categories_id: { name: { _eq: "${params.category.replace(/-/g, ' ')}" } }}}, sort: ["sort", "-date_created"]) {
id
title
article_category {
magazine_categories_id {
name
}
}
user_created {
first_name
last_name
avatar {
id
}
}
date_created
digest
body
cover_photo {
id
title
description
filename_download
width
height
type
}
}
}
`
});
return {
props: {
data,
params
},
};
}

View File

@ -1,74 +0,0 @@
import React, { useEffect } from "react"
import Image from 'next/image'
import { useQuery, gql } from "@apollo/client";
import client from "../../common/data/apollo-client";
import { useSelector, useDispatch } from 'react-redux'
import { setGlobalData } from '../../common/redux/slices/global'
import { GeneralData } from '../../common/data/fragments/general'
import LatestArticles from '../../common/templates/magazine/latest-articles'
const Magazine = (data) => {
const dispatch = useDispatch();
const articles = data.data.Articles;
useEffect(() => {
dispatch(setGlobalData({
billboard_categories: data.data.billboard_categories,
magazine_categories: data.data.magazine_categories,
dictionary: data.data.dictionary,
}));
}, [])
return (
<div className="block pt-6 w-screen sm:w-full -mx-[var(--gi)] bg-white">
<h1 className="px-[var(--gi)]">Magazine page</h1>
<LatestArticles articles={articles} footer showAll />
</div>
)
}
export default Magazine;
export async function getStaticProps() {
const { data } = await client.query({
query: gql`
${GeneralData}
query GetGeneralData {
...GeneralData
Articles(sort: ["sort", "-date_created"]) {
id
title
article_category {
magazine_categories_id {
name
}
}
user_created {
first_name
last_name
avatar {
id
}
}
date_created
digest
body
cover_photo {
id
title
description
filename_download
width
height
type
}
}
}
`
});
return {
props: {
data
},
};
}

View File

@ -1,72 +0,0 @@
import React, { useEffect } from "react"
import { useQuery, gql } from "@apollo/client";
import client from "../common/data/apollo-client";
import { useSelector, useDispatch } from 'react-redux'
import { setGlobalData } from '../common/redux/slices/global'
import { GeneralData } from '../common/data/fragments/general'
import translate from "services/translation/translation";
import { url } from 'services/general/general'
import Meta from "components/meta/meta"
import Link from "components/link/link"
const Home = (data) => {
const dispatch = useDispatch();
const metaData = {
title: translate('home-page-main-title'),
description: '',
}
const tiles = [
{ title: "home-promo-shopping-title", text: "home-promo-shopping-text", icon: "diet.png", url: "فروشگاه-ها-و-مراکز-خرید" },
{ title: "home-promo-fun-title", text: "home-promo-fun-text", icon: "park.png", url: "تفریحی-و-سرگرمی" },
{ title: "home-promo-attraction-title", text: "home-promo-attraction-text", icon: "tourist.png", url: "مراکز-گردشگری-و-فرهنگی" },
{ title: "home-promo-medical-title", text: "home-promo-medical-text", icon: "medical-team.png", url: "پزشکی" },
]
useEffect(() => {
dispatch(setGlobalData(data.data));
})
return (
<>
<Meta data={metaData} />
<h1 className="text-2xl leading-10 lg:text-3xl text-center w-full py-5 lg:pt-16 lg:pb-16">{translate('home-page-main-title')}</h1>
<div className="grid grid-rows-4 gap-3 relative pt-3 pb-6 sm:grid-rows-2 sm:grid-cols-2 sm:gap-4 sm:max-w-[800px] sm:mx-auto xl:grid-rows-1 xl:grid-cols-4 xl:max-w-none xl:mx-4">
{tiles.map(x => (
<div className="flex items-center rounded sm:flex-col" key={x.title}>
<Link className="h-full" href={`/billboard/cats/${x.url}`}>
<div className="block w-28 h-28 shrink-0 ml-3 bg-white rounded-md sm:w-full sm:h-auto sm:ml-0">
<img className="block w-28 h-28 object-cover p-2 shadow-sm sm:w-full sm:h-auto sm:px-24 sm:py-4 sm:rounded-b-none" src={`/${x.icon}`} alt={translate(x.title)} />
</div>
</Link>
<Link className="w-full h-full" href={`/billboard/cats/${x.url}`}>
<div className="flex flex-col justify-between h-full bg-white rounded-md w-full py-2 px-3 shadow-sm sm:rounded-t-none lg:py-3 lg:px-3 2xl:py-4 2xl:px-4">
<span className="flex items-center text-[0.9rem] text-secondary text-right font-semibold sm:justify-center sm:text-lg sm:mb-4"><span className="text-2xl leading-4 pl-[6px] text-primary sm:hidden"></span> {translate(x.title)}</span>
<p className="text-xs leading-5 w-full text-right text-secondary sm:text-center lg:text-sm">{translate(x.text)}</p>
</div>
</Link>
</div>
))}
</div>
</>
)
}
export default Home
export async function getStaticProps() {
const { data } = await client.query({
query: gql`
${GeneralData}
query GetGeneralData {
...GeneralData
}
`
});
return {
props: {
data,
},
};
}

View File

@ -0,0 +1,47 @@
import { Icon } from "components/icons"
import Parser from "components/parser/parser"
import React, { Children, useState } from "react"
import translate from "services/translation/translation"
interface Accordion {
title: string,
header?: any,
iconStart?: {
name: string,
style: string,
},
titleClass?: string,
bodyClass?: string,
className?: string,
iconName?: string,
iconClass?: string,
isOpen?: boolean,
onClick?: () => void,
}
const Accordion: React.FunctionComponent<Accordion> = ({ title, header, iconStart, titleClass, bodyClass, iconName = "chevron_down_solid", iconClass, className, onClick, children, isOpen = false }) => {
const [open, setOpen] = useState(isOpen);
const toggle = () => {
setOpen(!open);
}
return (
<div
className={`overflow-hidden relative ${className}`}
onClick={onClick}
>
{header && header}
<span onClick={toggle} className={`relative ${titleClass}`}>
{iconStart && <Icon name={iconStart.name} className={`${iconStart.style}`} />}
{title}
<Icon name={iconName} className={`transition-transform duration-200 ${open ? "rotate-0" : "rotate-90"} ${iconClass}`} />
</span>
<div className={`h-auto ${open ? "block " : "hidden"} ${bodyClass}`}>{children}</div>
</div>
)
}
export default Accordion

View File

@ -13,6 +13,9 @@ interface Breadcrumb {
related_magazine_categories_id: {
name: string
}
related_market_categories_id: {
name: string
}
}[]
},
}
@ -22,6 +25,7 @@ const Breadcrumb: React.FunctionComponent<Breadcrumb> = ({ data, className, urlP
const router = useRouter();
const activePath = router.pathname;
const magazineParent = activePath.includes('magazine') && data.parent ? data.parent[0].related_magazine_categories_id.name : data;
const marketParent = activePath.includes('market') && data.parent ? data.parent[0].related_market_categories_id.name : data;
const finalPath = [
{ title: translate("breadcrumb-home"), href: "/" }
@ -37,6 +41,11 @@ const Breadcrumb: React.FunctionComponent<Breadcrumb> = ({ data, className, urlP
finalPath.push({ title: magazineParent, href: `/magazine/cats/${url(magazineParent)}` });
magazineParent !== urlParam && finalPath.push({ title: data.name, href: `/magazine/cats/${url(data.name)}` });
break;
case '/market/cats/[category]':
finalPath.push({ title: translate("breadcrumb-market"), href: "/market" });
finalPath.push({ title: marketParent, href: `/market/cats/${url(marketParent)}` });
marketParent !== urlParam && finalPath.push({ title: data.name, href: `/market/cats/${url(data.name)}` });
break;
case '/magazine/[article]':
finalPath.push({ title: translate("breadcrumb-magazine"), href: "/magazine" });
finalPath.push({ title: magazineParent, href: `/magazine/cats/${url(magazineParent)}` });
@ -46,6 +55,11 @@ const Breadcrumb: React.FunctionComponent<Breadcrumb> = ({ data, className, urlP
finalPath.push({ title: translate("breadcrumb-billboard"), href: "/billboard" });
finalPath.push({ title: data, href: `/billboard/cats/${url(data)}` });
break;
case '/market/[id]/[ad]':
finalPath.push({ title: translate("breadcrumb-market"), href: "/market" });
finalPath.push({ title: marketParent, href: `/market/cats/${url(marketParent)}` });
finalPath.push({ title: data.name, href: `/market/cats/${url(data.name)}` });
break;
default:
break;
}
@ -54,7 +68,7 @@ const Breadcrumb: React.FunctionComponent<Breadcrumb> = ({ data, className, urlP
<div className={`${className}`}>
{finalPath.map((x, i) => (
<span key={i}>
<Link className="text-sm hover:underline hover:text-primary lg:text-base" href={x.href}>{x.title}</Link>
<Link className="text-[0.825rem] hover:underline hover:text-primary lg:text-base" href={x.href}>{x.title}</Link>
{i + 1 < finalPath.length ? <span className="text-base font-semibold px-[5px] text-primary"></span> : ''}
</span>
))}

View File

@ -28,7 +28,7 @@ const Button: React.FunctionComponent<Button> = ({ text, type = "button", simple
form={formId}
name={name}
value={value}
className={`inline-block min-h-8 text-center rounded select-none active:scale-[0.97] transition-transform duration-[75ms] shadow ${className}`}
className={`inline-block min-h-8 text-center rounded select-none active:scale-[0.98] transition-transform duration-[75ms] shadow ${disabled ? "pointer-events-none bg-gray-300" : ""} ${className}`}
onClick={onClick}
>
{leftIcon}

View File

@ -0,0 +1,39 @@
import React, { useState, useEffect } from "react"
interface ToggleButton {
className?: string,
activeClass?: string,
value?: string | number,
children: React.ReactNode
onClick?: (event: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => void,
selected?: boolean,
}
const ToggleButton: React.FunctionComponent<ToggleButton> = ({ className, value = '', children, onClick, selected = false, activeClass }) => {
const [isActive, setIsActive] = useState(selected);
const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
setIsActive(!isActive);
onClick && onClick(e, !isActive);
}
// useEffects
useEffect(() => {
selected === false && setIsActive(false);
}, [selected])
return (
<button
type="button"
data-value={value}
data-type={typeof(value) === 'number' ? 'number' : 'string'}
className={`flex justify-center items-center outline-none focus:outline-none h-10 ${isActive ? activeClass : ''} ${className}`}
onClick={handleToggle}
>
{children}
</button>
)
}
export default ToggleButton

View File

@ -0,0 +1,50 @@
import React, { useEffect, useState } from "react"
import ToggleButton from './toggleButton'
interface ToggleGroup {
className?: string,
value?: string,
onChange?: (event: any, isActive: boolean) => void,
children: any
}
const ToggleGroup: React.FunctionComponent<ToggleGroup> = ({ onChange, className, value = '', children}) => {
const [currentButton, setCurrentButton] = useState<string | number | undefined>(value);
const setChildState = (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {
let data = e.currentTarget.dataset;
setCurrentButton(data.type === 'number' ? data.value && Number(data.value) : data.value);
onChange && onChange(data.value, isActive);
}
const getStatus = (val: any) => {
let status = currentButton === val;
return status;
}
useEffect(() => {
value !== currentButton && setCurrentButton(value);
}, [value]);
return (
<div
className={`${className}`}
>
{children.map((x: any, i:number) => {
return <ToggleButton
key={x.props.value}
value={x.props.value}
className={x.props.className}
activeClass={x.props.activeClass}
onClick={(e, isActive) => setChildState(e, isActive)}
selected={getStatus(x.props.value)}
>
{x.props.children}
</ToggleButton>
})}
</div>
)
}
export default ToggleGroup

View File

@ -0,0 +1,42 @@
import React, { useState, useEffect, useLayoutEffect } from "react"
interface CheckBox {
forId: string,
title: string,
name: string,
value: string,
checked?: boolean | undefined,
labelClass?: string,
inputClass?: string,
titleClass?: string,
onChange: (value: boolean) => void,
}
const CheckBox: React.FunctionComponent<CheckBox> = ({ children, title, forId, value, name, checked = false, labelClass, inputClass, titleClass, onChange,}) => {
const [isChecked, setIsChecked] = useState(checked);
const toggleCheckbox = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsChecked(event.target.checked);
onChange(event.target.checked);
}
// useEffects
useEffect(() => {
if (isChecked !== checked) {
setIsChecked(checked);
onChange(checked);
}
}, [checked]);
return (
<label htmlFor={forId} className={`select-none relative cursor-pointer ${labelClass}`}>
<input checked={isChecked} type="checkbox" id={forId} name={name} value={value} className={`absolute w-0 h-0 opacity-0 cursor-pointer [&~span.checkmark]:checked:after:block`} onChange={toggleCheckbox}></input>
<span className={`checkmark absolute top-1/2 right-0 -translate-y-1/2 after:content-[""] after:absolute after:hidden after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 ${inputClass}`}></span>
<span className={`${titleClass}`}>{title}</span>
</label>
)
}
export default CheckBox

View File

@ -0,0 +1,38 @@
import React, { useState, useEffect, useLayoutEffect } from "react"
interface ClickOutside {
wrapperClass: string,
onClickOutside: (open: boolean) => void,
children: React.ReactNode
}
const ClickOutside: React.FunctionComponent<ClickOutside> = ({ children, wrapperClass, onClickOutside }) => {
// states
const [isOpen, setIsOpen] = useState(true);
// methods
const handleClick = (event: any) => {
let isTarget = event.target.closest('div.click-outside-' + wrapperClass);
if (isTarget === null) {
setIsOpen(false);
onClickOutside(false);
}
}
// useEffects
useEffect(() => {
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
}
})
return (
<div className={`click-outside-${wrapperClass}`}>
{children}
</div>
)
}
export default ClickOutside

View File

@ -1,15 +1,17 @@
import React, { useEffect, useState } from "react"
import React, { useEffect, useMemo, useState } from "react"
import Modal from "components/modal/modal"
import Image from "components/image/image";
import { serverAddress } from 'services/general/general'
import Thumbs from "./thumbs";
import { ArrowLeft, ArrowRight, SpinningRing } from "components/icons";
import { Icon } from "components/icons";
import translate from "services/translation/translation";
interface Gallery {
className?: string,
onClose?: (i: number) => void,
open: boolean,
index: number,
title: string,
items: {
directus_files_id: {
id: string,
@ -20,10 +22,11 @@ interface Gallery {
}[]
}
const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, items, open = false, index = 0 }) => {
const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, items, open = false, index = 0, title }) => {
const [isOpen, setIsOpen] = useState(open);
const [picIndex, setPicIndex] = useState(index);
const [showControls, setShowControls] = useState(true);
useEffect(() => {
open && setIsOpen(true);
@ -35,6 +38,13 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, items,
return () => {}
}, [index])
useEffect(() => {
const hideControls = setTimeout(() => {
showControls && setShowControls(false);
}, 1500);
return () => clearTimeout(hideControls);
}, [showControls])
const keyboardNavigation = (event: any) => {
const keyName = event.key;
if (keyName === 'ArrowRight') {
@ -58,19 +68,21 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, items,
const prevSlide = () => {
0 < picIndex && setPicIndex(picIndex - 1);
setShowControls(true);
}
const nextSlide = () => {
items.length - 1 > picIndex && setPicIndex(picIndex + 1);
setShowControls(true);
}
const Controls = () => {
return (
<div className="flex items-center justify-between w-full h-full absolute top-0 p-3 z-10">
<span onClick={prevSlide} className="flex items-center pl-12 pr-4 lg:p-16 float-right h-full lg:cursor-pointer bg-transparent active:scale-95 select-none">
<ArrowLeft className={`block w-8 h-8 lg:w-10 lg:h-10 fill-light-red select-none`} />
<span onClick={prevSlide} className="flex items-center pl-4 pr-14 lg:p-16 float-right h-full lg:cursor-pointer bg-transparent active:scale-95 select-none">
<Icon name="ArrowLeft" className={`block ${showControls ? "visible" : "invisible"} w-9 h-9 p-2 rounded bg-primary/60 fill-white select-none lg:w-10 lg:h-10`} />
</span>
<span onClick={nextSlide} className="flex items-center pl-4 pr-12 lg:p-16 float-left h-full lg:cursor-pointer bg-transparent active:scale-95 select-none">
<ArrowRight className={`block w-8 h-8 lg:w-10 lg:h-10 fill-light-red select-none`} />
<span onClick={nextSlide} className="flex items-center pl-14 pr-4 lg:p-16 float-left h-full lg:cursor-pointer bg-transparent active:scale-95 select-none">
<Icon name="ArrowRight" className={`block ${showControls ? "visible" : "invisible"} w-9 h-9 p-2 rounded bg-primary/60 fill-white select-none lg:w-10 lg:h-10`} />
</span>
</div>
)
@ -82,10 +94,11 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, items,
wrapperId="gallery-modal"
open={isOpen}
onClose={closeGallery}
title={`${translate("gallery-pic")} ${picIndex + 1} ${translate("gallery-of")} ${items.length}`}
className="block bg-white w-screen h-screen lg:rounded lg:w-auto lg:h-auto lg:max-w-[90%]"
>
<div className="h-full relative overflow-hidden lg:w-[70vw] lg:h-[80vh] lg:bg-sup-light rounded [direction:ltr]">
<div className="block overflow-hidden rounded relative w-full h-[calc(100%_-_175px)] max-h-full lg:[&>div]:invisible lg:[&>div]:hover:visible lg:h-[calc(100%_-_118px)]">
<div className="block overflow-hidden rounded relative w-full h-[calc(100%_-_145px)] max-h-full lg:[&>div]:invisible lg:[&>div]:hover:visible lg:h-[calc(100%_-_118px)]">
{items.map((item, i) => (
<img
key={item.directus_files_id.id + i}
@ -96,7 +109,7 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, items,
/>
))}
<span className="block absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 z-0">
<SpinningRing className="block w-12 h-12 lg:w-20 lg:h-20 text-light-red" />
<Icon name="SpinningRing" className="block w-12 h-12 lg:w-20 lg:h-20 text-light-red" />
</span>
<Controls />
</div>
@ -104,7 +117,7 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, items,
items={items}
onChange={(i) => setPicIndex(i)}
activeThumb={picIndex}
className="absolute bottom-16 lg:bottom-0 shadow-md"
className="absolute bottom-8 lg:bottom-0"
isGalleryOpen={isOpen}
/>
</div>

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef } from "react"
import React, { useEffect, useState, useRef, useMemo } from "react"
import Modal from "components/modal/modal"
import Image from "components/image/image";
import { serverAddress } from 'services/general/general'
@ -21,10 +21,8 @@ interface Thumbs {
const Thumbs: React.FunctionComponent<Thumbs> = ({ items, className, onChange, activeThumb, isGalleryOpen }) => {
// const [isOpen, setIsOpen] = useState();
useEffect(() => {
const activeEl = document.getElementsByClassName('ring-4')[0];
const activeEl = document.getElementsByClassName('gallery-thumb')[0];
const thumbSlide = setTimeout(() => {
activeEl && isGalleryOpen && activeEl.scrollIntoView({ behavior: "smooth", inline: "center" });
}, 20);
@ -37,27 +35,34 @@ const Thumbs: React.FunctionComponent<Thumbs> = ({ items, className, onChange, a
onChange && onChange(index);
}
const imagesWrapper = useMemo(() =>
<>
{items.map((item, i) => (
<div onClick={() => changePic(i)} className={`block w-32 shrink-0 grow-0 mx-1 rounded-md lg:hover:brightness-90 ${i === activeThumb ? "gallery-thumb ring-[3px] ring-light-red" : ""}`} key={item.directus_files_id.id + i}>
<Image
src={item.directus_files_id.id}
alt={item.directus_files_id.description}
width={item.directus_files_id.width}
height={item.directus_files_id.height}
quality={75}
ar={['3/2', '3/2', '3/2', '3/2']}
imageSizes={[128, 128, 128, 128]}
priority={false}
className="rounded md:cursor-pointer"
figureClass="md:cursor-pointer"
/>
</div>
))}
</>
, [activeThumb])
return (
<div className={`block w-full hide-scrollbar overflow-x-auto will-change-scroll bg-white px-2 py-4 lg:w-full rounded-b ${className}`}>
<div className="flex flex-row items-center justify-center w-max mx-auto">
{items.map((item, i) => (
<div onClick={() => changePic(i)} className={`block w-32 shrink-0 grow-0 mx-1 rounded lg:hover:brightness-90 ${i === activeThumb ? "ring-4 ring-light-red" : ""}`} key={item.directus_files_id.id + i}>
<Image
src={item.directus_files_id.id}
alt={item.directus_files_id.description}
width={item.directus_files_id.width}
height={item.directus_files_id.height}
quality={75}
ar={['3/2', '3/2', '3/2', '3/2']}
imageSizes={[128, 128, 128, 128]}
priority={false}
className="rounded md:cursor-pointer"
figureClass="md:cursor-pointer"
/>
</div>
))}
{imagesWrapper}
</div>
</div>
)
}
export default Thumbs
export default Thumbs

View File

@ -1,52 +1,352 @@
interface Icon {
name: any,
className?: string,
onClick?: () => void
}
export const FilledHeart: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M472.1 270.5l-193.1 199.7c-12.64 13.07-33.27 13.08-45.91 .0107l-193.2-199.7C-16.21 212.5-13.1 116.7 49.04 62.86C103.3 15.88 186.4 24.42 236.3 75.98l19.7 20.27l19.7-20.27c49.95-51.56 132.1-60.1 187.3-13.12C525.1 116.6 528.2 212.5 472.1 270.5z" /></svg>
export const Icon: React.FunctionComponent<Icon> = ({ name, className, onClick }) => {
const finalIcon = <svg
onClick={() => onClick && onClick()}
className={`${name === "SpinningRing" ? "animate-spin" : ""} ${className}`}
xmlns="http://www.w3.org/2000/svg"
viewBox={icons[name].viewBox}
>
{icons[name].children}
</svg>;
return finalIcon;
}
export const EmptyHeart: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M462.3 62.71c-54.5-46.5-136.1-38.99-186.6 13.27l-19.69 20.61l-19.71-20.61C195.6 33.85 113.3 8.71 49.76 62.71C-13.11 116.2-16.31 212.5 39.81 270.5l193.2 199.7C239.3 476.7 247.8 480 255.9 480c8.25 0 16.33-3.25 22.58-9.751l193.6-199.8C528.5 212.5 525.1 116.2 462.3 62.71zM449.3 248.2l-192.9 199.9L62.76 248.2C24.39 208.7 16.39 133.2 70.51 87.09C125.3 40.21 189.8 74.22 213.3 98.59l42.75 44.13l42.75-44.13c23.13-24 88.13-58 142.8-11.5C495.5 133.1 487.6 208.6 449.3 248.2z" /></svg>
}
export const BrokenHeart: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480.1 255.8l-212.2 218.8c-6.1 7.251-18.5 7.251-25.62 0L31.01 255.9C-12.49 202.8-10.36 123.5 38.26 73.66l2.5-2.375c42.97-44.03 108.6-50.48 159.1-20.94l40.07 93.5L144 207.8l143.1 143.1L240 223.9l95.97-63.99l-31.55-105.2c51.3-34.89 121.6-29.83 166.8 16.39l2.5 2.5C522.4 123.5 524.5 202.8 480.1 255.8z" /></svg>
}
export const SharePaperPlane: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492.6 226.6L44.6 34.59C40.54 32.85 36.26 31.1 32.02 31.1c-8.623 0-17.1 3.499-23.3 10.05C-.4983 51.81-2.623 66.3 3.377 78.31L96 256l-92.62 177.7c-6 12.02-3.875 26.5 5.344 36.27c6.188 6.547 14.66 10.05 23.28 10.05c4.25 0 8.531-.8438 12.59-2.594L492.6 285.4c11.78-5.031 19.41-16.61 19.41-29.41C511.1 243.2 504.4 231.6 492.6 226.6zM31.98 64.03C31.99 64.01 31.96 64.04 31.98 64.03L442.7 240H123.7L31.98 64.03zM31.75 448.5L123.7 272h318.1L31.75 448.5z" /></svg>
}
export const WeightScale: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M310.3 97.25c-8-3.5-17.5 .25-21 8.5L255.8 184C233.8 184.3 216 202 216 224c0 22.12 17.88 40 40 40S296 246.1 296 224c0-10.5-4.25-20-11-27.12l33.75-78.63C322.3 110.1 318.4 100.8 310.3 97.25zM448 64h-56.23C359.5 24.91 310.7 0 256 0S152.5 24.91 120.2 64H64C28.75 64 0 92.75 0 128v320c0 35.25 28.75 64 64 64h384c35.25 0 64-28.75 64-64V128C512 92.75 483.3 64 448 64zM256 304c-70.58 0-128-57.42-128-128s57.42-128 128-128c70.58 0 128 57.42 128 128S326.6 304 256 304z" /></svg>
}
export const DiagonalRuler: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 145.1c0 8.202-3.111 16.4-9.334 22.63L167.7 502.7C161.5 508.9 153.3 512 145.1 512s-16.41-3.111-22.63-9.334L9.334 389.5C3.111 383.3 0 375.1 0 366.9s3.111-16.4 9.334-22.63l54.33-54.33l56.57 56.57c3.111 3.111 7.212 4.672 11.31 4.672c9.06 0 15.99-7.32 15.99-15.99c0-4.101-1.561-8.203-4.673-11.31L86.29 267.3l45.25-45.26l56.57 56.57c3.11 3.111 7.212 4.673 11.31 4.673c8.687 0 15.99-6.956 15.99-15.99c0-4.101-1.562-8.203-4.672-11.31L154.2 199.4l45.25-45.26L256 210.7c3.112 3.111 7.213 4.672 11.31 4.672c9.059 0 15.99-7.324 15.99-15.99c0-4.102-1.562-8.203-4.673-11.31l-56.57-56.57l45.26-45.25l56.57 56.57c3.111 3.111 7.212 4.672 11.31 4.672c9.06 0 15.99-7.32 15.99-15.99c0-4.101-1.561-8.203-4.673-11.31l-56.57-56.57l54.33-54.33c6.223-6.223 14.43-9.334 22.63-9.334s16.4 3.111 22.63 9.334l113.1 113.1C508.9 128.7 512 136.9 512 145.1z" /></svg>
}
export const HealthWatch: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M320 73.61V48C320 21.6 298.4 0 272 0h-160C85.6 0 64 21.6 64 48v25.61C27.48 81.03 0 113.3 0 152v208c0 38.7 27.48 70.97 64 78.39V464C64 490.4 85.6 512 112 512h160c26.4 0 48-21.6 48-48v-25.61c36.52-7.414 64-39.68 64-78.39v-208C384 113.3 356.5 81.03 320 73.61zM336 360c0 17.64-14.36 32-32 32h-224c-17.64 0-32-14.36-32-32v-208c0-17.64 14.36-32 32-32h224c17.64 0 32 14.36 32 32V360zM199.2 191.8L192 198.1L184.8 191.8C166.5 173.3 136.8 170.3 116.8 186.9c-22.92 19.17-24.07 53.55-3.646 74.29l70.64 71.37C185.1 334.8 188.9 336 192 336s6.043-1.25 8.23-3.441l70.64-71.37c20.42-20.73 19.28-55.12-3.646-74.29C247.2 170.3 217.5 173.3 199.2 191.8z" /></svg>
}
export const DogPaw: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 224c-79.37 0-191.1 122.7-191.1 200.2C64.02 459.1 90.76 480 135.8 480C184.6 480 216.9 454.9 256 454.9C295.5 454.9 327.9 480 376.2 480c44.1 0 71.74-20.88 71.74-55.75C447.1 346.8 335.4 224 256 224zM108.8 211.4c-10.37-34.62-42.5-57.12-71.62-50.12S-7.104 202 3.27 236.6C13.64 271.3 45.77 293.8 74.89 286.8S119.1 246 108.8 211.4zM193.5 190.6c30.87-8.125 46.37-49.1 34.5-93.37s-46.5-71.1-77.49-63.87c-30.87 8.125-46.37 49.1-34.5 93.37C127.9 170.1 162.5 198.8 193.5 190.6zM474.9 161.3c-29.12-6.1-61.25 15.5-71.62 50.12c-10.37 34.63 4.75 68.37 33.87 75.37c29.12 6.1 61.12-15.5 71.62-50.12C519.1 202 503.1 168.3 474.9 161.3zM318.5 190.6c30.1 8.125 65.62-20.5 77.49-63.87c11.87-43.37-3.625-85.25-34.5-93.37c-30.1-8.125-65.62 20.5-77.49 63.87C272.1 140.6 287.6 182.5 318.5 190.6z" /></svg>
}
export const ArrowLeft: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M192 448c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l137.4 137.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448z" /></svg>
}
export const ArrowRight: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z" /></svg>
}
export const ImageOutlined: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.0625L200.5 268.5L184.1 245.9C172.7 229.1 145.9 229.9 134.4 245.9l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38c5.312-10 4.734-22.09-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38l29.91 41.34C191.2 310.2 196.4 313.2 201.4 312.6c5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32V416zM144 192C170.5 192 192 170.5 192 144S170.5 96 144 96S96 117.5 96 144S117.5 192 144 192zM144 128c8.822 0 15.1 7.178 15.1 16S152.8 160 144 160S128 152.8 128 144S135.2 128 144 128z" /></svg>
}
export const ImageSolid: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z" /></svg>
}
export const Gear: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M499.5 332c0-5.66-3.112-11.13-8.203-14.07l-46.61-26.91C446.8 279.6 448 267.1 448 256s-1.242-23.65-3.34-35.02l46.61-26.91c5.092-2.941 8.203-8.411 8.203-14.07c0-14.1-41.98-99.04-63.86-99.04c-2.832 0-5.688 .7266-8.246 2.203l-46.72 26.98C362.9 94.98 342.4 83.1 320 75.16V21.28c0-7.523-5.162-14.28-12.53-15.82C290.8 1.977 273.7 0 256 0s-34.85 1.977-51.48 5.461C197.2 7.004 192 13.76 192 21.28v53.88C169.6 83.1 149.1 94.98 131.4 110.1L84.63 83.16C82.08 81.68 79.22 80.95 76.39 80.95c-19.72 0-63.86 81.95-63.86 99.04c0 5.66 3.112 11.13 8.203 14.07l46.61 26.91C65.24 232.4 64 244 64 256s1.242 23.65 3.34 35.02l-46.61 26.91c-5.092 2.941-8.203 8.411-8.203 14.07c0 14.1 41.98 99.04 63.86 99.04c2.832 0 5.688-.7266 8.246-2.203l46.72-26.98C149.1 417 169.6 428.9 192 436.8v53.88c0 7.523 5.162 14.28 12.53 15.82C221.2 510 238.3 512 255.1 512s34.85-1.977 51.48-5.461C314.8 504.1 320 498.2 320 490.7v-53.88c22.42-7.938 42.93-19.82 60.65-34.97l46.72 26.98c2.557 1.477 5.416 2.203 8.246 2.203C455.3 431 499.5 349.1 499.5 332zM256 336c-44.11 0-80-35.89-80-80S211.9 176 256 176s80 35.89 80 80S300.1 336 256 336z" /></svg>
}
export const SpinningRing: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={`animate-spin ${className}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
}
export const MagnifyingGlass: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={`${className}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z" /></svg>
}
export const XMark: React.FunctionComponent<Icon> = ({ className, onClick }) => {
return <svg onClick={() => onClick && onClick()} className={`${className}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z" /></svg>
const icons: any = {
FilledHeart: {
viewBox: "0 0 512 512", children: <path d="M472.1 270.5l-193.1 199.7c-12.64 13.07-33.27 13.08-45.91 .0107l-193.2-199.7C-16.21 212.5-13.1 116.7 49.04 62.86C103.3 15.88 186.4 24.42 236.3 75.98l19.7 20.27l19.7-20.27c49.95-51.56 132.1-60.1 187.3-13.12C525.1 116.6 528.2 212.5 472.1 270.5z" />
},
EmptyHeart: {
viewBox: "0 0 512 512", children: <path d="M462.3 62.71c-54.5-46.5-136.1-38.99-186.6 13.27l-19.69 20.61l-19.71-20.61C195.6 33.85 113.3 8.71 49.76 62.71C-13.11 116.2-16.31 212.5 39.81 270.5l193.2 199.7C239.3 476.7 247.8 480 255.9 480c8.25 0 16.33-3.25 22.58-9.751l193.6-199.8C528.5 212.5 525.1 116.2 462.3 62.71zM449.3 248.2l-192.9 199.9L62.76 248.2C24.39 208.7 16.39 133.2 70.51 87.09C125.3 40.21 189.8 74.22 213.3 98.59l42.75 44.13l42.75-44.13c23.13-24 88.13-58 142.8-11.5C495.5 133.1 487.6 208.6 449.3 248.2z" />
},
BrokenHeart: {
viewBox: "0 0 512 512", children: <path d="M480.1 255.8l-212.2 218.8c-6.1 7.251-18.5 7.251-25.62 0L31.01 255.9C-12.49 202.8-10.36 123.5 38.26 73.66l2.5-2.375c42.97-44.03 108.6-50.48 159.1-20.94l40.07 93.5L144 207.8l143.1 143.1L240 223.9l95.97-63.99l-31.55-105.2c51.3-34.89 121.6-29.83 166.8 16.39l2.5 2.5C522.4 123.5 524.5 202.8 480.1 255.8z" />
},
SharePaperPlane: {
viewBox: "0 0 512 512", children: <path d="M492.6 226.6L44.6 34.59C40.54 32.85 36.26 31.1 32.02 31.1c-8.623 0-17.1 3.499-23.3 10.05C-.4983 51.81-2.623 66.3 3.377 78.31L96 256l-92.62 177.7c-6 12.02-3.875 26.5 5.344 36.27c6.188 6.547 14.66 10.05 23.28 10.05c4.25 0 8.531-.8438 12.59-2.594L492.6 285.4c11.78-5.031 19.41-16.61 19.41-29.41C511.1 243.2 504.4 231.6 492.6 226.6zM31.98 64.03C31.99 64.01 31.96 64.04 31.98 64.03L442.7 240H123.7L31.98 64.03zM31.75 448.5L123.7 272h318.1L31.75 448.5z" />
},
WeightScale: {
viewBox: "0 0 512 512", children: <path d="M310.3 97.25c-8-3.5-17.5 .25-21 8.5L255.8 184C233.8 184.3 216 202 216 224c0 22.12 17.88 40 40 40S296 246.1 296 224c0-10.5-4.25-20-11-27.12l33.75-78.63C322.3 110.1 318.4 100.8 310.3 97.25zM448 64h-56.23C359.5 24.91 310.7 0 256 0S152.5 24.91 120.2 64H64C28.75 64 0 92.75 0 128v320c0 35.25 28.75 64 64 64h384c35.25 0 64-28.75 64-64V128C512 92.75 483.3 64 448 64zM256 304c-70.58 0-128-57.42-128-128s57.42-128 128-128c70.58 0 128 57.42 128 128S326.6 304 256 304z" />
},
DiagonalRuler: {
viewBox: "0 0 512 512", children: <path d="M512 145.1c0 8.202-3.111 16.4-9.334 22.63L167.7 502.7C161.5 508.9 153.3 512 145.1 512s-16.41-3.111-22.63-9.334L9.334 389.5C3.111 383.3 0 375.1 0 366.9s3.111-16.4 9.334-22.63l54.33-54.33l56.57 56.57c3.111 3.111 7.212 4.672 11.31 4.672c9.06 0 15.99-7.32 15.99-15.99c0-4.101-1.561-8.203-4.673-11.31L86.29 267.3l45.25-45.26l56.57 56.57c3.11 3.111 7.212 4.673 11.31 4.673c8.687 0 15.99-6.956 15.99-15.99c0-4.101-1.562-8.203-4.672-11.31L154.2 199.4l45.25-45.26L256 210.7c3.112 3.111 7.213 4.672 11.31 4.672c9.059 0 15.99-7.324 15.99-15.99c0-4.102-1.562-8.203-4.673-11.31l-56.57-56.57l45.26-45.25l56.57 56.57c3.111 3.111 7.212 4.672 11.31 4.672c9.06 0 15.99-7.32 15.99-15.99c0-4.101-1.561-8.203-4.673-11.31l-56.57-56.57l54.33-54.33c6.223-6.223 14.43-9.334 22.63-9.334s16.4 3.111 22.63 9.334l113.1 113.1C508.9 128.7 512 136.9 512 145.1z" />
},
HealthWatch: {
viewBox: "0 0 384 512", children: <path d="M320 73.61V48C320 21.6 298.4 0 272 0h-160C85.6 0 64 21.6 64 48v25.61C27.48 81.03 0 113.3 0 152v208c0 38.7 27.48 70.97 64 78.39V464C64 490.4 85.6 512 112 512h160c26.4 0 48-21.6 48-48v-25.61c36.52-7.414 64-39.68 64-78.39v-208C384 113.3 356.5 81.03 320 73.61zM336 360c0 17.64-14.36 32-32 32h-224c-17.64 0-32-14.36-32-32v-208c0-17.64 14.36-32 32-32h224c17.64 0 32 14.36 32 32V360zM199.2 191.8L192 198.1L184.8 191.8C166.5 173.3 136.8 170.3 116.8 186.9c-22.92 19.17-24.07 53.55-3.646 74.29l70.64 71.37C185.1 334.8 188.9 336 192 336s6.043-1.25 8.23-3.441l70.64-71.37c20.42-20.73 19.28-55.12-3.646-74.29C247.2 170.3 217.5 173.3 199.2 191.8z" />
},
DogPaw: {
viewBox: "0 0 512 512", children: <path d="M256 224c-79.37 0-191.1 122.7-191.1 200.2C64.02 459.1 90.76 480 135.8 480C184.6 480 216.9 454.9 256 454.9C295.5 454.9 327.9 480 376.2 480c44.1 0 71.74-20.88 71.74-55.75C447.1 346.8 335.4 224 256 224zM108.8 211.4c-10.37-34.62-42.5-57.12-71.62-50.12S-7.104 202 3.27 236.6C13.64 271.3 45.77 293.8 74.89 286.8S119.1 246 108.8 211.4zM193.5 190.6c30.87-8.125 46.37-49.1 34.5-93.37s-46.5-71.1-77.49-63.87c-30.87 8.125-46.37 49.1-34.5 93.37C127.9 170.1 162.5 198.8 193.5 190.6zM474.9 161.3c-29.12-6.1-61.25 15.5-71.62 50.12c-10.37 34.63 4.75 68.37 33.87 75.37c29.12 6.1 61.12-15.5 71.62-50.12C519.1 202 503.1 168.3 474.9 161.3zM318.5 190.6c30.1 8.125 65.62-20.5 77.49-63.87c11.87-43.37-3.625-85.25-34.5-93.37c-30.1-8.125-65.62 20.5-77.49 63.87C272.1 140.6 287.6 182.5 318.5 190.6z" />
},
ArrowLeft: {
viewBox: "0 0 256 512", children: <path d="M192 448c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l137.4 137.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448z" />
},
ArrowRight: {
viewBox: "0 0 256 512", children: <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z" />
},
ImageOutlined: {
viewBox: "0 0 512 512", children: <path d="M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.0625L200.5 268.5L184.1 245.9C172.7 229.1 145.9 229.9 134.4 245.9l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38c5.312-10 4.734-22.09-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38l29.91 41.34C191.2 310.2 196.4 313.2 201.4 312.6c5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32V416zM144 192C170.5 192 192 170.5 192 144S170.5 96 144 96S96 117.5 96 144S117.5 192 144 192zM144 128c8.822 0 15.1 7.178 15.1 16S152.8 160 144 160S128 152.8 128 144S135.2 128 144 128z" />
},
ImageSolid: {
viewBox: "0 0 512 512", children: <path d="M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z" />
},
Gear: {
viewBox: "0 0 512 512", children: <path d="M499.5 332c0-5.66-3.112-11.13-8.203-14.07l-46.61-26.91C446.8 279.6 448 267.1 448 256s-1.242-23.65-3.34-35.02l46.61-26.91c5.092-2.941 8.203-8.411 8.203-14.07c0-14.1-41.98-99.04-63.86-99.04c-2.832 0-5.688 .7266-8.246 2.203l-46.72 26.98C362.9 94.98 342.4 83.1 320 75.16V21.28c0-7.523-5.162-14.28-12.53-15.82C290.8 1.977 273.7 0 256 0s-34.85 1.977-51.48 5.461C197.2 7.004 192 13.76 192 21.28v53.88C169.6 83.1 149.1 94.98 131.4 110.1L84.63 83.16C82.08 81.68 79.22 80.95 76.39 80.95c-19.72 0-63.86 81.95-63.86 99.04c0 5.66 3.112 11.13 8.203 14.07l46.61 26.91C65.24 232.4 64 244 64 256s1.242 23.65 3.34 35.02l-46.61 26.91c-5.092 2.941-8.203 8.411-8.203 14.07c0 14.1 41.98 99.04 63.86 99.04c2.832 0 5.688-.7266 8.246-2.203l46.72-26.98C149.1 417 169.6 428.9 192 436.8v53.88c0 7.523 5.162 14.28 12.53 15.82C221.2 510 238.3 512 255.1 512s34.85-1.977 51.48-5.461C314.8 504.1 320 498.2 320 490.7v-53.88c22.42-7.938 42.93-19.82 60.65-34.97l46.72 26.98c2.557 1.477 5.416 2.203 8.246 2.203C455.3 431 499.5 349.1 499.5 332zM256 336c-44.11 0-80-35.89-80-80S211.9 176 256 176s80 35.89 80 80S300.1 336 256 336z" />
},
SpinningRing: {
viewBox: "0 0 24 24", children: <><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></>
},
MagnifyingGlass: {
viewBox: "0 0 512 512", children: <path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z" />
},
XMark: {
viewBox: "0 0 320 512", children: <path d="M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z" />
},
LocationPin: {
viewBox: "0 0 384 512", children: <path d="M192 0C85.97 0 0 85.97 0 192c0 77.41 26.97 99.03 172.3 309.7c9.531 13.77 29.91 13.77 39.44 0C357 291 384 269.4 384 192C384 85.97 298 0 192 0zM192 271.1c-44.13 0-80-35.88-80-80S147.9 111.1 192 111.1s80 35.88 80 80S236.1 271.1 192 271.1z" />
},
Bed: {
viewBox: "0 0 512 512", children: <path d="M480 239.1C499.4 254.6 512 277.8 512 304V464C512 472.8 504.8 480 496 480C487.2 480 480 472.8 480 464V416H32V464C32 472.8 24.84 480 16 480C7.164 480 0 472.8 0 464V304C0 277.8 12.57 254.6 32 239.1V96C32 60.65 60.65 32 96 32H416C451.3 32 480 60.65 480 96V239.1zM64 136.6C73.41 131.1 84.34 128 96 128H208C227.1 128 244.3 136.4 256 149.7C267.7 136.4 284.9 128 304 128H416C427.7 128 438.6 131.1 448 136.6V96C448 78.33 433.7 64 416 64H96C78.33 64 64 78.33 64 96V136.6zM448 225.6V192C448 174.3 433.7 160 416 160H304C286.3 160 272 174.3 272 192V224H432C437.5 224 442.8 224.6 448 225.6zM240 224V192C240 174.3 225.7 160 208 160H96C78.33 160 64 174.3 64 192V225.6C69.17 224.6 74.52 224 80 224H240zM432 256H80C53.49 256 32 277.5 32 304V384H480V304C480 277.5 458.5 256 432 256z" />
},
KingBed: {
viewBox: "0 0 512 512", children: <g><g><path d="M455.622,199.882V55.236c0-9.165-7.457-16.621-16.621-16.621h-22.778c-9.165,0-16.621,7.456-16.621,16.621v12.807 c-26.334-9.904-64.078-16.892-105.964-19.471c-7.793-0.485-15.545,2.204-21.704,7.439c-4.047,3.44-9.855,5.414-15.934,5.414 c-6.078,0-11.885-1.973-15.933-5.414c-6.159-5.236-13.91-7.921-21.704-7.439c-41.886,2.579-79.63,9.567-105.964,19.471V55.236 c0-9.165-7.456-16.621-16.621-16.621H73c-9.165,0-16.621,7.456-16.621,16.621v144.645C24.68,203.607,0,230.62,0,263.305v134.794 c0,4.142,3.358,7.5,7.5,7.5h15.75v60.285c0,4.142,3.358,7.5,7.5,7.5h41.021c4.142,0,7.5-3.358,7.5-7.5v-60.285h353.458v60.285 c0,4.142,3.358,7.5,7.5,7.5h41.021c4.142,0,7.5-3.358,7.5-7.5v-60.285h15.75c4.142,0,7.5-3.358,7.5-7.5V263.305 C512,230.62,487.321,203.608,455.622,199.882z M416.223,53.616h22.778c0.894,0,1.621,0.727,1.621,1.621v144.19H423.23 c0.498-1.127,0.931-2.288,1.295-3.477c6.023-19.662,3.631-36.032,0.563-46.303c-1.835-6.144-5.495-11.49-10.486-15.417V55.236h0 C414.602,54.342,415.33,53.616,416.223,53.616z M403.36,144.692c3.577,2.06,6.188,5.344,7.355,9.249 c2.476,8.288,4.393,21.541-0.532,37.616c-1.146,3.741-3.596,6.943-6.901,9.019c-1.725,1.083-3.591,1.818-5.547,2.183 c-13.816,2.58-32.047,4-51.333,4s-37.517-1.42-51.333-4c-1.956-0.366-3.822-1.101-5.547-2.184c-0.01-0.006-0.021-0.01-0.031-0.016 c-0.086-0.053-0.166-0.116-0.254-0.166c-3.16-2.079-5.503-5.204-6.616-8.836c-4.925-16.076-3.007-29.329-0.532-37.616 c1.713-5.736,6.486-10.006,12.455-11.143c13.879-2.644,32.297-4.1,51.858-4.1c19.563,0,37.979,1.456,51.858,4.1 C400.054,143.14,401.77,143.777,403.36,144.692z M112.399,84.179c24.833-10.488,63.37-17.956,106.886-20.636 c3.906-0.246,7.851,1.163,11.067,3.896c6.816,5.794,15.925,8.985,25.647,8.985c9.724,0,18.832-3.191,25.648-8.985 c3.216-2.733,7.16-4.14,11.067-3.896C336.23,66.223,374.767,73.69,399.6,84.178v43.611c-14.582-2.642-33.394-4.092-53.199-4.092 c-20.475,0-39.889,1.55-54.665,4.364c-11.493,2.189-20.697,10.46-24.021,21.585c-3.068,10.271-5.461,26.641,0.563,46.303 c0.364,1.189,0.797,2.349,1.295,3.477h-27.147c0.498-1.127,0.931-2.288,1.295-3.477c6.023-19.663,3.63-36.033,0.563-46.303 c-3.323-11.125-12.527-19.396-24.021-21.585c-14.776-2.814-34.189-4.364-54.665-4.364c-19.806,0-38.617,1.45-53.199,4.092V84.179z M101.287,153.94c1.167-3.904,3.778-7.189,7.354-9.249c1.59-0.916,3.306-1.553,5.1-1.894c13.879-2.644,32.296-4.1,51.858-4.1 s37.979,1.456,51.859,4.1c5.968,1.137,10.741,5.406,12.454,11.143c2.476,8.287,4.393,21.54-0.532,37.616 c-1.146,3.74-3.596,6.943-6.9,9.019c-1.726,1.083-3.592,1.818-5.548,2.184c-13.816,2.58-32.047,4-51.333,4s-37.517-1.42-51.333-4 c-1.956-0.366-3.823-1.101-5.547-2.184h-0.001c-3.303-2.075-5.754-5.278-6.899-9.019C96.894,175.48,98.811,162.228,101.287,153.94 z M71.379,55.236c0-0.894,0.728-1.621,1.621-1.621h22.778c0.894,0,1.621,0.727,1.621,1.621v78.994 c-4.992,3.927-8.651,9.272-10.486,15.417c-3.068,10.271-5.461,26.641,0.563,46.303c0.364,1.188,0.797,2.35,1.295,3.477H71.379 V55.236z M64.272,458.383h-0.001h-26.02v-52.784h26.021V458.383z M473.75,458.383h-26.021v-52.784h26.021V458.383z M497,390.599 H15v-54.377h482V390.599z M497,321.222H15v-50.417h70.377c4.142,0,7.5-3.358,7.5-7.5c0-4.142-3.358-7.5-7.5-7.5H15.575 c3.619-23.405,23.902-41.379,48.304-41.379h38.846c2.769,1.471,5.715,2.503,8.788,3.077c14.697,2.744,33.905,4.255,54.086,4.255 c20.181,0,39.389-1.511,54.086-4.255c3.072-0.574,6.019-1.606,8.788-3.077h55.056c2.769,1.471,5.715,2.503,8.788,3.077 c14.697,2.744,33.905,4.255,54.086,4.255c20.181,0,39.389-1.511,54.087-4.255c3.072-0.574,6.019-1.606,8.787-3.077h38.846 c24.401,0,44.685,17.975,48.304,41.379h-381.05c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.357,7.5,7.5,7.5H497V321.222z" /></g></g>
},
Area: {
viewBox: "0 0 400 400", children: <path d="M357.143 0H42.8571C31.4907 0 20.5898 4.50961 12.5526 12.5368C4.51529 20.5639 0 31.4511 0 42.8032V356.694C0 368.046 4.51529 378.933 12.5526 386.96C20.5898 394.987 31.4907 399.497 42.8571 399.497H357.143C368.509 399.497 379.41 394.987 387.447 386.96C395.485 378.933 400 368.046 400 356.694V42.8032C400 31.4511 395.485 20.5639 387.447 12.5368C379.41 4.50961 368.509 0 357.143 0ZM371.429 356.694C371.429 360.478 369.923 364.107 367.244 366.782C364.565 369.458 360.932 370.961 357.143 370.961H171.429V299.623H314.286C318.075 299.623 321.708 298.119 324.387 295.444C327.066 292.768 328.571 289.139 328.571 285.355C328.571 281.571 327.066 277.942 324.387 275.266C321.708 272.59 318.075 271.087 314.286 271.087H157.143C153.354 271.087 149.72 272.59 147.041 275.266C144.362 277.942 142.857 281.571 142.857 285.355V370.961H42.8571C39.0683 370.961 35.4347 369.458 32.7556 366.782C30.0765 364.107 28.5714 360.478 28.5714 356.694V171.213H142.857V199.748C142.857 203.532 144.362 207.162 147.041 209.837C149.72 212.513 153.354 214.016 157.143 214.016C160.932 214.016 164.565 212.513 167.244 209.837C169.923 207.162 171.429 203.532 171.429 199.748V114.142C171.429 110.358 169.923 106.729 167.244 104.053C164.565 101.377 160.932 99.8742 157.143 99.8742C153.354 99.8742 149.72 101.377 147.041 104.053C144.362 106.729 142.857 110.358 142.857 114.142V142.677H28.5714V42.8032C28.5714 39.0192 30.0765 35.3901 32.7556 32.7144C35.4347 30.0387 39.0683 28.5355 42.8571 28.5355H242.857V185.481C242.857 189.265 244.362 192.894 247.041 195.57C249.72 198.245 253.354 199.748 257.143 199.748H314.286C318.075 199.748 321.708 198.245 324.387 195.57C327.066 192.894 328.571 189.265 328.571 185.481C328.571 181.697 327.066 178.068 324.387 175.392C321.708 172.716 318.075 171.213 314.286 171.213H271.429V28.5355H357.143C360.932 28.5355 364.565 30.0387 367.244 32.7144C369.923 35.3901 371.429 39.0192 371.429 42.8032V356.694Z"></path>
},
BathTub: {
viewBox: "0 0 517 515", children: <><path d="M53.7957 274.151C131 273.543 208.204 272.936 285.409 272.328C320.502 272.052 355.595 271.776 390.687 271.499C408.709 271.357 436.246 267.321 453.855 271.002C483.718 277.245 500.827 291.055 460.56 297.045C394.658 306.848 320.713 297.873 254.042 298.06C220.181 298.154 186.32 298.249 152.459 298.344C132.142 298.4 111.826 298.457 91.5092 298.514C84.737 298.533 77.9649 298.552 71.1927 298.571C52.3786 304.32 40.7481 296.826 36.3013 276.088C52.8826 279.86 59.9619 254.352 43.3362 250.57C24.104 246.195 9.18371 253.464 2.87718 272.911C-7.86142 306.025 12.9416 323.181 40.7178 325.119C107.664 329.789 176.766 324.739 243.883 324.551C313.315 324.357 383.305 326.686 452.681 323.869C475.355 322.948 505.639 324.33 513.939 298.79C523.252 270.129 504.563 248.411 478.428 244.846C413.411 235.977 340.514 245.431 274.881 245.948C201.186 246.528 127.491 247.108 53.7957 247.688C36.7748 247.822 36.7351 274.285 53.7957 274.151Z"></path>
<path d="M466.461 323.548C474.73 375.537 434.999 433.231 387.646 453.943C349.846 470.477 295.94 463.719 254.54 464.503C214.778 465.257 180.991 468.261 146.51 445.99C109.925 422.358 55.4102 377.073 57.7829 329.415C58.6303 312.393 32.165 312.438 31.3198 329.415C28.8418 379.189 68.1589 422.234 105.975 450.969C163.88 494.97 203.297 492.106 274.482 490.561C338.061 489.181 389.722 494.909 438.653 449.799C477.721 413.783 500.49 370.025 491.979 316.513C489.311 299.741 463.807 306.861 466.461 323.548Z"></path>
<path d="M334.065 61.9826C335.204 45.8633 330.105 43.7571 345.043 34.9641C356.06 28.4795 367.53 30.2771 379.689 30.2471C414.788 30.1607 403.851 39.6988 403.886 73.8339C403.94 127.831 403.995 181.828 404.05 235.825C404.067 252.852 430.531 252.881 430.513 235.825C430.461 184.67 430.409 133.515 430.357 82.3597C430.335 60.6536 439.565 21.7027 418.084 7.15394C401.503 -4.07547 349.393 -0.082615 330.83 5.5742C302.887 14.0895 309.347 37.2869 307.602 61.9826C306.402 78.9773 332.87 78.9021 334.065 61.9826Z"></path>
<path d="M352.821 107.029C330.46 107.037 304.602 110.618 282.562 107.149C285.198 109.176 287.834 111.203 290.47 113.23C287.659 109.117 303.833 98.2036 305.929 96.6067C312.01 91.9742 315.44 89.1697 322.877 88.4098C328.161 87.8699 337.461 87.4048 342.258 89.8401C353.907 95.7527 352.133 108.756 351.855 119.376C351.41 136.411 377.873 136.401 378.318 119.376C378.914 96.5592 374.266 71.7971 349.293 64.3223C339.232 61.3106 327.763 61.3313 317.357 62.0418C303.547 62.9849 295.08 71.5673 284.66 79.9306C272.257 89.8861 250.532 115.735 271.027 130.299C279.718 136.474 294.167 133.512 304.151 133.509C320.374 133.503 336.597 133.498 352.821 133.492C369.848 133.486 369.877 107.023 352.821 107.029Z"></path>
<path d="M341.354 158.199C341.354 162.021 341.354 165.844 341.354 169.666C341.354 186.694 367.817 186.722 367.817 169.666C367.817 165.844 367.817 162.021 367.817 158.199C367.817 141.171 341.354 141.143 341.354 158.199Z"></path>
<path d="M277.405 164.373C278.206 166.629 278.029 165.509 277.797 167.892C277.106 175.015 284.373 181.124 291.029 181.124C298.759 181.124 303.568 175.035 304.26 167.892C304.605 164.343 304.116 160.695 302.923 157.338C300.531 150.608 293.895 146.105 286.646 148.097C280.131 149.887 275.001 157.608 277.405 164.373Z"></path>
<path d="M307.834 203.186C307.834 205.832 307.834 208.479 307.834 211.125C307.834 228.153 334.297 228.181 334.297 211.125C334.297 208.479 334.297 205.832 334.297 203.186C334.297 186.158 307.834 186.13 307.834 203.186Z"></path>
<path d="M317.537 488.987C317.537 493.398 317.537 497.808 317.537 502.219C317.537 519.246 344 519.275 344 502.219C344 497.808 344 493.398 344 488.987C344 471.959 317.537 471.931 317.537 488.987Z"></path>
<path d="M170.226 487.222C170.226 492.221 170.226 497.219 170.226 502.218C170.226 519.245 196.689 519.274 196.689 502.218C196.689 497.219 196.689 492.221 196.689 487.222C196.689 470.194 170.226 470.166 170.226 487.222Z"></path></>
},
PersonDigging: {
viewBox: "0 0 576 512", children: <path d="M256 128c35.35 0 63.1-28.65 63.1-64s-28.65-64-63.1-64S192 28.65 192 64S220.7 128 256 128zM256 32c17.64 0 31.1 14.36 31.1 32S273.6 96 256 96S224 81.64 224 64S238.4 32 256 32zM215.8 370l-143.1-80C67.44 287.6 62.16 287.3 57.63 289.3c-4.562 1.969-7.937 5.969-9.156 10.8l-47.1 192c-2.125 8.562 3.062 17.25 11.66 19.39C13.44 511.8 14.73 512 16.01 512c7.187 0 13.72-4.844 15.53-12.12l42.94-171.8l117.5 65.31V496c0 8.844 7.156 16 15.1 16s15.1-7.156 15.1-16l-.0041-112C224 378.1 220.8 372.8 215.8 370zM574.2 488.5L482.4 311.5c-7.531-14.14-21.81-22.95-38.22-23.56c-17.37-1.109-31.37 7.141-40.03 20.86l-30.25 49.13l-69.94-37.65c.0313-1.062-.0625-2.141-.2813-3.234L287.8 231.1c-5.937-31.83-25.34-59.5-53.25-75.92L169.9 118.1C144.5 103.1 114.7 98.84 86.04 106C65.01 111.3 47.41 125.4 37.76 144.7L17.69 184.8C13.82 192.6 16.82 201.1 24.41 206.1l332.7 179.1l-7.623 12.38h-27.87c-19.16 0-36.22 11.83-42.44 29.45L256.9 490.6c-1.719 4.891-.9687 10.31 2.031 14.55s7.875 6.75 13.06 6.75h287.1c5.594 0 10.78-2.906 13.66-7.688C576.6 499.4 576.8 493.5 574.2 488.5zM53.26 185.3l13.12-26.25c5.469-10.97 15.47-18.98 27.41-21.97c20.47-5.078 41.78-2.062 59.94 8.656L218.3 183.7c19.94 11.72 33.81 31.47 38.06 54.22l11.84 63.11L53.26 185.3zM294.6 479.9l14.81-42.2c1.688-4.828 6.625-8.078 12.25-8.078h36.78c5.531 0 10.69-2.875 13.62-7.594l59.31-96.31c3.562-5.609 9.406-5.797 11.69-5.812c4.875 .1875 9.062 2.656 11.06 6.469l79.59 153.5H294.6z" />
},
Car: {
viewBox: "0 0 576 512", children: <path d="M167.2 117.4c4.5-12.8 16.6-21.4 30.2-21.4H378.6c13.6 0 25.7 8.6 30.2 21.4L434.9 192H141.1l26.1-74.6zM32 224h8.6c-5.4 9.4-8.6 20.3-8.6 32V400v48c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V400H448v48c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V400 256c0-11.7-3.1-22.6-8.6-32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H491.5L469.2 96.3C455.7 57.8 419.4 32 378.6 32H197.4c-40.8 0-77.1 25.8-90.6 64.3L84.5 160H32c-17.7 0-32 14.3-32 32s14.3 32 32 32zm128 64c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32zm288 32c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z" />
},
building_thin: {
viewBox: "0 0 384 512", children: <path d="M136 232C149.3 232 160 242.7 160 256V288C160 301.3 149.3 312 136 312H104C90.75 312 80 301.3 80 288V256C80 242.7 90.75 232 104 232H136zM96 288C96 292.4 99.58 296 104 296H136C140.4 296 144 292.4 144 288V256C144 251.6 140.4 248 136 248H104C99.58 248 96 251.6 96 256V288zM224 256C224 242.7 234.7 232 248 232H280C293.3 232 304 242.7 304 256V288C304 301.3 293.3 312 280 312H248C234.7 312 224 301.3 224 288V256zM248 248C243.6 248 240 251.6 240 256V288C240 292.4 243.6 296 248 296H280C284.4 296 288 292.4 288 288V256C288 251.6 284.4 248 280 248H248zM136 104C149.3 104 160 114.7 160 128V160C160 173.3 149.3 184 136 184H104C90.75 184 80 173.3 80 160V128C80 114.7 90.75 104 104 104H136zM96 160C96 164.4 99.58 168 104 168H136C140.4 168 144 164.4 144 160V128C144 123.6 140.4 120 136 120H104C99.58 120 96 123.6 96 128V160zM224 128C224 114.7 234.7 104 248 104H280C293.3 104 304 114.7 304 128V160C304 173.3 293.3 184 280 184H248C234.7 184 224 173.3 224 160V128zM248 120C243.6 120 240 123.6 240 128V160C240 164.4 243.6 168 248 168H280C284.4 168 288 164.4 288 160V128C288 123.6 284.4 120 280 120H248zM48 512C21.49 512 0 490.5 0 464V48C0 21.49 21.49 0 48 0H336C362.5 0 384 21.49 384 48V464C384 490.5 362.5 512 336 512H48zM16 48V464C16 481.7 30.33 496 48 496H144V416C144 389.5 165.5 368 192 368C218.5 368 240 389.5 240 416V496H336C353.7 496 368 481.7 368 464V48C368 30.33 353.7 16 336 16H48C30.33 16 16 30.33 16 48zM160 496H224V416C224 398.3 209.7 384 192 384C174.3 384 160 398.3 160 416V496z" />
},
Calendar: {
viewBox: "0 0 448 512", children: <path d="M112 0C120.8 0 128 7.164 128 16V64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0zM416 192H32V448C32 465.7 46.33 480 64 480H384C401.7 480 416 465.7 416 448V192zM384 96H64C46.33 96 32 110.3 32 128V160H416V128C416 110.3 401.7 96 384 96z" />
},
parking_thin: {
viewBox: "0 0 512 512", children: <path d="M288 128C336.6 128 376 167.4 376 216C376 264.6 336.6 304 288 304H192V376C192 380.4 188.4 384 184 384C179.6 384 176 380.4 176 376V144C176 135.2 183.2 128 192 128H288zM360 216C360 176.2 327.8 144 288 144H192V288H288C327.8 288 360 255.8 360 216zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 16C123.5 16 16 123.5 16 256C16 388.5 123.5 496 256 496C388.5 496 496 388.5 496 256C496 123.5 388.5 16 256 16z" />
},
ban_parking_thin: {
viewBox: "0 0 512 512", children: <path d="M176 249.9L192 265.9V288H214.1L230.1 304H192V376C192 380.4 188.4 384 184 384C179.6 384 176 380.4 176 376V249.9zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM80.73 92.04C40.58 134.9 16 192.6 16 256C16 388.5 123.5 496 256 496C319.4 496 377.1 471.4 419.1 431.3L80.73 92.04zM496 256C496 123.5 388.5 16 256 16C192.6 16 134.9 40.58 92.04 80.73L176 164.7V144C176 135.2 183.2 128 192 128H288C336.6 128 376 167.4 376 216C376 256.3 348.9 290.2 312 300.7L431.3 419.1C471.4 377.1 496 319.4 496 256zM298.5 287.2C333.3 282.1 360 252.2 360 216C360 176.2 327.8 144 288 144H192V180.7L298.5 287.2z" />
},
ShowerLight: {
viewBox: "0 0 512 512", children: <path d="M347.3 100.7c-6.25-6.25-16.38-6.25-22.62 0l-10.45 10.45l-18.33-18.33c-34.53-34.53-88.28-37.71-126.6-10.18L143.2 56.56C127.3 40.72 106.3 32 83.88 32C37.63 32 0 69.63 0 115.9V464C0 472.8 7.156 480 16 480S32 472.8 32 464V115.9C32 87.28 55.27 64 83.88 64c13.86 0 26.89 5.406 36.69 15.19l26.04 26.04C134.7 121.8 128 141.5 128 162.3c0 26.28 10.23 51 28.81 69.56l18.33 18.33L164.7 260.7c-6.25 6.25-6.25 16.38 0 22.62C167.8 286.4 171.9 288 176 288s8.188-1.562 11.31-4.688l160-160C353.6 117.1 353.6 106.9 347.3 100.7zM197.8 227.6L179.4 209.3C166.9 196.8 160 180.1 160 162.3c0-17.72 6.906-34.38 19.44-46.91c25.86-25.84 67.95-25.91 93.84 0l18.33 18.33L197.8 227.6zM296 400c-13.25 0-24 10.74-24 24c0 13.25 10.75 24 24 24S320 437.3 320 424C320 410.7 309.3 400 296 400zM352 264c0-13.26-10.75-24-24-24S304 250.7 304 264C304 277.3 314.7 288 328 288S352 277.3 352 264zM288 328c0-13.26-10.75-24-24-24S240 314.7 240 328c0 13.25 10.75 24 24 24S288 341.3 288 328zM424 272c-13.25 0-24 10.74-24 24c0 13.25 10.75 24 24 24S448 309.3 448 296C448 282.7 437.3 272 424 272zM488 208c-13.25 0-24 10.74-24 24C464 245.3 474.7 256 488 256S512 245.3 512 232C512 218.7 501.3 208 488 208zM416 200c0-13.26-10.75-24-24-24S368 186.7 368 200C368 213.3 378.7 224 392 224S416 213.3 416 200zM360 336c-13.25 0-24 10.74-24 24c0 13.25 10.75 24 24 24S384 373.3 384 360C384 346.7 373.3 336 360 336z" />
},
toilet_thin: {
viewBox: "0 0 448 512", children: <path d="M8 16h432C444.4 16 448 12.42 448 8S444.4 0 440 0H8C3.578 0 0 3.578 0 8S3.578 16 8 16zM415.4 209.4C415.5 208.9 416 208.5 416 208V56c0-4.422-3.578-8-8-8S400 51.58 400 56v146.4C356.3 185.1 289 176 224 176S91.67 185.1 48 202.4V56c0-4.422-3.578-8-8-8S32 51.58 32 56V208c0 .5352 .4668 .8633 .5664 1.369C12.35 219.9 0 232.8 0 248c0 54.34 24.47 103.6 64 139.7V472C64 494.1 81.94 512 104 512h240c22.06 0 40-17.94 40-40v-84.3C423.5 351.6 448 302.3 448 248C448 232.8 435.6 219.9 415.4 209.4zM368 472c0 13.23-10.77 24-24 24h-240c-13.23 0-24-10.77-24-24v-71.02C118.1 430.3 169.2 448 224 448s105-17.73 144-47.02V472zM370.1 378.1c-.2676 .2266-.5234 .3516-.7598 .6113C332.6 411.6 280.9 432 224 432s-108.6-20.39-146.2-53.3c-.2363-.2598-.4922-.3848-.7598-.6113C47.07 351.6 26.4 317 19.1 278.5C56.27 305.6 142 320 224 320s167.7-14.39 204.9-41.55C421.6 317 400.9 351.6 370.1 378.1zM224 304c-122.6 0-208-29.52-208-56S101.4 192 224 192s208 29.52 208 56S346.6 304 224 304zM104 80C99.58 80 96 83.58 96 88S99.58 96 104 96h48C156.4 96 160 92.42 160 88S156.4 80 152 80H104z" />
},
bath_thin: {
viewBox: "0 0 512 512", children: <path d="M504 272H48V53.25C48 32.7 64.72 16 85.25 16c9.812 0 19.44 3.969 26.34 10.91l32.4 32.4C133.8 72.01 128 87.48 128 104c0 19.23 7.5 37.31 21.09 50.91l18.34 18.34L162.3 178.3c-3.125 3.125-3.125 8.188 0 11.31C163.9 191.2 165.9 192 168 192s4.094-.7813 5.656-2.344l112-112c3.125-3.125 3.125-8.188 0-11.31s-8.188-3.125-11.31 0l-5.094 5.094L250.9 53.09C224.8 26.97 183.6 25.49 155.3 48.01L122.9 15.59C113 5.688 99.28 0 85.25 0C55.88 0 32 23.89 32 53.25V272H8C3.594 272 0 275.6 0 280S3.594 288 8 288h496C508.4 288 512 284.5 512 280S508.4 272 504 272zM160.4 64.41c21.81-21.84 57.38-21.84 79.19 0l18.34 18.34L178.8 161.9L160.4 143.6C149.8 133 144 118.1 144 104S149.8 74.98 160.4 64.41zM472 320c-4.406 0-8 3.578-8 8v48c0 48.53-39.47 88-88 88h-240c-48.53 0-88-39.47-88-88v-48C48 323.6 44.41 320 40 320S32 323.6 32 328v48c0 36.78 19.32 68.98 48.22 87.48C80.2 463.7 80 463.8 80 464v40C80 508.4 83.59 512 88 512S96 508.4 96 504v-32.05C108.3 477.1 121.8 480 136 480h240c14.17 0 27.68-2.891 40-8.049V504c0 4.422 3.594 8 8 8s8-3.578 8-8V464c0-.2051-.2012-.3223-.2168-.5234C460.7 444.1 480 412.8 480 376v-48C480 323.6 476.4 320 472 320z" />
},
house_chimney_thin: {
viewBox: "0 0 576 512", children: <path d="M282.7 2.011C285.7-.6704 290.3-.6704 293.3 2.011L384 82.34V56C384 42.75 394.7 32 408 32H488C501.3 32 512 42.75 512 56V195.7L573.3 250C576.6 252.9 576.9 257.1 573.1 261.3C571.1 264.6 566 264.9 562.7 261.1L512 217.1V448C512 483.3 483.3 512 448 512H128C92.65 512 64 483.3 64 448V217.1L13.3 261.1C9.997 264.9 4.941 264.6 2.012 261.3C-.9182 257.1-.6116 252.9 2.696 250L282.7 2.011zM496 181.5V56C496 51.58 492.4 48 488 48H408C403.6 48 400 51.58 400 56V96.51L496 181.5zM288 18.69L80 202.9V448C80 474.5 101.5 496 128 496H208V328C208 314.7 218.7 303.1 232 303.1H344C357.3 303.1 368 314.7 368 328V496H448C474.5 496 496 474.5 496 448V202.9L384.3 103.1H384V103.7L288 18.69zM352 328C352 323.6 348.4 320 344 320H232C227.6 320 224 323.6 224 328V496H352V328z" />
},
square_dashed_thin: {
viewBox: "0 0 448 512", children: <path d="M88 32H120C124.4 32 128 35.58 128 40C128 44.42 124.4 48 120 48H88C48.24 48 16 80.24 16 120V152C16 156.4 12.42 160 8 160C3.582 160 0 156.4 0 152V120C0 71.4 39.4 32 88 32zM16 200V312C16 316.4 12.42 320 8 320C3.582 320 0 316.4 0 312V200C0 195.6 3.582 192 8 192C12.42 192 16 195.6 16 200zM448 200V312C448 316.4 444.4 320 440 320C435.6 320 432 316.4 432 312V200C432 195.6 435.6 192 440 192C444.4 192 448 195.6 448 200zM432 152V120C432 80.24 399.8 48 360 48H328C323.6 48 320 44.42 320 40C320 35.58 323.6 32 328 32H360C408.6 32 448 71.4 448 120V152C448 156.4 444.4 160 440 160C435.6 160 432 156.4 432 152zM448 392C448 440.6 408.6 480 360 480H328C323.6 480 320 476.4 320 472C320 467.6 323.6 464 328 464H360C399.8 464 432 431.8 432 392V360C432 355.6 435.6 352 440 352C444.4 352 448 355.6 448 360V392zM16 392C16 431.8 48.24 464 88 464H120C124.4 464 128 467.6 128 472C128 476.4 124.4 480 120 480H88C39.4 480 0 440.6 0 392V360C0 355.6 3.582 352 8 352C12.42 352 16 355.6 16 360V392zM168 480C163.6 480 160 476.4 160 472C160 467.6 163.6 464 168 464H280C284.4 464 288 467.6 288 472C288 476.4 284.4 480 280 480H168zM168 32H280C284.4 32 288 35.58 288 40C288 44.42 284.4 48 280 48H168C163.6 48 160 44.42 160 40C160 35.58 163.6 32 168 32z" />
},
ruler_triangle_thin: {
viewBox: "0 0 512 512", children: <path d="M124.9 248.6C127.9 247.4 131.4 248.1 133.7 250.3L261.7 378.3C263.9 380.6 264.6 384.1 263.4 387.1C262.2 390.1 259.2 392 256 392H128C123.6 392 120 388.4 120 384V256C120 252.8 121.9 249.8 124.9 248.6V248.6zM136 275.3V376H236.7L136 275.3zM.0003 448V45.25C.0003 20.26 20.26 0 45.26 0C57.26 0 68.77 4.768 77.26 13.25L498.7 434.7C507.2 443.2 512 454.7 512 466.7C512 491.7 491.7 512 466.7 512H64C28.65 512 0 483.3 0 448L.0003 448zM16 45.25V448C16 474.5 37.49 496 64 496H466.7C482.9 496 496 482.9 496 466.7C496 458.1 492.9 451.5 487.4 446.1L442.3 400.1L413.7 429.7C410.5 432.8 405.5 432.8 402.3 429.7C399.2 426.5 399.2 421.5 402.3 418.3L431 389.7L362.3 320.1L333.7 349.7C330.5 352.8 325.5 352.8 322.3 349.7C319.2 346.5 319.2 341.5 322.3 338.3L351 309.7L282.3 240.1L253.7 269.7C250.5 272.8 245.5 272.8 242.3 269.7C239.2 266.5 239.2 261.5 242.3 258.3L271 229.7L202.3 160.1L173.7 189.7C170.5 192.8 165.5 192.8 162.3 189.7C159.2 186.5 159.2 181.5 162.3 178.3L191 149.7L122.3 80.97L93.66 109.7C90.53 112.8 85.47 112.8 82.34 109.7C79.22 106.5 79.22 101.5 82.34 98.34L111 69.66L65.94 24.57C60.46 19.08 53.01 16 45.26 16C29.1 16 16 29.1 16 45.25V45.25z" />
},
calendar_check_thin: {
viewBox: "0 0 448 512", children: <path d="M213.7 405.7C210.5 408.8 205.5 408.8 202.3 405.7L130.3 333.7C127.2 330.5 127.2 325.5 130.3 322.3C133.5 319.2 138.5 319.2 141.7 322.3L208 388.7L322.3 274.3C325.5 271.2 330.5 271.2 333.7 274.3C336.8 277.5 336.8 282.5 333.7 285.7L213.7 405.7zM128 64H320V8C320 3.582 323.6 0 328 0C332.4 0 336 3.582 336 8V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H112V8C112 3.582 115.6 0 120 0C124.4 0 128 3.582 128 8V64zM16 448C16 474.5 37.49 496 64 496H384C410.5 496 432 474.5 432 448V192H16V448zM64 80C37.49 80 16 101.5 16 128V176H432V128C432 101.5 410.5 80 384 80H336V120C336 124.4 332.4 128 328 128C323.6 128 320 124.4 320 120V80H128V120C128 124.4 124.4 128 120 128C115.6 128 112 124.4 112 120V80H64z" />
},
layer_group_thin: {
viewBox: "0 0 512 512", children: <path d="M237.4 11.97C243.3 9.354 249.6 8 256 8C262.4 8 268.7 9.354 274.6 11.97L491.1 109.4C499.3 112.7 504 119.1 504 128C504 136 499.3 143.3 491.1 146.6L274.6 244C268.7 246.6 262.4 248 256 248C249.6 248 243.3 246.6 237.4 244L20.03 146.6C12.71 143.3 8 136 8 128C8 119.1 12.71 112.7 20.03 109.4L237.4 11.97zM256 24C251.9 24 247.8 24.88 243.1 26.57L26.57 124C25.01 124.7 24 126.3 24 128C24 129.7 25.01 131.3 26.57 131.1L243.1 229.4C247.8 231.1 251.9 232 256 232C260.1 232 264.2 231.1 268 229.4L485.4 131.1C486.1 131.3 488 129.7 488 128C488 126.3 486.1 124.7 485.4 124L268 26.57C264.2 24.88 260.1 24 256 24V24zM71.3 223.2C73.11 227.2 71.3 231.1 67.27 233.8L26.57 252C25.01 252.7 24 254.3 24 256C24 257.7 25.01 259.3 26.57 259.1L243.1 357.4C247.8 359.1 251.9 360 256 360C260.1 360 264.2 359.1 268 357.4L485.4 259.1C486.1 259.3 488 257.7 488 256C488 254.3 486.1 252.7 485.4 252L444.7 233.8C440.7 231.1 438.9 227.2 440.7 223.2C442.5 219.2 447.2 217.4 451.3 219.2L491.1 237.4C499.3 240.7 504 247.1 504 256C504 264 499.3 271.3 491.1 274.6L274.6 372C268.7 374.6 262.4 376 256 376C249.6 376 243.3 374.6 237.4 372L20.03 274.6C12.71 271.3 8 264 8 256C8 247.1 12.71 240.7 20.03 237.4L60.73 219.2C64.76 217.4 69.49 219.2 71.3 223.2V223.2zM26.57 380C25.01 380.7 24 382.3 24 384C24 385.7 25.01 387.3 26.57 387.1L243.1 485.4C247.8 487.1 251.9 488 256 488C260.1 488 264.2 487.1 268 485.4L485.4 387.1C486.1 387.3 488 385.7 488 384C488 382.3 486.1 380.7 485.4 380L444.7 361.8C440.7 359.1 438.9 355.2 440.7 351.2C442.5 347.2 447.2 345.4 451.3 347.2L491.1 365.4C499.3 368.7 504 375.1 504 384C504 392 499.3 399.3 491.1 402.6L274.6 500C268.7 502.6 262.4 504 256 504C249.6 504 243.3 502.6 237.4 500L20.03 402.6C12.71 399.3 8 392 8 384C8 375.1 12.71 368.7 20.03 365.4L60.73 347.2C64.76 345.4 69.49 347.2 71.3 351.2C73.11 355.2 71.3 359.1 67.27 361.8L26.57 380z" />
},
sink_thin: {
viewBox: "0 0 512 512", children: <path d="M480 288h-96V264c0-13.22 10.78-24 24-24h64C476.4 240 480 236.4 480 232S476.4 224 472 224h-64c-22.06 0-40 17.94-40 40V288h-104V72c0-30.88 25.12-56 56-56s56 25.12 56 56v48c0 4.406 3.594 7.1 8 7.1S392 124.4 392 120v-48C392 32.31 359.7 0 320 0S248 32.31 248 72V288H144V264C144 241.9 126.1 224 104 224h-64C35.59 224 32 227.6 32 231.1S35.59 240 40 240h64C117.2 240 128 250.8 128 264V288H32c-17.67 0-32 14.33-32 32c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32C512 302.3 497.7 288 480 288zM480 336H32c-8.822 0-16-7.178-16-16S23.18 304 32 304h448c8.822 0 16 7.178 16 16S488.8 336 480 336zM472 376c-4.406 0-8 3.594-8 8v24c0 48.53-39.47 88-88 88h-240c-48.53 0-88-39.47-88-88V384c0-4.406-3.594-8-8-8S32 379.6 32 384V408C32 465.3 78.66 512 136 512h240c57.34 0 104-46.66 104-104v-23.1C480 379.6 476.4 376 472 376z" />
},
house_building_solid: {
viewBox: "0 0 640 512", children: <path d="M368 0c-26.5 0-48 21.5-48 48V153.9l64 58.7V208c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H413.2c1.9 6.8 2.8 13.9 2.8 21.1V288h16c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H416V464c0 18-6 34.6-16 48H592c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H368zM512 208c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H528c-8.8 0-16-7.2-16-16V208zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H528c-8.8 0-16-7.2-16-16V304c0-8.8 7.2-16 16-16zM400 96h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H400c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16zm112 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H528c-8.8 0-16-7.2-16-16V112zM0 277.1V464c0 26.5 21.5 48 48 48H336c26.5 0 48-21.5 48-48V277.1c0-13.5-5.6-26.3-15.6-35.4l-144-132c-18.4-16.8-46.5-16.8-64.9 0l-144 132C5.6 250.8 0 263.7 0 277.1zM144 296c0-13.3 10.7-24 24-24h48c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24H168c-13.3 0-24-10.7-24-24V296z" />
},
taxi_bus_solid: {
viewBox: "0 0 640 512", children: <path d="M48 416H32c-17.7 0-32-14.3-32-32V74.5c0-16.2 9.2-31 23.7-38.3C71.2 12.4 123.7 0 176.9 0h30.3c53.2 0 105.6 12.4 153.2 36.2C374.8 43.4 384 58.2 384 74.5V96c-21.9 0-40.4 14.7-46.2 34.8c-6.1 1.4-12.1 3.3-17.8 5.6V120c0-13.3-10.7-24-24-24H208V224h41.9l-16.3 48.9C208.5 290.2 192 319.2 192 352v64H128v32c0 17.7-14.3 32-32 32H80c-17.7 0-32-14.3-32-32V416zM64 120v80c0 13.3 10.7 24 24 24h88V96H88c-13.3 0-24 10.7-24 24zm56 200c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24zM368 152c0-13.3 10.7-24 24-24h80c13.3 0 24 10.7 24 24v8h5.4c34.4 0 65 22 75.9 54.7l26.6 79.7C625.2 304.7 640 326.6 640 352l0 96v32c0 17.7-14.3 32-32 32H592c-17.7 0-32-14.3-32-32V448H304v32c0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32V448h0V352c0-25.4 14.8-47.3 36.1-57.6l26.6-79.7C297.6 182 328.2 160 362.6 160H368v-8zm-20.6 82.9L329.7 288H534.3l-17.7-53.1c-2.2-6.5-8.3-10.9-15.2-10.9H362.6c-6.9 0-13 4.4-15.2 10.9zM328 368c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24zm232 24c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24z" />
},
memo_solid: {
viewBox: "0 0 384 512", children: <path d="M0 64C0 28.7 28.7 0 64 0H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm64 80c0 8.8 7.2 16 16 16H304c8.8 0 16-7.2 16-16s-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm16 80c-8.8 0-16 7.2-16 16s7.2 16 16 16H304c8.8 0 16-7.2 16-16s-7.2-16-16-16H80zm0 96c-8.8 0-16 7.2-16 16s7.2 16 16 16H208c8.8 0 16-7.2 16-16s-7.2-16-16-16H80z" />
},
memo_light: {
viewBox: "0 0 384 512", children: <path d="M208 320h-128C71.16 320 64 327.2 64 336S71.16 352 80 352h128c8.838 0 16-7.164 16-16S216.8 320 208 320zM304 224h-224C71.16 224 64 231.2 64 240S71.16 256 80 256h224C312.8 256 320 248.8 320 240S312.8 224 304 224zM304 128h-224C71.16 128 64 135.2 64 144S71.16 160 80 160h224C312.8 160 320 152.8 320 144S312.8 128 304 128zM320 0H64C28.65 0 0 28.65 0 64v384c0 35.35 28.65 64 64 64h256c35.35 0 64-28.65 64-64V64C384 28.65 355.3 0 320 0zM352 448c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V64c0-17.64 14.36-32 32-32h256c17.64 0 32 14.36 32 32V448z" />
},
lightning_bolt_solid: {
viewBox: "0 0 384 512", children: <path d="M0 256L28.5 28c2-16 15.6-28 31.8-28H228.9c15 0 27.1 12.1 27.1 27.1c0 3.2-.6 6.5-1.7 9.5L208 160H347.3c20.2 0 36.7 16.4 36.7 36.7c0 7.4-2.2 14.6-6.4 20.7l-192.2 281c-5.9 8.6-15.6 13.7-25.9 13.7h-2.9c-15.7 0-28.5-12.8-28.5-28.5c0-2.3 .3-4.6 .9-6.9L176 288H32c-17.7 0-32-14.3-32-32z" />
},
lightning_bolt_light: {
viewBox: "0 0 384 512", children: <path d="M379.8 197.6c5.031-7.344 5.563-16.88 1.406-24.75C377.1 164.9 368.9 160 360 160h-156.6l50.84-127.1c2.969-7.375 2.062-15.78-2.406-22.38S239.1 0 232 0h-176C43.97 0 33.81 8.906 32.22 20.84l-32 240C-.7179 267.7 1.376 274.6 5.938 279.8C10.5 285 17.09 288 24 288h146.3l-41.78 194.1c-2.406 11.22 3.469 22.56 14 27.09C145.6 511.4 148.8 512 152 512c7.719 0 15.22-3.75 19.81-10.44L379.8 197.6zM190.1 256H33.15l29.87-224h157.2L164.9 170.1C160.7 180.6 168.5 192 179.8 192h165l-176.5 257.1l37.43-174.6C207.9 265.4 200.3 256 190.1 256z" />
},
washing_machine_solid: {
viewBox: "0 0 448 512", children: <path d="M0 64C0 28.7 28.7 0 64 0H384c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM368 304c0-79.5-64.5-144-144-144s-144 64.5-144 144s64.5 144 144 144s144-64.5 144-144zM88 112c13.3 0 24-10.7 24-24s-10.7-24-24-24S64 74.7 64 88s10.7 24 24 24zM208 88c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24zm16 328c-61.9 0-112-50.1-112-112c0-16.5 3.6-32.2 10-46.3c7.4-1.1 14.8-1.7 22-1.7c32 0 56 16 80 32s48 32 80 32c10.9 0 21.4-.9 31.2-2.5C328.5 373 281.3 416 224 416zM0 64C0 28.7 28.7 0 64 0H384c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM368 304c0-79.5-64.5-144-144-144s-144 64.5-144 144s64.5 144 144 144s144-64.5 144-144zM88 112c13.3 0 24-10.7 24-24s-10.7-24-24-24S64 74.7 64 88s10.7 24 24 24zM208 88c0-13.3-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24zm16 328c-61.9 0-112-50.1-112-112c0-16.5 3.6-32.2 10-46.3c7.4-1.1 14.8-1.7 22-1.7c32 0 56 16 80 32s48 32 80 32c10.9 0 21.4-.9 31.2-2.5C328.5 373 281.3 416 224 416z" />
},
bench_tree_solid: {
viewBox: "0 0 640 512", children: <path d="M608 96c0 5.1-.4 10.2-1.2 15.1C626.9 125.7 640 149.3 640 176c0 44.2-35.8 80-80 80H544V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V256H464c-44.2 0-80-35.8-80-80c0-26.7 13.1-50.3 33.2-64.9c-.8-4.9-1.2-10-1.2-15.1c0-53 43-96 96-96s96 43 96 96zM32 224c0-17.7 14.3-32 32-32H320c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V224zm0 128H352c17.7 0 32 14.3 32 32s-14.3 32-32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V416H96v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V416c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
},
scroll_solid: {
viewBox: "0 0 576 512", children: <path d="M0 80v48c0 17.7 14.3 32 32 32H48 96V80c0-26.5-21.5-48-48-48S0 53.5 0 80zM112 32c10 13.4 16 30 16 48V384c0 35.3 28.7 64 64 64s64-28.7 64-64v-5.3c0-32.4 26.3-58.7 58.7-58.7H480V128c0-53-43-96-96-96H112zM464 480c61.9 0 112-50.1 112-112c0-8.8-7.2-16-16-16H314.7c-14.7 0-26.7 11.9-26.7 26.7V384c0 53-43 96-96 96H368h96z" />
},
smoking_light: {
viewBox: "0 0 640 512", children: <path d="M488 352H48C21.5 352 0 373.5 0 400v64C0 490.5 21.5 512 48 512h440c13.25 0 24-10.75 24-24v-112C512 362.8 501.3 352 488 352zM192 480H48C39.25 480 32 472.8 32 464v-64C32 391.3 39.25 384 48 384H192V480zM480 480H224v-96h256V480zM560 352c-8.801 0-16 7.199-16 16v128c0 8.799 7.199 16 16 16s16-7.201 16-16v-128C576 359.2 568.8 352 560 352zM624 352c-8.801 0-16 7.199-16 16v128c0 8.799 7.199 16 16 16s16-7.201 16-16v-128C640 359.2 632.8 352 624 352zM473.6 131.2C437.5 104.2 416 61.06 416 16C416 7.156 408.8 0 400 0S384 7.156 384 16c0 55.09 26.31 107.7 70.39 140.8C490.5 183.8 512 226.9 512 272C512 280.8 519.2 288 528 288S544 280.8 544 272C544 216.9 517.7 164.3 473.6 131.2zM550.4 156.8C586.5 183.8 608 226.9 608 272C608 280.8 615.2 288 624 288S640 280.8 640 272c0-55.09-26.31-107.7-70.39-140.8C533.5 104.2 512 61.06 512 16C512 7.156 504.8 0 496 0S480 7.156 480 16C480 71.09 506.3 123.7 550.4 156.8z" />
},
paw_light: {
viewBox: "0 0 512 512", children: <path d="M109.5 131.1C95.19 88.26 109.8 44.92 142.1 34.34C174.4 23.77 212.2 49.96 226.5 92.85C240.8 135.7 226.2 179.1 193.9 189.7C161.6 200.2 123.8 174 109.5 131.1zM197.4 143.2C200.8 132.9 201.3 118.5 196.1 102.1C190.1 87.49 181.9 76.15 172.8 69.85C163.7 63.55 156.5 63.29 152 64.76C147.6 66.21 142.1 70.58 138.6 80.84C135.2 91.14 134.7 105.5 139.9 121C145 136.5 154.1 147.9 163.2 154.2C172.3 160.5 179.5 160.7 183.1 159.2C188.4 157.8 193.9 153.4 197.4 143.2V143.2zM11.63 249.4C-7.237 216.1-2.664 179.3 21.84 165.3C46.35 151.2 81.51 166.1 100.4 198.6C119.2 231 114.7 268.7 90.16 282.7C65.65 296.8 30.49 281.9 11.63 249.4zM79.76 243.7C80.69 236 78.99 225.5 72.71 214.7C66.44 203.9 58.02 197.1 50.73 193.1C43.45 190.9 39.38 192.1 37.75 193C36.18 193.1 33.16 196.7 32.24 204.3C31.31 211.1 33.01 222.5 39.29 233.3C45.56 244.1 53.98 250.9 61.27 254C68.55 257.1 72.62 255.9 74.25 254.1C75.82 254 78.84 251.3 79.76 243.7zM442.8 401.2C446.4 410.9 448 421.3 448 431.7V436.1C448 460.3 428.3 480 404.1 480C390.8 480 377.5 477.1 364.8 474L284.6 448.9C265.1 443.1 246 443.1 227.4 448.9L147.2 474C134.5 477.1 121.2 480 107.9 480C83.65 480 63.1 460.3 63.1 436.1V431.7C63.1 421.3 65.6 410.9 69.21 401.2C121.6 259.9 214.7 224 255.1 224C297.3 224 390.4 259.9 442.8 401.2H442.8zM256 256C230.3 256 147.8 281.4 99.21 412.3C97.1 418 96 424.5 96 431.7V436.1C96 442.7 101.3 448 107.9 448C117.1 448 128 446.5 137.6 443.5L217.8 418.4C242.7 410.6 269.3 410.6 294.2 418.4L374.4 443.5C383.1 446.5 394 448 404.1 448C410.7 448 416 442.7 416 436.1V431.7C416 424.5 414.9 418 412.8 412.3C364.2 281.4 281.7 256 256 256zM490.2 165.3C514.7 179.3 519.2 216.1 500.4 249.4C481.5 281.9 446.3 296.8 421.8 282.7C397.3 268.7 392.8 231 411.6 198.6C430.5 166.1 465.7 151.2 490.2 165.3zM439.3 214.7C433 225.5 431.3 236 432.2 243.7C433.2 251.3 436.2 254 437.8 254.1C439.4 255.9 443.4 257.1 450.7 254C458 250.9 466.4 244.1 472.7 233.3C478.1 222.5 480.7 211.1 479.8 204.3C478.8 196.7 475.8 193.1 474.2 193C472.6 192.1 468.6 190.9 461.3 193.1C453.1 197.1 445.6 203.9 439.3 214.7zM361.9 34.34C394.2 44.92 408.8 88.26 394.5 131.1C380.2 174 342.4 200.2 310.1 189.7C277.8 179.1 263.2 135.7 277.5 92.85C291.8 49.96 329.6 23.77 361.9 34.34zM307.8 102.1C302.7 118.5 303.2 132.9 306.6 143.2C310.1 153.4 315.6 157.8 320 159.2C324.5 160.7 331.7 160.5 340.8 154.2C349.9 147.9 358.1 136.5 364.2 121C369.3 105.5 368.8 91.14 365.4 80.84C361.9 70.58 356.4 66.21 351.1 64.76C347.5 63.29 340.3 63.55 331.2 69.85C322.1 76.15 313 87.49 307.8 102.1V102.1z" />
},
coins_light: {
viewBox: "0 0 512 512", children: <path d="M168.3 92.78C169.6 93.97 171.2 95.17 172.9 96.36C157.5 96.95 142.5 98.24 128 100.2V80C128 64.75 136.6 52.28 147.4 42.96C158.3 33.58 173.1 25.87 190.1 19.71C224.1 7.338 270 0 320 0C369.1 0 415.9 7.338 449.9 19.71C466.9 25.87 481.7 33.58 492.6 42.96C503.4 52.28 512 64.75 512 80V184V184V297.9C512 313.3 503.8 326.1 492.9 335.9C481.1 345.7 467.1 353.8 450.1 360.3C439.8 364.2 428.3 367.7 416 370.6V337.6C424.2 335.4 431.8 333 438.8 330.4C453.6 324.7 464.5 318.4 471.5 312.1C478.4 305.9 480 301 480 297.9V231.7C471.3 237.3 461.2 242.2 450.1 246.4C439.8 250.3 428.3 253.8 416 256.7V223.7C424.2 221.5 431.8 219.1 438.8 216.5C453.6 210.8 464.5 204.4 471.5 198.2C478.4 191.1 480 187.1 480 184V126.1C471.2 131.6 461 136.3 449.9 140.3C432.6 146.6 412.3 151.6 389.9 154.9C388.1 152.1 386.2 151.2 384.3 149.5C374.2 140.4 362.6 133 350.5 127C385.2 124.7 415.9 118.6 438.1 110.2C453.9 104.8 464.8 98.72 471.7 92.78C478.7 86.79 480 82.42 480 80C480 77.58 478.7 73.21 471.7 67.22C464.8 61.28 453.9 55.2 438.1 49.78C409.3 38.99 367.2 32 320 32C272.8 32 230.7 38.99 201 49.78C186.1 55.2 175.2 61.28 168.3 67.22C161.3 73.21 159.1 77.58 159.1 80C159.1 82.42 161.3 86.79 168.3 92.78L168.3 92.78zM0 208C0 192.7 8.552 180.3 19.4 170.1C30.3 161.6 45.14 153.9 62.08 147.7C96.1 135.3 142 128 192 128C241.1 128 287.9 135.3 321.9 147.7C338.9 153.9 353.7 161.6 364.6 170.1C375.4 180.3 384 192.7 384 208V425.9C384 441.3 375.8 454.1 364.9 463.9C353.1 473.7 339.1 481.8 322.1 488.3C288.1 501.3 242 508.1 192 508.1C141.1 508.1 95.95 501.3 61.85 488.3C44.86 481.8 30.01 473.7 19.12 463.9C8.241 454.1 .0003 441.3 .0003 425.9L0 208zM40.26 220.8C47.17 226.7 58.11 232.8 73.02 238.2C102.7 249 144.8 256 192 256C239.2 256 281.3 249 310.1 238.2C325.9 232.8 336.8 226.7 343.7 220.8C350.7 214.8 352 210.4 352 208C352 205.6 350.7 201.2 343.7 195.2C336.8 189.3 325.9 183.2 310.1 177.8C281.3 166.1 239.2 160 192 160C144.8 160 102.7 166.1 73.02 177.8C58.11 183.2 47.17 189.3 40.26 195.2C33.3 201.2 32 205.6 32 208C32 210.4 33.3 214.8 40.26 220.8V220.8zM321.9 268.3C287.9 280.7 241.1 288 192 288C142 288 96.1 280.7 62.08 268.3C50.98 264.3 40.78 259.5 32 254.1V312C32 315.1 33.61 319.1 40.54 326.2C47.46 332.4 58.39 338.8 73.25 344.5C102.9 355.7 144.8 363 192 363C239.2 363 281.1 355.7 310.8 344.5C325.6 338.8 336.5 332.4 343.5 326.2C350.4 319.1 352 315.1 352 312V254.1C343.2 259.5 333 264.3 321.9 268.3zM40.54 440.1C47.46 446.4 58.39 452.7 73.25 458.4C102.9 469.6 144.8 476.1 192 476.1C239.2 476.1 281.1 469.6 310.8 458.4C325.6 452.7 336.5 446.4 343.5 440.1C350.4 433.9 352 429 352 425.9V359.7C343.3 365.3 333.2 370.2 322.1 374.4C288.1 387.4 242 395 192 395C141.1 395 95.95 387.4 61.85 374.4C50.84 370.2 40.72 365.3 31.1 359.7V425.9C31.1 429 33.61 433.9 40.54 440.1H40.54z" />
},
calendar_check_light: {
viewBox: "0 0 448 512", children: <path d="M219.3 395.3C213.1 401.6 202.9 401.6 196.7 395.3L132.7 331.3C126.4 325.1 126.4 314.9 132.7 308.7C138.9 302.4 149.1 302.4 155.3 308.7L208 361.4L308.7 260.7C314.9 254.4 325.1 254.4 331.3 260.7C337.6 266.9 337.6 277.1 331.3 283.3L219.3 395.3zM128 64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0C120.8 0 128 7.164 128 16V64zM32 448C32 465.7 46.33 480 64 480H384C401.7 480 416 465.7 416 448V192H32V448zM32 128V160H416V128C416 110.3 401.7 96 384 96H64C46.33 96 32 110.3 32 128z" />
},
house_light: {
viewBox: "0 0 576 512", children: <path d="M570.6 244C577.2 249.8 577.8 259.1 571.1 266.6C566.2 273.2 556 273.8 549.4 267.1L512 234.1V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V234.1L26.59 267.1C19.96 273.8 9.849 273.2 4.003 266.6C-1.844 259.1-1.212 249.8 5.414 244L277.4 4.002C283.5-1.334 292.5-1.334 298.6 4.002L570.6 244zM144 480H208V320C208 302.3 222.3 288 240 288H336C353.7 288 368 302.3 368 320V480H432C458.5 480 480 458.5 480 432V206.7L288 37.34L96 206.7V432C96 458.5 117.5 480 144 480zM240 480H336V320H240V480z" />
},
calendar_clock_light: {
viewBox: "0 0 576 512", children: <path d="M112 0C120.8 0 128 7.164 128 16V64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V192.7C442.7 192.2 437.4 192 432 192C426.6 192 421.3 192.2 416 192.7V192H32V448C32 465.7 46.33 480 64 480H296.2C306.3 492.1 317.9 502.9 330.8 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0zM384 96H64C46.33 96 32 110.3 32 128V160H416V128C416 110.3 401.7 96 384 96zM431.1 288C440.8 288 447.1 295.2 447.1 304V352H480C488.8 352 496 359.2 496 368C496 376.8 488.8 384 480 384H431.1C423.2 384 415.1 376.8 415.1 368V304C415.1 295.2 423.2 288 431.1 288V288zM288 368C288 288.5 352.5 224 432 224C511.5 224 576 288.5 576 368C576 447.5 511.5 512 432 512C352.5 512 288 447.5 288 368zM432 480C493.9 480 544 429.9 544 368C544 306.1 493.9 256 432 256C370.1 256 320 306.1 320 368C320 429.9 370.1 480 432 480z" />
},
handshake_light: {
viewBox: "0 0 640 512", children: <path d="M640 400c0 8.844-7.156 16-16 16H576c-20.83 0-38.43-13.42-45.05-32h-31.68c-1.695 4.467-3.529 8.932-6.689 12.84l-9.094 11.25c-14 17.34-38.19 21.88-57.41 11.97l-20.27 24.97c-18.03 21.97-50.47 25.25-72.31 7.406l-6.094-5.281c-11.14 9-25.12 14.88-40.23 16.44C284.5 463.9 281.8 464 279.1 464c-17.58 0-34.48-6-48.33-17.25L149.5 384H109.1C102.4 402.6 84.83 416 64 416H32c-8.844 0-16-7.156-16-16S23.16 384 32 384l32-.0606c8.828 0 16-7.127 16-15.94V160h-64C7.156 160 0 152.8 0 144S7.156 128 16 128h114.9c33.55-33.2 76.95-55.11 122.8-61.77c8.781-1.391 16.86 4.781 18.12 13.53C273.1 88.5 267 96.63 258.3 97.89C217.4 103.8 178.7 124.1 149.3 154.9L144.6 159.8L112 160v192h48.39l90.3 69.69c9.625 7.781 21.22 11.25 33.2 10.06c11.88-1.219 22.56-7 30.09-16.28l10.55-10.53l12.62 8.312L354.1 428c7.844 6.406 20.09 5.094 26.89-3.188l40-49.25l17.56 14.72c5.953 4.719 15.09 3.844 20.03-2.312l9.094-11.25c4.953-6.125 4.016-15.19-2.109-20.19l-108.5-88.11c-6.859-5.578-7.891-15.66-2.328-22.52c5.547-6.844 15.62-7.906 22.52-2.328l108.5 88.14c6.725 5.471 10.75 12.67 13.52 20.28H528V160h-32.31l-4.703-4.797C454.1 117.6 404.7 96 355.6 96h-8.172c-3.562 0-6.953 1.359-9.766 3.922L244.4 187.2C234.3 196.9 235.8 211.1 243.1 219.2C245.6 221.9 251.9 226.1 259.2 226.5c5.125 .0938 10.11-1.609 14.62-5.703l.6406 .7031C282.7 212.4 302.5 194 350.1 149.8c6.469-5.984 16.58-5.656 22.61 .8281c6.016 6.469 5.641 16.59-.8281 22.61L295.4 244.4C285.3 253.6 273.1 258.5 260.2 258.5c-.8594 0-1.719-.0313-2.594-.0625C240.5 257.6 226.6 248.7 219.4 240.6c-19.7-21.69-18.88-54.53 1.734-75.39L221.5 164.8l94.47-88.34C324.8 68.36 335.9 64 347.4 64h8.172c55.52 0 111 23.25 153.4 64H624C632.8 128 640 135.2 640 144S632.8 160 624 160h-64v208c0 8.812 7.17 16.01 15.1 16.01L624 384C632.8 384 640 391.2 640 400z" />
},
map_location_dot_solid: {
viewBox: "0 0 576 512", children: <path d="M408 120c0 54.6-73.1 151.9-105.2 192c-7.7 9.6-22 9.6-29.6 0C241.1 271.9 168 174.6 168 120C168 53.7 221.7 0 288 0s120 53.7 120 120zm8 80.4c3.5-6.9 6.7-13.8 9.6-20.6c.5-1.2 1-2.5 1.5-3.7l116-46.4C558.9 123.4 576 135 576 152V422.8c0 9.8-6 18.6-15.1 22.3L416 503V200.4zM137.6 138.3c2.4 14.1 7.2 28.3 12.8 41.5c2.9 6.8 6.1 13.7 9.6 20.6V451.8L32.9 502.7C17.1 509 0 497.4 0 480.4V209.6c0-9.8 6-18.6 15.1-22.3l122.6-49zM327.8 332c13.9-17.4 35.7-45.7 56.2-77V504.3L192 449.4V255c20.5 31.3 42.3 59.6 56.2 77c20.5 25.6 59.1 25.6 79.6 0zM288 152c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z" />
},
user_vneck_hair_solid: {
viewBox: "0 0 448 512", children: <path d="M304 128v16c0 44.2-35.8 80-80 80s-80-35.8-80-80V128c0-5.5 .6-10.8 1.6-16H176c29.8 0 55.9-16.3 69.6-40.5C257.3 86.4 275.5 96 296 96h1.3c4.3 9.8 6.7 20.6 6.7 32zM96 128v16c0 70.7 57.3 128 128 128s128-57.3 128-128V128C352 57.3 294.7 0 224 0S96 57.3 96 128zM210.9 405.5l-60.1-85.2C66.6 325.7 0 395.7 0 481.3c0 17 13.8 30.7 30.7 30.7H417.3c17 0 30.7-13.8 30.7-30.7c0-85.6-66.6-155.6-150.8-160.9l-60.1 85.2c-6.4 9-19.8 9-26.1 0z" />
},
email_light: {
viewBox: "0 0 512 512", children: <path d="M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM32 128V167.9L227.6 311.3C244.5 323.7 267.5 323.7 284.4 311.3L480 167.9V128C480 110.3 465.7 96 448 96H63.1C46.33 96 31.1 110.3 31.1 128H32zM32 207.6V384C32 401.7 46.33 416 64 416H448C465.7 416 480 401.7 480 384V207.6L303.3 337.1C275.1 357.8 236.9 357.8 208.7 337.1L32 207.6z" />
},
phone_light: {
viewBox: "0 0 512 512", children: <path d="M484.6 330.6C484.6 330.6 484.6 330.6 484.6 330.6l-101.8-43.66c-18.5-7.688-40.2-2.375-52.75 13.08l-33.14 40.47C244.2 311.8 200.3 267.9 171.6 215.2l40.52-33.19c15.67-12.92 20.83-34.16 12.84-52.84L181.4 27.37C172.7 7.279 150.8-3.737 129.6 1.154L35.17 23.06C14.47 27.78 0 45.9 0 67.12C0 312.4 199.6 512 444.9 512c21.23 0 39.41-14.44 44.17-35.13l21.8-94.47C515.7 361.1 504.7 339.3 484.6 330.6zM457.9 469.7c-1.375 5.969-6.844 10.31-12.98 10.31c-227.7 0-412.9-185.2-412.9-412.9c0-6.188 4.234-11.48 10.34-12.88l94.41-21.91c1-.2344 2-.3438 2.984-.3438c5.234 0 10.11 3.094 12.25 8.031l43.58 101.7C197.9 147.2 196.4 153.5 191.8 157.3L141.3 198.7C135.6 203.4 133.8 211.4 137.1 218.1c33.38 67.81 89.11 123.5 156.9 156.9c6.641 3.313 14.73 1.531 19.44-4.219l41.39-50.5c3.703-4.563 10.16-6.063 15.5-3.844l101.6 43.56c5.906 2.563 9.156 8.969 7.719 15.22L457.9 469.7z" />
},
phone_solid: {
viewBox: "0 0 512 512", children: <path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
},
image_light: {
viewBox: "0 0 512 512", children: <path d="M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.0625L200.5 268.5L184.1 245.9C172.7 229.1 145.9 229.9 134.4 245.9l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38c5.312-10 4.734-22.09-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38l29.91 41.34C191.2 310.2 196.4 313.2 201.4 312.6c5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32V416zM144 192C170.5 192 192 170.5 192 144S170.5 96 144 96S96 117.5 96 144S117.5 192 144 192zM144 128c8.822 0 15.1 7.178 15.1 16S152.8 160 144 160S128 152.8 128 144S135.2 128 144 128z" />
},
image_solid: {
viewBox: "0 0 512 512", children: <path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48z" />
},
ellipsis_stroke_light: {
viewBox: "0 0 512 512", children: <path d="M480 256C480 291.3 451.3 320 416 320C380.7 320 352 291.3 352 256C352 220.7 380.7 192 416 192C451.3 192 480 220.7 480 256zM416 224C398.3 224 384 238.3 384 256C384 273.7 398.3 288 416 288C433.7 288 448 273.7 448 256C448 238.3 433.7 224 416 224zM320 256C320 291.3 291.3 320 256 320C220.7 320 192 291.3 192 256C192 220.7 220.7 192 256 192C291.3 192 320 220.7 320 256zM256 224C238.3 224 224 238.3 224 256C224 273.7 238.3 288 256 288C273.7 288 288 273.7 288 256C288 238.3 273.7 224 256 224zM32 256C32 220.7 60.65 192 96 192C131.3 192 160 220.7 160 256C160 291.3 131.3 320 96 320C60.65 320 32 291.3 32 256zM96 288C113.7 288 128 273.7 128 256C128 238.3 113.7 224 96 224C78.33 224 64 238.3 64 256C64 273.7 78.33 288 96 288z" />
},
ellipsis_solid: {
viewBox: "0 0 448 512", children: <path d="M120 256c0 30.9-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56s56 25.1 56 56zm160 0c0 30.9-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56s56 25.1 56 56zm104 56c-30.9 0-56-25.1-56-56s25.1-56 56-56s56 25.1 56 56s-25.1 56-56 56z" />
},
ballot_solid: {
viewBox: "0 0 448 512", children: <path d="M48 0C21.5 0 0 21.5 0 48V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H48zM64 112c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112zm0 128c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zM80 352h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm112 32c0-8.8 7.2-16 16-16H368c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16zm16-272H368c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16s7.2-16 16-16zM192 256c0-8.8 7.2-16 16-16H368c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16z" />
},
tag_light: {
viewBox: "0 0 448 512", children: <path d="M88 144C88 130.7 98.75 120 112 120C125.3 120 136 130.7 136 144C136 157.3 125.3 168 112 168C98.75 168 88 157.3 88 144zM.0003 80C.0003 53.49 21.49 32 48 32H197.5C214.5 32 230.7 38.74 242.7 50.75L418.7 226.7C443.7 251.7 443.7 292.3 418.7 317.3L285.3 450.7C260.3 475.7 219.7 475.7 194.7 450.7L18.75 274.7C6.743 262.7 0 246.5 0 229.5L.0003 80zM41.37 252.1L217.4 428.1C229.9 440.6 250.1 440.6 262.6 428.1L396.1 294.6C408.6 282.1 408.6 261.9 396.1 249.4L220.1 73.37C214.1 67.37 205.1 64 197.5 64H48C39.16 64 32 71.16 32 80V229.5C32 237.1 35.37 246.1 41.37 252.1L41.37 252.1zM41.37 252.1L18.75 274.7z" />
},
link_simple_solid: {
viewBox: "0 0 640 512", children: <path d="M0 256C0 167.6 71.6 96 160 96h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H160c-53 0-96 43-96 96s43 96 96 96h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H160C71.6 416 0 344.4 0 256zm640 0c0 88.4-71.6 160-160 160H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c53 0 96-43 96-96s-43-96-96-96H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c88.4 0 160 71.6 160 160zM224 224H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
},
tire_light: {
viewBox: "0 0 512 512", children: <path d="M96 256C96 167.6 167.6 96 256 96C344.4 96 416 167.6 416 256C416 344.4 344.4 416 256 416C167.6 416 96 344.4 96 256zM381.7 280.2C383.2 272.3 384 264.3 384 256C384 219.2 368.5 186.1 343.7 162.7L305.5 215.4C314.5 226.4 320 240.6 320 256C320 257.4 319.1 258.7 319.9 260L381.7 280.2zM309.9 290.4C301.3 303.9 287.8 313.9 271.9 317.1L271.1 383C316.2 377.5 353.5 349.4 371.8 310.6L309.9 290.4zM239.1 383L239.9 317.1C224.1 313.9 210.6 303.9 202.1 290.4L140.2 310.6C158.5 349.4 195.7 377.5 239.1 383V383zM192.1 260C192 258.7 192 257.4 192 256C192 240.6 197.5 226.4 206.5 215.4L168.3 162.7C143.5 186.1 128 219.2 128 255.1C128 264.3 128.8 272.3 130.3 280.2L192.1 260zM232.4 196.5C239.7 193.6 247.7 192 256 192C264.3 192 272.3 193.6 279.6 196.5L317.8 143.9C299.5 133.8 278.4 128 256 128C233.6 128 212.5 133.8 194.2 143.9L232.4 196.5zM256 224C238.3 224 224 238.3 224 256C224 273.7 238.3 288 256 288C273.7 288 288 273.7 288 256C288 238.3 273.7 224 256 224zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z" />
},
droplet_light: {
viewBox: "0 0 384 512", children: <path d="M192 400C200.8 400 208 407.2 208 416C208 424.8 200.8 432 192 432C130.1 432 80 381.9 80 319.1C80 311.2 87.16 303.1 96 303.1C104.8 303.1 112 311.2 112 319.1C112 364.2 147.8 400 192 400zM368 319.1C368 417.2 289.2 496 192 496C94.8 496 16 417.2 16 319.1C16 245.9 118.3 89.43 166.9 19.3C179.2 1.585 204.8 1.585 217.1 19.3C265.7 89.43 368 245.9 368 319.1zM321.5 263.4C311.8 238.9 298.2 211.6 282.8 183.7C252.4 128.8 216.1 74.13 192 39.32C167.9 74.13 131.6 128.8 101.2 183.7C85.77 211.6 72.17 238.9 62.51 263.4C52.57 288.5 48 307.6 48 319.1C48 399.5 112.5 464 192 464C271.5 464 336 399.5 336 319.1C336 307.6 331.4 288.5 321.5 263.4V263.4z" />
},
gas_pump_light: {
viewBox: "0 0 512 512", children: <path d="M95.1 0H255.1C291.3 0 320 28.65 320 64V256H336C380.2 256 416 291.8 416 336V384C416 401.7 430.3 416 448 416C465.7 416 480 401.7 480 384V224C444.7 224 416 195.3 416 160V84.37L389.2 59.79C382.7 53.82 382.2 43.7 388.2 37.19C394.2 30.67 404.3 30.23 410.8 36.21L491.2 109.9C504.5 122.1 512 139.2 512 157.1V384C512 419.3 483.3 448 448 448C412.7 448 384 419.3 384 384V336C384 309.5 362.5 288 336 288H320V480H336C344.8 480 352 487.2 352 496C352 504.8 344.8 512 336 512H16C7.164 512 0 504.8 0 496C0 487.2 7.164 480 16 480H32V64C32 28.65 60.65 .0003 96 .0003L95.1 0zM255.1 32H95.1C78.33 32 63.1 46.33 63.1 64V192H288V64C288 46.33 273.7 32 255.1 32zM288 224H63.1V480H288V224zM480 192V157.1C480 148.1 476.2 139.6 469.6 133.5L448 113.7V160C448 177.7 462.3 192 480 192V192z" />
},
route_light: {
viewBox: "0 0 512 512", children: <path d="M440 96C440 109.3 429.3 120 416 120C402.7 120 392 109.3 392 96C392 82.75 402.7 72 416 72C429.3 72 440 82.75 440 96zM416 256H336C309.5 256 288 277.5 288 304C288 330.5 309.5 352 336 352H432C476.2 352 512 387.8 512 432C512 476.2 476.2 512 432 512H139.6C147.3 503.2 156.5 492.3 165.1 480H432C458.5 480 480 458.5 480 432C480 405.5 458.5 384 432 384H336C291.8 384 255.1 348.2 255.1 304C255.1 259.8 291.8 224 336 224H387.1C358.8 190.3 320 136.7 320 96C320 42.98 362.1 0 416 0C469 0 512 42.98 512 96C512 140.3 466 199.9 437.7 232.4C425.1 246.9 416 256 416 256zM468.4 133.7C476.5 117.5 480 104.7 480 96C480 60.65 451.3 32 416 32C380.7 32 352 60.65 352 96C352 104.7 355.5 117.5 363.6 133.7C371.5 149.4 382.2 165.7 393.6 180.8C401.3 191.1 409.1 200.6 416 208.6C422.9 200.6 430.7 191.1 438.4 180.8C449.8 165.7 460.5 149.4 468.4 133.7zM71.1 352C71.1 338.7 82.74 328 95.1 328C109.3 328 119.1 338.7 119.1 352C119.1 365.3 109.3 376 95.1 376C82.74 376 71.1 365.3 71.1 352zM117.7 488.4C115.7 490.7 113.8 492.8 112.1 494.8L112 494.8C102.5 505.5 96 512 96 512C96 512 86.9 502.9 74.3 488.4C45.98 455.9 0 396.3 0 352C0 298.1 42.98 256 96 256C149 256 192 298.1 192 352C192 392.8 152.9 446.7 124.6 480.4C122.2 483.2 119.9 485.9 117.7 488.4L117.7 488.4zM148.4 389.7C156.5 373.5 159.1 360.7 159.1 352C159.1 316.7 131.3 288 95.1 288C60.65 288 31.1 316.7 31.1 352C31.1 360.7 35.53 373.5 43.62 389.7C51.46 405.4 62.25 421.7 73.6 436.8C81.34 447.1 89.11 456.6 95.1 464.6C102.9 456.6 110.7 447.1 118.4 436.8C129.7 421.7 140.5 405.4 148.4 389.7z" />
},
gearbox: {
viewBox: "0 0 512 512", children: <><g><path d="M256,0C114.84,0,0,114.841,0,256s114.84,256,256,256s256-114.841,256-256S397.16,0,256,0z M256,491.52 C126.135,491.52,20.48,385.866,20.48,256S126.135,20.48,256,20.48S491.52,126.134,491.52,256S385.865,491.52,256,491.52z" /></g><g><path d="M389.12,92.16c-16.94,0-30.72,13.743-30.72,30.635v92.245h-30.72v-92.245c0-16.892-13.78-30.635-30.72-30.635 c-16.94,0-30.72,13.743-30.72,30.635v92.245h-30.72v-92.245c0-16.892-13.78-30.635-30.72-30.635 c-16.94,0-30.72,13.743-30.72,30.635v92.245h-30.72v-51.281c0-16.894-13.78-30.639-30.72-30.639 c-16.94,0-30.72,13.745-30.72,30.639V276.48c0,5.655,4.585,10.24,10.24,10.24h81.92v102.486c0,16.891,13.78,30.634,30.72,30.634 c16.94,0,30.72-13.743,30.72-30.634V286.72h30.72v102.486c0,16.891,13.78,30.634,30.72,30.634c16.94,0,30.72-13.743,30.72-30.634 V286.72h30.72v102.486c0,16.891,13.78,30.634,30.72,30.634s30.72-13.743,30.72-30.634V122.795 C419.84,105.903,406.06,92.16,389.12,92.16z M399.36,389.206c0,5.694-4.497,10.154-10.24,10.154 c-5.648,0-10.24-4.555-10.24-10.154V276.48c0-5.655-4.585-10.24-10.24-10.24h-51.2c-5.655,0-10.24,4.585-10.24,10.24v112.726 c0,5.694-4.497,10.154-10.24,10.154c-5.648,0-10.24-4.555-10.24-10.154V276.48c0-5.655-4.585-10.24-10.24-10.24h-51.2 c-5.655,0-10.24,4.585-10.24,10.24v112.726c0,5.694-4.497,10.154-10.24,10.154c-5.648,0-10.24-4.555-10.24-10.154V276.48 c0-5.655-4.585-10.24-10.24-10.24H102.4V163.759c0-5.696,4.497-10.159,10.24-10.159c5.648,0,10.24,4.558,10.24,10.159v61.521 c0,5.655,4.585,10.24,10.24,10.24h51.2c5.655,0,10.24-4.585,10.24-10.24V122.795c0-5.695,4.497-10.155,10.24-10.155 c5.648,0,10.24,4.555,10.24,10.155V225.28c0,5.655,4.585,10.24,10.24,10.24h51.2c5.655,0,10.24-4.585,10.24-10.24V122.795 c0-5.695,4.497-10.155,10.24-10.155c5.648,0,10.24,4.555,10.24,10.155V225.28c0,5.655,4.585,10.24,10.24,10.24h51.2 c5.655,0,10.24-4.585,10.24-10.24V122.795c0-5.695,4.497-10.155,10.24-10.155c5.648,0,10.24,4.555,10.24,10.155V389.206z"/></g></>
},
transmission_thin: {
viewBox: "0 0 100.75 100.749", children: <path d="M93.995,22.82c0-6.447-5.246-11.693-11.693-11.693S70.609,16.373,70.609,22.82c0,5.938,4.453,10.846,10.192,11.586V48.5 H52.5V34.406c5.74-0.74,10.193-5.648,10.193-11.586c0-6.447-5.246-11.693-11.693-11.693S39.307,16.373,39.307,22.82 c0,5.938,4.453,10.846,10.193,11.586V48.5H21.198V34.406c5.74-0.74,10.193-5.648,10.193-11.586c0-6.447-5.246-11.693-11.693-11.693 c-6.448,0-11.693,5.246-11.693,11.693c0,5.938,4.453,10.846,10.193,11.586v31.188c-5.74,0.74-10.193,5.647-10.193,11.585 c0,6.447,5.246,11.693,11.693,11.693c6.447,0,11.693-5.246,11.693-11.693c0-5.938-4.453-10.845-10.193-11.585V51.5H49.5v14.094 c-5.74,0.74-10.193,5.647-10.193,11.585c0,6.447,5.246,11.693,11.693,11.693s11.693-5.246,11.693-11.693 c0-5.938-4.453-10.845-10.193-11.585V51.5h29.802c0.828,0,1.5-0.672,1.5-1.5V34.406C89.542,33.666,93.995,28.758,93.995,22.82z M42.307,22.82c0-4.793,3.899-8.693,8.693-8.693c4.794,0,8.693,3.899,8.693,8.693S55.794,31.513,51,31.513 C46.207,31.513,42.307,27.613,42.307,22.82z M11.005,22.82c0-4.793,3.9-8.693,8.693-8.693s8.693,3.899,8.693,8.693 s-3.899,8.693-8.693,8.693S11.005,27.613,11.005,22.82z M28.391,77.179c0,4.794-3.899,8.693-8.693,8.693s-8.693-3.899-8.693-8.693 c0-4.793,3.9-8.692,8.693-8.692S28.391,72.386,28.391,77.179z M59.693,77.179c0,4.794-3.899,8.693-8.693,8.693 c-4.793,0-8.693-3.899-8.693-8.693c0-4.793,3.899-8.692,8.693-8.692C55.794,68.486,59.693,72.386,59.693,77.179z M82.302,31.513 c-4.793,0-8.692-3.9-8.692-8.693s3.899-8.693,8.692-8.693c4.794,0,8.693,3.899,8.693,8.693S87.096,31.513,82.302,31.513z" />
},
transmission_light: {
viewBox: "0 0 122.88 122.88", children: <path d="M61.44,0A61.46,61.46,0,1,1,18,18,61.23,61.23,0,0,1,61.44,0Zm4.07,82.09a6.67,6.67,0,1,1-8.14,0V68.62H42.31V82.09a6.67,6.67,0,1,1-8.14,0V46.17a6.67,6.67,0,1,1,8.14,0V60.48H57.37V46.17a6.67,6.67,0,1,1,8.14,0V60.48H80.57V46.17a6.67,6.67,0,1,1,8.14,0V64a4.41,4.41,0,0,1,0,.52,4.07,4.07,0,0,1-4.07,4.07H65.51V82.09Zm33-57.76a52.46,52.46,0,1,0,15.38,37.11A52.29,52.29,0,0,0,98.55,24.33Z" />
},
copyright_light: {
viewBox: "0 0 512 512", children: <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM323.9 188.1c6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-48.31-48.38-132.7-48.38-181 0C141.3 189.7 128 221.8 128 256s13.31 66.34 37.5 90.5C189.7 370.7 221.8 384 256 384s66.34-13.31 90.5-37.5c6.25-6.25 6.25-16.38 0-22.62s-16.38-6.25-22.62 0c-36.25 36.25-99.5 36.25-135.8 0C169.1 305.8 160 281.7 160 256s9.1-49.75 28.12-67.88C224.4 151.9 287.6 151.9 323.9 188.1z" />
},
cool_car_light: {
viewBox: "0 0 512 512", children: <path d="M120.81 248c-25.96 0-44.8 16.8-44.8 39.95 0 23.15 18.84 39.95 44.8 39.95l10.14.1c39.21 0 45.06-20.1 45.06-32.08-.01-24.68-31.1-47.92-55.2-47.92zm10.14 56c-3.51 0-7.02-.1-10.14-.1-12.48 0-20.8-6.38-20.8-15.95s8.32-15.95 20.8-15.95 31.2 14.36 31.2 23.93c0 7.17-10.54 8.07-21.06 8.07zm260.24-56c-24.1 0-55.19 23.24-55.19 47.93 0 11.98 5.85 32.08 45.06 32.08l10.14-.1c25.96 0 44.8-16.8 44.8-39.95-.01-23.16-18.85-39.96-44.81-39.96zm0 55.9c-3.12 0-6.63.1-10.14.1-10.53 0-21.06-.9-21.06-8.07 0-9.57 18.72-23.93 31.2-23.93s20.8 6.38 20.8 15.95-8.32 15.95-20.8 15.95zm114.8-140.94c-7.34-11.88-20.06-18.97-34.03-18.97H422.3l-8.07-24.76C403.5 86.29 372.8 64 338.17 64H173.83c-34.64 0-65.33 22.29-76.06 55.22l-8.07 24.76H40.04c-13.97 0-26.69 7.09-34.03 18.97s-8 26.42-1.75 38.91l5.78 11.61c3.96 7.88 9.92 14.09 17 18.55-6.91 11.74-11.03 25.32-11.03 39.97V400c0 26.47 21.53 48 48 48h16c26.47 0 48-21.53 48-48v-16H384v16c0 26.47 21.53 48 48 48h16c26.47 0 48-21.53 48-48V271.99c0-14.66-4.12-28.23-11.03-39.98 7.09-4.46 13.04-10.68 17-18.57l5.78-11.56c6.24-12.5 5.58-27.05-1.76-38.92zM128.2 129.14C134.66 109.32 153 96 173.84 96h164.33c20.84 0 39.18 13.32 45.64 33.13l20.47 62.85H107.73l20.47-62.84zm-89.53 70.02l-5.78-11.59c-1.81-3.59-.34-6.64.34-7.78.87-1.42 2.94-3.8 6.81-3.8h39.24l-6.45 19.82a80.69 80.69 0 0 0-23.01 11.29c-4.71-1-8.94-3.52-11.15-7.94zM96.01 400c0 8.83-7.19 16-16 16h-16c-8.81 0-16-7.17-16-16v-16h48v16zm367.98 0c0 8.83-7.19 16-16 16h-16c-8.81 0-16-7.17-16-16v-16h48v16zm0-80.01v32H48.01v-80c0-26.47 21.53-48 48-48h319.98c26.47 0 48 21.53 48 48v48zm15.12-132.41l-5.78 11.55c-2.21 4.44-6.44 6.97-11.15 7.97-6.94-4.9-14.69-8.76-23.01-11.29l-6.45-19.82h39.24c3.87 0 5.94 2.38 6.81 3.8.69 1.14 2.16 4.18.34 7.79z" />
},
car_light: {
viewBox: "0 0 640 512", children: <path d="M640 320V368C640 385.7 625.7 400 608 400H574.7C567.1 445.4 527.6 480 480 480C432.4 480 392.9 445.4 385.3 400H254.7C247.1 445.4 207.6 480 160 480C112.4 480 72.94 445.4 65.33 400H32C14.33 400 0 385.7 0 368V256C0 224.5 22.78 198.3 52.78 192.1L97.05 82.29C109.2 51.92 138.6 32 171.3 32H353.2C377.5 32 400.5 43.05 415.7 62.02L519.9 192.2C586.9 196.3 640 251.1 640 320H640zM171.3 64C151.7 64 134.1 75.95 126.8 94.17L87.63 192H224V64H171.3zM256 192H478.7L390.7 82.01C381.6 70.63 367.8 64 353.2 64H256L256 192zM541.1 400C543.3 394.9 544 389.5 544 384C544 378.5 543.3 373.1 541.1 368C534.9 340.4 509.8 320 480 320C450.2 320 425.1 340.4 418 368C416.7 373.1 416 378.5 416 384C416 389.5 416.7 394.9 418 400C425.1 427.6 450.2 448 480 448C509.8 448 534.9 427.6 541.1 400zM385.3 368C392.9 322.6 432.4 288 480 288C527.6 288 567.1 322.6 574.7 368H608V320C608 266.1 565 224 512 224H64C46.33 224 32 238.3 32 256V368H65.33C72.94 322.6 112.4 288 160 288C207.6 288 247.1 322.6 254.7 368H385.3zM221.1 400C223.3 394.9 224 389.5 224 384C224 378.5 223.3 373.1 221.1 368C214.9 340.4 189.8 320 160 320C130.2 320 105.1 340.4 98.02 368C96.7 373.1 96 378.5 96 384C96 389.5 96.7 394.9 98.02 400C105.1 427.6 130.2 448 160 448C189.8 448 214.9 427.6 221.1 400z" />
},
shield_check_solid: {
viewBox: "0 0 512 512", children: <path d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
},
gear_solid: {
viewBox: "0 0 512 512", children: <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z" />
},
gears_solid: {
viewBox: "0 0 640 512", children: <path d="M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.7 8.4 166.9 8 160 8s-13.7 .4-20.4 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM208 176c0 26.5-21.5 48-48 48s-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 400c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z" />
},
ruler_triangle_solid: {
viewBox: "0 0 512 512", children: <path d="M0 32V448c0 35.3 28.7 64 64 64H480c17.7 0 32-14.3 32-32v-2.7c0-8.5-3.4-16.6-9.4-22.6l-51.3-51.3-24 24c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l24-24-57.4-57.4-24 24c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l24-24-57.4-57.4-24 24c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l24-24-57.4-57.4-24 24c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l24-24L131.3 83.3l-24 24c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l24-24L57.4 9.4C51.4 3.4 43.2 0 34.7 0H32C14.3 0 0 14.3 0 32zM128 256L256 384H128V256z" />
},
ruler_combined_solid: {
viewBox: "0 0 512 512", children: <path d="M.2 468.9C2.7 493.1 23.1 512 48 512l96 0 320 0c26.5 0 48-21.5 48-48l0-96c0-26.5-21.5-48-48-48l-48 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-48c0-26.5-21.5-48-48-48L48 0C21.5 0 0 21.5 0 48L0 368l0 96c0 1.7 .1 3.3 .2 4.9z" />
},
badge_check_solid: {
viewBox: "0 0 512 512", children: <path d="M256 0c36.8 0 68.8 20.7 84.9 51.1C373.8 41 411 49 437 75s34 63.3 23.9 96.1C491.3 187.2 512 219.2 512 256s-20.7 68.8-51.1 84.9C471 373.8 463 411 437 437s-63.3 34-96.1 23.9C324.8 491.3 292.8 512 256 512s-68.8-20.7-84.9-51.1C138.2 471 101 463 75 437s-34-63.3-23.9-96.1C20.7 324.8 0 292.8 0 256s20.7-68.8 51.1-84.9C41 138.2 49 101 75 75s63.3-34 96.1-23.9C187.2 20.7 219.2 0 256 0zm97 225c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l56 56c9.4 9.4 24.6 9.4 33.9 0L353 225z" />
},
engine_light: {
viewBox: "0 0 640 512", children: <path d="M216 256C216 269.3 205.3 280 192 280C178.7 280 168 269.3 168 256C168 242.7 178.7 232 192 232C205.3 232 216 242.7 216 256zM264 256C264 242.7 274.7 232 288 232C301.3 232 312 242.7 312 256C312 269.3 301.3 280 288 280C274.7 280 264 269.3 264 256zM408 256C408 269.3 397.3 280 384 280C370.7 280 360 269.3 360 256C360 242.7 370.7 232 384 232C397.3 232 408 242.7 408 256zM416 80C416 88.84 408.8 96 400 96H320V128H396.6C409.3 128 421.6 131.7 432.1 138.7L483.5 173C501.3 184.9 512 204.9 512 226.3V384C512 419.3 483.3 448 448 448H254.8C235.3 448 216.9 439.2 204.8 423.1L172.8 384H144C117.5 384 96 362.5 96 336V272H32V352C32 360.8 24.84 368 16 368C7.164 368 0 360.8 0 352V160C0 151.2 7.164 144 16 144C24.84 144 32 151.2 32 160V240H96V176C96 149.5 117.5 128 144 128H288V96H208C199.2 96 192 88.84 192 80C192 71.16 199.2 64 208 64H400C408.8 64 416 71.16 416 80zM144 160C135.2 160 128 167.2 128 176V336C128 344.8 135.2 352 144 352H188.2L229.8 403.1C235.8 411.6 245 416 254.8 416H448C465.7 416 480 401.7 480 384V226.3C480 215.6 474.7 205.6 465.8 199.6L414.4 165.4C409.1 161.9 402.9 160 396.6 160H144zM544 224C544 206.3 558.3 192 576 192H608C625.7 192 640 206.3 640 224V416C640 433.7 625.7 448 608 448H576C558.3 448 544 433.7 544 416V224zM576 416H608V224H576V416z" />
},
crutches_light: {
viewBox: "0 0 640 512", children: <path d="M224 16C224 6.861 216.5 0 208 0C203.9 0 199.8 1.562 196.7 4.688l-192 192C1.562 199.8 0 203.9 0 208C0 217.1 7.473 224 16 224c4.094 0 8.188-1.562 11.31-4.688l192-192C222.4 24.19 224 20.09 224 16zM224 80C214.9 80 208 87.47 208 96c0 4.094 1.562 8.188 4.688 11.31l48 48C263.8 158.4 267.9 160 272 160C281.1 160 288 152.5 288 144c0-4.094-1.562-8.188-4.688-11.31l-48-48C232.2 81.56 228.1 80 224 80zM208 352C217.1 352 224 344.5 224 336c0-4.094-1.562-8.188-4.688-11.31l-112-112C104.2 209.6 100.1 208 96 208C86.86 208 80 215.5 80 224c0 4.094 1.562 8.188 4.688 11.31l112 112C199.8 350.4 203.9 352 208 352zM427.3 404.7C424.2 401.6 420.1 400 416 400c-9.139 0-16 7.473-16 16c0 4.094 1.562 8.188 4.688 11.31l79.1 80C487.8 510.4 491.9 512 496 512c9.139 0 16-7.473 16-16c0-4.094-1.563-8.187-4.688-11.31L427.3 404.7zM640 208c0-4.094-1.562-8.188-4.688-11.31l-192-192C440.2 1.562 436.1 0 432 0C422.9 0 416 7.473 416 16c0 4.094 1.562 8.188 4.688 11.31l192 192C615.8 222.4 619.9 224 624 224C633.1 224 640 216.5 640 208zM544 208c-4.094 0-8.188 1.562-11.31 4.688L464 281.4L358.6 176l68.69-68.69C430.4 104.2 432 100.1 432 96c0-9.139-7.473-16-16-16c-4.094 0-8.188 1.562-11.31 4.688L290.4 199C279.2 210.2 271.7 224.3 268.5 239.9l-27.25 136.3L132.7 484.7C129.6 487.8 128 491.9 128 496C128 505.1 135.5 512 144 512c4.094 0 8.184-1.562 11.31-4.687l108.6-108.6l136.3-27.25c15.56-3.156 29.69-10.72 40.84-21.88l114.3-114.3C558.4 232.2 560 228.1 560 224C560 214.9 552.5 208 544 208zM418.4 327c-6.688 6.688-15.19 11.25-24.5 13.12l-117.5 23.47l23.47-117.4C301.8 236.8 306.3 228.3 313 221.6L336 198.6L441.4 304L418.4 327z" />
},
gauge_max_light: {
viewBox: "0 0 512 512", children: <path d="M256 72C269.3 72 280 82.75 280 96C280 109.3 269.3 120 256 120C242.7 120 232 109.3 232 96C232 82.75 242.7 72 256 72zM256 288C273.5 288 289.4 295 300.9 306.4L407.8 242.3C415.3 237.7 425.2 240.2 429.7 247.8C434.3 255.3 431.8 265.2 424.2 269.7L317.4 333.8C319.1 339.6 320 345.7 320 352C320 387.3 291.3 416 255.1 416C220.7 416 191.1 387.3 191.1 352C191.1 316.7 220.7 288 255.1 288H256zM224 352C224 369.7 238.3 384 256 384C273.7 384 288 369.7 288 352C288 334.3 273.7 320 256 320C238.3 320 224 334.3 224 352zM368 120C381.3 120 392 130.7 392 144C392 157.3 381.3 168 368 168C354.7 168 344 157.3 344 144C344 130.7 354.7 120 368 120zM96 280C82.75 280 72 269.3 72 256C72 242.7 82.75 232 96 232C109.3 232 120 242.7 120 256C120 269.3 109.3 280 96 280zM144 120C157.3 120 168 130.7 168 144C168 157.3 157.3 168 144 168C130.7 168 120 157.3 120 144C120 130.7 130.7 120 144 120zM256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512zM480 256C480 132.3 379.7 32 256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256z" />
},
battery_bolt_light: {
viewBox: "0 0 576 512", children: <path d="M355.8 96H432C476.2 96 512 131.8 512 176V336C512 380.2 476.2 416 432 416H244.2L280.2 384H432C458.5 384 480 362.5 480 336V176C480 149.5 458.5 128 432 128H368C368 116.7 364 105.3 355.9 96.11L355.8 96zM283.8 96L247.8 128H80C53.49 128 32 149.5 32 176V336C32 362.5 53.49 384 80 384H159.1C159.1 395.3 163.1 406.7 172.1 415.9L172.2 416H80C35.82 416 0 380.2 0 336V176C0 131.8 35.82 96 80 96H283.8zM560 192C568.8 192 576 199.2 576 208V304C576 312.8 568.8 320 560 320C551.2 320 544 312.8 544 304V208C544 199.2 551.2 192 560 192zM218.1 240H352C358.6 240 364.6 244.1 366.1 250.3C369.3 256.5 367.6 263.5 362.6 267.1L218.6 395.1C212 401.8 201.9 401.2 196 394.6C190.2 388 190.8 377.9 197.4 372L309.9 271.1H176C169.4 271.1 163.4 267.9 161 261.7C158.7 255.5 160.4 248.5 165.4 244L309.4 116C315.1 110.2 326.1 110.8 331.1 117.4C337.8 123.1 337.2 134.1 330.6 139.1L218.1 240z" />
},
tree_city_light: {
viewBox: "0 0 640 512", children: <path d="M336 32C327.2 32 320 39.16 320 48V496C320 504.8 312.8 512 304 512C295.2 512 288 504.8 288 496V48C288 21.49 309.5 0 336 0H464C490.5 0 512 21.49 512 48V192H544V112C544 103.2 551.2 96 560 96C568.8 96 576 103.2 576 112V192H592C618.5 192 640 213.5 640 240V496C640 504.8 632.8 512 624 512C615.2 512 608 504.8 608 496V240C608 231.2 600.8 224 592 224H480V48C480 39.16 472.8 32 464 32H336zM416 64C433.7 64 448 78.33 448 96V128C448 145.7 433.7 160 416 160H384C366.3 160 352 145.7 352 128V96C352 78.33 366.3 64 384 64H416zM384 128H416V96H384V128zM480 288C480 270.3 494.3 256 512 256H544C561.7 256 576 270.3 576 288V320C576 337.7 561.7 352 544 352H512C494.3 352 480 337.7 480 320V288zM544 288H512V320H544V288zM544 384C561.7 384 576 398.3 576 416V448C576 465.7 561.7 480 544 480H512C494.3 480 480 465.7 480 448V416C480 398.3 494.3 384 512 384H544zM512 448H544V416H512V448zM352 224C352 206.3 366.3 192 384 192H416C433.7 192 448 206.3 448 224V256C448 273.7 433.7 288 416 288H384C366.3 288 352 273.7 352 256V224zM416 224H384V256H416V224zM416 320C433.7 320 448 334.3 448 352V384C448 401.7 433.7 416 416 416H384C366.3 416 352 401.7 352 384V352C352 334.3 366.3 320 384 320H416zM384 384H416V352H384V384zM144 496C144 504.8 136.8 512 128 512C119.2 512 112 504.8 112 496V320H80C35.82 320 0 284.2 0 240C0 213.3 13.08 189.7 33.18 175.1C32.4 170.2 32 165.1 32 160C32 106.1 74.98 64 128 64C181 64 224 106.1 224 160C224 165.1 223.6 170.2 222.8 175.1C242.9 189.7 256 213.3 256 240C256 284.2 220.2 320 176 320H144V496zM188.1 189.5L191.2 170.1C191.7 166.8 192 163.5 192 160C192 124.7 163.3 96 128 96C92.65 96 64 124.7 64 160C64 163.5 64.27 166.8 64.79 170.1L67.86 189.5L51.93 201.1C39.79 209.8 32 224 32 240C32 266.5 53.49 288 80 288H111.1L112 240C112 231.2 119.2 224 128 224C136.8 224 144 231.2 144 240V288H176C202.5 288 224 266.5 224 240C224 224 216.2 209.8 204.1 201.1L188.1 189.5z" />
},
route_highway_light: {
viewBox: "0 0 448 512", children: <path d="M215.8 2.28C220.8-.76 227.2-.76 232.2 2.28L253.4 14.99C285.4 34.16 324.9 35.67 358.2 19.02C375.9 10.16 397.4 15.24 409.3 31.08L433.5 63.33C444.2 77.58 445.4 96.82 436.6 112.3C423.1 135.9 416 162.5 416 189.7V203C416 225.4 420.3 247.6 428.6 268.4L439.1 296.9C445.3 310.1 448 324.2 448 338.5C448 382.2 422.6 421.1 382.9 440.3L230.7 510.5C226.5 512.5 221.5 512.5 217.3 510.5L65.13 440.3C25.42 421.1 0 382.2 0 338.5C0 324.2 2.721 310.1 8.018 296.9L19.41 268.4C27.73 247.6 32 225.4 32 203V189.7C32 162.5 24.92 135.9 11.45 112.3C2.614 96.82 3.812 77.58 14.5 63.33L38.69 31.08C50.57 15.24 72.09 10.16 89.81 19.02C123.1 35.67 162.6 34.16 194.6 14.99L215.8 2.28zM223.1 34.66L211 42.43C169.7 67.22 118.6 69.19 75.5 47.64C71.61 45.7 66.89 46.81 64.29 50.28L40.1 82.54C37.07 86.57 36.73 92.03 39.23 96.41C50.52 116.2 58.08 137.7 61.64 160H386.4C389.9 137.7 397.5 116.2 408.8 96.41C411.3 92.03 410.9 86.57 407.9 82.54L383.7 50.28C381.1 46.81 376.4 45.69 372.5 47.64C329.4 69.19 278.3 67.22 236.1 42.43L223.1 34.66zM384 192H63.1V203C63.1 229.5 58.95 255.7 49.12 280.3L37.73 308.8C33.94 318.2 31.1 328.3 31.1 338.5C31.1 369.8 50.17 398.1 78.54 411.2L223.1 478.4L369.5 411.2C397.8 398.1 416 369.8 416 338.5C416 328.3 414.1 318.2 410.3 308.8L398.9 280.3C389 255.7 384 229.5 384 203L384 192z" />
},
person_seat_reclined_light: {
viewBox: "0 0 448 512", children: <path d="M120 112c30.93 0 56-25.07 56-56S150.9 0 120 0S64 25.07 64 56S89.07 112 120 112zM120 32C133.2 32 144 42.77 144 56c0 13.23-10.77 24-24 24S96 69.23 96 56C96 42.77 106.8 32 120 32zM431.1 448H393.9l-59.58-119.2C331.6 323.4 326.1 320 320 320H170.7c-7.734 0-14.36-5.531-15.75-13.16L139.9 224H304C312.8 224 320 216.8 320 208C320 199.2 312.8 192 304 192H134.1L127.7 157.1C126.2 148.4 117.8 142.8 109.1 144.3C100.4 145.8 94.67 154.2 96.27 162.9l27.2 149.7C127.6 335.4 147.5 352 170.7 352h139.4l59.58 119.2C372.4 476.6 377.9 480 383.1 480H432c8.844 0 16-7.156 16-16S440.8 448 431.1 448zM272 416H159.6c-44.23 0-82.27-31.56-90.42-75.03L31.72 141.1C30.11 132.4 21.8 126.6 13.05 128.3C4.359 129.9-1.359 138.3 .2813 146.9l37.48 199.9C48.75 405.5 100 448 159.7 448H272c8.844 0 16-7.156 16-16S280.8 416 272 416z" />
},
car_side_light: {
viewBox: "0 0 640 512", children: <path d="M640 320V368C640 385.7 625.7 400 608 400H574.7C567.1 445.4 527.6 480 480 480C432.4 480 392.9 445.4 385.3 400H254.7C247.1 445.4 207.6 480 160 480C112.4 480 72.94 445.4 65.33 400H32C14.33 400 0 385.7 0 368V256C0 224.5 22.78 198.3 52.78 192.1L97.05 82.29C109.2 51.92 138.6 32 171.3 32H353.2C377.5 32 400.5 43.05 415.7 62.02L519.9 192.2C586.9 196.3 640 251.1 640 320H640zM171.3 64C151.7 64 134.1 75.95 126.8 94.17L87.63 192H224V64H171.3zM256 192H478.7L390.7 82.01C381.6 70.63 367.8 64 353.2 64H256L256 192zM541.1 400C543.3 394.9 544 389.5 544 384C544 378.5 543.3 373.1 541.1 368C534.9 340.4 509.8 320 480 320C450.2 320 425.1 340.4 418 368C416.7 373.1 416 378.5 416 384C416 389.5 416.7 394.9 418 400C425.1 427.6 450.2 448 480 448C509.8 448 534.9 427.6 541.1 400zM385.3 368C392.9 322.6 432.4 288 480 288C527.6 288 567.1 322.6 574.7 368H608V320C608 266.1 565 224 512 224H64C46.33 224 32 238.3 32 256V368H65.33C72.94 322.6 112.4 288 160 288C207.6 288 247.1 322.6 254.7 368H385.3zM221.1 400C223.3 394.9 224 389.5 224 384C224 378.5 223.3 373.1 221.1 368C214.9 340.4 189.8 320 160 320C130.2 320 105.1 340.4 98.02 368C96.7 373.1 96 378.5 96 384C96 389.5 96.7 394.9 98.02 400C105.1 427.6 130.2 448 160 448C189.8 448 214.9 427.6 221.1 400z" />
},
circle_question_light: {
viewBox: "0 0 512 512", children: <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM240 344c-13.25 0-24 10.75-24 24s10.75 24 24 24s24-10.75 24-24S253.3 344 240 344zM285.6 128H226.4C189.8 128 160 157.8 160 194.4V204c0 8.844 7.156 16 16 16S192 212.8 192 204V194.4C192 175.4 207.4 160 226.4 160h59.25C304.6 160 320 175.4 320 194.4c0 12.48-6.781 24-17.06 29.72L242.5 254.3C231.1 260.7 224 272.7 224 285.8V304C224 312.8 231.2 320 240 320S256 312.8 256 304V285.8c0-1.453 .7813-2.797 1.438-3.172l60.41-30.22C338.9 240.7 352 218.5 352 194.4C352 157.8 322.2 128 285.6 128z" />
},
car_front_light: {
viewBox: "0 0 512 512", children: <path d="M80 296C80 282.7 90.75 272 104 272C117.3 272 128 282.7 128 296C128 309.3 117.3 320 104 320C90.75 320 80 309.3 80 296zM432 296C432 309.3 421.3 320 408 320C394.7 320 384 309.3 384 296C384 282.7 394.7 272 408 272C421.3 272 432 282.7 432 296zM48.29 204.7L82.99 89.01C93.14 55.17 124.3 32 159.6 32H352.4C387.7 32 418.9 55.17 429 89.01L463.7 204.7C492.6 221.2 512 252.3 512 288V464C512 472.8 504.8 480 496 480C487.2 480 480 472.8 480 464V416H32V464C32 472.8 24.84 480 16 480C7.164 480 0 472.8 0 464V288C0 252.3 19.44 221.2 48.29 204.7zM85.33 192.6C88.83 192.2 92.39 192 96 192H416C419.6 192 423.2 192.2 426.7 192.6L398.4 98.21C392.3 77.9 373.6 64 352.4 64H159.6C138.4 64 119.7 77.9 113.6 98.21L85.33 192.6zM32 288V384H480V288C480 260.3 462.4 236.7 437.7 227.8L437.3 227.9L437.2 227.6C430.5 225.3 423.4 224 416 224H96C88.58 224 81.46 225.3 74.83 227.6L74.73 227.9L74.27 227.8C49.62 236.7 32 260.3 32 288V288z" />
},
chevron_down_light: {
viewBox: "0 0 448 512", children: <path d="M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z" />
},
chevron_down_solid: {
viewBox: "0 0 512 512", children: <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
},
location_dot_light: {
viewBox: "0 0 384 512", children: <path d="M272 192C272 236.2 236.2 272 192 272C147.8 272 112 236.2 112 192C112 147.8 147.8 112 192 112C236.2 112 272 147.8 272 192zM192 240C218.5 240 240 218.5 240 192C240 165.5 218.5 144 192 144C165.5 144 144 165.5 144 192C144 218.5 165.5 240 192 240zM384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192H384zM192 32C103.6 32 32 103.6 32 192C32 207.6 37.43 229 48.56 255.4C59.47 281.3 74.8 309.4 92.14 337.5C126.2 392.8 166.6 445.7 192 477.6C217.4 445.7 257.8 392.8 291.9 337.5C309.2 309.4 324.5 281.3 335.4 255.4C346.6 229 352 207.6 352 192C352 103.6 280.4 32 192 32z" />
},
ruler_horizontal_light: {
viewBox: "0 0 640 512", children: <path d="M64 384C28.65 384 0 355.3 0 320V192C0 156.7 28.65 128 64 128H576C611.3 128 640 156.7 640 192V320C640 355.3 611.3 384 576 384H64zM64 352H576C593.7 352 608 337.7 608 320V192C608 174.3 593.7 160 576 160H528V224C528 232.8 520.8 240 512 240C503.2 240 496 232.8 496 224V160H432V224C432 232.8 424.8 240 416 240C407.2 240 400 232.8 400 224V160H336V224C336 232.8 328.8 240 320 240C311.2 240 304 232.8 304 224V160H240V224C240 232.8 232.8 240 224 240C215.2 240 208 232.8 208 224V160H144V224C144 232.8 136.8 240 128 240C119.2 240 112 232.8 112 224V160H64C46.33 160 32 174.3 32 192V320C32 337.7 46.33 352 64 352z" />
},
scale_balanced_light: {
viewBox: "0 0 640 512", children: <path d="M528 480H336V125.8c27.5-7.125 47.1-32 47.1-61.75h144c8.801 0 16-7.201 16-16c0-8.801-7.201-16-16-16h-153.1c-.125-.25-4.375-11.12-19.13-21.12C345.6 4 333.3 0 320 0S294.4 4 284.2 10.88C269.5 20.88 265.2 31.75 265.1 32H111.1c-8.801 0-16 7.199-16 16c0 8.799 7.201 16 16 16h144c0 29.75 20.5 54.63 47.1 61.75V480H111.1c-8.801 0-15.99 7.199-15.99 16c0 8.799 7.2 16 16 16h416c8.801 0 16-7.201 16-16C544 487.2 536.8 480 528 480zM287.1 64c0-17.62 14.38-32 32-32s32 14.38 32 32S337.6 96 320 96S287.1 81.63 287.1 64zM634.4 279.1l-109-175.1C522.1 98.38 517.1 96 512 96c-5.127 0-10.11 2.375-13.36 7.125l-109 175.1c-3.875 5.75-6.125 12.63-5.5 19.63C389.5 364.4 444.7 416 512 416c67.25 0 122.5-51.63 127.9-117.3C640.5 291.7 638.3 284.9 634.4 279.1zM512 384c-41.63 0-77.51-27.12-90.76-64h181.1C589 357.3 553.3 384 512 384zM421.8 288l90.26-145.8L603 288H421.8zM255.9 298.7c.625-7-1.625-13.88-5.5-19.63l-109-175.1C138.1 98.38 133.1 96 127.1 96C122.9 96 117.9 98.38 114.6 103.1L5.599 279.1C1.724 284.9-.5255 291.7 .0995 298.7C5.474 364.4 60.74 416 127.1 416C195.3 416 250.5 364.4 255.9 298.7zM127.1 142.3L218.1 288H37.73L127.1 142.3zM37.23 320h181.1c-13.38 37.25-49.13 64-90.38 64C86.36 384 50.48 356.9 37.23 320z" />
},
quote_left_solid: {
viewBox: "0 0 448 512", children: <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
},
quote_right_solid: {
viewBox: "0 0 448 512", children: <path d="M448 296c0 66.3-53.7 120-120 120h-8c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H320c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72zm-256 0c0 66.3-53.7 120-120 120H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72z" />
},
car_mirrors_solid: {
viewBox: "0 0 576 512", children: <path d="M167.2 117.4c4.5-12.8 16.6-21.4 30.2-21.4H378.6c13.6 0 25.7 8.6 30.2 21.4L434.9 192H141.1l26.1-74.6zM32 224h8.6c-5.4 9.4-8.6 20.3-8.6 32V400v48c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V400H448v48c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V400 256c0-11.7-3.1-22.6-8.6-32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H491.5L469.2 96.3C455.7 57.8 419.4 32 378.6 32H197.4c-40.8 0-77.1 25.8-90.6 64.3L84.5 160H32c-17.7 0-32 14.3-32 32s14.3 32 32 32zm128 64c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32zm288 32c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z" />
},
apple_watch_solid: {
viewBox: "0 0 384 512", children: <path d="M64 48H320c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48zM80 80C35.8 80 0 115.8 0 160V352c0 44.2 35.8 80 80 80H304c44.2 0 80-35.8 80-80V160c0-44.2-35.8-80-80-80H80zM192 298.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7s-19.1 42.7-42.7 42.7zM277.3 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32zM138.7 384c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32zM277.3 160c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32zM138.7 192c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32zM128 256c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32zm160 32c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32zM112 512H272c26.5 0 48-21.5 48-48H64c0 26.5 21.5 48 48 48z" />
},
microchip_solid: {
viewBox: "0 0 512 512", children: <path d="M176 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64c-35.3 0-64 28.7-64 64H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H64v56H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H64v56H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H64c0 35.3 28.7 64 64 64v40c0 13.3 10.7 24 24 24s24-10.7 24-24V448h56v40c0 13.3 10.7 24 24 24s24-10.7 24-24V448h56v40c0 13.3 10.7 24 24 24s24-10.7 24-24V448c35.3 0 64-28.7 64-64h40c13.3 0 24-10.7 24-24s-10.7-24-24-24H448V280h40c13.3 0 24-10.7 24-24s-10.7-24-24-24H448V176h40c13.3 0 24-10.7 24-24s-10.7-24-24-24H448c0-35.3-28.7-64-64-64V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H280V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H176V24zM160 128H352c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32zm192 32H160V352H352V160z" />
},
vacuum_solid: {
viewBox: "0 0 640 512", children: <path d="M301.6 64H512c35.3 0 64 28.7 64 64c0 21.9-11 41.2-27.8 52.8C513.8 148.1 467.2 128 416 128c-35.3 0-64 28.7-64 64V292c10.2-2.6 21-4 32-4c70.7 0 128 57.3 128 128c0 38.2-16.8 72.5-43.3 96H544c35.3 0 64-28.7 64-64V320c0-31.7-7.7-61.7-21.3-88C619 208.7 640 170.8 640 128C640 57.3 582.7 0 512 0H301.6C241.3 0 189.1 42.2 176.4 101.2L150.1 224h65.5L239 114.6C245.4 85.1 271.4 64 301.6 64zM208.7 256H143.3L109 416H83.8c-33.8 0-64.7 18.9-80 49C1.4 469.5 0 474.6 0 480c0 17.7 14.3 32 32 32h95.4c.4 0 .9 0 1.3 0H176c26.5 0 48-21.5 48-48s-21.5-48-48-48h-1.6l34.3-160zM480 416c0-53-43-96-96-96s-96 43-96 96s43 96 96 96s96-43 96-96zm-64 0c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z" />
},
shirt_solid: {
viewBox: "0 0 640 512", children: <path d="M211.8 0c7.8 0 14.3 5.7 16.7 13.2C240.8 51.9 277.1 80 320 80s79.2-28.1 91.5-66.8C413.9 5.7 420.4 0 428.2 0h12.6c22.5 0 44.2 7.9 61.5 22.3L628.5 127.4c6.6 5.5 10.7 13.5 11.4 22.1s-2.1 17.1-7.8 23.6l-56 64c-11.4 13.1-31.2 14.6-44.6 3.5L480 197.7V448c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64V197.7l-51.5 42.9c-13.3 11.1-33.1 9.6-44.6-3.5l-56-64c-5.7-6.5-8.5-15-7.8-23.6s4.8-16.6 11.4-22.1L137.7 22.3C155 7.9 176.7 0 199.2 0h12.6z" />
},
sailboat_solid: {
viewBox: "0 0 576 512", children: <path d="M256 16c0-7 4.5-13.2 11.2-15.3s13.9 .4 17.9 6.1l224 320c3.4 4.9 3.8 11.3 1.1 16.6s-8.2 8.6-14.2 8.6H272c-8.8 0-16-7.2-16-16V16zM212.1 96.5c7 1.9 11.9 8.2 11.9 15.5V336c0 8.8-7.2 16-16 16H80c-5.7 0-11-3-13.8-8s-2.9-11-.1-16l128-224c3.6-6.3 11-9.4 18-7.5zM5.7 404.3C2.8 394.1 10.5 384 21.1 384H554.9c10.6 0 18.3 10.1 15.4 20.3l-4 14.3C550.7 473.9 500.4 512 443 512H133C75.6 512 25.3 473.9 9.7 418.7l-4-14.3z" />
},
table_tennis_solid: {
viewBox: "0 0 512 512", children: <path d="M416 288c-50.1 0-93.6 28.8-114.6 70.8L68.9 126.3l.6-.6 60.1-60.1c87.5-87.5 229.3-87.5 316.8 0c67.1 67.1 82.7 166.3 46.8 248.3C471.8 297.6 445 288 416 288zM49.3 151.9L290.1 392.7c-1.4 7.5-2.1 15.3-2.1 23.3c0 23.2 6.2 44.9 16.9 63.7c-3 .2-6.1 .3-9.2 .3H293c-33.9 0-66.5-13.5-90.5-37.5l-9.8-9.8c-13.1-13.1-34.6-12.4-46.8 1.7L88.2 501c-5.8 6.7-14.2 10.7-23 11s-17.5-3.1-23.8-9.4l-32-32C3.1 464.3-.3 455.7 0 446.9s4.3-17.2 11-23l66.6-57.7c14-12.2 14.8-33.7 1.7-46.8l-9.8-9.8C45.5 285.5 32 252.9 32 219v-2.7c0-22.8 6.1-44.9 17.3-64.3zM416 512c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z" />
},
dolly_solid: {
viewBox: "0 0 640 512", children: <path d="M32 32C32 14.3 46.3 0 64 0h72.9c27.5 0 52 17.6 60.7 43.8L289.7 320c30.1 .5 56.8 14.9 74 37l202.1-67.4c16.8-5.6 34.9 3.5 40.5 20.2s-3.5 34.9-20.2 40.5L384 417.7c-.9 52.2-43.5 94.3-96 94.3c-53 0-96-43-96-96c0-30.8 14.5-58.2 37-75.8L136.9 64H64C46.3 64 32 49.7 32 32zM276.8 134.5c-5.5-16.8 3.7-34.9 20.5-40.3L343 79.4l19.8 60.9 60.9-19.8L403.8 59.6l45.7-14.8c16.8-5.5 34.9 3.7 40.3 20.5l49.4 152.2c5.5 16.8-3.7 34.9-20.5 40.3L366.5 307.2c-16.8 5.5-34.9-3.7-40.3-20.5L276.8 134.5z" />
},
screwdriver_wrench_solid: {
viewBox: "0 0 512 512", children: <path d="M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4h54.1l109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109V104c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7H352c-8.8 0-16-7.2-16-16V102.6c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM104 432c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24z" />
},
power_off_solid: {
viewBox: "0 0 512 512", children: <path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z" />
},
droplet_solid: {
viewBox: "0 0 384 512", children: <path d="M192 496c97.2 0 176-78.8 176-176c0-74.1-102.3-230.6-150.9-300.7c-12.3-17.7-37.8-17.7-50.1 0C118.3 89.4 16 245.9 16 320c0 97.2 78.8 176 176 176zM112 320c0 44.2 35.8 80 80 80c8.8 0 16 7.2 16 16s-7.2 16-16 16c-61.9 0-112-50.1-112-112c0-8.8 7.2-16 16-16s16 7.2 16 16z" />
},
}

View File

@ -21,10 +21,11 @@ interface Image {
title?: string,
priority?: boolean,
simple?: boolean,
onClick?: React.MouseEventHandler;
onClick?: React.MouseEventHandler,
props?: any
}
const Image: React.FunctionComponent<Image> = ({ caption, ar = "1.91:1", source, title, quality = 75, imageSizes = [0, 0, 0, 0], className, fit = "cover", figureClass, pictureClass, width, height, type = '', src, alt, priority, simple = false, onClick }) => {
const Image: React.FunctionComponent<Image> = ({ caption, ar = "1.91:1", source, title, quality = 75, imageSizes = [0, 0, 0, 0], className, fit = "cover", figureClass, pictureClass, width, height, type = '', src, alt, priority, simple = false, onClick, props }) => {
const srcMaker = (cWidth: number, ratio: number, imageFit: string) => {
if (process.env.NODE_ENV === 'development') {
@ -170,8 +171,8 @@ const Image: React.FunctionComponent<Image> = ({ caption, ar = "1.91:1", source,
loading={priority ? 'eager' : 'lazy'}
src={srcMaker(imageSizes[0] * 2, getAspectRatio(ar[0]), fit)}
alt={alt}
className={`${type === "magazine" ? 'w-auto h-auto object-contain max-h-[400px] sm:max-h-[500px] mt-5 mb-6 mx-auto' : 'w-full object-cover h-full min-h-[var(--h1)] aspect-[var(--r1)] sm:max-h-[var(--h2)] sm:aspect-[var(--r2)] lg:max-h-[var(--h3)] lg:aspect-[var(--r3)] 2xl:max-h-[var(--h4)] 2xl:aspect-[var(--r4)]'} ${className}`}
className={`${type === "magazine" ? 'w-auto h-auto object-contain max-h-[400px] sm:max-h-[500px] mx-auto' : 'w-full object-cover h-full min-h-[var(--h1)] aspect-[var(--r1)] sm:max-h-[var(--h2)] sm:aspect-[var(--r2)] lg:max-h-[var(--h3)] lg:aspect-[var(--r3)] 2xl:max-h-[var(--h4)] 2xl:aspect-[var(--r4)]'} ${className}`}
/>
}
export default Image
export default React.memo(Image, () => true)

View File

@ -4,16 +4,22 @@ interface Input {
type: "text" | "password" | "email" | "number" | "hidden",
readonly?: boolean,
required?: boolean,
value?: string | number,
value?: string | number | undefined,
placeholder?: string,
id?: string,
name?: string,
wrapperClass?: string,
className?: string,
unitClass? : string,
onClose?: () => void,
onInput?: any,
min?: number,
max?: number,
pattern?: string,
unit?: string | number,
}
const Input: React.FunctionComponent<Input> = ({ type, className, onClose, readonly, required, value = '', placeholder, name, id, onInput }) => {
const Input: React.FunctionComponent<Input> = ({ type, wrapperClass, className, unitClass, onClose, readonly, required, value = '', min, max, pattern, placeholder, name, id, onInput, unit }) => {
const [inputValue, setInputValue] = useState(value);
@ -28,17 +34,23 @@ const Input: React.FunctionComponent<Input> = ({ type, className, onClose, reado
}
return (
<input
type={type}
id={id}
readOnly={readonly}
required={required}
value={inputValue}
name={name}
placeholder={placeholder}
onChange={handleInput}
className={`${className}`}
/>
<div className={`flex items-center relative ${wrapperClass}`}>
<input
type={type}
id={id}
readOnly={readonly}
required={required}
value={inputValue}
name={name}
placeholder={placeholder}
onChange={handleInput}
className={`${className}`}
min={min}
max={max}
pattern={pattern}
/>
{unit && <span className={`input-unit shrink-0 ${unitClass}`}>{unit}</span>}
</div>
)
}
export default Input

View File

@ -10,8 +10,8 @@ interface Link {
const Link: React.FunctionComponent<Link> = ({ href, title, children, className, onClick }) => {
return (
<NextLink href={href}>
<a className={className} title={title} onClick={onClick}>{children}</a>
<NextLink href={href} className={className} title={title} onClick={onClick}>
{children}
</NextLink>
)
}

View File

@ -1,22 +1,28 @@
import { Icon } from "components/icons";
import React, { useState, useEffect, useLayoutEffect } from "react"
import { useRouter } from 'next/router'
import { createPortal } from 'react-dom';
interface Modal {
className?: string,
title?: string,
childrenClass?: string,
children?: React.ReactNode,
open: boolean,
fullscreen?: boolean,
onClose?: () => void,
onRendered?: () => void,
wrapperId: string,
header?: boolean
}
const Modal: React.FunctionComponent<Modal> = ({ title, className, children, open = false, onClose, wrapperId, header, fullscreen }) => {
const Modal: React.FunctionComponent<Modal> = ({ title, className, childrenClass, children, open = false, onClose, onRendered, wrapperId, header, fullscreen }) => {
const [isOpen, setIsOpen] = useState(open);
const [rootElement, setRootElement] = useState<HTMLElement | null>(null);
const router = useRouter();
const createRoot = (id:string) => {
const rootElement = document.createElement('div');
rootElement.setAttribute("id", id);
@ -38,46 +44,62 @@ const Modal: React.FunctionComponent<Modal> = ({ title, className, children, ope
}
}
}, [wrapperId]);
const closeModal = () => {
setIsOpen(false);
onClose && onClose();
}
const toggleModal = (open: boolean) => {
open ? setIsOpen(true) : setIsOpen(false);
}
const closeOnEscape = (event: any) => {
const keyName = event.key;
if (keyName === 'Escape') {
closeModal();
}
}
const closeOnAndroidBack = () => {
console.log("Android back clicked!");
if (isOpen) {
closeModal();
history.go(1);
return false;
}
return true;
}
useEffect(() => {
toggleModal(open);
isOpen && document.addEventListener('keydown', closeOnEscape);
// isOpen && window.addEventListener('popstate', closeOnAndroidBack);
router.beforePopState(closeOnAndroidBack);
isOpen && onRendered && onRendered();
return () => {
document.removeEventListener('keydown', closeOnEscape);
// window.removeEventListener('popstate', closeOnAndroidBack);
}
}, [open, isOpen])
if (rootElement === null) return null;
return createPortal (
<div className={`justify-center fixed will-change-transform bg-white items-center top-0 bottom-0 left-0 right-0 w-screen h-screen mx-auto z-50 ${isOpen ? 'flex' : 'hidden'}`}>
<div className={`justify-center fixed will-change-transform items-center top-0 bottom-0 left-0 right-0 w-screen h-screen mx-auto z-50 ${isOpen ? 'flex' : 'hidden'}`}>
<div
className={`absolute w-full h-full top-0 bottom-0 bg-black bg-opacity-60 z-50 backdrop-blur-sm`}
className={`absolute w-full h-full top-0 bottom-0 bg-black/60 z-50 backdrop-blur`}
onClick={closeModal}
></div>
<div className={`shadow-md z-50 ${className}`}>
{header &&
<header className="flex justify-between items-center w-full border-b h-14 pl-4 pr-2 sm:h-16 sm:pl-6 sm:pr-3 select-none">
<svg className="w-14 h-14 p-3 lg:cursor-pointer" onClick={closeModal} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z" /></svg>
<span className="text-xl font-bold capitalize">{title}</span>
<header className="flex justify-between items-center w-full border-b h-14 py-2 px-5 sm:h-16 select-none">
<span className="text-lg font-semibold capitalize">{title}</span>
<Icon name="XMark" onClick={closeModal} className="w-8 h-8 lg:cursor-pointer"/>
</header>
}
{children}
<div className={`block h-[calc(100%_-_3.5rem)] overflow-auto sm:h-[calc(100%_-_4rem)] max-h-[90vh] ${childrenClass}`}>
{children}
</div>
</div>
</div>,
rootElement

View File

@ -1,16 +1,29 @@
import React, { useState, useEffect } from "react"
import parse from 'html-react-parser';
import Image from 'components/image/image'
import translate from "services/translation/translation"
interface Parser {
className?: string,
limit?: boolean,
text: string,
}
const Parser: React.FunctionComponent<Parser> = ({ text, className }) => {
const Parser: React.FunctionComponent<Parser> = ({ text, limit, className }) => {
const [show, setShow] = useState(false);
let parsedHtml: [] = [];
const toggleShow = () => {
if (show) {
let textStart = document.getElementById("text-start");
textStart && textStart.scrollIntoView({ behavior: "smooth", inline: "center" });
setShow(false);
} else {
setShow(true);
}
}
const contentParser = (text: any) => {
let img, elements:any;
elements = parse(text);
@ -31,20 +44,20 @@ const Parser: React.FunctionComponent<Parser> = ({ text, className }) => {
ar={['16/9', '16/9', '16/9', '16/9']}
imageSizes={[600, 700, 800, 930]}
priority={false}
className="rounded"
figureClass="mt-6 mb-6 mx-auto overflow-hidden"
className="rounded mt-4 mb-5"
figureClass="mt-4 mb-5 mx-auto overflow-hidden"
type="magazine"
/>;
}
if (x.props && x.props.children && x.type === 'h2') {
elements[i] = <h2 key={i} className="text-xl text-secondary font-semibold mt-3 mb-4 text-right leading-8">{x.props.children}</h2>
elements[i] = <h2 key={i} className="text-lg text-secondary-light font-semibold mt-4 mb-2 text-right leading-8">{x.props.children}</h2>
}
if (x.props && x.props.children && x.type === 'h3') {
elements[i] = <h3 key={i} className="text-lg text-secondary font-semibold mt-3 mb-2 text-right leading-8"><span className="pl-1 text-xl font-semi-bold text-primary">»</span>{x.props.children}</h3>
elements[i] = <h3 key={i} className="text-lg text-secondary-light font-semibold mt-3 mb-2 text-right leading-8"><span className="pl-1 text-xl font-semi-bold text-primary">»</span>{x.props.children}</h3>
}
if (x.props && x.props.children && x.type === 'ul') {
elements[i] =
<ul key={i} className="mr-2 mb-4 py-3 px-3 bg-light-bg rounded">
<ul key={i} className="my-4 py-3 px-3 bg-light-bg rounded">
{x.props.children.map((x: any, i: number) => {
if (x.type === 'li') {
return <li key={i} className="text-sm lg:text-base mb-2 leading-7 text-right"><span className="text-lg leading-4 pl-[6px] font-semibold text-primary"></span>{x.props.children}</li>
@ -54,7 +67,7 @@ const Parser: React.FunctionComponent<Parser> = ({ text, className }) => {
}
if (x.props && x.props.children && x.type === 'ol') {
elements[i] =
<ol key={i} className="mr-2 mb-4 py-3 px-3 bg-light-bg rounded">
<ol key={i} className="my-4 py-3 px-3 bg-light-bg rounded">
{x.props.children.map((x: any, i: number) => {
if (x.type === 'li') {
return <li key={i} className="text-sm lg:text-base mb-2 leading-7 text-right"><span className="text-lg leading-4 pl-[6px] font-semibold text-primary"></span>{x.props.children}</li>
@ -103,7 +116,18 @@ const Parser: React.FunctionComponent<Parser> = ({ text, className }) => {
const parserRunner = (text: any) => {
contentParser(text);
return <div className={`parser text-justify ${className}`}>{parsedHtml}</div>;
return (
<div
className={`parser block relative text-justify ${limit ? "select-none" : "select-auto"} [word-break:break-word] overflow-hidden ${limit && (!show ? `max-h-[200px]`: `max-h-full`)} ${className}`}
>
{limit && <span id="text-start" className="block absolute -top-[120px]"></span>}
{parsedHtml}
{limit && <span onClick={toggleShow} className={`flex text-blue-800 items-end justify-center absolute font-semibold right-0 ${!show ? "bottom-0" : "relative bottom-auto top-0"} text-sm lg:text-base lg:cursor-pointer h-[92px] bg-gradient-to-t from-white via-white w-full p-2 pb-4`}>
{!show ? translate("content-show-more") : translate("content-show-less")}
<span className={`inline-block text-2xl text-blue-800 font-semibold ${!show ? "-rotate-90" : "rotate-90"} relative -mb-1 mr-2`}></span>
</span>}
</div>
)
}
return parserRunner(text);

View File

@ -0,0 +1,179 @@
import Button from "components/button/button";
import CheckBox from "components/checkbox/checkbox";
import { Icon } from "components/icons";
import Modal from "components/modal/modal";
import { stringify } from "querystring";
import React, { useState, useRef, useEffect, useLayoutEffect, useMemo } from "react"
import { jsonClone } from "services/general/general";
import translate from "services/translation/translation";
interface DataList {
options: string[],
wrapperClass?: string,
labelClass?: string,
inputClass?: string,
listClass?: string,
listItemClass?: string,
buttonClass?: string,
listContainerClass?: string,
id: string,
label: string,
multiple?: boolean,
labelHidden?: boolean,
value: string[],
allValue?: string,
onChange: (item: string[]) => void
}
interface Items {
name: string,
checked: boolean
}
const DataList: React.FunctionComponent<DataList> = ({ options, listClass, listItemClass, labelClass, wrapperClass, inputClass, buttonClass, listContainerClass, id, label, multiple, labelHidden = false, value, allValue, onChange }) => {
// states
const [currentItem, setCurrentItem] = useState<string[]>([]);
const [searchValue, setSearchValue] = useState("");
const [multipleOptions, setMultipleOptions] = useState<Items[]>([]);
const [finalChoices, setFinalChoices] = useState<string[]>([]);
const [open, setOpen] = useState(false);
// variables
const search:any = useRef(null);
const multipleArray = useMemo(() => options.map(x => ({ name: x, checked: false })), [options]);
// methods
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
let item = event.target.value === allValue ? "" : event.target.value;
setSearchValue(item);
}
const handleSelection = (item: string) => {
setCurrentItem([item]);
setOpen(false);
onChange([item]);
}
const getOptions = () => {
if (multipleOptions.length === 0) {
let localOptions = jsonClone(multipleArray);
return localOptions;
}
else {
let localOptions: Items[] = [];
let miror: Items[] = jsonClone(multipleArray);
miror.map(x => {
jsonClone(multipleOptions).map((y:any) => {
if (x.name === y.name) {
x.checked = y.checked;
}
})
localOptions.push(x);
});
return localOptions;
}
}
const handleMultipleSelection = (name:string, checked:boolean) => {
const newArray = getOptions();
newArray.filter((x:any) => x.name === name)[0].checked = checked;
setMultipleOptions([...newArray]);
sendSelected([...newArray]);
}
const sendSelected = (items:Items[]) => {
if (items !== multipleOptions) {
const localChoices = items.filter(x => x.checked === true).map(x => x.name);
setFinalChoices(localChoices);
onChange(localChoices);
}
}
const handleAutofocus = () => {
search.current.focus();
}
// useEffects
// Updates the list on programmatic change of value (including reset or any other change)
useEffect(() => {
if (multiple && JSON.stringify(finalChoices) !== JSON.stringify(value)) {
if (value.length === 0) {
setMultipleOptions([]);
setFinalChoices([]);
} else {
setMultipleOptions(getOptions());
}
}
if (!multiple && currentItem !== value) {
onChange(value);
setCurrentItem(value);
}
}, [value]);
useEffect(() => {
getOptions();
}, [options]);
// return
return (
<div className={`${wrapperClass}`}>
{!labelHidden && <label htmlFor={id} className={`${labelClass}`}>{label}</label>}
<span className={`select-none relative lg:cursor-pointer ${open ? "isOpen" : ""} ${buttonClass}`} onClick={() => setOpen(true)}>
{multiple ?
finalChoices.length === 0 ? allValue : getOptions().filter((x: any) => x.checked === true).map((x: any) => x.name).map((x: any) => <span key={x} className="inline-block bg-blue-50 text-center text-xs text-market-title-light ml-1 px-2 py-1 rounded font-normal">{x}</span>)
:
finalChoices.length === 0 ? options[0] : value[0]
}
<Icon name="chevron_down_solid" className={`block fill-current w-4 h-4 absolute left-3 bottom-1/2 translate-y-1/2 transition-all ${open ? "rotate-180" : "rotate-0"}`} />
</span>
<Modal
header={true}
wrapperId={`datalist-modal-${id}`}
open={open}
onClose={() => setOpen(false)}
title={`${label}`}
onRendered={handleAutofocus}
className="block bg-white w-[90vw] h-[90vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] rounded"
childrenClass="lg:flierland-scrollbar"
>
<div className={`z-10 ${open ? "2xl:block" : "2xl:hidden"} ${listContainerClass}`}>
<div className={`z-10 ${inputClass}`}>
<input ref={search} type="search" aria-label={label} name="datalist" id={id} className={``} onChange={handleChange} autoComplete="datalist" tabIndex={0} />
</div>
<ul className={`hide-scrollbar lg:cursor-pointer ${listClass}`}>
{multiple ?
(finalChoices.length === 0 ? jsonClone(multipleArray) : getOptions()).filter((x:any) => x.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())).map((x:any) => (
<li key={x.name} className={`select-none ${listItemClass} [&>label]:mb-0`}>
<CheckBox
forId={x.name}
name={x.name}
title={x.name}
value={x.name}
checked={x.checked}
onChange={(value) => handleMultipleSelection(x.name, value)}
inputClass="market-checkbox-input"
labelClass="market-checkbox-label"
titleClass="market-checkbox-title"
/>
</li>
))
:
options.filter(x => x.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())).map((x, i) => (
<li key={x + i} className={`select-none ${currentItem.includes(x) && "input-selected"} ${listItemClass}`} onClick={() => handleSelection(x)}>{x}</li>
))
}
</ul>
<div className="grid grid-cols-1 gap-2 w-full sticky bottom-0 bg-white py-2 px-gi shadow-top">
<Button type="button" text={`${translate("apply")}`} className="block w-full bg-market-title-light text-white text-base text-center py-2 px-3" onClick={() => setOpen(false)} />
</div>
</div>
</Modal>
</div>
)
}
export default DataList

View File

@ -0,0 +1,54 @@
import React, { ReducerAction, useEffect, useState } from "react"
import translate from "services/translation/translation";
import { urlToHttpOptions } from "url"
interface Select {
options: string[],
wrapperClass?: string,
labelClass?: string,
className?: string,
id: string,
label: string,
value: string,
allValue?: string,
onChange: (city: string) => void
}
const Select: React.FunctionComponent<Select> = ({ options, className, id, label, value, allValue, labelClass, wrapperClass, onChange }) => {
const [selectedItem, setSelectedItem] = useState(value);
// methods
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
let data = event.target.value === allValue ? "" : event.target.value;
onChange && onChange(data);
}
// useEffects
useEffect(() => {
if (selectedItem !== value) {
setSelectedItem(value);
onChange && onChange(value);
}
}, [value]);
// return
return (
<div className={`${wrapperClass}`}>
<label htmlFor={id} className={`${labelClass}`}>{label}</label>
<select
id={id}
className={` ${className}`}
onChange={handleChange}
value={selectedItem}
>
{allValue && <option value={allValue} defaultValue={allValue}>{allValue}</option>}
{options.map((x, i) => (
<option key={x + i} value={x}>{x}</option>
))}
</select>
</div>
)
}
export default Select

View File

@ -1,15 +1,24 @@
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { cmsAddress } from "services/general/general";
const client = new ApolloClient({
uri: process.env.NODE_ENV === 'production' ? 'http://167.99.189.252:8055/graphql' : 'http://localhost:8055/graphql',
uri: `${cmsAddress()}/graphql`,
cache: new InMemoryCache(),
});
export default client;
export const dataFetch = new ApolloClient({
uri: process.env.NODE_ENV === 'production' ? 'http://167.99.189.252:8055/graphql/system' : 'http://localhost:8055/graphql/system',
export const dataFetch = (accessToken) => {
return new ApolloClient({
uri: `${cmsAddress()}/graphql/system`,
headers: {
// 'Access-Control-Allow-Origin': '*',
authorization: `Bearer ${accessToken}`,
},
cache: new InMemoryCache(),
});
}
export const generalFetch = new ApolloClient({
uri: `${cmsAddress()}/graphql/system`,
cache: new InMemoryCache(),
headers: {
authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImI5OTFhMTBjLTMyYTMtNDk5My04NjQ4LWRkN2M5YWJhZWYwNyIsInJvbGUiOiJjMmRkMmU5ZC1lNTVlLTQyMmItODIyYi0yZWM0M2RiNDYzZTQiLCJhcHBfYWNjZXNzIjp0cnVlLCJhZG1pbl9hY2Nlc3MiOnRydWUsImlhdCI6MTY2MTA5NDU5NiwiZXhwIjoxNjYxMDk1NDk2LCJpc3MiOiJkaXJlY3R1cyJ9.2-3uBsyf8CuL1CChyAXXXU2YJv8720-br6_9Y7DAYt0`,
}
});

View File

@ -2,8 +2,9 @@ import { gql } from "@apollo/client";
export const GeneralData = gql`
fragment GeneralData on Query {
dictionary {
dictionary(filter: { status: { _eq: "published" } }, limit: 500) {
token
status
translations {
languages_code {
code
@ -31,5 +32,41 @@ export const GeneralData = gql`
}
}
}
market_categories {
name
id
has_children
parent {
related_market_categories_id {
name
}
}
}
}
`
export const Cities = gql`
fragment Cities on Query {
Cities {
name
state {
name
}
}
}
`
export const States = gql`
fragment States on Query {
States {
name
}
}
`
export const Colors = gql`
fragment Colors on Query {
Colors {
id
persian_name
english_name
}
}
`

View File

@ -0,0 +1,36 @@
import { gql } from "@apollo/client";
export const Vehicles = gql`
fragment Vehicles on Query {
brands: fields_by_name(collection: "Ads", field: "brand") {
meta {
options
}
}
vehicle_type: fields_by_name(collection: "Ads", field: "vehicle_type") {
meta {
options
}
}
car_body_type: fields_by_name(collection: "Ads", field: "car_body_type") {
meta {
options
}
}
fuel_type: fields_by_name(collection: "Ads", field: "fuel_type") {
meta {
options
}
}
transmission_type: fields_by_name(collection: "Ads", field: "transmission_type") {
meta {
options
}
}
drivetrain: fields_by_name(collection: "Ads", field: "drivetrain") {
meta {
options
}
}
}
`

View File

@ -7,6 +7,11 @@ export const GetCurrentUser = gql`
first_name
last_name
id
avatar {
id
width
height
}
}
}
`

View File

@ -0,0 +1,6 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from '../redux/store/store'
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

View File

@ -1,19 +0,0 @@
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
value: {},
}
export const globalSlice = createSlice({
name: 'global',
initialState,
reducers: {
setGlobalData: (state, action) => {
state.value = action.payload
},
},
})
export const { setGlobalData } = globalSlice.actions
export default globalSlice.reducer

View File

@ -0,0 +1,31 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { RootState } from '../../redux/store/store';
export interface GlobalState {
value: {},
measures: string
}
const initialState = {
value: {},
measures: "metric"
}
export const globalSlice = createSlice({
name: 'global',
initialState,
reducers: {
setGlobalData: (state, action: PayloadAction<any>) => {
state.value = action.payload
},
setMeasures: (state, action: PayloadAction<string>) => {
state.measures = action.payload
},
},
})
export const { setGlobalData, setMeasures } = globalSlice.actions
export const getUnitSystem = (state: RootState) => state.global.measures;
export default globalSlice.reducer

View File

@ -0,0 +1,126 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { RootState } from '../../redux/store/store';
export interface MarketState {
filters: {
price: { min: number | undefined, max: number | undefined },
city: string[],
state: string[],
color: string[],
contract_type: { rent: boolean, buy: boolean },
area: { min: number | undefined, max: number | undefined },
availability_date: number,
bedrooms: number,
bathrooms: number,
minFloor: number | undefined,
smoking_allowed: boolean | undefined,
pet_allowed: boolean | undefined,
utilities: string[],
unit_facilities: string[],
building_facilities: string[],
nearby_facilities: string[],
heating: string[],
cooling: string[],
vehicle_safety: string[],
vehicle_options: string[],
vehicle_brand: string[],
vehicle_type: string[],
vehicle_body: string[],
production_year: number | undefined,
distance_traveled: { min: number | undefined, max: number | undefined },
fuel_type: string,
vehicle_transmission: string[],
vehicle_drivetrain: string[],
min_range: number | undefined,
min_fuel_tank: number | undefined,
},
areFiltersReset: boolean,
}
const initialState: MarketState = {
filters: {
price: { min: undefined, max: undefined },
city: [],
state: [],
color: [],
contract_type: { rent: true, buy: true },
area: { min: undefined, max: undefined },
availability_date: 0,
bedrooms: -1,
bathrooms: -1,
minFloor: 0,
smoking_allowed: false,
pet_allowed: false,
utilities: [],
unit_facilities: [],
building_facilities: [],
nearby_facilities: [],
heating: [],
cooling: [],
vehicle_safety: [],
vehicle_options: [],
vehicle_brand: [],
vehicle_type: [],
vehicle_body: [],
production_year: undefined,
distance_traveled: { min: undefined, max: undefined },
fuel_type: "",
vehicle_transmission: [],
vehicle_drivetrain: [],
min_range: 0,
min_fuel_tank: 0,
},
areFiltersReset: false,
}
export const marketSlice = createSlice({
name: 'market',
initialState,
reducers: {
setMarketFilters: (state, action: PayloadAction<any>) => {
state.filters = {...state.filters, ...action.payload};
state.areFiltersReset = JSON.stringify(state.filters) !== JSON.stringify(initialState.filters) ? false : true;
},
resetMarketFilters: (state) => {
state.filters = {...initialState.filters};
console.log("reset called");
state.areFiltersReset = true;
},
},
})
export const { setMarketFilters, resetMarketFilters } = marketSlice.actions
export const getAreFiltersReset = (state: RootState) => state.market.areFiltersReset;
export const getPrice = (state: RootState) => state.market.filters.price;
export const getCity = (state: RootState) => state.market.filters.city;
export const getState = (state: RootState) => state.market.filters.state;
export const getColor = (state: RootState) => state.market.filters.color;
export const getContractType = (state: RootState) => state.market.filters.contract_type;
export const getArea = (state: RootState) => state.market.filters.area;
export const getAvailabilityDate = (state: RootState) => state.market.filters.availability_date;
export const getBedrooms = (state: RootState) => state.market.filters.bedrooms;
export const getBathrooms = (state: RootState) => state.market.filters.bathrooms;
export const getMinFloor = (state: RootState) => state.market.filters.minFloor;
export const getSmokingAllowed = (state: RootState) => state.market.filters.smoking_allowed;
export const getPetAllowed = (state: RootState) => state.market.filters.pet_allowed;
export const getUtilities = (state: RootState) => state.market.filters.utilities;
export const getUnitFacilities = (state: RootState) => state.market.filters.unit_facilities;
export const getBuildingFacilities = (state: RootState) => state.market.filters.building_facilities;
export const getNearbyFacilities = (state: RootState) => state.market.filters.nearby_facilities;
export const getHeating = (state: RootState) => state.market.filters.heating;
export const getCooling = (state: RootState) => state.market.filters.cooling;
export const getVehicleSafety = (state: RootState) => state.market.filters.vehicle_safety;
export const getVehicleOptions = (state: RootState) => state.market.filters.vehicle_options;
export const getVehicleBrand = (state: RootState) => state.market.filters.vehicle_brand;
export const getVehicleType = (state: RootState) => state.market.filters.vehicle_type;
export const getVehicleBody = (state: RootState) => state.market.filters.vehicle_body;
export const getProductionYear = (state: RootState) => state.market.filters.production_year;
export const getDistanceTraveled = (state: RootState) => state.market.filters.distance_traveled;
export const getFuelType = (state: RootState) => state.market.filters.fuel_type;
export const getVehicleTransmission = (state: RootState) => state.market.filters.vehicle_transmission;
export const getVehicleDrivetrain = (state: RootState) => state.market.filters.vehicle_drivetrain;
export const getVehicleMinRange = (state: RootState) => state.market.filters.min_range;
export const getVehicleMinFuelTank = (state: RootState) => state.market.filters.min_fuel_tank;
export default marketSlice.reducer

View File

@ -0,0 +1,54 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { RootState } from '../store/store';
export interface UserState {
data : {
generalDetails: {
id: string,
firstName: string,
lastName: string,
email: string,
avatar: {
id: string,
width: number,
height: number,
}
},
}
isDataReady: boolean,
}
const initialState: UserState = {
data: {
generalDetails: {
id: "",
firstName: "",
lastName: "",
email: "",
avatar: {
id: "",
width: 0,
height: 0,
}
},
},
isDataReady: false,
}
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
setUserData: (state, action: PayloadAction<any>) => {
state.data = { ...state.data, ...action.payload }
state.isDataReady = JSON.stringify(state.data) === JSON.stringify(initialState.data) ? false : true;
},
},
})
export const { setUserData } = userSlice.actions
export const userIsDataReady = (state: RootState) => state.user.isDataReady;
export const userData = (state: RootState) => state.user.data;
export default userSlice.reducer

View File

@ -1,8 +0,0 @@
import { configureStore } from '@reduxjs/toolkit'
import globalReducer from '../slices/global'
export const store = configureStore({
reducer: {
global: globalReducer,
},
})

View File

@ -0,0 +1,35 @@
import { configureStore, ThunkAction, Action, createListenerMiddleware } from '@reduxjs/toolkit'
import globalReducer from '../slices/global'
import marketReducer from '../slices/market'
import userReducer, { setUserData } from '../slices/user'
const listenerMiddleware = createListenerMiddleware()
listenerMiddleware.startListening({
actionCreator: setUserData,
effect: async (action, listenerApi) => {
// Run whatever additional side-effect-y logic you want here
const localState = JSON.parse(localStorage.getItem('user') || "null")
const currentState = (listenerApi.getState() as RootState).user.data;
const finalState = JSON.stringify({ ...localState, ...currentState });
localState !== null && localStorage.setItem("user", finalState);
},
})
export const store = configureStore({
reducer: {
global: globalReducer,
market: marketReducer,
user: userReducer,
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(listenerMiddleware.middleware),
})
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>;

View File

@ -1,19 +1,222 @@
import { getUnitSystem } from 'common/redux/slices/global';
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
// Url formatter
export const url = (title) => {
const cleanUrl = title.replace(/ /g, '-');
const cleanUrl = title.replace(/-/g, '_').replace(/ /g, '-');
return cleanUrl;
}
// Website general base path generator for both local and production
// 167.99.189.252 live server's ip address
export const basePath = () => {
const basePath = process.env.NODE_ENV === 'production' ? `https://flierland.ca` : `http://192.168.1.105:3000`;
return basePath;
}
// Website server address generator for both local and production
export const serverAddress = () => {
const serverAddress = process.env.NODE_ENV === 'production' ? `https://cdn.flierland.ca/assets/` : `http://192.168.1.105:8055/assets/`;
return serverAddress;
}
// Website server address generator for both local and production
export const cmsAddress = () => {
const serverAddress = process.env.NODE_ENV === 'production' ? `https://backend.flierland.ca:8055` : `http://192.168.1.105:8055`;
return serverAddress;
}
// Strips html tags from text
export const stripHtml = (text) => {
const strippedText = text.replace(/(<([^>]+)>)/ig, '');
return strippedText;
}
// Objects deep freeze
export const deepFreeze = (object) => {
// Freeze properties before freezing self
const propNames = Object.keys(object);
for (const item of propNames) {
const value = object[item];
if (value && typeof value === "object") {
deepFreeze(value);
}
}
// Now freeze the object as well
return Object.freeze(object);
}
// Check if something is an object {}
export const isObject = (item) => {
let isReallyObject = item !== null && Array.isArray(item) === false && typeof(item) === "object";
return isReallyObject;
}
// Json cloning
export const jsonClone = (item) => {
let copy = JSON.parse(JSON.stringify(item));
return copy;
}
// Deep cloning
export const deepClone = (item) => {
// if it's an object
if (isObject(item)) {
let copy = {};
const objectCopy = (data) => {
let simpleData = {};
let nestedData = {};
for (let [key, value] of Object.entries(data)) {
if (isObject(value)) {
nestedData[key] = objectCopy(value);
}
else if (Array.isArray(value)) {
nestedData[key] = deepClone(value);
}
else {
simpleData[key] = value;
}
}
return { ...nestedData, ...simpleData };
}
copy = Object.assign({ ...copy, ...objectCopy(item)});
return copy;
}
// if it's an array
else if (Array.isArray(item)) {
let copy = [];
const arrayCopy = (data) => {
let simpleData = [];
let nestedData = [];
for (let child of data) {
if (isObject(child)) {
nestedData.push(deepClone(child));
}
else if (Array.isArray(child)) {
nestedData.push(arrayCopy(child));
}
else {
simpleData.push(child);
}
}
return [ ...nestedData, ...simpleData ];
}
copy = [...copy, ...arrayCopy(item)];
return copy;
}
// otherwise just return the data
else {
return item;
}
}
// Number formatter ads comma or any other separating charachters
export const numberFormatter = (number, separator) => {
let initialNumber = number.toString().split("").reverse();
let formattedNumber = [];
for (let i = 1; i < initialNumber.length + 1; i++) {
formattedNumber.push(initialNumber[i - 1]);
if (i > 2 && i < initialNumber.length && i % 3 === 0) {
formattedNumber.push(separator);
}
}
return formattedNumber.reverse().join("");
}
// Converts imperial and metric measurement systems
export const useMeasure = (unit, value) => {
const systemDetector = (item) => {
const imperial = ["sqft", "foot", "inch", "mile", "pound", "gallon", "mile/hour"];
if (imperial.indexOf(item) === -1) {
return "metric";
}
return "imperial";
}
let unitSystem = systemDetector(unit);
const system = useAppSelector(getUnitSystem);
const conversionRates = [
{ units: ["sqft", "sqmt"], toMetricRatio: 1/10.764, toImperialRatio: 10.764 },
{ units: ["foot", "meter"], toMetricRatio: 1/3.281, toImperialRatio: 3.281 },
{ units: ["inch", "centimeter"], toMetricRatio: 2.54, toImperialRatio: 1/2.54 },
{ units: ["inch", "millimeter"], toMetricRatio: 25.4, toImperialRatio: 1/25.4 },
{ units: ["mile", "kilometer"], toMetricRatio: 1.609, toImperialRatio: 1/1.609 },
{ units: ["pound", "kilogram"], toMetricRatio: 1/2.205, toImperialRatio: 2.205 },
{ units: ["gallon", "liter"], toMetricRatio: 3.785, toImperialRatio: 1/3.785 },
{ units: ["mile/hour", "kilometer/hour"], toMetricRatio: 1.609, toImperialRatio: 1/1.609 },
];
const unitSymbols = [
// imperial
{ unit: "sqft", symbol: "ft²" },
{ unit: "foot", symbol: "ft" },
{ unit: "inch", symbol: "in" },
{ unit: "mile", symbol: "mi" },
{ unit: "pound", symbol: "lb" },
{ unit: "gallon", symbol: "gal" },
{ unit: "mile/hour", symbol: "mi/h" },
// metric
{ unit: "sqmt", symbol: "m²" },
{ unit: "meter", symbol: "m" },
{ unit: "millimeter", symbol: "mm" },
{ unit: "centimeter", symbol: "cm" },
{ unit: "kilometer", symbol: "km" },
{ unit: "kilogram", symbol: "kg" },
{ unit: "liter", symbol: "l" },
{ unit: "kilometer/hour", symbol: "km/h" },
];
const getSymbol = (item) => unitSymbols.filter(x => x.unit === item)[0].symbol;
let convertedResult = { value: value, unit: unit, symbol: getSymbol(unit) };
if (system !== unitSystem) {
let item = conversionRates.filter(x => x.units.includes(unit));
let convertedUnit = item[0].units.indexOf(unit) === 0 ? item[0].units[1] : item[0].units[0];
let convertedValue = unitSystem === "metric" ? Math.ceil(value * item[0].toImperialRatio) : Math.ceil(value * item[0].toMetricRatio);
convertedResult = { value: convertedValue, unit: convertedUnit, symbol: getSymbol(convertedUnit) }
}
return convertedResult;
}
// Direct unit converter
export const useUnitConverter = (unit, value, targetSystem) => {
const conversionRates = [
{ units: ["sqft", "sqmt"], toMetricRatio: 1 / 10.764, toImperialRatio: 10.764 },
{ units: ["foot", "meter"], toMetricRatio: 1 / 3.281, toImperialRatio: 3.281 },
{ units: ["inch", "centimeter"], toMetricRatio: 2.54, toImperialRatio: 1 / 2.54 },
{ units: ["inch", "millimeter"], toMetricRatio: 25.4, toImperialRatio: 1 / 25.4 },
{ units: ["mile", "kilometer"], toMetricRatio: 1.609, toImperialRatio: 1 / 1.609 },
{ units: ["pound", "kilogram"], toMetricRatio: 1 / 2.205, toImperialRatio: 2.205 },
{ units: ["gallon", "liter"], toMetricRatio: 3.785, toImperialRatio: 1 / 3.785 },
{ units: ["mile/hour", "kilometer/hour"], toMetricRatio: 1.609, toImperialRatio: 1 / 1.609 },
];
const unitSymbols = [
// imperial
{ unit: "sqft", symbol: "ft²" },
{ unit: "foot", symbol: "ft" },
{ unit: "inch", symbol: "in" },
{ unit: "mile", symbol: "mi" },
{ unit: "pound", symbol: "lb" },
{ unit: "gallon", symbol: "gal" },
{ unit: "mile/hour", symbol: "mi/h" },
// metric
{ unit: "sqmt", symbol: "m²" },
{ unit: "meter", symbol: "m" },
{ unit: "millimeter", symbol: "mm" },
{ unit: "centimeter", symbol: "cm" },
{ unit: "kilometer", symbol: "km" },
{ unit: "kilogram", symbol: "kg" },
{ unit: "liter", symbol: "l" },
{ unit: "kilometer/hour", symbol: "km/h" },
];
let item = conversionRates.filter(x => x.units.includes(unit));
let convertedValue = targetSystem === "metric" ? Math.ceil(value * item[0].toMetricRatio) : Math.ceil(value * item[0].toImperialRatio);
return convertedValue;
}

View File

@ -2,17 +2,17 @@ import { useSelector, useDispatch } from 'react-redux'
import { useRouter } from 'next/router'
const useTranslate = (token) => {
// const router = useRouter();
// const locale = router.locale;
const locale = 'fa-IR';
const data = useSelector((state) => state.global.value);
const translation = data.dictionary && data.dictionary
if (data.dictionary !== undefined) {
let translation = data.dictionary
.filter(x => x.token === token)
.map(x => x.translations)[0]
.filter(x => x.languages_code.code === locale)
.map(x => x.translation)[0]
return translation;
return translation;
}
return "";
}
export default useTranslate

View File

@ -1,18 +1,16 @@
import { useSession, signIn, signOut } from "next-auth/react"
import { useQuery, gql } from '@apollo/client';
import { dataFetch } from "../../data/apollo-client";
import { GetCurrentUser } from '../../data/fragments/user-data'
export const useDataLink = () => {
const { data: session, status } = useSession();
const { loading, error, data } = useQuery(GetCurrentUser);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
// uri: "http://localhost:8055/graphql/system",
// headers: {
// Authorization: `Bearer ${session && session.user.data.access_token}`
// },
return data;
export const useFetchUserData = async (token) => {
const userData = await dataFetch(token).query({
query: gql`
${GetCurrentUser}
query GetCurrentUser {
...GetCurrentUser
}
`
});
return userData;
}

View File

@ -32,6 +32,7 @@
/* Indentations */
--gi: 1rem;
--max-width: 1536px;
--menu-height: 72px;
}
html {
@apply font-main;
@ -48,6 +49,26 @@
p, span, li {
@apply text-text-color text-sm leading-7 sm:text-base;
}
/*---------- browser appearance reset ----------*/
body::-webkit-scrollbar {
@apply w-2;
}
body::-webkit-scrollbar-thumb {
@apply bg-[#c0c2c5] rounded-2xl w-2;
}
body::-webkit-scrollbar-track {
@apply bg-[#f0f0f1];
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
}
@layer components {
@ -67,7 +88,7 @@
direction: rtl;
}
.general-input {
@apply block outline-none shadow-border focus:shadow-focus py-3 px-3 rounded w-full mb-2;
@apply block outline-none shadow-inner bg-market-input focus:shadow-focus py-3 px-3 rounded w-full mb-2;
}
.image-gradiant {
--grad-opacity: 1.0;
@ -86,4 +107,73 @@
.search-body p img {
display: none;
}
/*---------- browser appearance reset ----------*/
.flierland-scrollbar::-webkit-scrollbar {
@apply w-2;
}
.flierland-scrollbar::-webkit-scrollbar-thumb {
@apply bg-[#c0c2c5] rounded-2xl w-2;
}
.flierland-scrollbar::-webkit-scrollbar-track {
@apply bg-[#f0f0f1];
}
/* market checkbox */
.market-checkbox-input {
@apply w-5 h-5 bg-market-input shadow-inner rounded after:w-[7px] after:h-[13px] after:-mt-[2px] after:border-b-[3px] after:border-r-[3px] after:border-market-title-light;
}
.market-checkbox-label {
@apply flex items-center w-auto [&>span.checkmark]:hover:bg-blue-100 mb-4;
}
.market-checkbox-title {
@apply pr-8 text-sm;
}
/* market datalist */
.market-datalist-wrapper {
@apply block w-full relative;
}
.market-datalist-button {
@apply block w-full bg-white rounded px-3 py-1 text-secondary-light font-semibold;
}
.market-datalist-list-container {
@apply block w-full bg-white;
}
.market-datalist-input {
@apply sticky top-0 bg-white px-3 py-3;
}
.market-datalist-input input {
@apply w-full py-2 px-3 rounded outline-none bg-slate-50 shadow-inner select-none text-sm focus:ring-1 ring-market-border;
}
.market-datalist-list {
@apply block w-full h-full overflow-y-auto px-3 pt-2 pb-3;
}
.market-datalist-list-item {
@apply block w-full px-3 [&>label]:py-3 text-sm hover:bg-slate-50 rounded-sm border-b border-market-sup-light last:border-none;
}
.market-datalist-list-item.input-selected {
@apply text-market-title-light;
}
/* market filter item - inline */
.market-filter-item-wrapper {
@apply flex items-center justify-between w-full rounded-r mb-3 bg-market-input rounded py-1 pl-1;
}
.market-filter-item-title {
@apply inline-block shrink-0 mx-3;
}
.market-filter-item-body {
@apply block w-full;
}
/* market filter item - block */
.market-filter-item-block-wrapper {
@apply block w-full mb-4;
}
.market-filter-item-block-title {
@apply block w-full mb-5;
}
.market-filter-item-block-body {
@apply block w-full;
}
/* input unit : km, mile, etc... */
.input-unit {
@apply flex items-center w-auto bg-white py-1 px-2 h-full mr-1 rounded-l font-semibold text-sm text-secondary-light uppercase;
}
}

View File

@ -0,0 +1,40 @@
import React, { useEffect, useState } from "react"
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
import translate from "services/translation/translation";
import DataList from "components/select/data-list";
import { getAreFiltersReset, getFuelType, setMarketFilters } from "common/redux/slices/market";
interface FuelType {
types: string[]
}
const FuelType: React.FunctionComponent<FuelType> = ({ types }) => {
// states
const [value, setValue] = useState<string[]>([]);
// variables
const items = types.map(x => translate(x.replace(/ /g, '-')));
const allOption = translate("all");
const dispatch = useAppDispatch();
const areFiltersReset = useAppSelector(getAreFiltersReset);
// methods
const handleChange = (item: string[]) => {
setValue(item);
dispatch(setMarketFilters({ fuel_type: item }));
}
// useEffects
useEffect(() => {
areFiltersReset === true && setValue([]);
}, [areFiltersReset]);
// return
return (
<header className="">
</header>
)
}
export default React.memo(FuelType, () => true)

View File

@ -34,7 +34,7 @@ const Footer = () => {
}
return (
<footer className="w-full bg-secondary">
<footer className="w-full bg-secondary website-footer">
<section className="px-[var(--gi)] pt-4 sm:grid sm:grid-cols-3 sm:items-start sm:justify-start lg:grid-cols-4 2xl:grid-cols-5 2xl:max-w-[var(--max-width)] 2xl:mx-auto">
<LinksGroup title="main-menu-billboard-title" items={data.billboard_categories} />
<LinksGroup title="main-menu-magazine-title" items={data.magazine_categories} />

View File

@ -6,11 +6,11 @@ import { useSelector, useDispatch } from 'react-redux'
import MainMenu from './main-menu'
import UserMenu from './user-menu'
import SearchBox from "../search/search-box"
import { MagnifyingGlass, XMark } from "components/icons"
import { Icon } from "components/icons"
const Header = () => {
const data = useSelector((state) => state.global.value);
const data = useSelector((state:any) => state.global.value);
const router = useRouter();
const [menuOpen, setMenuOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
@ -34,18 +34,19 @@ const Header = () => {
const closeSearch = () => {
setSearchOpen(false);
};
return (
<header className="fixed top-0 left-0 w-full h-[72px] will-change-transform z-30 flex justify-between items-center py-1 px-[var(--gi)] bg-white shadow 2xl:px-[calc((100vw_-_var(--max-width))_/_2)]">
<header className="website-header fixed top-0 left-0 w-full h-[72px] will-change-transform z-30 flex justify-between items-center py-1 px-[var(--gi)] bg-white shadow 2xl:px-[calc((100vw_-_var(--max-width))_/_2)]">
<div className="flex items-center float-right">
<div className="grid items-center float-right w-12 h-[50px] p-2 -mr-2 cursor-pointer relative 2xl:pr-[var(--gi)] lg:hidden" onClick={toggleMenu}>
<span className={`block w-8 h-[3px] rounded bg-secondary transition ease-in-out duration-[300ms] origin-right ${menuOpen ? 'transform -rotate-[45deg]' : ''}`}></span>
<span className={`block w-8 h-[3px] rounded bg-secondary transition-all ease-in-out duration-[150ms] ${menuOpen ? 'w-0' : ''}`}></span>
<span className={`block w-8 h-[3px] rounded bg-secondary transition ease-in-out duration-[300ms] origin-right ${menuOpen ? 'transform rotate-[45deg]' : ''}`}></span>
</div>
{/* <UserMenu data={data} /> */}
<UserMenu />
<MainMenu data={data} isOpen={menuOpen}/>
<MagnifyingGlass onClick={openSearch} className={`block lg:hidden mr-5 w-7 h-7 fill-secondary`} />
<Icon name="MagnifyingGlass" onClick={openSearch} className={`block lg:hidden mr-5 w-7 h-7 fill-secondary`} />
<SearchBox
magazine
billboard

View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"
import React, { useState, useEffect, useMemo } from "react"
import { useRouter } from 'next/router'
import Link from "components/link/link"
import translate from "services/translation/translation"
@ -34,6 +34,7 @@ const MainMenu = ({ data, isOpen }) => {
const urlMaker = (item) => {
if (item.__typename === "magazine_categories") return `/magazine/cats/${url(item.name)}`;
if (item.__typename === "billboard_categories") return `/billboard/cats/${url(item.name)}`;
if (item.__typename === "market_categories") return `/market/cats/${url(item.name)}`;
return '-';
}
@ -98,7 +99,7 @@ const MainMenu = ({ data, isOpen }) => {
</span>
</div>
<ul className={`${matchId(item.id) ? 'block' : 'hidden'} divide-y divide-border-gray-bottom px-4 pb-2 lg:block lg:absolute lg:bg-white lg:w-52 lg:z-30 lg:px-0 lg:shadow-md lg:rounded lg:rounded-tr-none lg:overflow-hidden lg:right-full lg:top-0 lg:pb-0`}>
{menu.filter(x => x.parent && x.parent.length > 0 && x.parent[0].related_magazine_categories_id.name === item.name)
{menu.filter(x => x.parent && x.parent.length > 0 && (title.includes("market") ? x.parent[0].related_market_categories_id.name : x.parent[0].related_magazine_categories_id.name) === item.name)
.map(x => (
// lvl three
<li className ="hover:bg-white last:lg:rounded-b" key={x.id}>
@ -125,16 +126,23 @@ const MainMenu = ({ data, isOpen }) => {
)
}
const menuWrapper = useMemo(() =>
// Main menu
<ul className="grid gap-0 p-1 grid-cols-1 px-0 py-3 border-b border-border-gray-bottom border-solid lg:flex lg:border-none lg:z-30 lg:py-0 lg:h-full">
<MenuBuilder title="main-menu-home-title" href={"/"} />
<MenuBuilder title="main-menu-billboard-title" href={"/billboard"} menu={data.billboard_categories} />
<MenuBuilder title="main-menu-magazine-title" href={"/magazine"} menu={data.magazine_categories} />
<MenuBuilder title="main-menu-market-title" href={"/market"} menu={data.market_categories} />
<MenuBuilder title="main-menu-contact-title" href={"/contact"} />
</ul>
, [data,subActive])
return (
<nav className={`${isOpen ? "translate-x-0" : "translate-x-full"} float-right z-30 transform-gpu transition ease-in-out duration-[300ms] w-full absolute top-full left-0 bg-white shadow h-[calc(100vh-72px)] overflow-y-auto
lg:translate-x-0 lg:relative lg:shadow-none lg:w-auto lg:overflow-visible lg:top-0 lg:-right-2 lg:h-[72px]`}>
{/* Main menu */}
<ul className="grid gap-0 p-1 grid-cols-1 px-0 py-3 border-b border-border-gray-bottom border-solid lg:flex lg:border-none lg:z-30 lg:py-0 lg:h-full">
<MenuBuilder title="main-menu-home-title" href={"/"}/>
<MenuBuilder title="main-menu-billboard-title" href={"/billboard"} menu={data.billboard_categories}/>
<MenuBuilder title="main-menu-magazine-title" href={"/magazine"} menu={data.magazine_categories} />
<MenuBuilder title="main-menu-contact-title" href={"/contact"}/>
</ul>
<nav
className={`${isOpen ? "translate-x-0" : "translate-x-full"} float-right z-30 transform-gpu transition ease-in-out duration-[300ms] w-full absolute top-full left-0 bg-white shadow h-[calc(100vh-72px)] overflow-y-auto
lg:translate-x-0 lg:relative lg:shadow-none lg:w-auto lg:overflow-visible lg:top-0 lg:-right-2 lg:h-[72px]`}
>
{menuWrapper}
</nav>
)
}

View File

@ -3,61 +3,76 @@ import { useRouter } from 'next/router'
import Link from "components/link/link"
import translate from "services/translation/translation"
import { url } from 'services/general/general'
import Modal from 'components/modal/modal';
import LoginForm from './login-form';
import { useSession, signIn, signOut } from "next-auth/react"
import Image from "components/image/image"
import useSWR from 'swr'
import { useFetchUserData } from "../../../services/user/user"
import { useAppDispatch, useAppSelector } from "common/redux/hooks"
import { setUserData, userData, userIsDataReady } from "common/redux/slices/user"
import { Icon } from "components/icons"
const UserMenu = ({ }) => {
const { data: session, status } = useSession();
// variables
const { data: session, status }: any = useSession();
const router = useRouter();
const [isLoginOpen, setIsLoginOpen] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const loginText = `${translate('user-login-text')} | ${translate('user-register-text')}`;
const dispatch = useAppDispatch();
const loginText = `${translate('user-login-text')}`;
const logoutText = translate('user-logout-text');
const profile = translate('profile');
const isUserDataReady = useAppSelector(userIsDataReady);
const user = useAppSelector(userData);
console.log(user);
// methods
const login = () => {
signIn();
}
const logout = () => {
signOut();
}
// useEffect(() => {
// }, [])
if (status === "authenticated") {
session && console.log(session);
return <div onClick={logout}>
{logoutText}
{session.user?.email}
</div>
}
// return
return (
<div>
<span className="block py-2 px-3 rounded hover:text-primary lg:cursor-pointer" onClick={login}>
{loginText}
</span>
{/* <Modal title={'Login'} open={isLoginOpen} onClose={closeLogin} wrapperId="loginRoot" header={false}>
<Tabs className="block p-2 rtl">
<Tab
index={1}
title={translate('user-login-text')}
className="text-center p-2"
activeClass="text-white bg-secondary"
>
<LoginForm />
</Tab>
<Tab
index={2}
title={translate('user-register-text')}
className="text-center p-2"
activeClass="text-white bg-secondary"
>
</Tab>
</Tabs>
</Modal> */}
<div className="flex items-center w-48 ml-3 h-[var(--menu-height)]">
{isUserDataReady && status === "authenticated" ?
<div className="flex items-center w-full [&>ul]:hover:block h-full ">
<Image
src={user.generalDetails.avatar.id}
alt={user.generalDetails.firstName}
width={user.generalDetails.avatar.width}
height={user.generalDetails.avatar.height}
ar={['1/1']}
imageSizes={[50]}
simple
className="block w-8 h-8 rounded-full object-cover bg-secondary ml-3 shrink-0"
/>
<Link href="/dashboard" className="block w-full hover:text-primary">
<span className={`flex items-center py-2 px-3 hover:text-primary lg:cursor-pointer h-full capitalize`}>{user.generalDetails.firstName}</span>
</Link>
<ul className="hidden w-44 absolute top-full divide-y divide-border-gray-bottom shadow-md rounded-b bg-white border-t border-border-gray-bottom">
<li className="block pt-1 pb-3 px-3 text-sm hover:pr-4 transition-all">
<Link href="/dashboard" className="block w-full hover:text-primary">
{profile}
</Link>
</li>
<li className="block pt-1 pb-3 px-3 w-full hover:text-primary lg:cursor-pointer text-sm hover:pr-4 transition-all" onClick={logout}>{logoutText}</li>
</ul>
</div>
:
status === "loading" ?
<span className="block w-full py-2 px-3 hover:text-light-red text-text-color lg:cursor-pointer" onClick={login}>
loading...
</span>
:
<span className="block w-full py-2 px-3 hover:text-light-red text-text-color lg:cursor-pointer" onClick={login}>
<Icon name="user_vneck_hair_solid" className="inline-block w-5 h-5 fill-current ml-3" />
{loginText}
</span>
}
<span className="inline-block bg-gray-300 h-6 w-[1px] mr-1"></span>
</div>
)
}

View File

@ -1,25 +0,0 @@
import React, { useState, useEffect } from "react"
import Header from "../header/header"
import Footer from "../footer/footer"
import Script from 'next/script'
import { useRouter } from 'next/router'
const Layout = ({children}) => {
const router = useRouter();
const activePath = router.pathname;
return (
<div className="block overflow-x-hidden overflow-y-auto h-full relative top-[69px] scroll-smooth" style={{'direction': 'rtl'}}>
<Header />
<main className="block w-full bg-light-gray overflow-auto px-[var(--gi)] 2xl:px-[calc((100vw_-_var(--max-width))_/_2)]">
{children}
</main>
<Footer />
{/* {activePath.includes('billboard/') && !activePath.includes('cat') &&
<Script src="/spotlight.bundle.js" strategy="lazyOnload" />
} */}
</div>
)
}
export default Layout

View File

@ -0,0 +1,53 @@
import React, { useState, useEffect, useLayoutEffect } from "react"
import Header from "../header/header"
import Footer from "../footer/footer"
import Script from 'next/script'
import { useRouter } from 'next/router'
import { useAppSelector, useAppDispatch } from 'common/redux/hooks';
import { setUserData, userData, userIsDataReady } from 'common/redux/slices/user'
import useSWR from "swr"
import { useSession } from "next-auth/react"
import { useFetchUserData } from "services/user/user"
const Layout = ({children}:any) => {
// variables
const router = useRouter();
const userFullData = useAppSelector(userData);
const dispatch = useAppDispatch();
const { data: session, status }: any = useSession();
const accessToken = session && session.user && session.user.data.access_token;
const { data: userGeneralData, error: fetchError } = useSWR(status === "authenticated" ? [accessToken] : null, useFetchUserData);
const user = {
id: userGeneralData && userGeneralData.data.users_me.id,
firstName: userGeneralData && userGeneralData.data.users_me.first_name,
lastName: userGeneralData && userGeneralData.data.users_me.last_name,
email: userGeneralData && userGeneralData.data.users_me.email,
avatar: userGeneralData && userGeneralData.data.users_me.avatar,
}
// useEffects
useEffect(() => {
userGeneralData && dispatch(setUserData({ generalDetails: user }));
userGeneralData && console.log("user data was sent to redux!");
}, [userGeneralData]);
useLayoutEffect(() => {
const localState = JSON.parse(localStorage.getItem('user') || "null");
JSON.stringify(localState) !== JSON.stringify(userFullData) && dispatch(setUserData(localState));
// localStorage.removeItem("user");
console.log(localState, userFullData);
}, []);
return (
<div className="block h-full relative top-[72px]" style={{'direction': 'rtl'}}>
<Header />
<main className="block w-full bg-light-gray px-[var(--gi)] 2xl:px-[calc((100%_-_var(--max-width))/2)]">
{children}
</main>
<Footer />
</div>
)
}
export default Layout

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