scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged develop into feat/setup-hotel-api-call

Browse Source
This commit is contained in:
Chuma Mcphoy (We Ahead)
2024-07-04 13:20:56 +00:00
parent bfcef5b832 d0f4d07a0a
commit 1e3bbed6d1
24 changed files with 859 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/Icons/Accessibility.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function AccessibilityIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11936"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11936)">
<path
d="M12.0001 6.0499C11.4584 6.0499 10.998 5.86032 10.6188 5.48115C10.2397 5.10199 10.0501 4.64157 10.0501 4.0999C10.0501 3.55824 10.2397 3.09782 10.6188 2.71865C10.998 2.33949 11.4584 2.1499 12.0001 2.1499C12.5418 2.1499 13.0022 2.33949 13.3813 2.71865C13.7605 3.09782 13.9501 3.55824 13.9501 4.0999C13.9501 4.64157 13.7605 5.10199 13.3813 5.48115C13.0022 5.86032 12.5418 6.0499 12.0001 6.0499ZM9.1251 20.8624V8.9749H4.1626C3.90426 8.9749 3.68343 8.88324 3.5001 8.6999C3.31676 8.51657 3.2251 8.29574 3.2251 8.0374C3.2251 7.77907 3.31676 7.55824 3.5001 7.3749C3.68343 7.19157 3.90426 7.0999 4.1626 7.0999H19.8376C20.0959 7.0999 20.3168 7.19157 20.5001 7.3749C20.6834 7.55824 20.7751 7.77907 20.7751 8.0374C20.7751 8.29574 20.6834 8.51657 20.5001 8.6999C20.3168 8.88324 20.0959 8.9749 19.8376 8.9749H14.8751V20.8624C14.8751 21.1207 14.7834 21.3416 14.6001 21.5249C14.4168 21.7082 14.1959 21.7999 13.9376 21.7999C13.6793 21.7999 13.4584 21.7082 13.2751 21.5249C13.0918 21.3416 13.0001 21.1207 13.0001 20.8624V15.9249H11.0001V20.8624C11.0001 21.1207 10.9084 21.3416 10.7251 21.5249C10.5418 21.7082 10.3209 21.7999 10.0626 21.7999C9.80427 21.7999 9.58343 21.7082 9.4001 21.5249C9.21676 21.3416 9.1251 21.1207 9.1251 20.8624Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/Bar.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function BarIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_554_11961"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11961)">
<path
d="M11.0625 18.9501V13.8751L3.68755 5.5626C3.57088 5.42926 3.47713 5.28551 3.4063 5.13135C3.33547 4.97718 3.30005 4.8126 3.30005 4.6376C3.30005 4.2376 3.43963 3.90218 3.7188 3.63135C3.99797 3.36051 4.33755 3.2251 4.73755 3.2251H19.2625C19.6625 3.2251 20.0021 3.36051 20.2813 3.63135C20.5605 3.90218 20.7 4.2376 20.7 4.6376C20.7 4.8126 20.6646 4.97718 20.5938 5.13135C20.523 5.28551 20.4292 5.42926 20.3125 5.5626L12.9375 13.8751V18.9501H16.875C17.1334 18.9501 17.3542 19.0418 17.5375 19.2251C17.7209 19.4084 17.8125 19.6293 17.8125 19.8876C17.8125 20.1459 17.7209 20.3668 17.5375 20.5501C17.3542 20.7334 17.1334 20.8251 16.875 20.8251H7.12505C6.86672 20.8251 6.64588 20.7334 6.46255 20.5501C6.27922 20.3668 6.18755 20.1459 6.18755 19.8876C6.18755 19.6293 6.27922 19.4084 6.46255 19.2251C6.64588 19.0418 6.86672 18.9501 7.12505 18.9501H11.0625ZM7.52505 7.0751H16.475L18.25 5.1001H5.75005L7.52505 7.0751ZM12 12.0751L14.8125 8.9501H9.18755L12 12.0751Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/Biking.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function BikingIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11969"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11969)">
<path
d="M15.4125 5.5751C14.8875 5.5751 14.4354 5.38551 14.0562 5.00635C13.677 4.62718 13.4875 4.1751 13.4875 3.6501C13.4875 3.1251 13.677 2.67301 14.0562 2.29385C14.4354 1.91468 14.8875 1.7251 15.4125 1.7251C15.9375 1.7251 16.3895 1.91468 16.7687 2.29385C17.1479 2.67301 17.3375 3.1251 17.3375 3.6501C17.3375 4.1751 17.1479 4.62718 16.7687 5.00635C16.3895 5.38551 15.9375 5.5751 15.4125 5.5751ZM10.7875 10.4751L12.4375 12.2376C12.6041 12.4126 12.7291 12.6084 12.8125 12.8251C12.8958 13.0418 12.9375 13.2709 12.9375 13.5126V17.9126C12.9375 18.1709 12.8458 18.3918 12.6625 18.5751C12.4791 18.7584 12.2583 18.8501 12 18.8501C11.7416 18.8501 11.5208 18.7584 11.3375 18.5751C11.1541 18.3918 11.0625 18.1709 11.0625 17.9126V13.9501L7.86245 11.1501C7.65412 10.9668 7.5062 10.7688 7.4187 10.5563C7.3312 10.3438 7.28745 10.1001 7.28745 9.8251C7.28745 9.5501 7.33328 9.31052 7.42495 9.10635C7.51662 8.90218 7.66245 8.7001 7.86245 8.5001L10.6625 5.7251C10.8625 5.5251 11.0833 5.37926 11.325 5.2876C11.5666 5.19593 11.825 5.1501 12.1 5.1501C12.375 5.1501 12.6333 5.19593 12.875 5.2876C13.1166 5.37926 13.3375 5.5251 13.5375 5.7251L15.4125 7.6001C15.7541 7.94176 16.1395 8.23551 16.5687 8.48135C16.9979 8.72718 17.4791 8.89593 18.0125 8.9876C18.2708 9.02926 18.4895 9.14593 18.6687 9.3376C18.8479 9.52926 18.9375 9.75426 18.9375 10.0126C18.9375 10.2793 18.8416 10.5001 18.65 10.6751C18.4583 10.8501 18.2333 10.9209 17.975 10.8876C17.175 10.7793 16.4395 10.5501 15.7687 10.2001C15.0979 9.8501 14.5041 9.41677 13.9875 8.9001L13.175 8.0876L10.7875 10.4751ZM5.13745 12.0251C6.51245 12.0251 7.6687 12.4938 8.6062 13.4313C9.5437 14.3688 10.0125 15.5251 10.0125 16.9001C10.0125 18.2751 9.5437 19.4313 8.6062 20.3688C7.6687 21.3063 6.51245 21.7751 5.13745 21.7751C3.76245 21.7751 2.6062 21.3063 1.6687 20.3688C0.731201 19.4313 0.262451 18.2751 0.262451 16.9001C0.262451 15.5251 0.731201 14.3688 1.6687 13.4313C2.6062 12.4938 3.76245 12.0251 5.13745 12.0251ZM5.13745 20.3501C6.07912 20.3501 6.88953 20.0105 7.5687 19.3313C8.24787 18.6522 8.58745 17.8418 8.58745 16.9001C8.58745 15.9584 8.24787 15.148 7.5687 14.4688C6.88953 13.7897 6.07912 13.4501 5.13745 13.4501C4.19578 13.4501 3.38537 13.7897 2.7062 14.4688C2.02703 15.148 1.68745 15.9584 1.68745 16.9001C1.68745 17.8418 2.02703 18.6522 2.7062 19.3313C3.38537 20.0105 4.19578 20.3501 5.13745 20.3501ZM18.8375 12.0251C20.2125 12.0251 21.3729 12.4938 22.3187 13.4313C23.2645 14.3688 23.7375 15.5251 23.7375 16.9001C23.7375 18.2751 23.2645 19.4313 22.3187 20.3688C21.3729 21.3063 20.2125 21.7751 18.8375 21.7751C17.4625 21.7751 16.3104 21.3063 15.3812 20.3688C14.452 19.4313 13.9875 18.2751 13.9875 16.9001C13.9875 15.5251 14.452 14.3688 15.3812 13.4313C16.3104 12.4938 17.4625 12.0251 18.8375 12.0251ZM18.8625 20.3501C19.8041 20.3501 20.6145 20.0105 21.2937 19.3313C21.9729 18.6522 22.3125 17.8418 22.3125 16.9001C22.3125 15.9584 21.9729 15.148 21.2937 14.4688C20.6145 13.7897 19.8041 13.4501 18.8625 13.4501C17.9208 13.4501 17.1104 13.7897 16.4312 14.4688C15.752 15.148 15.4125 15.9584 15.4125 16.9001C15.4125 17.8418 15.752 18.6522 16.4312 19.3313C17.1104 20.0105 17.9208 20.3501 18.8625 20.3501Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/Coffee.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CoffeeIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_554_11923"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11923)">
<path
d="M11.0625 17.8125C9.17083 17.8125 7.5625 17.1542 6.2375 15.8375C4.9125 14.5208 4.25 12.9167 4.25 11.025V5.125C4.25 4.60833 4.43333 4.16667 4.8 3.8C5.16667 3.43333 5.60833 3.25 6.125 3.25H18.3875C19.3208 3.25 20.1167 3.57708 20.775 4.23125C21.4333 4.88542 21.7625 5.67917 21.7625 6.6125C21.7625 7.59583 21.4396 8.44792 20.7938 9.16875C20.1479 9.88958 19.3458 10.25 18.3875 10.25H17.75V11.025C17.75 12.9083 17.1021 14.5104 15.8063 15.8313C14.5104 17.1521 12.9292 17.8125 11.0625 17.8125ZM6.125 8.375H15.875V5.125H6.125V8.375ZM11.0625 15.9375C12.4042 15.9375 13.5417 15.4563 14.475 14.4938C15.4083 13.5313 15.875 12.375 15.875 11.025V10.25H6.125V11.025C6.125 12.3917 6.60625 13.5521 7.56875 14.5063C8.53125 15.4604 9.69583 15.9375 11.0625 15.9375ZM17.75 8.375H18.3875C18.8375 8.375 19.2 8.19792 19.475 7.84375C19.75 7.48958 19.8875 7.07917 19.8875 6.6125C19.8875 6.19583 19.7417 5.84375 19.45 5.55625C19.1583 5.26875 18.8042 5.125 18.3875 5.125H17.75V8.375ZM5.1875 20.75C4.92917 20.75 4.70833 20.6583 4.525 20.475C4.34167 20.2917 4.25 20.0708 4.25 19.8125C4.25 19.5542 4.34167 19.3333 4.525 19.15C4.70833 18.9667 4.92917 18.875 5.1875 18.875H18.8125C19.0708 18.875 19.2917 18.9667 19.475 19.15C19.6583 19.3333 19.75 19.5542 19.75 19.8125C19.75 20.0708 19.6583 20.2917 19.475 20.475C19.2917 20.6583 19.0708 20.75 18.8125 20.75H5.1875Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

40
components/Icons/Concierge.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ConciergeIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11950"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11950)">
<path
d="M11 21.7501C10.7417 21.7501 10.5208 21.6584 10.3375 21.4751C10.1542 21.2918 10.0625 21.0709 10.0625 20.8126C10.0625 20.5543 10.1542 20.3334 10.3375 20.1501C10.5208 19.9668 10.7417 19.8751 11 19.8751H22C22.2583 19.8751 22.4792 19.9668 22.6625 20.1501C22.8458 20.3334 22.9375 20.5543 22.9375 20.8126C22.9375 21.0709 22.8458 21.2918 22.6625 21.4751C22.4792 21.6584 22.2583 21.7501 22 21.7501H11ZM11.0625 19.0001C11.0625 17.6501 11.4875 16.4772 12.3375 15.4813C13.1875 14.4855 14.2625 13.8751 15.5625 13.6501V12.9876C15.5625 12.7293 15.6542 12.5084 15.8375 12.3251C16.0208 12.1418 16.2417 12.0501 16.5 12.0501C16.7583 12.0501 16.9792 12.1418 17.1625 12.3251C17.3458 12.5084 17.4375 12.7293 17.4375 12.9876V13.6501C18.7208 13.8751 19.7917 14.4855 20.65 15.4813C21.5083 16.4772 21.9375 17.6501 21.9375 19.0001H11.0625ZM13.475 17.1126H19.4875C19.1792 16.6126 18.7625 16.2063 18.2375 15.8938C17.7125 15.5813 17.1337 15.4251 16.501 15.4251C15.8504 15.4251 15.2604 15.5813 14.7312 15.8938C14.2021 16.2063 13.7833 16.6126 13.475 17.1126ZM1.25 10.8751V4.0751C1.25 3.55946 1.43359 3.11806 1.80077 2.75087C2.16796 2.38369 2.60937 2.2001 3.125 2.2001H5.0875C5.49583 2.2001 5.87917 2.33551 6.2375 2.60635C6.59583 2.87718 6.84167 3.20843 6.975 3.6001L13.3875 1.8001C13.5589 1.7501 13.7381 1.7251 13.925 1.7251C14.1119 1.7251 14.2911 1.75426 14.4625 1.8126L21.075 3.8876C21.2762 3.9516 21.4348 4.0676 21.5509 4.2356C21.667 4.4036 21.725 4.5876 21.725 4.7876V5.0876C21.725 5.87926 21.4479 6.54593 20.8938 7.0876C20.3396 7.62926 19.6667 7.9001 18.875 7.9001H16.8V8.2001C16.8 8.68343 16.6646 9.12718 16.3938 9.53135C16.1229 9.93551 15.7583 10.2209 15.3 10.3876L9.25285 12.6406C9.14262 12.6719 9.03542 12.698 8.93125 12.7188C8.82708 12.7397 8.71667 12.7501 8.6 12.7501H3.125C2.60937 12.7501 2.16796 12.5665 1.80077 12.1993C1.43359 11.8321 1.25 11.3907 1.25 10.8751ZM3.125 10.8751H5.1V4.0751H3.125V10.8751ZM6.975 10.8751H8.6L14.3523 8.78592C14.5341 8.72037 14.675 8.60426 14.775 8.4376C14.875 8.27093 14.925 8.09176 14.925 7.9001H13.15L11.1875 8.5501C10.9356 8.63343 10.6956 8.61468 10.4674 8.49385C10.2391 8.37301 10.0833 8.18343 10 7.9251C9.925 7.6751 9.94194 7.43873 10.0508 7.216C10.1597 6.99328 10.3386 6.84215 10.5875 6.7626L12.75 6.0251H18.875C19.0333 6.0251 19.2188 5.96847 19.4312 5.85522C19.6437 5.74196 19.75 5.60691 19.75 5.4501L13.875 3.6251L6.975 5.5251V10.8751Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/DoorOpen.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CoffeeIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11985"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11985)">
<path
d="M4.2124 20.75C3.95407 20.75 3.73324 20.6583 3.5499 20.475C3.36657 20.2916 3.2749 20.0708 3.2749 19.8125C3.2749 19.5541 3.36657 19.3333 3.5499 19.15C3.73324 18.9666 3.95407 18.875 4.2124 18.875H5.2499V4.16248C5.2499 3.90414 5.34157 3.68331 5.5249 3.49998C5.70824 3.31664 5.92907 3.22498 6.1874 3.22498H13.9749C14.237 3.22498 14.4567 3.31363 14.634 3.49093C14.8113 3.66821 14.8999 3.88789 14.8999 4.14998V4.19998H17.8249C18.087 4.19998 18.3067 4.28863 18.484 4.46593C18.6613 4.64321 18.7499 4.86289 18.7499 5.12498V18.875H19.7874C20.0457 18.875 20.2666 18.9666 20.4499 19.15C20.6332 19.3333 20.7249 19.5541 20.7249 19.8125C20.7249 20.0708 20.6332 20.2916 20.4499 20.475C20.2666 20.6583 20.0457 20.75 19.7874 20.75H17.7999C17.5378 20.75 17.3181 20.6613 17.1409 20.4841C16.9636 20.3068 16.8749 20.0871 16.8749 19.825V6.07498H14.8999V19.825C14.8999 20.0871 14.8113 20.3068 14.634 20.4841C14.4567 20.6613 14.237 20.75 13.9749 20.75H4.2124ZM12.0499 12.0013C12.0499 11.7254 11.9566 11.4937 11.77 11.3062C11.5833 11.1187 11.3521 11.025 11.0762 11.025C10.8003 11.025 10.5687 11.1183 10.3812 11.3049C10.1937 11.4915 10.0999 11.7228 10.0999 11.9987C10.0999 12.2745 10.1932 12.5062 10.3798 12.6937C10.5665 12.8812 10.7977 12.975 11.0736 12.975C11.3495 12.975 11.5812 12.8817 11.7687 12.6951C11.9562 12.5084 12.0499 12.2772 12.0499 12.0013ZM7.1249 18.875H13.0249V5.09998H7.1249V18.875Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

40
components/Icons/ElectricBike.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ElectricBikeIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11973"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11973)">
<path
d="M5.125 16.875C3.75 16.875 2.59375 16.4062 1.65625 15.4687C0.71875 14.5312 0.25 13.375 0.25 12C0.25 10.625 0.72775 9.46453 1.68325 8.5187C2.63875 7.57287 3.79433 7.09995 5.15 7.09995C6.35833 7.09995 7.39792 7.47912 8.26875 8.23745C9.13958 8.99578 9.68333 9.93328 9.9 11.05H10.65L8.85 6.02495H8.0625C7.80417 6.02495 7.58333 5.93328 7.4 5.74995C7.21667 5.56662 7.125 5.34578 7.125 5.08745C7.125 4.82912 7.21667 4.60828 7.4 4.42495C7.58333 4.24162 7.80417 4.14995 8.0625 4.14995H11.0375C11.2958 4.14995 11.5167 4.24162 11.7 4.42495C11.8833 4.60828 11.975 4.82912 11.975 5.08745C11.975 5.34578 11.8833 5.56662 11.7 5.74995C11.5167 5.93328 11.2958 6.02495 11.0375 6.02495H10.85L11.225 7.09995H16.075L14.6 3.07495H12.9875C12.7292 3.07495 12.5083 2.98328 12.325 2.79995C12.1417 2.61662 12.05 2.39578 12.05 2.13745C12.05 1.87912 12.1417 1.65828 12.325 1.47495C12.5083 1.29162 12.7292 1.19995 12.9875 1.19995H14.575C14.9922 1.19995 15.3652 1.31037 15.6941 1.5312C16.023 1.75203 16.2583 2.05828 16.4 2.44995L18.075 7.07495H18.9C20.2487 7.07495 21.3984 7.55043 22.3491 8.5014C23.2997 9.45237 23.775 10.6025 23.775 11.9517C23.775 13.3172 23.3021 14.4791 22.3563 15.4375C21.4104 16.3958 20.2563 16.875 18.8938 16.875C17.7259 16.875 16.7 16.5046 15.816 15.764C14.932 15.0234 14.3683 14.077 14.125 12.925H9.9C9.68333 14.0666 9.13489 15.0104 8.25468 15.7562C7.37446 16.502 6.33123 16.875 5.125 16.875ZM5.125 15C5.80833 15 6.4 14.8062 6.9 14.4187C7.4 14.0312 7.75 13.5333 7.95 12.925H6.1125C5.85417 12.925 5.63333 12.8333 5.45 12.65C5.26667 12.4666 5.175 12.2458 5.175 11.9875C5.175 11.7291 5.26667 11.5083 5.45 11.325C5.63333 11.1416 5.85417 11.05 6.1125 11.05H7.95C7.75 10.425 7.4 9.92703 6.9 9.5562C6.4 9.18537 5.80833 8.99995 5.125 8.99995C4.275 8.99995 3.5625 9.28745 2.9875 9.86245C2.4125 10.4375 2.125 11.15 2.125 12C2.125 12.8416 2.4125 13.552 2.9875 14.1312C3.5625 14.7104 4.275 15 5.125 15ZM12.6747 11.05H14.1209C14.207 10.6666 14.3271 10.2958 14.4812 9.93745C14.6354 9.57912 14.8417 9.25828 15.1 8.97495H11.9L12.6747 11.05ZM18.9 15C19.75 15 20.4625 14.7104 21.0375 14.1312C21.6125 13.552 21.9 12.8416 21.9 12C21.9 11.15 21.6125 10.4375 21.0375 9.86245C20.4625 9.28745 19.75 8.99995 18.9 8.99995H18.75L19.4 10.75C19.4917 11 19.4831 11.2389 19.3742 11.4667C19.2653 11.6946 19.0864 11.8557 18.8375 11.95C18.5875 12.0416 18.3462 12.033 18.1136 11.9241C17.8809 11.8152 17.7181 11.6363 17.625 11.3875L17 9.64995C16.6417 9.93328 16.3688 10.275 16.1813 10.675C15.9938 11.075 15.9 11.5182 15.9 12.0046C15.9 12.8432 16.1875 13.552 16.7625 14.1312C17.3375 14.7104 18.05 15 18.9 15ZM12.975 20.85V22.05C12.975 22.2213 12.9021 22.3538 12.7563 22.4472C12.6104 22.5407 12.4583 22.5458 12.3 22.4625L8.0375 20.325C7.92917 20.2666 7.88693 20.177 7.9108 20.0562C7.93467 19.9354 8.01023 19.875 8.1375 19.875H11.05V18.675C11.05 18.5036 11.1229 18.3711 11.2688 18.2777C11.4146 18.1842 11.5667 18.1791 11.725 18.2625L15.9875 20.4C16.0958 20.4583 16.1381 20.5479 16.1142 20.6687C16.0903 20.7895 16.0148 20.85 15.8875 20.85H12.975Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/Fitness.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function FitnessIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11977"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11977)">
<path
d="M7.11239 8.42495L4.28739 11.25C4.10406 11.4333 3.88114 11.527 3.61864 11.5312C3.35614 11.5354 3.12906 11.4416 2.93739 11.25C2.75406 11.0666 2.66031 10.8437 2.65614 10.5812C2.65198 10.3187 2.74156 10.0916 2.92489 9.89995L3.66239 9.14995L2.97489 8.46245C2.78323 8.27078 2.68739 8.04995 2.68739 7.79995C2.68739 7.54995 2.78323 7.32912 2.97489 7.13745L4.39989 5.71245L3.68739 4.98745C3.51239 4.81245 3.42489 4.59787 3.42489 4.3437C3.42489 4.08953 3.51656 3.87078 3.69989 3.68745C3.87489 3.51245 4.08948 3.42287 4.34364 3.4187C4.59781 3.41453 4.81656 3.49995 4.99989 3.67495L5.72489 4.38745L7.14989 2.96245C7.34156 2.77078 7.56239 2.67495 7.81239 2.67495C8.06239 2.67495 8.28323 2.77078 8.4749 2.96245L9.1624 3.64995L9.9124 2.91245C10.0957 2.72912 10.3186 2.63745 10.5811 2.63745C10.8436 2.63745 11.0707 2.73328 11.2624 2.92495C11.4457 3.10828 11.5374 3.33328 11.5374 3.59995C11.5374 3.86662 11.4457 4.09162 11.2624 4.27495L8.43739 7.09995L16.8874 15.55L19.7124 12.725C19.8957 12.5416 20.1186 12.4479 20.3811 12.4437C20.6436 12.4395 20.8707 12.5333 21.0624 12.725C21.2457 12.9083 21.3395 13.1312 21.3436 13.3937C21.3478 13.6562 21.2582 13.8833 21.0749 14.075L20.3374 14.825L21.0249 15.5125C21.2166 15.7041 21.3124 15.925 21.3124 16.175C21.3124 16.425 21.2166 16.6458 21.0249 16.8375L19.5999 18.2625L20.3124 18.9875C20.4874 19.1625 20.5749 19.377 20.5749 19.6312C20.5749 19.8854 20.4832 20.1041 20.2999 20.2875C20.1249 20.4625 19.9103 20.552 19.6561 20.5562C19.402 20.5604 19.1832 20.475 18.9999 20.3L18.2749 19.5875L16.8499 21.0125C16.6582 21.2041 16.4374 21.3 16.1874 21.3C15.9374 21.3 15.7166 21.2041 15.5249 21.0125L14.8374 20.325L14.0874 21.0625C13.9041 21.2458 13.6811 21.3375 13.4186 21.3375C13.1561 21.3375 12.9291 21.2416 12.7374 21.05C12.5541 20.8666 12.4624 20.6416 12.4624 20.375C12.4624 20.1083 12.5541 19.8833 12.7374 19.7L15.5624 16.875L7.11239 8.42495Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/Parking.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ParkingIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_554_11891"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11891)">
<path
d="M9.94995 14.9V18.875C9.94995 19.3906 9.76625 19.832 9.39885 20.1992C9.03143 20.5664 8.58977 20.75 8.07385 20.75C7.55792 20.75 7.11662 20.5664 6.74995 20.1992C6.38328 19.832 6.19995 19.3906 6.19995 18.875V5.125C6.19995 4.60937 6.38354 4.16796 6.75073 3.80078C7.11791 3.43359 7.55932 3.25 8.07495 3.25H13C14.6 3.25 15.9666 3.82083 17.1 4.9625C18.2333 6.10417 18.8 7.475 18.8 9.075C18.8 10.675 18.2333 12.0458 17.1 13.1875C15.9666 14.3292 14.6 14.9 13 14.9H9.94995ZM9.94995 11.15H13.075C13.6456 11.15 14.1341 10.9468 14.5404 10.5405C14.9468 10.1341 15.15 9.64562 15.15 9.075C15.15 8.50438 14.9468 8.01589 14.5404 7.60952C14.1341 7.20317 13.6456 7 13.075 7H9.94995V11.15Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/Pets.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function PetsIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11943"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11943)">
<path
d="M4.6251 12.05C3.95843 12.05 3.39176 11.8166 2.9251 11.35C2.45843 10.8833 2.2251 10.3166 2.2251 9.64995C2.2251 8.98328 2.45843 8.41662 2.9251 7.94995C3.39176 7.48328 3.95843 7.24995 4.6251 7.24995C5.29176 7.24995 5.85843 7.48328 6.3251 7.94995C6.79176 8.41662 7.0251 8.98328 7.0251 9.64995C7.0251 10.3166 6.79176 10.8833 6.3251 11.35C5.85843 11.8166 5.29176 12.05 4.6251 12.05ZM9.0501 8.12495C8.38343 8.12495 7.81676 7.89162 7.3501 7.42495C6.88343 6.95828 6.6501 6.39162 6.6501 5.72495C6.6501 5.05828 6.88343 4.49162 7.3501 4.02495C7.81676 3.55828 8.38343 3.32495 9.0501 3.32495C9.71676 3.32495 10.2834 3.55828 10.7501 4.02495C11.2168 4.49162 11.4501 5.05828 11.4501 5.72495C11.4501 6.39162 11.2168 6.95828 10.7501 7.42495C10.2834 7.89162 9.71676 8.12495 9.0501 8.12495ZM14.9751 8.12495C14.3084 8.12495 13.7418 7.89162 13.2751 7.42495C12.8084 6.95828 12.5751 6.39162 12.5751 5.72495C12.5751 5.05828 12.8084 4.49162 13.2751 4.02495C13.7418 3.55828 14.3084 3.32495 14.9751 3.32495C15.6418 3.32495 16.2084 3.55828 16.6751 4.02495C17.1418 4.49162 17.3751 5.05828 17.3751 5.72495C17.3751 6.39162 17.1418 6.95828 16.6751 7.42495C16.2084 7.89162 15.6418 8.12495 14.9751 8.12495ZM19.4001 12.05C18.7334 12.05 18.1668 11.8166 17.7001 11.35C17.2334 10.8833 17.0001 10.3166 17.0001 9.64995C17.0001 8.98328 17.2334 8.41662 17.7001 7.94995C18.1668 7.48328 18.7334 7.24995 19.4001 7.24995C20.0668 7.24995 20.6334 7.48328 21.1001 7.94995C21.5668 8.41662 21.8001 8.98328 21.8001 9.64995C21.8001 10.3166 21.5668 10.8833 21.1001 11.35C20.6334 11.8166 20.0668 12.05 19.4001 12.05ZM6.7559 21.925C6.0187 21.925 5.40426 21.6474 4.9126 21.0922C4.42093 20.537 4.1751 19.8813 4.1751 19.125C4.1751 18.2666 4.4626 17.5187 5.0376 16.8812C5.6126 16.2437 6.19176 15.615 6.7751 14.995C7.25843 14.4893 7.6751 13.9387 8.0251 13.3432C8.3751 12.7477 8.78343 12.1833 9.2501 11.65C9.60843 11.2416 10.0188 10.8979 10.4813 10.6187C10.9438 10.3395 11.4506 10.2 12.0015 10.2C12.5524 10.2 13.0628 10.3333 13.5327 10.6C14.0026 10.8666 14.4168 11.2083 14.7751 11.625C15.2418 12.15 15.6522 12.7125 16.0063 13.3125C16.3605 13.9125 16.7755 14.4753 17.2513 15.001C17.8255 15.6253 18.4022 16.2541 18.9813 16.8875C19.5605 17.5208 19.8501 18.2666 19.8501 19.125C19.8501 19.8813 19.6043 20.537 19.1126 21.0922C18.6209 21.6474 18.0073 21.925 17.2718 21.925C16.3892 21.925 15.5147 21.85 14.6484 21.7C13.7822 21.55 12.9077 21.475 12.0251 21.475C11.1334 21.475 10.2535 21.55 9.38522 21.7C8.51697 21.85 7.64053 21.925 6.7559 21.925Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

40
components/Icons/Restaurant.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function RestaurantIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11957"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11957)">
<path
d="M11.9626 13.3501L5.15008 20.1376C4.96675 20.3209 4.748 20.4146 4.49383 20.4188C4.23966 20.423 4.01675 20.3292 3.82508 20.1376C3.64175 19.9542 3.55008 19.7334 3.55008 19.4751C3.55008 19.2167 3.64175 18.9959 3.82508 18.8126L13.2626 9.40006C12.9626 8.70007 12.9188 7.92298 13.1313 7.06881C13.3438 6.21465 13.8042 5.44173 14.5126 4.75007C15.3542 3.9084 16.3063 3.40632 17.3688 3.24382C18.4313 3.08132 19.2959 3.3334 19.9626 4.00007C20.6292 4.66673 20.8813 5.53131 20.7188 6.59381C20.5563 7.65631 20.0542 8.6084 19.2126 9.45007C18.5209 10.1584 17.748 10.6188 16.8938 10.8313C16.0397 11.0438 15.2626 11.0001 14.5626 10.7001L13.2876 12.0001L20.1126 18.8251C20.2876 19.0001 20.3772 19.2146 20.3813 19.4688C20.3855 19.723 20.2959 19.9459 20.1126 20.1376C19.9376 20.3209 19.7209 20.4126 19.4626 20.4126C19.2042 20.4126 18.9834 20.3209 18.8001 20.1376L11.9626 13.3501ZM7.38758 12.3751L4.46258 9.45007C3.77925 8.76673 3.35008 7.9084 3.17508 6.87506C3.00008 5.84173 3.20425 4.91673 3.78758 4.10007C3.96258 3.8584 4.19383 3.72715 4.48133 3.70632C4.76883 3.68548 5.01258 3.77923 5.21258 3.98757L10.4876 9.30007L7.38758 12.3751Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

40
components/Icons/TshirtWash.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function TshirtWashIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11981"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11981)">
<path
d="M4.85 9.3875L7.9375 7.675V13.425C7.6125 13.4583 7.29375 13.5104 6.98125 13.5813C6.66875 13.6521 6.3625 13.75 6.0625 13.875V10.875L4.95 11.475C4.725 11.6 4.48958 11.6271 4.24375 11.5563C3.99791 11.4854 3.8125 11.3417 3.6875 11.125L1.6875 7.625C1.55416 7.4 1.52291 7.16458 1.59375 6.91875C1.66458 6.67292 1.8125 6.48333 2.0375 6.35L7.0875 3.4375C7.2625 3.3375 7.44583 3.25 7.6375 3.175C7.82916 3.1 8.02916 3.0625 8.2375 3.0625C8.4625 3.0625 8.65833 3.125 8.825 3.25C8.99166 3.375 9.11666 3.5375 9.2 3.7375C9.45833 4.37917 9.79583 4.92708 10.2125 5.38125C10.6292 5.83542 11.225 6.0625 12 6.0625C12.775 6.0625 13.3708 5.83542 13.7875 5.38125C14.2042 4.92708 14.5417 4.37917 14.8 3.7375C14.8833 3.5375 15.0125 3.375 15.1875 3.25C15.3625 3.125 15.5625 3.0625 15.7875 3.0625C15.9958 3.0625 16.1917 3.1 16.375 3.175C16.5583 3.25 16.7375 3.3375 16.9125 3.4375L21.975 6.35C22.2 6.48333 22.3458 6.67292 22.4125 6.91875C22.4792 7.16458 22.4458 7.4 22.3125 7.625L20.3125 11.125C20.1875 11.3417 20.0021 11.4854 19.7562 11.5563C19.5104 11.6271 19.275 11.6 19.05 11.475L17.9375 10.875V15.8L16.3875 17.1375C16.3375 17.1792 16.2875 17.2167 16.2375 17.25C16.1875 17.2833 16.1292 17.3125 16.0625 17.3375V7.675L19.15 9.3875L20.2125 7.525L16.275 5.2375C15.8667 6.0625 15.2792 6.71875 14.5125 7.20625C13.7458 7.69375 12.9083 7.9375 12 7.9375C11.1 7.9375 10.2667 7.69375 9.5 7.20625C8.73333 6.71875 8.14166 6.0625 7.725 5.2375L3.7625 7.525L4.85 9.3875ZM4.05 18.3875C3.875 18.1875 3.8 17.9583 3.825 17.7C3.85 17.4417 3.9625 17.225 4.1625 17.05L5.5625 15.85C5.94583 15.5167 6.38333 15.2646 6.875 15.0938C7.36666 14.9229 7.86666 14.8375 8.375 14.8375C8.88333 14.8375 9.37916 14.9229 9.8625 15.0938C10.3458 15.2646 10.7792 15.5167 11.1625 15.85L14.0625 18.325C14.2792 18.5 14.525 18.6333 14.8 18.725C15.075 18.8167 15.3583 18.8625 15.65 18.8625C15.9417 18.8625 16.2229 18.8188 16.4937 18.7313C16.7646 18.6438 17.0042 18.5083 17.2125 18.325L18.6125 17.1125C18.8125 16.9375 19.0417 16.8604 19.3 16.8813C19.5583 16.9021 19.775 17.0125 19.95 17.2125C20.125 17.4125 20.2 17.6417 20.175 17.9C20.15 18.1583 20.0375 18.375 19.8375 18.55L18.4375 19.75C18.0542 20.0833 17.6208 20.3313 17.1375 20.4938C16.6542 20.6563 16.1583 20.7375 15.65 20.7375C15.1417 20.7375 14.6417 20.6563 14.15 20.4938C13.6583 20.3313 13.2208 20.0833 12.8375 19.75L9.9375 17.275C9.72916 17.1 9.48958 16.9667 9.21875 16.875C8.94791 16.7833 8.66666 16.7375 8.375 16.7375C8.08333 16.7375 7.8 16.7833 7.525 16.875C7.25 16.9667 7.00416 17.1 6.7875 17.275L5.3625 18.475C5.1625 18.6417 4.9375 18.7188 4.6875 18.7063C4.4375 18.6938 4.225 18.5875 4.05 18.3875Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

36
components/Icons/Wifi.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function BarIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<mask
id="mask0_554_11965"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_554_11965)">
<path
d="M11.9999 20.6875C11.3332 20.6875 10.7707 20.4584 10.3124 20C9.85406 19.5417 9.62489 18.9792 9.62489 18.3125C9.62489 17.6459 9.85406 17.0834 10.3124 16.625C10.7707 16.1667 11.3332 15.9375 11.9999 15.9375C12.6666 15.9375 13.2291 16.1667 13.6874 16.625C14.1457 17.0834 14.3749 17.6459 14.3749 18.3125C14.3749 18.9792 14.1457 19.5417 13.6874 20C13.2291 20.4584 12.6666 20.6875 11.9999 20.6875ZM11.9999 10.05C13.2249 10.05 14.3853 10.2459 15.4811 10.6375C16.577 11.0292 17.5707 11.5709 18.4624 12.2625C18.7707 12.5042 18.9332 12.8125 18.9499 13.1875C18.9666 13.5625 18.8332 13.8917 18.5499 14.175C18.2832 14.4417 17.9561 14.5813 17.5686 14.5938C17.1811 14.6063 16.8332 14.5 16.5249 14.275C15.8916 13.825 15.1916 13.4771 14.4249 13.2313C13.6582 12.9855 12.8499 12.8625 11.9999 12.8625C11.1499 12.8625 10.3416 12.9855 9.57489 13.2313C8.80822 13.4771 8.10822 13.825 7.47489 14.275C7.16655 14.5 6.81864 14.6042 6.43114 14.5875C6.04364 14.5709 5.71655 14.4292 5.44989 14.1625C5.17489 13.8792 5.04364 13.55 5.05614 13.175C5.06864 12.8 5.22905 12.4917 5.53739 12.25C6.42905 11.5584 7.42281 11.0188 8.51864 10.6313C9.61447 10.2438 10.7749 10.05 11.9999 10.05ZM11.9999 4.42505C13.9999 4.42505 15.8874 4.75838 17.6624 5.42505C19.4374 6.09172 21.0291 7.02922 22.4374 8.23755C22.7457 8.49588 22.9061 8.8188 22.9186 9.2063C22.9311 9.5938 22.7999 9.92505 22.5249 10.2C22.2582 10.4667 21.9291 10.6042 21.5374 10.6125C21.1457 10.6209 20.7957 10.5 20.4874 10.25C19.3124 9.29172 18.0082 8.55005 16.5749 8.02505C15.1416 7.50005 13.6166 7.23755 11.9999 7.23755C10.3832 7.23755 8.85822 7.50005 7.42489 8.02505C5.99155 8.55005 4.68739 9.29172 3.51239 10.25C3.20405 10.5 2.85405 10.6209 2.46239 10.6125C2.07072 10.6042 1.74155 10.4667 1.47489 10.2C1.19989 9.92505 1.06864 9.5938 1.08114 9.2063C1.09364 8.8188 1.25405 8.49588 1.56239 8.23755C2.97072 7.02922 4.56239 6.09172 6.33739 5.42505C8.11239 4.75838 9.99989 4.42505 11.9999 4.42505Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

106
components/Icons/get-icon-by-icon-name.ts Normal file
View File

@@ -0,0 +1,106 @@
import { FC } from "react"
import {
AccessibilityIcon,
AccountCircleIcon,
ArrowRightIcon,
BarIcon,
BikingIcon,
CalendarIcon,
CellphoneIcon,
CheckCircleIcon,
CheckIcon,
ChevronDownIcon,
ChevronRightIcon,
CloseIcon,
CoffeeIcon,
ConciergeIcon,
DoorOpenIcon,
ElectricBikeIcon,
EmailIcon,
FitnessIcon,
GlobeIcon,
HouseIcon,
InfoCircleIcon,
LocationIcon,
LockIcon,
ParkingIcon,
PersonIcon,
PetsIcon,
PhoneIcon,
PlusCircleIcon,
RestaurantIcon,
TshirtWashIcon,
WifiIcon,
} from "."
import { IconName, IconProps } from "@/types/components/icon"
export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
switch (icon) {
case IconName.Accessibility:
return AccessibilityIcon
case IconName.AccountCircle:
return AccountCircleIcon
case IconName.ArrowRight:
return ArrowRightIcon
case IconName.Bar:
return BarIcon
case IconName.Biking:
return BikingIcon
case IconName.Calendar:
return CalendarIcon
case IconName.Cellphone:
return CellphoneIcon
case IconName.Check:
return CheckIcon
case IconName.CheckCircle:
return CheckCircleIcon
case IconName.ChevronDown:
return ChevronDownIcon
case IconName.ChevronRight:
return ChevronRightIcon
case IconName.Close:
return CloseIcon
case IconName.Coffee:
return CoffeeIcon
case IconName.Concierge:
return ConciergeIcon
case IconName.DoorOpen:
return DoorOpenIcon
case IconName.ElectricBike:
return ElectricBikeIcon
case IconName.Email:
return EmailIcon
case IconName.Fitness:
return FitnessIcon
case IconName.Globe:
return GlobeIcon
case IconName.House:
return HouseIcon
case IconName.InfoCircle:
return InfoCircleIcon
case IconName.Location:
return LocationIcon
case IconName.Lock:
return LockIcon
case IconName.Parking:
return ParkingIcon
case IconName.Person:
return PersonIcon
case IconName.Pets:
return PetsIcon
case IconName.Phone:
return PhoneIcon
case IconName.PlusCircle:
return PlusCircleIcon
case IconName.Restaurant:
return RestaurantIcon
case IconName.TshirtWash:
return TshirtWashIcon
case IconName.Wifi:
return WifiIcon
default:
return null
}
}

13
components/Icons/index.tsx
View File

@@ -1,5 +1,8 @@
export { default as AccessibilityIcon } from "./Accessibility"
export { default as AccountCircleIcon } from "./AccountCircle"
export { default as ArrowRightIcon } from "./ArrowRight"
export { default as BarIcon } from "./Bar"
export { default as BikingIcon } from "./Biking"
export { default as CalendarIcon } from "./Calendar"
export { default as CellphoneIcon } from "./Cellphone"
export { default as CheckIcon } from "./Check"
@@ -7,12 +10,22 @@ export { default as CheckCircleIcon } from "./CheckCircle"
export { default as ChevronDownIcon } from "./ChevronDown"
export { default as ChevronRightIcon } from "./ChevronRight"
export { default as CloseIcon } from "./Close"
export { default as CoffeeIcon } from "./Coffee"
export { default as ConciergeIcon } from "./Concierge"
export { default as DoorOpenIcon } from "./DoorOpen"
export { default as ElectricBikeIcon } from "./ElectricBike"
export { default as EmailIcon } from "./Email"
export { default as FitnessIcon } from "./Fitness"
export { default as GlobeIcon } from "./Globe"
export { default as HouseIcon } from "./House"
export { default as InfoCircleIcon } from "./InfoCircle"
export { default as LocationIcon } from "./Location"
export { default as LockIcon } from "./Lock"
export { default as ParkingIcon } from "./Parking"
export { default as PersonIcon } from "./Person"
export { default as PetsIcon } from "./Pets"
export { default as PhoneIcon } from "./Phone"
export { default as PlusCircleIcon } from "./PlusCircle"
export { default as RestaurantIcon } from "./Restaurant"
export { default as TshirtWashIcon } from "./TshirtWash"
export { default as WifiIcon } from "./Wifi"

62
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css Normal file
View File

@@ -0,0 +1,62 @@
.accordionItem {
border-bottom: 1px solid var(--Base-Border-Subtle);
}
.accordionItem.card {
padding: var(--Spacing-x1);
}
.accordionItem.light {
background-color: var(--Base-Surface-Primary-Normal);
}
.accordionItem.subtle {
background-color: var(--Base-Background-Normal);
}
.summary {
position: relative;
display: flex;
align-items: center;
gap: var(--Spacing-x1);
cursor: pointer;
color: var(--Base-Text-High-contrast);
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
transition: background-color 0.3s;
}
.summary:hover,
.accordionItem details[open] .summary {
background-color: var(--Base-Surface-Primary-light-Hover-alt, #f2ece6);
}
.accordionItem.light .summary:hover,
.accordionItem.light details[open] .summary {
background-color: var(--Base-Surface-Primary-light-Hover, #f9f6f4);
}
.accordionItem.subtle .summary:hover,
.accordionItem.subtle details[open] .summary {
background-color: var(--Base-Surface-Primary-Normal);
}
.accordionItem.card .summary {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border-radius: var(--Corner-radius-Medium);
}
.title {
flex-grow: 1;
}
.content {
padding: 0 var(--Spacing-x-one-and-half);
overflow: hidden;
max-height: 0;
transition: max-height 0.3s;
}
.chevron {
transition: transform 0.3s;
}
details[open] .chevron {
transform: rotate(180deg);
}

12
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts Normal file
View File

@@ -0,0 +1,12 @@
import { VariantProps } from "class-variance-authority"
import { accordionItemVariants } from "./variants"
import { IconName } from "@/types/components/icon"
export interface AccordionItemProps
extends React.HtmlHTMLAttributes<HTMLDetailsElement>,
VariantProps<typeof accordionItemVariants> {
title: string
icon?: IconName
}

59
components/TempDesignSystem/Accordion/AccordionItem/index.tsx Normal file
View File

@@ -0,0 +1,59 @@
"use client"
import { useRef } from "react"
import { ChevronDownIcon } from "@/components/Icons"
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import { AccordionItemProps } from "./accordionItem"
import { accordionItemVariants } from "./variants"
import styles from "./accordionItem.module.css"
export default function AccordionItem({
children,
icon,
title,
theme,
variant,
}: AccordionItemProps) {
const contentRef = useRef<HTMLDivElement>(null)
const detailsRef = useRef<HTMLDetailsElement>(null)
const IconComp = getIconByIconName(icon)
function toggleAccordion() {
const details = detailsRef.current
const content = contentRef.current
if (details && content) {
if (details.open) {
content.style.maxHeight = `${content.scrollHeight}px`
content.addEventListener(
"transitionend",
() => {
// Remove maxHeight after transition to allow content to transition multiple times
content.style.maxHeight = "none"
},
{ once: true }
)
} else {
content.style.maxHeight = "0"
}
}
}
return (
<li className={accordionItemVariants({ variant, theme })}>
<details ref={detailsRef} onToggle={toggleAccordion}>
<summary className={styles.summary}>
{IconComp && <IconComp className={styles.icon} color="burgundy" />}
<span className={styles.title}>{title}</span>
<ChevronDownIcon className={styles.chevron} color="burgundy" />
</summary>
<div ref={contentRef} className={styles.content}>
{children}
</div>
</details>
</li>
)
}

20
components/TempDesignSystem/Accordion/AccordionItem/variants.ts Normal file
View File

@@ -0,0 +1,20 @@
import { cva } from "class-variance-authority"
import styles from "./accordionItem.module.css"
export const accordionItemVariants = cva(styles.accordionItem, {
variants: {
variant: {
card: styles.card,
},
theme: {
default: styles.default,
light: styles.light,
subtle: styles.subtle,
},
},
defaultVariants: {
variant: "card",
theme: "default",
},
})

14
components/TempDesignSystem/Accordion/accordion.module.css Normal file
View File

@@ -0,0 +1,14 @@
.accordion {
list-style: none;
}
.accordion.card {
border-radius: var(--Corner-radius-Medium);
}
.accordion.light {
background-color: var(--Base-Surface-Primary-Normal);
}
.accordion.subtle {
background-color: var(--Base-Background-Normal);
}

7
components/TempDesignSystem/Accordion/accordion.ts Normal file
View File

@@ -0,0 +1,7 @@
import { VariantProps } from "class-variance-authority"
import { accordionVariants } from "./variants"
export interface AccordionProps
extends React.HtmlHTMLAttributes<HTMLUListElement>,
VariantProps<typeof accordionVariants> {}

24
components/TempDesignSystem/Accordion/index.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Children, cloneElement, isValidElement } from "react"
import { AccordionItemProps } from "./AccordionItem/accordionItem"
import { AccordionProps } from "./accordion"
import { accordionVariants } from "./variants"
export default function Accordion({
children,
className,
theme,
variant,
}: AccordionProps) {
return (
<ul className={accordionVariants({ className, variant, theme })}>
{Children.map(children, (child) => {
if (isValidElement<AccordionItemProps>(child)) {
return cloneElement(child, { variant, theme })
} else {
return child
}
})}
</ul>
)
}

20
components/TempDesignSystem/Accordion/variants.ts Normal file
View File

@@ -0,0 +1,20 @@
import { cva } from "class-variance-authority"
import styles from "./accordion.module.css"
export const accordionVariants = cva(styles.accordion, {
variants: {
variant: {
card: styles.card,
},
theme: {
default: styles.default,
light: styles.light,
subtle: styles.subtle,
},
},
defaultVariants: {
variant: "card",
theme: "default",
},
})

34
types/components/icon.ts
View File

@@ -5,3 +5,37 @@ import { iconVariants } from "@/components/Icons/variants"
export interface IconProps
extends Omit<React.SVGAttributes<HTMLOrSVGElement>, "color">,
VariantProps<typeof iconVariants> {}
export enum IconName {
Accessibility = "Accessibility",
AccountCircle = "AccountCircle",
ArrowRight = "ArrowRight",
Bar = "Bar",
Biking = "Biking",
Calendar = "Calendar",
Cellphone = "Cellphone",
Check = "Check",
CheckCircle = "CheckCircle",
ChevronDown = "ChevronDown",
ChevronRight = "ChevronRight",
Close = "Close",
Coffee = "Coffee",
Concierge = "Concierge",
DoorOpen = "DoorOpen",
ElectricBike = "ElectricBike",
Email = "Email",
Fitness = "Fitness",
Globe = "Globe",
House = "House",
InfoCircle = "InfoCircle",
Location = "Location",
Lock = "Lock",
Parking = "Parking",
Person = "Person",
Pets = "Pets",
Phone = "Phone",
PlusCircle = "PlusCircle",
Restaurant = "Restaurant",
TshirtWash = "TshirtWash",
Wifi = "Wifi",
}