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

Merged in feat/sw-587-sidepeek-for-room (pull request #767)

Browse Source 
Create the sidepeek for a specific roomtype. This also changes the lightbox to use react-aria instead of radix-ui, so we use the same for the lightbox and the sidepeek. Works better together!


Approved-by: Bianca Widstam
This commit is contained in:
Niclas Edenvin
2024-10-25 14:11:06 +00:00
parent 830727f20d
commit 0efa52ada5
38 changed files with 1055 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/globals.css
View File

@@ -115,7 +115,8 @@
--header-z-index: 10;
--menu-overlay-z-index: 10;
--dialog-z-index: 9;
--sidepeek-z-index: 11;
--sidepeek-z-index: 100;
--lightbox-z-index: 150;
}
* {

1
components/HotelReservation/SelectRate/ImageGallery/index.tsx
View File

@@ -21,7 +21,6 @@ export default function ImageGallery({ images, title }: ImageGalleryProps) {
<Image
src={images[0].imageSizes.medium}
alt={images[0].metaData.altText}
className={styles.image}
fill
/>
<div className={styles.galleryIcon}>

17
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -5,14 +5,13 @@ import { useIntl } from "react-intl"
import { RateDefinition } from "@/server/routers/hotels/output"
import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import ImageGallery from "../../ImageGallery"
import RoomSidePeek from "../RoomSidePeek"
import styles from "./roomCard.module.css"
@@ -83,16 +82,10 @@ export default function RoomCard({
: `${roomSize?.min}-${roomSize?.max}`}
m²
</Caption>
<Button
intent="text"
type="button"
size="small"
theme="base"
className={styles.button}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
</Button>
<RoomSidePeek
selectedRoom={selectedRoom}
roomConfiguration={roomConfiguration}
/>
</div>
<div className={styles.container}>
<div className={styles.roomDetails}>

124
components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/facilityIcon.ts Normal file
View File

@@ -0,0 +1,124 @@
import { FC } from "react"
import {
AcIcon,
BathtubIcon,
BedDoubleIcon,
ChairIcon,
CityIcon,
DeskIcon,
HairdryerIcon,
HandSoapIcon,
HeartIcon,
IronIcon,
MirrorIcon,
NatureIcon,
NoSmokingIcon,
SafetyBoxIcon,
ShowerIcon,
StreetIcon,
WifiIcon,
WindowCurtainsAltIcon,
WindowNotAvailableIcon,
WineBarIcon,
WoodFloorIcon,
YardIcon,
} from "@/components/Icons"
import { IconProps } from "@/types/components/icon"
export function getFacilityIcon(name: string): FC<IconProps> | null {
const iconMappings = [
{
icon: DeskIcon,
texts: ["Desk and chair"],
},
{
icon: HairdryerIcon,
texts: ["Hairdryer"],
},
{
icon: AcIcon,
texts: ["Air Condition"],
},
{
icon: ChairIcon,
texts: ["Armchair / armchairs"],
},
{
icon: BathtubIcon,
texts: ["Bathroom with shower or bathtub"],
},
{
icon: WindowCurtainsAltIcon,
texts: ["Blackout curtains"],
},
{
icon: MirrorIcon,
texts: ["Cosmetic mirror"],
},
{
icon: WifiIcon,
texts: ["Free WiFi"],
},
{
icon: ChairIcon,
texts: ["Connecting rooms"],
},
{
icon: YardIcon,
texts: ["View - atrium view"],
},
{
icon: CityIcon,
texts: ["View - city view"],
},
{
icon: NatureIcon,
texts: ["View - park view"],
},
{
icon: StreetIcon,
texts: ["View - street view"],
},
{
icon: WineBarIcon,
texts: ["Minibar"],
},
{
icon: NoSmokingIcon,
texts: ["Non smoking"],
},
{
icon: ShowerIcon,
texts: ["Rain shower"],
},
{
icon: SafetyBoxIcon,
texts: ["Safety box"],
},
{
icon: BedDoubleIcon,
texts: ["Set of two pillows"],
},
{
icon: IronIcon,
texts: ["Iron and ironing board"],
},
{
icon: HandSoapIcon,
texts: ["Toiletries"],
},
{
icon: WoodFloorIcon,
texts: ["Wooden floor"],
},
{
icon: WindowNotAvailableIcon,
texts: ["Not window"],
},
]
const icon = iconMappings.find((icon) => icon.texts.includes(name))
return icon ? icon.icon : HeartIcon
}

96
components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/index.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { useState } from "react"
import { useIntl } from "react-intl"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import ImageGallery from "../../ImageGallery"
import { getFacilityIcon } from "./facilityIcon"
import styles from "./roomSidePeek.module.css"
import type { RoomSidePeekProps } from "@/types/components/hotelReservation/selectRate/roomSidePeek"
export default function RoomSidePeek({
selectedRoom,
roomConfiguration,
}: RoomSidePeekProps) {
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
const intl = useIntl()
const roomSize = selectedRoom?.roomSize
const occupancy = selectedRoom?.occupancy.total
const roomDescription = selectedRoom?.descriptions.medium
const images = selectedRoom?.images
return (
<div>
<Button
intent="text"
type="button"
size="small"
theme="base"
className={styles.button}
onClick={() => setIsSidePeekOpen(true)}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
</Button>
<SidePeek
title={roomConfiguration.roomType}
isOpen={isSidePeekOpen}
handleClose={() => setIsSidePeekOpen(false)}
>
<Body color="baseTextMediumContrast">
{roomSize?.min === roomSize?.max
? roomSize?.min
: `${roomSize?.min} - ${roomSize?.max}`}
m².{" "}
{intl.formatMessage(
{
id: "booking.accommodatesUpTo",
},
{ nrOfGuests: occupancy }
)}
</Body>
{images && (
<div className={styles.imageContainer}>
<ImageGallery images={images} title={roomConfiguration.roomType} />
</div>
)}
<Body className={styles.description} color="uiTextHighContrast">
{roomDescription}
</Body>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
</Subtitle>
<ul className={styles.facilityList}>
{selectedRoom?.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
const Icon = getFacilityIcon(facility.name)
return (
<li key={facility.name}>
{Icon && <Icon color="uiTextMediumContrast" />}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{facility.name}</span>
</Body>
</li>
)
})}
</ul>
</SidePeek>
</div>
)
}

29
components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/roomSidePeek.module.css Normal file
View File

@@ -0,0 +1,29 @@
.button {
margin-left: auto;
padding: 0 0 0 var(--Spacing-x-half);
text-decoration: none;
}
.imageContainer {
min-height: 185px;
position: relative;
}
.description {
margin-top: var(--Spacing-x-one-and-half);
margin-bottom: var(--Spacing-x2);
}
.facilityList {
margin-top: var(--Spacing-x-one-and-half);
column-count: 2;
column-gap: var(--Spacing-x2);
}
.facilityList li {
display: flex;
gap: var(--Spacing-x1);
margin-bottom: var(--Spacing-x-half);
}
.noIcon {
margin-left: var(--Spacing-x4);
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function AcIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3450"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3450)">
<path
d="M3.19995 20.8V6.13458C3.19995 5.31983 3.48554 4.62703 4.05673 4.0562C4.62791 3.48537 5.32148 3.19995 6.13745 3.19995H9.99995C10.8159 3.19995 11.5095 3.48513 12.0807 4.0555C12.6519 4.62587 12.9375 5.31846 12.9375 6.13328V20.8H3.19995ZM9.93745 15.0625H11.0625V9.93745H9.93745V15.0625ZM5.07495 18.925H11.0625V16.9375H9.93745C9.42182 16.9375 8.98041 16.7539 8.61323 16.3867C8.24604 16.0195 8.06245 15.5781 8.06245 15.0625V9.93745C8.06245 9.42182 8.24604 8.98041 8.61323 8.61323C8.98041 8.24604 9.42182 8.06245 9.93745 8.06245H11.0625V6.13745C11.0625 5.83642 10.9606 5.58408 10.757 5.38043C10.5533 5.17678 10.301 5.07495 9.99995 5.07495H6.13745C5.83642 5.07495 5.58408 5.17678 5.38043 5.38043C5.17678 5.58408 5.07495 5.83642 5.07495 6.13745V18.925ZM17.0875 13.5125C16.6671 13.5125 16.2549 13.4565 15.8507 13.3445C15.4465 13.2325 15.0505 13.0885 14.6625 12.9125L15.25 11.1375C15.5748 11.2803 15.8956 11.3994 16.2124 11.4946C16.5291 11.5898 16.8291 11.6375 17.1125 11.6375C17.318 11.6375 17.5236 11.6041 17.7291 11.5375C17.9347 11.4708 18.15 11.3666 18.375 11.225C18.7686 10.9465 19.1622 10.7581 19.5558 10.6599C19.9494 10.5616 20.3266 10.5125 20.6875 10.5125C21.0881 10.5125 21.5007 10.5666 21.9254 10.675C22.3501 10.7833 22.7541 10.9208 23.1375 11.0875L22.55 12.875C22.2333 12.7666 21.9062 12.6583 21.5687 12.55C21.2312 12.4416 20.9391 12.3875 20.6923 12.3875C20.4807 12.3875 20.252 12.427 20.0062 12.5062C19.7604 12.5854 19.5 12.7166 19.225 12.9C18.8833 13.1333 18.536 13.2937 18.1831 13.3812C17.8302 13.4687 17.465 13.5125 17.0875 13.5125ZM17.1125 9.61245C16.6958 9.61245 16.2791 9.5562 15.8625 9.4437C15.4458 9.3312 15.0458 9.18908 14.6625 9.01733L15.25 7.23745C15.675 7.42078 16.0333 7.54995 16.325 7.62495C16.6166 7.69995 16.8791 7.73745 17.1125 7.73745C17.318 7.73745 17.5236 7.7062 17.7291 7.6437C17.9347 7.5812 18.15 7.47495 18.375 7.32495C18.785 7.0465 19.1827 6.85814 19.5681 6.75988C19.9535 6.66159 20.3266 6.61245 20.6875 6.61245C21.0902 6.61245 21.493 6.66453 21.8958 6.7687C22.2986 6.87287 22.7125 7.01245 23.1375 7.18745L22.55 8.97495C22.125 8.83328 21.7666 8.71662 21.475 8.62495C21.1833 8.53328 20.9208 8.48745 20.6875 8.48745C20.4627 8.48745 20.2336 8.52078 20.0001 8.58745C19.7667 8.65412 19.5083 8.79162 19.225 8.99995C18.9333 9.20828 18.6027 9.36245 18.2332 9.46245C17.8637 9.56245 17.4902 9.61245 17.1125 9.61245ZM17.1147 17.4125C16.6882 17.4125 16.2708 17.3562 15.8625 17.2437C15.4541 17.1312 15.0541 16.9875 14.6625 16.8125L15.25 15.0375C15.6 15.1875 15.9333 15.3083 16.25 15.4C16.5666 15.4916 16.8541 15.5375 17.1125 15.5375C17.318 15.5375 17.5236 15.5062 17.7291 15.4437C17.9347 15.3812 18.15 15.275 18.375 15.125C18.7583 14.8666 19.1604 14.6833 19.5812 14.575C20.002 14.4666 20.3791 14.4125 20.7125 14.4125C21.1166 14.4125 21.5289 14.4684 21.9492 14.5802C22.3695 14.692 22.7656 14.8277 23.1375 14.9875L22.55 16.775C22.125 16.6333 21.7625 16.5166 21.4625 16.425C21.1625 16.3333 20.9041 16.2875 20.6875 16.2875C20.4541 16.2875 20.2125 16.327 19.9625 16.4062C19.7125 16.4854 19.4666 16.6166 19.225 16.8C18.95 16.9916 18.6279 17.1416 18.2588 17.25C17.8898 17.3583 17.5084 17.4125 17.1147 17.4125Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function BathtubIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3451"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3451)">
<path
d="M7.075 9.13755C6.54563 9.13755 6.09246 8.94906 5.71548 8.57207C5.33849 8.19511 5.15 7.74193 5.15 7.21255C5.15 6.68317 5.33849 6.22999 5.71548 5.85302C6.09246 5.47604 6.54563 5.28755 7.075 5.28755C7.60438 5.28755 8.05756 5.47604 8.43453 5.85302C8.81151 6.22999 9 6.68317 9 7.21255C9 7.74193 8.81151 8.19511 8.43453 8.57207C8.05756 8.94906 7.60438 9.13755 7.075 9.13755ZM5.125 21.75C4.84167 21.75 4.60417 21.6554 4.4125 21.4661C4.22083 21.2769 4.125 21.0423 4.125 20.7625C3.60937 20.7625 3.16796 20.579 2.80077 20.2118C2.43359 19.8446 2.25 19.4032 2.25 18.8875V13.9875C2.25 13.7292 2.34167 13.5084 2.525 13.325C2.70833 13.1417 2.92917 13.05 3.1875 13.05H5.175V12.3276C5.175 11.7176 5.38444 11.2021 5.80332 10.7813C6.22222 10.3605 6.73778 10.15 7.35 10.15C7.66667 10.15 7.96667 10.2125 8.25 10.3375C8.53333 10.4625 8.78333 10.6417 9 10.875L10.35 12.375C10.475 12.5 10.6 12.6209 10.725 12.7375C10.85 12.8542 10.9833 12.9584 11.125 13.05H17.875V5.00005C17.875 4.75642 17.7892 4.54759 17.6177 4.37357C17.4461 4.19956 17.2402 4.11255 17 4.11255C16.8941 4.11255 16.7926 4.13338 16.6956 4.17505C16.5985 4.21672 16.509 4.27869 16.4269 4.36097L15.1962 5.59522C15.2782 5.87497 15.2946 6.15061 15.2454 6.42215C15.1962 6.69368 15.0977 6.94465 14.95 7.17505L12.3 4.50005C12.5333 4.35005 12.7833 4.25422 13.05 4.21255C13.3167 4.17088 13.5833 4.20005 13.85 4.30005L15.075 3.06255C15.3323 2.80373 15.6258 2.60152 15.9554 2.45592C16.2851 2.31034 16.6348 2.23755 17.0047 2.23755C17.7766 2.23755 18.4271 2.50411 18.9563 3.03722C19.4854 3.57034 19.75 4.22462 19.75 5.00005V13.05H20.8125C21.0708 13.05 21.2917 13.1417 21.475 13.325C21.6583 13.5084 21.75 13.7292 21.75 13.9875V18.8875C21.75 19.4032 21.5664 19.8446 21.1992 20.2118C20.832 20.579 20.3906 20.7625 19.875 20.7625C19.875 21.0423 19.7792 21.2769 19.5875 21.4661C19.3958 21.6554 19.1583 21.75 18.875 21.75H5.125ZM4.125 18.8875H19.875V14.925H4.125V18.8875Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function BedDoubleIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3418"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3418)">
<path
d="M3.25 17.8875V13C3.25 12.575 3.3375 12.1813 3.5125 11.8188C3.6875 11.4563 3.925 11.1417 4.225 10.875V8.17505C4.225 7.38338 4.50625 6.7063 5.06875 6.1438C5.63125 5.5813 6.30833 5.30005 7.1 5.30005H10.075C10.4417 5.30005 10.7875 5.37088 11.1125 5.51255C11.4375 5.65422 11.7333 5.85005 12 6.10005C12.2667 5.85005 12.5625 5.65422 12.8875 5.51255C13.2125 5.37088 13.5583 5.30005 13.925 5.30005H16.9C17.6917 5.30005 18.3687 5.5813 18.9312 6.1438C19.4937 6.7063 19.775 7.38338 19.775 8.17505V10.875C20.075 11.1417 20.3125 11.4563 20.4875 11.8188C20.6625 12.1813 20.75 12.575 20.75 13V17.8875C20.75 18.1459 20.6583 18.3667 20.475 18.55C20.2917 18.7334 20.0708 18.825 19.8125 18.825C19.5542 18.825 19.3333 18.7334 19.15 18.55C18.9667 18.3667 18.875 18.1459 18.875 17.8875V16.85H5.125V17.8875C5.125 18.1459 5.03333 18.3667 4.85 18.55C4.66667 18.7334 4.44583 18.825 4.1875 18.825C3.92917 18.825 3.70833 18.7334 3.525 18.55C3.34167 18.3667 3.25 18.1459 3.25 17.8875ZM12.95 10.15H17.9V8.17067C17.9 7.89026 17.8046 7.65422 17.6138 7.46255C17.423 7.27088 17.1866 7.17505 16.9046 7.17505H13.923C13.641 7.17505 13.4083 7.27088 13.225 7.46255C13.0417 7.65422 12.95 7.89172 12.95 8.17505V10.15ZM6.1 10.15H11.05V8.17067C11.05 7.89026 10.9583 7.65422 10.775 7.46255C10.5917 7.27088 10.359 7.17505 10.077 7.17505H7.0954C6.81337 7.17505 6.57696 7.27088 6.38618 7.46255C6.19539 7.65422 6.1 7.89172 6.1 8.17505V10.15ZM5.125 14.975H18.875V12.9957C18.875 12.7153 18.7833 12.4834 18.6 12.3C18.4167 12.1167 18.1852 12.025 17.9057 12.025H6.09427C5.81476 12.025 5.58333 12.1167 5.4 12.3C5.21667 12.4834 5.125 12.7153 5.125 12.9957V14.975Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ChairIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3444"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3444)">
<path
d="M5.1202 20.7C4.85675 20.7 4.63336 20.6113 4.45002 20.4341C4.26669 20.2568 4.17502 20.0371 4.17502 19.775V18.775H4.12502C3.33336 18.775 2.66044 18.4979 2.10627 17.9437C1.55211 17.3896 1.27502 16.7166 1.27502 15.925V11C1.27502 10.1916 1.55419 9.51456 2.11252 8.96873C2.67086 8.42289 3.34169 8.14998 4.12502 8.14998V6.19998C4.12502 5.40831 4.40627 4.73539 4.96877 4.18123C5.53127 3.62706 6.20836 3.34998 7.00002 3.34998H17.025C17.8167 3.34998 18.4938 3.62706 19.0563 4.18123C19.6188 4.73539 19.9 5.40831 19.9 6.19998V8.14998C20.6917 8.14998 21.3646 8.42706 21.9188 8.98123C22.4729 9.53539 22.75 10.2083 22.75 11V15.925C22.75 16.7166 22.4729 17.3896 21.9188 17.9437C21.3646 18.4979 20.6917 18.775 19.9 18.775H19.85V19.775C19.85 20.0371 19.759 20.2568 19.5769 20.4341C19.3948 20.6113 19.1692 20.7 18.9 20.7C18.6379 20.7 18.4183 20.6113 18.241 20.4341C18.0637 20.2568 17.975 20.0371 17.975 19.775V18.775H6.05002V19.775C6.05002 20.0333 5.96092 20.2521 5.7827 20.4312C5.60448 20.6104 5.38365 20.7 5.1202 20.7ZM4.12502 16.9H19.9C20.1667 16.9 20.3959 16.8083 20.5875 16.625C20.7792 16.4416 20.875 16.2101 20.875 15.9304V10.9945C20.875 10.7148 20.7792 10.4833 20.5875 10.3C20.3959 10.1166 20.1667 10.025 19.9 10.025C19.6167 10.025 19.3792 10.1166 19.1875 10.3C18.9959 10.4833 18.9 10.7166 18.9 11V14.9H5.12502V11C5.12502 10.7166 5.02919 10.4833 4.83752 10.3C4.64586 10.1166 4.40836 10.025 4.12502 10.025C3.85836 10.025 3.62919 10.1166 3.43752 10.3C3.24586 10.4833 3.15002 10.7148 3.15002 10.9945V15.9304C3.15002 16.2101 3.24586 16.4416 3.43752 16.625C3.62919 16.8083 3.85836 16.9 4.12502 16.9ZM7.00002 13.025H17.025V11C17.025 10.5583 17.1167 10.1604 17.3 9.80623C17.4834 9.45206 17.725 9.1401 18.025 8.87035V6.2046C18.025 5.93485 17.929 5.70414 17.7369 5.51248C17.5449 5.32081 17.3069 5.22498 17.0229 5.22498H7.0021C6.71818 5.22498 6.48019 5.32081 6.28812 5.51248C6.09606 5.70414 6.00002 5.93505 6.00002 6.2052V8.87498C6.30002 9.14164 6.54169 9.45206 6.72502 9.80623C6.90836 10.1604 7.00002 10.5583 7.00002 11V13.025Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CityIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3390"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3390)">
<path
d="M3.57495 18.4248V9.0486C3.57495 8.5329 3.75854 8.09079 4.12573 7.72227C4.49291 7.35374 4.93432 7.16947 5.44995 7.16947H9.19995V6.06392C9.19995 5.81301 9.24578 5.57713 9.33745 5.3563C9.42912 5.13547 9.55828 4.93755 9.72495 4.76255L10.6639 3.7943C11.0238 3.42313 11.4698 3.23755 12.0019 3.23755C12.5339 3.23755 12.9833 3.42505 13.35 3.80005L14.2911 4.76082C14.4637 4.93697 14.5958 5.13648 14.6875 5.35935C14.7791 5.58222 14.825 5.81662 14.825 6.06255V10.922H18.575C19.0906 10.922 19.532 11.1059 19.8992 11.4737C20.2664 11.8415 20.45 12.2836 20.45 12.8V18.425C20.45 18.9407 20.2663 19.3821 19.8991 19.7493C19.5319 20.1165 19.0904 20.3 18.5748 20.3H5.44848C4.93279 20.3 4.49162 20.1164 4.12495 19.7492C3.75828 19.382 3.57495 18.9405 3.57495 18.4248ZM5.44995 18.425H7.32495V16.55H5.44995V18.425ZM5.44995 14.675H7.32495V12.8H5.44995V14.675ZM5.44995 10.925H7.32495V9.05005H5.44995V10.925ZM11.075 18.425H12.95V16.55H11.075V18.425ZM11.075 14.675H12.95V12.8H11.075V14.675ZM11.075 10.925H12.95V9.05005H11.075V10.925ZM11.075 7.17505H12.95V5.30005H11.075V7.17505ZM16.7 18.425H18.575V16.55H16.7V18.425ZM16.7 14.675H18.575V12.8H16.7V14.675Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function DeskIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_81_882"
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_81_882)">
<path
d="M2.0625 17V7.9375C2.0625 7.42187 2.24609 6.98046 2.61327 6.61328C2.98046 6.24609 3.42187 6.0625 3.9375 6.0625H20.0625C20.5781 6.0625 21.0195 6.24609 21.3867 6.61328C21.7539 6.98046 21.9375 7.42187 21.9375 7.9375V17C21.9375 17.2583 21.8458 17.4792 21.6625 17.6625C21.4792 17.8458 21.2583 17.9375 21 17.9375C20.7417 17.9375 20.5208 17.8458 20.3375 17.6625C20.1542 17.4792 20.0625 17.2583 20.0625 17V15.9375H15.9375V17C15.9375 17.2583 15.8458 17.4792 15.6625 17.6625C15.4792 17.8458 15.2583 17.9375 15 17.9375C14.7417 17.9375 14.5208 17.8458 14.3375 17.6625C14.1542 17.4792 14.0625 17.2583 14.0625 17V7.9375H3.9375V17C3.9375 17.2583 3.84583 17.4792 3.6625 17.6625C3.47917 17.8458 3.25833 17.9375 3 17.9375C2.74167 17.9375 2.52083 17.8458 2.3375 17.6625C2.15417 17.4792 2.0625 17.2583 2.0625 17ZM15.9375 10.0625H20.0625V7.9375H15.9375V10.0625ZM15.9375 14.0625H20.0625V11.9375H15.9375V14.0625Z"
fill="#26201E"
/>
</g>
</svg>
)
}

58
components/Icons/Hairdryer.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function HairdryerIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
id="mask0_83_335"
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_83_335)">
<path
d="M20.3933 9.705C20.3933 8.89072 20.1059 8.19833 19.5311 7.62786C18.9563 7.05739 18.2584 6.77215 17.4372 6.77215H8.74704C8.49762 6.77215 8.2844 6.68439 8.1074 6.50886C7.93039 6.33332 7.84188 6.12189 7.84188 5.87455C7.84188 5.62722 7.93039 5.41578 8.1074 5.24025C8.2844 5.06472 8.49762 4.97696 8.74704 4.97696H17.4365C18.7554 4.97696 19.8797 5.43793 20.8093 6.35988C21.7389 7.28184 22.2037 8.39686 22.2037 9.70493V18.5425C22.2037 19.0713 21.7714 19.4999 21.2382 19.4999H17.6417C17.1085 19.4999 16.6762 19.0713 16.6762 18.5425V14.3764C15.8235 14.2551 15.0899 13.918 14.4037 13.3545C13.5291 12.6365 13.5745 12.5766 12.749 11.5593H9.71253C9.46311 11.5593 9.2499 11.4716 9.07289 11.296C8.89589 11.1205 8.80738 10.9091 8.80738 10.6617C8.80738 10.4144 8.89589 10.203 9.07289 10.0274C9.2499 9.85191 9.46311 9.76415 9.71253 9.76415H13.4811C13.9906 9.76415 14.3777 10.1879 14.5547 10.6617C14.7126 11.0846 14.987 11.4285 15.3419 11.7808C15.9167 12.3512 16.6147 12.6365 17.4358 12.6365C17.5165 12.6365 17.596 12.6337 17.6743 12.6282C18.077 12.5999 18.4865 12.8831 18.4865 13.2834V17.4563C18.4865 17.6675 18.6589 17.8388 18.8719 17.8393L20.0063 17.8417C20.2199 17.8422 20.3933 17.6706 20.3933 17.4587V9.705Z"
fill="#26201E"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.438 11.4968C16.914 11.4968 16.465 11.3118 16.0909 10.9418C15.7167 10.5718 15.5297 10.127 15.5297 9.60736C15.5297 9.08776 15.7162 8.64246 16.0894 8.27145C16.4625 7.90044 16.911 7.71494 17.435 7.71494C17.959 7.71494 18.408 7.89995 18.7822 8.26996C19.1563 8.63998 19.3434 9.08479 19.3434 9.60439C19.3434 10.124 19.1568 10.5693 18.7837 10.9403C18.4105 11.3113 17.962 11.4968 17.438 11.4968ZM16.7667 10.2716C16.9477 10.4503 17.1714 10.5396 17.4378 10.5396C17.7041 10.5396 17.9274 10.4498 18.1076 10.2703C18.2878 10.0908 18.3779 9.86897 18.3779 9.60483C18.3779 9.3407 18.2874 9.11929 18.1063 8.9406C17.9253 8.76193 17.7016 8.67259 17.4352 8.67259C17.1689 8.67259 16.9456 8.76235 16.7654 8.94187C16.5852 9.12139 16.4952 9.34322 16.4952 9.60736C16.4952 9.87149 16.5857 10.0929 16.7667 10.2716Z"
fill="#26201E"
/>
<path
d="M5.98812 5.09562C6.07942 4.92317 6.07619 4.74726 5.97901 4.57747L5.9783 4.57625C5.84295 4.34975 5.66047 4.17098 5.43173 4.04089C5.20285 3.91072 4.95481 3.84558 4.68894 3.84558C4.28066 3.84558 3.93106 3.98777 3.64455 4.27118C3.35796 4.55468 3.21397 4.90158 3.21397 5.30745C3.21397 5.71333 3.35796 6.06065 3.64446 6.34505C3.93094 6.62943 4.28058 6.77215 4.68894 6.77215H6.807C6.95148 6.77215 7.07707 6.72046 7.17963 6.61876C7.28221 6.51703 7.33458 6.3922 7.33458 6.24835C7.33458 6.10451 7.28221 5.97967 7.17963 5.87795C7.07707 5.77624 6.95148 5.72455 6.807 5.72455L4.68636 5.72455C4.57124 5.72455 4.47437 5.6846 4.39176 5.60268C4.30937 5.52098 4.26913 5.42445 4.26913 5.30887C4.26913 5.19328 4.30937 5.09675 4.39176 5.01505C4.47417 4.93333 4.57182 4.89318 4.68894 4.89318C4.75984 4.89318 4.82693 4.90631 4.89079 4.93246C4.95178 4.95745 4.99815 4.99387 5.03232 5.04145L5.03304 5.04243C5.09367 5.12402 5.1651 5.1959 5.24712 5.25797C5.3369 5.32591 5.44013 5.35993 5.55412 5.35993C5.64869 5.35993 5.73479 5.33849 5.80957 5.29285C5.88428 5.24726 5.94335 5.18019 5.98812 5.09562Z"
fill="#26201E"
/>
<path
d="M8.55441 7.88364C8.45185 7.78193 8.32626 7.73024 8.18178 7.73024L2.52761 7.73024C2.38313 7.73024 2.25754 7.78193 2.15498 7.88364C2.0524 7.98536 2.00003 8.1102 2.00003 8.25404C2.00003 8.39789 2.0524 8.52273 2.15498 8.62445C2.25754 8.72615 2.38313 8.77784 2.52761 8.77784L8.18178 8.77784C8.32626 8.77784 8.45185 8.72615 8.55441 8.62445C8.65699 8.52273 8.70935 8.39789 8.70935 8.25404C8.70935 8.1102 8.65699 7.98536 8.55441 7.88364Z"
fill="#26201E"
/>
<path
d="M6.2737 12.0792C6.33521 11.9188 6.31116 11.7643 6.20583 11.625C6.10083 11.4862 5.95678 11.4157 5.78093 11.4157C5.6522 11.4157 5.53973 11.4612 5.44757 11.5506C5.36483 11.6309 5.2936 11.7206 5.23395 11.8195C5.17676 11.9163 5.09834 11.9908 4.99816 12.0427C4.89649 12.0954 4.78683 12.1218 4.66806 12.1218C4.48377 12.1218 4.32963 12.0586 4.20124 11.9312C4.07292 11.8038 4.00942 11.6507 4.00942 11.4675C4.00942 11.2844 4.07312 11.131 4.20198 11.0031C4.33086 10.8752 4.4856 10.8117 4.67061 10.8117H7.71796C7.86244 10.8117 7.98803 10.7601 8.09059 10.6584C8.19317 10.5566 8.24554 10.4318 8.24554 10.2879C8.24554 10.1441 8.19317 10.0193 8.09059 9.91754C7.98803 9.81584 7.86244 9.76415 7.71796 9.76415L4.67061 9.76415C4.19765 9.76415 3.79177 9.93043 3.45719 10.2616C3.12254 10.5928 2.95427 10.9955 2.95427 11.4655C2.95427 11.9354 3.12253 12.3386 3.45712 12.6706C3.79168 13.0027 4.19758 13.1694 4.67061 13.1694C5.03173 13.1694 5.36026 13.0715 5.65414 12.8756C5.94859 12.6793 6.15561 12.4131 6.2737 12.0792Z"
fill="#26201E"
/>
</g>
</svg>
)
}

49
components/Icons/HandSoap.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function HandSoapIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<g clipPath="url(#clip0_4037_3127)">
<mask
style={{ maskType: "alpha" }}
id="mask0_4037_3127"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<path d="M24 0H0V24H24V0Z" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4037_3127)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.93432 2.50091C8.93432 2.01716 9.32648 1.625 9.81023 1.625H15.6496C16.2691 1.625 16.8632 1.87109 17.3013 2.30913C17.7393 2.74717 17.9854 3.34128 17.9854 3.96077C17.9854 4.44452 17.5933 4.83668 17.1095 4.83668C16.6257 4.83668 16.2336 4.44452 16.2336 3.96077C16.2336 3.8059 16.1721 3.65737 16.0626 3.54786C15.953 3.43835 15.8045 3.37682 15.6496 3.37682H12.8759V5.6396H14.1898C15.0029 5.6396 15.7826 5.96259 16.3576 6.53752C16.9325 7.11245 17.2555 7.89222 17.2555 8.70529V9.39167C17.9345 9.55274 18.562 9.89942 19.0635 10.4009C19.7753 11.1128 20.1752 12.0782 20.1752 13.0849V20.0192C20.1752 20.4451 20.006 20.8535 19.7049 21.1547C19.4037 21.4558 18.9952 21.625 18.5694 21.625H5.43067C5.00477 21.625 4.59632 21.4558 4.29517 21.1547C3.99402 20.8535 3.82483 20.4451 3.82483 20.0192V13.0849C3.82483 12.0782 4.22472 11.1128 4.93654 10.4009C5.43807 9.89942 6.0655 9.55274 6.74454 9.39167V8.70529C6.74454 7.89222 7.06753 7.11245 7.64246 6.53752C8.21739 5.96259 8.99716 5.6396 9.81023 5.6396H11.1241V3.37682H9.81023C9.32648 3.37682 8.93432 2.98467 8.93432 2.50091ZM9.81023 7.39142C9.46177 7.39142 9.12758 7.52985 8.88119 7.77625C8.63479 8.02264 8.49636 8.35683 8.49636 8.70529V9.28923H15.5037V8.70529C15.5037 8.35683 15.3652 8.02264 15.1188 7.77625C14.8724 7.52985 14.5383 7.39142 14.1898 7.39142H9.81023ZM7.62045 11.0411C7.0784 11.0411 6.55855 11.2564 6.17527 11.6397C5.79198 12.023 5.57665 12.5428 5.57665 13.0849V19.8732H18.4234V13.0849C18.4234 12.5428 18.208 12.023 17.8248 11.6397C17.4415 11.2564 16.9216 11.0411 16.3796 11.0411H7.62045Z"
fill="black"
/>
</g>
</g>
<defs>
<clipPath id="clip0_4037_3127">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function IronIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3453"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3453)">
<path
d="M4.125 15.875H14.9875V12.9375H6.125C5.575 12.9375 5.10417 13.1271 4.7125 13.5062C4.32083 13.8854 4.125 14.3462 4.125 14.8887V15.875ZM20.8125 6.25C21.0708 6.25 21.2917 6.34167 21.475 6.525C21.6583 6.70833 21.75 6.92917 21.75 7.1875C21.75 7.44583 21.6583 7.66667 21.475 7.85C21.2917 8.03333 21.0708 8.125 20.8125 8.125C20.5256 8.125 20.2852 8.22083 20.0911 8.4125C19.897 8.60417 19.8 8.83647 19.8 9.1094V12.9625C19.8 13.7576 19.5125 14.4335 18.9375 14.9901C18.3625 15.5467 17.6708 15.825 16.8625 15.825V16.8125C16.8625 17.0708 16.7708 17.2917 16.5875 17.475C16.4042 17.6583 16.1833 17.75 15.925 17.75H3.1875C2.92917 17.75 2.70833 17.6583 2.525 17.475C2.34167 17.2917 2.25 17.0708 2.25 16.8125V14.8879C2.25 13.8293 2.62708 12.9271 3.38125 12.1813C4.13542 11.4354 5.05 11.0625 6.125 11.0625H14.9875V10.0801C14.9875 9.80168 14.8875 9.56667 14.6875 9.375C14.4875 9.18333 14.2458 9.0875 13.9625 9.0875H10.0458C9.91528 9.0875 9.785 9.11667 9.655 9.175C9.525 9.23333 9.41667 9.30417 9.33 9.3875C9.24333 9.47083 9.14583 9.53542 9.0375 9.58125C8.92917 9.62708 8.80833 9.65 8.675 9.65C8.41667 9.65 8.19375 9.55833 8.00625 9.375C7.81875 9.19167 7.725 8.97083 7.725 8.7125C7.725 8.57917 7.75208 8.45417 7.80625 8.3375C7.86042 8.22083 7.92917 8.12083 8.0125 8.0375C8.27917 7.77917 8.58508 7.57708 8.93025 7.43125C9.2754 7.28542 9.64865 7.2125 10.05 7.2125H13.9625C14.7681 7.2125 15.4528 7.4908 16.0167 8.0474C16.5806 8.604 16.8625 9.27987 16.8625 10.075V13.95C17.1542 13.95 17.4042 13.8554 17.6125 13.6661C17.8208 13.4768 17.925 13.2423 17.925 12.9625V9.1125C17.925 8.31737 18.2057 7.6415 18.7672 7.0849C19.3287 6.5283 20.0104 6.25 20.8125 6.25Z"
fill="#26201E"
/>
</g>
</svg>
)
}

25
components/Icons/Mirror.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function MirrorIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.26544 9.89998H5.87357C6.53214 12.6815 8.99277 14.7 12.0001 14.7C15.0074 14.7 17.468 12.6815 18.1266 9.89998H18.7347C18.0448 12.9797 15.2797 15.3 12 15.3C8.72041 15.3 5.95525 12.9797 5.26544 9.89998ZM18.9446 8.09998C18.9856 7.96928 19.055 7.85077 19.1529 7.75287C19.3218 7.58403 19.5519 7.5 19.8 7.5C20.0482 7.5 20.2783 7.58403 20.4472 7.75287C20.616 7.9217 20.7 8.15183 20.7 8.4C20.7 12.9416 17.3143 16.6123 12.9 17.0552V20.1H15.0001C15.2483 20.1 15.4784 20.1841 15.6472 20.3529C15.8161 20.5217 15.9001 20.7519 15.9001 21C15.9001 21.2482 15.8161 21.4783 15.6472 21.6472C15.4784 21.816 15.2483 21.9 15.0001 21.9H9.0001C8.75192 21.9 8.5218 21.816 8.35297 21.6472C8.18413 21.4783 8.1001 21.2482 8.1001 21C8.1001 20.7519 8.18413 20.5217 8.35297 20.3529C8.5218 20.1841 8.75192 20.1 9.0001 20.1H11.1V17.0551C6.68567 16.6122 3.30005 12.9415 3.30005 8.4C3.30005 8.15183 3.38408 7.9217 3.55292 7.75287C3.72175 7.58403 3.95187 7.5 4.20005 7.5C4.44822 7.5 4.67835 7.58403 4.84718 7.75287C4.94508 7.85077 5.01447 7.96928 5.0555 8.09998H5.70681C5.85905 4.71819 8.57502 2.09998 12.0001 2.09998C15.4251 2.09998 18.1411 4.71819 18.2933 8.09998H18.9446ZM12.0001 3.89998C9.52576 3.89998 7.50007 5.92566 7.50007 8.39998C7.50007 10.8743 9.52576 12.9 12.0001 12.9C14.4744 12.9 16.5001 10.8743 16.5001 8.39998C16.5001 5.92566 14.4744 3.89998 12.0001 3.89998ZM13.108 8.42789C12.7508 8.78504 12.7508 9.33499 13.108 9.69215C13.2345 9.81866 13.4 9.86247 13.5108 9.88094C13.6255 9.90006 13.7361 9.90003 13.7956 9.90002L13.8071 9.90002C13.8639 9.90007 13.9791 9.90015 14.0839 9.87919C14.1372 9.86854 14.2177 9.84713 14.2915 9.79605L14.3059 9.78613C14.3607 9.74859 14.4548 9.68419 14.5201 9.60002L15.5722 8.49215C15.9294 8.13499 15.9294 7.58504 15.5722 7.22789C15.2151 6.87073 14.6651 6.87073 14.308 7.22789L13.108 8.42789ZM10.8495 9.5809C10.9603 9.56244 11.0691 9.52149 11.2523 9.39212L14.1347 6.38975C14.4895 6.03253 14.4887 5.48422 14.1323 5.12785C13.7752 4.7707 13.2252 4.7707 12.868 5.12785L9.86805 8.12785C9.51089 8.48501 9.51089 9.03496 9.86805 9.39212C9.99455 9.51862 10.1601 9.56244 10.2709 9.5809C10.3856 9.60002 10.4962 9.6 10.5556 9.59999H10.5557H10.5647H10.5647C10.6242 9.6 10.7348 9.60002 10.8495 9.5809Z"
fill="black"
/>
</svg>
)
}

46
components/Icons/SafetyBox.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function SafetyBoxIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_82_314"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_82_314)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.875 18.55C4.35937 18.55 3.91796 18.3664 3.55078 17.9992C3.18359 17.632 3 17.1906 3 16.675V4.875C3 4.35937 3.18359 3.91796 3.55078 3.55078C3.91796 3.18359 4.35937 3 4.875 3H18.675C19.1906 3 19.632 3.18359 19.9992 3.55078C20.3664 3.91796 20.55 4.35937 20.55 4.875V16.675C20.55 17.1906 20.3664 17.632 19.9992 17.9992C19.632 18.3664 19.1906 18.55 18.675 18.55V19.5875C18.675 19.8458 18.5833 20.0667 18.4 20.25C18.2167 20.4333 17.9958 20.525 17.7375 20.525C17.4792 20.525 17.2583 20.4333 17.075 20.25C16.8917 20.0667 16.8 19.8458 16.8 19.5875V18.55H6.75V19.5875C6.75 19.8458 6.65833 20.0667 6.475 20.25C6.29167 20.4333 6.07083 20.525 5.8125 20.525C5.55417 20.525 5.33333 20.4333 5.15 20.25C4.96667 20.0667 4.875 19.8458 4.875 19.5875V18.55ZM4.875 4.875V16.675H18.675V14.275H17.675C17.4167 14.275 17.1958 14.1834 17.0125 14C16.8292 13.8167 16.7375 13.5959 16.7375 13.3375C16.7375 13.0792 16.8292 12.8584 17.0125 12.675C17.1958 12.4917 17.4167 12.4 17.675 12.4H18.675V9.15002H17.675C17.4167 9.15002 17.1958 9.05836 17.0125 8.87502C16.8292 8.69169 16.7375 8.47086 16.7375 8.21252C16.7375 7.95419 16.8292 7.73336 17.0125 7.55002C17.1958 7.36669 17.4167 7.27502 17.675 7.27502H18.675V4.875H4.875Z"
fill="#26201E"
/>
<path
d="M13.2845 11.2845C13.6615 10.9076 13.85 10.4544 13.85 9.925C13.85 9.39562 13.6615 8.94244 13.2845 8.56548C12.9076 8.18849 12.4544 8 11.925 8C11.3956 8 10.9424 8.18849 10.5655 8.56548C10.1885 8.94244 10 9.39562 10 9.925C10 10.4544 10.1885 10.9076 10.5655 11.2845C10.7069 11.426 10.8419 11.5315 11.0049 11.6199V12.6375C11.0049 12.8959 11.0965 13.1167 11.2799 13.3C11.4632 13.4834 11.684 13.575 11.9424 13.575C12.2007 13.575 12.4215 13.4834 12.6049 13.3C12.7882 13.1167 12.8799 12.8959 12.8799 12.6375V11.6C13.0318 11.514 13.1516 11.4175 13.2845 11.2845Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ShowerIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3474"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3474)">
<path
d="M8.02495 17.7625C7.75828 17.7625 7.53537 17.6709 7.3562 17.4875C7.17703 17.3042 7.08745 17.0834 7.08745 16.825C7.08745 16.5667 7.17703 16.3459 7.3562 16.1625C7.53537 15.9792 7.75828 15.8875 8.02495 15.8875C8.28328 15.8875 8.50412 15.9792 8.68745 16.1625C8.87078 16.3459 8.96245 16.5667 8.96245 16.825C8.96245 17.0834 8.87078 17.3042 8.68745 17.4875C8.50412 17.6709 8.28328 17.7625 8.02495 17.7625ZM12 17.7625C11.7416 17.7625 11.5208 17.6709 11.3375 17.4875C11.1541 17.3042 11.0625 17.0834 11.0625 16.825C11.0625 16.5667 11.1541 16.3459 11.3375 16.1625C11.5208 15.9792 11.7416 15.8875 12 15.8875C12.2666 15.8875 12.4895 15.9792 12.6687 16.1625C12.8479 16.3459 12.9375 16.5667 12.9375 16.825C12.9375 17.0834 12.8479 17.3042 12.6687 17.4875C12.4895 17.6709 12.2666 17.7625 12 17.7625ZM16 17.7625C15.7416 17.7625 15.5208 17.6709 15.3375 17.4875C15.1541 17.3042 15.0625 17.0834 15.0625 16.825C15.0625 16.5667 15.1541 16.3459 15.3375 16.1625C15.5208 15.9792 15.7416 15.8875 16 15.8875C16.2666 15.8875 16.4895 15.9792 16.6687 16.1625C16.8479 16.3459 16.9375 16.5667 16.9375 16.825C16.9375 17.0834 16.8479 17.3042 16.6687 17.4875C16.4895 17.6709 16.2666 17.7625 16 17.7625ZM6.13745 14.0125C5.87912 14.0125 5.65828 13.9209 5.47495 13.7375C5.29162 13.5542 5.19995 13.3334 5.19995 13.075V12.1375C5.19995 10.4209 5.7562 8.92713 6.8687 7.6563C7.9812 6.38547 9.37912 5.64172 11.0625 5.42505V4.30005C11.0625 4.04172 11.1541 3.82088 11.3375 3.63755C11.5208 3.45422 11.7416 3.36255 12 3.36255C12.2583 3.36255 12.4791 3.45422 12.6625 3.63755C12.8458 3.82088 12.9375 4.04172 12.9375 4.30005V5.42505C14.6291 5.64172 16.0291 6.38547 17.1375 7.6563C18.2458 8.92713 18.8 10.4209 18.8 12.1375V13.075C18.8 13.3334 18.7083 13.5542 18.525 13.7375C18.3416 13.9209 18.1208 14.0125 17.8625 14.0125H6.13745ZM7.07495 12.1375H16.925C16.925 10.7709 16.4458 9.60838 15.4875 8.65005C14.5291 7.69172 13.3666 7.21255 12 7.21255C10.6416 7.21255 9.4812 7.69172 8.5187 8.65005C7.5562 9.60838 7.07495 10.7709 7.07495 12.1375ZM8.02495 20.575C7.75828 20.575 7.53537 20.4834 7.3562 20.3C7.17703 20.1167 7.08745 19.8959 7.08745 19.6375C7.08745 19.3792 7.17703 19.1584 7.3562 18.975C7.53537 18.7917 7.75828 18.7 8.02495 18.7C8.28328 18.7 8.50412 18.7917 8.68745 18.975C8.87078 19.1584 8.96245 19.3792 8.96245 19.6375C8.96245 19.8959 8.87078 20.1167 8.68745 20.3C8.50412 20.4834 8.28328 20.575 8.02495 20.575ZM12 20.575C11.7416 20.575 11.5208 20.4834 11.3375 20.3C11.1541 20.1167 11.0625 19.8959 11.0625 19.6375C11.0625 19.3792 11.1541 19.1584 11.3375 18.975C11.5208 18.7917 11.7416 18.7 12 18.7C12.2666 18.7 12.4895 18.7917 12.6687 18.975C12.8479 19.1584 12.9375 19.3792 12.9375 19.6375C12.9375 19.8959 12.8479 20.1167 12.6687 20.3C12.4895 20.4834 12.2666 20.575 12 20.575ZM16 20.575C15.7416 20.575 15.5208 20.4834 15.3375 20.3C15.1541 20.1167 15.0625 19.8959 15.0625 19.6375C15.0625 19.3792 15.1541 19.1584 15.3375 18.975C15.5208 18.7917 15.7416 18.7 16 18.7C16.2666 18.7 16.4895 18.7917 16.6687 18.975C16.8479 19.1584 16.9375 19.3792 16.9375 19.6375C16.9375 19.8959 16.8479 20.1167 16.6687 20.3C16.4895 20.4834 16.2666 20.575 16 20.575Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function WindowCurtainsAltIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3395"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3395)">
<path
d="M4.0625 19.0625V4.9375C4.0625 4.42187 4.24609 3.98046 4.61328 3.61328C4.98046 3.24609 5.42187 3.0625 5.9375 3.0625H18.0625C18.5781 3.0625 19.0195 3.24609 19.3867 3.61328C19.7539 3.98046 19.9375 4.42187 19.9375 4.9375V19.0625H21C21.2583 19.0625 21.4792 19.1542 21.6625 19.3375C21.8458 19.5208 21.9375 19.7417 21.9375 20C21.9375 20.2583 21.8458 20.4792 21.6625 20.6625C21.4792 20.8458 21.2583 20.9375 21 20.9375H3C2.74167 20.9375 2.52083 20.8458 2.3375 20.6625C2.15417 20.4792 2.0625 20.2583 2.0625 20C2.0625 19.7417 2.15417 19.5208 2.3375 19.3375C2.52083 19.1542 2.74167 19.0625 3 19.0625H4.0625ZM5.9375 19.0625H9.0625V4.9375H5.9375V19.0625ZM10.9375 19.0625H13.0625V4.9375H10.9375V19.0625ZM14.9375 19.0625H18.0625V4.9375H14.9375V19.0625Z"
fill="#26201E"
/>
</g>
</svg>
)
}

52
components/Icons/WindowNotAvailable.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function WindowNotAvailableIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_4398_1753"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4398_1753)">
<path
d="M3.12638 4.26255L10.8139 11.95L13.6889 14.8625L15.0264 16.2L16.3764 17.5125L19.9264 21.05C20.1097 21.2334 20.3285 21.325 20.5826 21.325C20.8368 21.325 21.0555 21.2334 21.2389 21.05C21.4222 20.8667 21.5118 20.648 21.5076 20.3938C21.5035 20.1396 21.4139 19.925 21.2389 19.75L4.43888 2.95005C4.25555 2.76672 4.0368 2.67505 3.78263 2.67505C3.52846 2.67505 3.30971 2.76672 3.12638 2.95005C2.94305 3.13338 2.85346 3.35422 2.85763 3.61255C2.8618 3.87088 2.95138 4.08755 3.12638 4.26255Z"
fill="#26201E"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.95054 4.46519C5.52518 4.49131 5.15729 4.65958 4.84687 4.97C4.50793 5.30894 4.33846 5.71639 4.33846 6.19236V19.2308H3.35769C3.11923 19.2308 2.91539 19.3154 2.74616 19.4847C2.57692 19.6539 2.49231 19.8577 2.49231 20.0962C2.49231 20.3347 2.57692 20.5385 2.74616 20.7077C2.91539 20.877 3.11923 20.9616 3.35769 20.9616H19.9731C20.2115 20.9616 20.4154 20.877 20.5846 20.7077C20.7538 20.5385 20.8385 20.3347 20.8385 20.0962C20.8385 19.8577 20.7538 19.6539 20.5846 19.4847C20.4154 19.3154 20.2115 19.2308 19.9731 19.2308H18.9923V17.5049L18.4182 16.9328L17.2615 15.8083V19.2308H13.5577C13.6808 18.1385 14.0423 17.0366 14.6423 15.9251C14.9739 15.3107 15.389 14.8168 15.8874 14.4433L15.4619 14.0178L14.6843 13.2301C13.938 13.84 13.3356 14.6095 12.8769 15.5385C12.2769 16.7539 11.9231 17.9847 11.8154 19.2308H11.5154C11.4077 17.9847 11.0538 16.7539 10.4538 15.5385C9.85385 14.3231 9.00769 13.3808 7.91539 12.7116C9.00769 12.0424 9.85385 11.1001 10.4538 9.88467C10.557 9.67565 10.6529 9.46617 10.7416 9.25623L9.3933 7.90796C9.21395 8.4372 8.98001 8.96913 8.69149 9.50374C8.08947 10.6192 7.21539 11.3385 6.06923 11.6616V6.19236H7.6777L5.95054 4.46519ZM9.78462 19.2308H6.06923V13.7731C7.21539 14.0962 8.09039 14.8135 8.69423 15.9251C9.29808 17.0366 9.66154 18.1385 9.78462 19.2308Z"
fill="#26201E"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.4051 7.03227L8.83444 4.46159H17.2615C17.7375 4.46159 18.145 4.63106 18.4839 4.97C18.8228 5.30894 18.9923 5.71639 18.9923 6.19236V14.6195L12.0659 7.69308C11.9423 7.19534 11.8588 6.6951 11.8154 6.19236H11.5154C11.4911 6.47311 11.4544 6.75308 11.4051 7.03227ZM13.5462 6.19236H17.2615V11.6616C16.1154 11.3385 15.2404 10.6193 14.6365 9.5039C14.0327 8.38852 13.6692 7.28467 13.5462 6.19236Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function WineBarIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_69_3753"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_69_3753)">
<path
d="M11.0625 19.0625V14.85C9.62917 14.6083 8.4375 13.9437 7.4875 12.8562C6.5375 11.7688 6.0625 10.4833 6.0625 9V4C6.0625 3.74167 6.15417 3.52083 6.3375 3.3375C6.52083 3.15417 6.74167 3.0625 7 3.0625H17C17.2583 3.0625 17.4792 3.15417 17.6625 3.3375C17.8458 3.52083 17.9375 3.74167 17.9375 4V9C17.9375 10.4833 17.4625 11.7688 16.5125 12.8562C15.5625 13.9437 14.3708 14.6083 12.9375 14.85V19.0625H15C15.2583 19.0625 15.4792 19.1542 15.6625 19.3375C15.8458 19.5208 15.9375 19.7417 15.9375 20C15.9375 20.2583 15.8458 20.4792 15.6625 20.6625C15.4792 20.8458 15.2583 20.9375 15 20.9375H9C8.74167 20.9375 8.52083 20.8458 8.3375 20.6625C8.15417 20.4792 8.0625 20.2583 8.0625 20C8.0625 19.7417 8.15417 19.5208 8.3375 19.3375C8.52083 19.1542 8.74167 19.0625 9 19.0625H11.0625ZM12 13.0625C12.9417 13.0625 13.7729 12.7688 14.4938 12.1813C15.2146 11.5938 15.6917 10.8458 15.925 9.9375H8.075C8.31667 10.8458 8.79583 11.5938 9.5125 12.1813C10.2292 12.7688 11.0583 13.0625 12 13.0625ZM7.9375 8.0625H16.0625V4.9375H7.9375V8.0625Z"
fill="#26201E"
/>
</g>
</svg>
)
}

84
components/Icons/WoodFloor.tsx Normal file
View File

@@ -0,0 +1,84 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function WoodFloorIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_81_934"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_81_934)">
<path
d="M3.93297 21C3.67588 21 3.45612 20.9083 3.27367 20.725C3.09122 20.5417 3 20.3208 3 20.0625C3 19.8042 3.09122 19.5833 3.27367 19.4C3.45612 19.2167 3.67588 19.125 3.93297 19.125H10.0283C10.2854 19.125 10.5052 19.2167 10.6876 19.4C10.8701 19.5833 10.9613 19.8042 10.9613 20.0625C10.9613 20.3208 10.8701 20.5417 10.6876 20.725C10.5052 20.9083 10.2854 21 10.0283 21H3.93297Z"
fill="#26201E"
/>
<path
d="M3.93296 17.5C3.67588 17.5 3.45612 17.4083 3.27367 17.225C3.09122 17.0417 3 16.8208 3 16.5625C3 16.3042 3.09122 16.0833 3.27367 15.9C3.45612 15.7167 3.67588 15.625 3.93296 15.625H10.0283C10.2854 15.625 10.5052 15.7167 10.6876 15.9C10.8701 16.0833 10.9613 16.3042 10.9613 16.5625C10.9613 16.8208 10.8701 17.0417 10.6876 17.225C10.5052 17.4083 10.2854 17.5 10.0283 17.5H3.93296Z"
fill="#26201E"
/>
<path
d="M3.93297 13.9688C3.67588 13.9688 3.45612 13.8771 3.27367 13.6938C3.09122 13.5104 3 13.2896 3 13.0312C3 12.7729 3.09122 12.5521 3.27367 12.3688C3.45612 12.1854 3.67588 12.0938 3.93297 12.0938H10.0283C10.2854 12.0938 10.5052 12.1854 10.6876 12.3688C10.8701 12.5521 10.9613 12.7729 10.9613 13.0312C10.9613 13.2896 10.8701 13.5104 10.6876 13.6938C10.5052 13.8771 10.2854 13.9688 10.0283 13.9688H3.93297Z"
fill="#26201E"
/>
<path
d="M11.8321 10.0625C11.8321 10.3208 11.7408 10.5417 11.5584 10.725C11.376 10.9083 11.1562 11 10.8991 11C10.642 11 10.4223 10.9083 10.2398 10.725C10.0574 10.5417 9.96614 10.3208 9.96614 10.0625V3.9375C9.96614 3.67917 10.0574 3.45833 10.2398 3.275C10.4223 3.09167 10.642 3 10.8991 3C11.1562 3 11.376 3.09167 11.5584 3.275C11.7408 3.45833 11.8321 3.67917 11.8321 3.9375V10.0625Z"
fill="#26201E"
/>
<path
d="M8.36593 10.0625C8.36593 10.3208 8.27471 10.5417 8.09226 10.725C7.90981 10.9083 7.69005 11 7.43297 11C7.17588 11 6.95612 10.9083 6.77367 10.725C6.59122 10.5417 6.5 10.3208 6.5 10.0625V3.9375C6.5 3.67917 6.59122 3.45833 6.77367 3.275C6.95612 3.09167 7.17588 3 7.43297 3C7.69005 3 7.90981 3.09167 8.09226 3.275C8.27471 3.45833 8.36593 3.67917 8.36593 3.9375V10.0625Z"
fill="#26201E"
/>
<path
d="M4.86593 10.0625C4.86593 10.3208 4.77471 10.5417 4.59226 10.725C4.40981 10.9083 4.19005 11 3.93297 11C3.67588 11 3.45612 10.9083 3.27367 10.725C3.09122 10.5417 3 10.3208 3 10.0625V3.9375C3 3.67917 3.09122 3.45833 3.27367 3.275C3.45612 3.09167 3.67588 3 3.93297 3C4.19005 3 4.40981 3.09167 4.59226 3.275C4.77471 3.45833 4.86593 3.67917 4.86593 3.9375V10.0625Z"
fill="#26201E"
/>
<path
d="M20.067 3C20.3241 3 20.5439 3.09167 20.7263 3.275C20.9088 3.45833 21 3.67917 21 3.9375C21 4.19583 20.9088 4.41667 20.7263 4.6C20.5439 4.78333 20.3241 4.875 20.067 4.875H13.933C13.6759 4.875 13.4561 4.78333 13.2737 4.6C13.0912 4.41667 13 4.19583 13 3.9375C13 3.67917 13.0912 3.45833 13.2737 3.275C13.4561 3.09167 13.6759 3 13.933 3H20.067Z"
fill="#26201E"
/>
<path
d="M20.067 6.5C20.3241 6.5 20.5439 6.59167 20.7263 6.775C20.9088 6.95833 21 7.17917 21 7.4375C21 7.69583 20.9088 7.91667 20.7263 8.1C20.5439 8.28333 20.3241 8.375 20.067 8.375H13.933C13.6759 8.375 13.4561 8.28333 13.2737 8.1C13.0912 7.91667 13 7.69583 13 7.4375C13 7.17917 13.0912 6.95833 13.2737 6.775C13.4561 6.59167 13.6759 6.5 13.933 6.5H20.067Z"
fill="#26201E"
/>
<path
d="M12.1679 13.9375C12.1679 13.6792 12.2592 13.4583 12.4416 13.275C12.624 13.0917 12.8438 13 13.1009 13C13.358 13 13.5777 13.0917 13.7602 13.275C13.9426 13.4583 14.0339 13.6792 14.0339 13.9375V20.0312C14.0339 20.2896 13.9426 20.5104 13.7602 20.6938C13.5777 20.8771 13.358 20.9688 13.1009 20.9688C12.8438 20.9688 12.624 20.8771 12.4416 20.6938C12.2592 20.5104 12.1679 20.2896 12.1679 20.0312V13.9375Z"
fill="#26201E"
/>
<path
d="M15.6341 13.9688C15.6341 13.7104 15.7253 13.4896 15.9077 13.3062C16.0902 13.1229 16.31 13.0312 16.567 13.0312C16.8241 13.0312 17.0439 13.1229 17.2263 13.3062C17.4088 13.4896 17.5 13.7104 17.5 13.9688V20.0625C17.5 20.3208 17.4088 20.5417 17.2263 20.725C17.0439 20.9083 16.8241 21 16.567 21C16.31 21 16.0902 20.9083 15.9077 20.725C15.7253 20.5417 15.6341 20.3208 15.6341 20.0625V13.9688Z"
fill="#26201E"
/>
<path
d="M19.1341 13.9375C19.1341 13.6792 19.2253 13.4583 19.4077 13.275C19.5902 13.0917 19.81 13 20.067 13C20.3241 13 20.5439 13.0917 20.7263 13.275C20.9088 13.4583 21 13.6792 21 13.9375V20.0312C21 20.2896 20.9088 20.5104 20.7263 20.6938C20.5439 20.8771 20.3241 20.9688 20.067 20.9688C19.81 20.9688 19.5902 20.8771 19.4077 20.6938C19.2253 20.5104 19.1341 20.2896 19.1341 20.0312V13.9375Z"
fill="#26201E"
/>
<path
d="M20.067 10C20.3241 10 20.5439 10.0917 20.7263 10.275C20.9088 10.4583 21 10.6792 21 10.9375C21 11.1958 20.9088 11.4167 20.7263 11.6C20.5439 11.7833 20.3241 11.875 20.067 11.875H13.933C13.6759 11.875 13.4561 11.7833 13.2737 11.6C13.0912 11.4167 13 11.1958 13 10.9375C13 10.6792 13.0912 10.4583 13.2737 10.275C13.4561 10.0917 13.6759 10 13.933 10H20.067Z"
fill="#26201E"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function YardIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames}
{...props}
>
<mask
style={{ maskType: "alpha" }}
id="mask0_4039_3234"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4039_3234)">
<path
d="M12 19C12 17.3333 11.4167 15.9167 10.25 14.75C9.08333 13.5833 7.66667 13 6 13C6 14.6667 6.58333 16.0833 7.75 17.25C8.91667 18.4167 10.3333 19 12 19ZM12 13.95C12.4333 13.95 12.8 13.8 13.1 13.5C13.4 13.2 13.55 12.8333 13.55 12.4V12.25C13.6833 12.35 13.8208 12.425 13.9625 12.475C14.1042 12.525 14.2667 12.55 14.45 12.55C14.8833 12.55 15.25 12.4 15.55 12.1C15.85 11.8 16 11.4333 16 11C16 10.6667 15.9208 10.375 15.7625 10.125C15.6042 9.875 15.3833 9.7 15.1 9.6C15.3833 9.5 15.6042 9.325 15.7625 9.075C15.9208 8.825 16 8.53333 16 8.2C16 7.76667 15.85 7.4 15.55 7.1C15.25 6.8 14.8833 6.65 14.45 6.65C14.2667 6.65 14.1042 6.675 13.9625 6.725C13.8208 6.775 13.6833 6.85 13.55 6.95V6.8C13.55 6.36667 13.4 6 13.1 5.7C12.8 5.4 12.4333 5.25 12 5.25C11.5667 5.25 11.2 5.4 10.9 5.7C10.6 6 10.45 6.36667 10.45 6.8V6.95C10.3167 6.85 10.1792 6.775 10.0375 6.725C9.89583 6.675 9.73333 6.65 9.55 6.65C9.11667 6.65 8.75 6.8 8.45 7.1C8.15 7.4 8 7.76667 8 8.2C8 8.53333 8.07917 8.825 8.2375 9.075C8.39583 9.325 8.61667 9.5 8.9 9.6C8.61667 9.7 8.39583 9.875 8.2375 10.125C8.07917 10.375 8 10.6667 8 11C8 11.4333 8.15 11.8 8.45 12.1C8.75 12.4 9.11667 12.55 9.55 12.55C9.73333 12.55 9.89583 12.525 10.0375 12.475C10.1792 12.425 10.3167 12.35 10.45 12.25V12.4C10.45 12.8333 10.6 13.2 10.9 13.5C11.2 13.8 11.5667 13.95 12 13.95ZM12 11.15C11.5667 11.15 11.2 11.0042 10.9 10.7125C10.6 10.4208 10.45 10.05 10.45 9.6C10.45 9.16667 10.6 8.8 10.9 8.5C11.2 8.2 11.5667 8.05 12 8.05C12.4333 8.05 12.8 8.2 13.1 8.5C13.4 8.8 13.55 9.16667 13.55 9.6C13.55 10.05 13.4 10.4208 13.1 10.7125C12.8 11.0042 12.4333 11.15 12 11.15ZM12 19C13.6667 19 15.0833 18.4167 16.25 17.25C17.4167 16.0833 18 14.6667 18 13C16.3333 13 14.9167 13.5833 13.75 14.75C12.5833 15.9167 12 17.3333 12 19ZM4 22C3.45 22 2.97917 21.8042 2.5875 21.4125C2.19583 21.0208 2 20.55 2 20V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V20C22 20.55 21.8042 21.0208 21.4125 21.4125C21.0208 21.8042 20.55 22 20 22H4ZM4 20H20V4H4V20Z"
fill="#1C1B1F"
/>
</g>
</svg>
)
}

18
components/Icons/index.tsx
View File

@@ -1,3 +1,4 @@
export { default as AcIcon } from "./Ac"
export { default as AccesoriesIcon } from "./Accesories"
export { default as AccessibilityIcon } from "./Accessibility"
export { default as AccountCircleIcon } from "./AccountCircle"
@@ -5,18 +6,22 @@ export { default as AirIcon } from "./Air"
export { default as AirplaneIcon } from "./Airplane"
export { default as ArrowRightIcon } from "./ArrowRight"
export { default as BarIcon } from "./Bar"
export { default as BathtubIcon } from "./Bathtub"
export { default as BedDoubleIcon } from "./BedDouble"
export { default as BikingIcon } from "./Biking"
export { default as BreakfastIcon } from "./Breakfast"
export { default as BusinessIcon } from "./Business"
export { default as CalendarIcon } from "./Calendar"
export { default as CameraIcon } from "./Camera"
export { default as CellphoneIcon } from "./Cellphone"
export { default as ChairIcon } from "./Chair"
export { default as CheckIcon } from "./Check"
export { default as CheckCircleIcon } from "./CheckCircle"
export { default as ChevronDownIcon } from "./ChevronDown"
export { default as ChevronLeftIcon } from "./ChevronLeft"
export { default as ChevronRightIcon } from "./ChevronRight"
export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
export { default as CityIcon } from "./City"
export { default as CloseIcon } from "./Close"
export { default as CloseLargeIcon } from "./CloseLarge"
export { default as CoffeeAltIcon } from "./CoffeeAlt"
@@ -27,6 +32,7 @@ export { default as CreditCard } from "./CreditCard"
export { default as CrossCircle } from "./CrossCircle"
export { default as CulturalIcon } from "./Cultural"
export { default as DeleteIcon } from "./Delete"
export { default as DeskIcon } from "./Desk"
export { default as DoorOpenIcon } from "./DoorOpen"
export { default as DownloadIcon } from "./Download"
export { default as DresserIcon } from "./Dresser"
@@ -46,6 +52,8 @@ export { default as GiftIcon } from "./Gift"
export { default as GlobeIcon } from "./Globe"
export { default as GolfIcon } from "./Golf"
export { default as GroceriesIcon } from "./Groceries"
export { default as HairdryerIcon } from "./Hairdryer"
export { default as HandSoapIcon } from "./HandSoap"
export { default as HangerIcon } from "./Hanger"
export { default as HangerAltIcon } from "./HangerAlt"
export { default as HeartIcon } from "./Heart"
@@ -53,6 +61,8 @@ export { default as HeatIcon } from "./Heat"
export { default as HouseIcon } from "./House"
export { default as ImageIcon } from "./Image"
export { default as InfoCircleIcon } from "./InfoCircle"
export { default as InstagramIcon } from "./Instagram"
export { default as IronIcon } from "./Iron"
export { default as KayakingIcon } from "./Kayaking"
export { default as KettleIcon } from "./Kettle"
export { default as KingBedIcon } from "./KingBed"
@@ -63,6 +73,7 @@ export { default as LocationIcon } from "./Location"
export { default as LockIcon } from "./Lock"
export { default as MapIcon } from "./Map"
export { default as MinusIcon } from "./Minus"
export { default as MirrorIcon } from "./Mirror"
export { default as MuseumIcon } from "./Museum"
export { default as NatureIcon } from "./Nature"
export { default as NightlifeIcon } from "./Nightlife"
@@ -80,11 +91,13 @@ export { default as PriceTagIcon } from "./PriceTag"
export { default as PrinterIcon } from "./Printer"
export { default as RestaurantIcon } from "./Restaurant"
export { default as RoomServiceIcon } from "./RoomService"
export { default as SafetyBoxIcon } from "./SafetyBox"
export { default as SaunaIcon } from "./Sauna"
export { default as ScandicLogoIcon } from "./ScandicLogo"
export { default as SearchIcon } from "./Search"
export { default as ServiceIcon } from "./Service"
export { default as ShoppingIcon } from "./Shopping"
export { default as ShowerIcon } from "./Shower"
export { default as SkateboardingIcon } from "./Skateboarding"
export { default as SmokingIcon } from "./Smoking"
export { default as SnowflakeIcon } from "./Snowflake"
@@ -99,3 +112,8 @@ export { default as TshirtWashIcon } from "./TshirtWash"
export { default as TvCastingIcon } from "./TvCasting"
export { default as WarningTriangle } from "./WarningTriangle"
export { default as WifiIcon } from "./Wifi"
export { default as WindowCurtainsAltIcon } from "./WindowCurtainsAlt"
export { default as WindowNotAvailableIcon } from "./WindowNotAvailable"
export { default as WineBarIcon } from "./WineBar"
export { default as WoodFloorIcon } from "./WoodFloor"
export { default as YardIcon } from "./Yard"

8
components/Lightbox/Gallery.tsx
View File

@@ -1,6 +1,4 @@
"use client"
import { DialogTitle } from "@radix-ui/react-dialog"
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
import { AnimatePresence, motion } from "framer-motion"
import { ChevronRightIcon } from "@/components/Icons"
@@ -16,7 +14,6 @@ import type { GalleryProps } from "@/types/components/lightbox/lightbox"
export default function Gallery({
images,
dialogTitle,
onClose,
onSelectImage,
onImageClick,
@@ -57,11 +54,6 @@ export default function Gallery({
</Button>
{/* Desktop Gallery */}
<div className={styles.desktopGallery}>
<VisuallyHidden asChild>
<DialogTitle asChild>
<VisuallyHidden>{dialogTitle}</VisuallyHidden>
</DialogTitle>
</VisuallyHidden>
<div className={styles.galleryHeader}>
{mainImage.title && (
<div className={styles.imageCaption}>

22
components/Lightbox/Lightbox.module.css
View File

@@ -1,3 +1,13 @@
@keyframes darken-background {
from {
background-color: rgba(0, 0, 0, 0);
}
to {
background-color: rgba(0, 0, 0, 0.5);
}
}
.mobileGallery {
height: 100%;
position: relative;
@@ -33,14 +43,22 @@
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
z-index: var(--lightbox-z-index);
}
.overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
z-index: var(--lightbox-z-index);
}
.overlay[data-entering] {
animation: darken-background 0.2s;
}
.overlay[data-exiting] {
animation: darken-background 0.2s reverse;
}
.galleryContainer {

36
components/Lightbox/index.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import * as Dialog from "@radix-ui/react-dialog"
import { AnimatePresence, motion } from "framer-motion"
import React, { useState } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import FullView from "./FullView"
import Gallery from "./Gallery"
@@ -62,20 +62,16 @@ export default function Lightbox({
return (
<>
{triggerElement}
<Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
<AnimatePresence>
{isOpen && (
<Dialog.Portal forceMount>
<Dialog.Overlay asChild>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className={styles.overlay}
/>
</Dialog.Overlay>
<Dialog.Content asChild>
<ModalOverlay
isOpen={isOpen}
onOpenChange={handleOpenChange}
className={styles.overlay}
isDismissable
>
<Modal>
<AnimatePresence>
{isOpen && (
<Dialog>
<motion.div
className={`${styles.content} ${
isFullView ? styles.fullViewContent : styles.galleryContent
@@ -109,11 +105,11 @@ export default function Lightbox({
/>
)}
</motion.div>
</Dialog.Content>
</Dialog.Portal>
)}
</AnimatePresence>
</Dialog.Root>
</Dialog>
)}
</AnimatePresence>
</Modal>
</ModalOverlay>
</>
)
}

2
components/TempDesignSystem/SidePeek/sidePeek.module.css
View File

@@ -39,7 +39,7 @@
width: 100%;
height: 100vh;
background-color: var(--Base-Background-Primary-Normal);
z-index: 100;
z-index: var(--sidepeek-z-index);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
}

4
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -80,6 +80,10 @@
color: var(--UI-Text-High-contrast);
}
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.white {
color: var(--UI-Opacity-White-100);
}

1
components/TempDesignSystem/Text/Body/variants.ts
View File

@@ -12,6 +12,7 @@ const config = {
pale: styles.pale,
red: styles.red,
textMediumContrast: styles.textMediumContrast,
baseTextMediumContrast: styles.baseTextMediumContrast,
textHighContrast: styles.textHighContrast,
white: styles.white,
peach50: styles.peach50,

2
i18n/dictionaries/da.json
View File

@@ -346,12 +346,14 @@
"Zoom in": "Zoom ind",
"Zoom out": "Zoom ud",
"as of today": "pr. dags dato",
"booking.accommodatesUpTo": "Plads til {nrOfGuests, plural, one {# person} other {op til # personer}}",
"booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
"booking.children": "{totalChildren, plural, one {# barn} other {# børn}}",
"booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}",
"booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
"booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
"booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
"booking.thisRoomIsEquippedWith": "Dette værelse er udstyret med",
"by": "inden",
"characters": "tegn",
"guest": "gæst",

2
i18n/dictionaries/de.json
View File

@@ -346,12 +346,14 @@
"Zoom in": "Vergrößern",
"Zoom out": "Verkleinern",
"as of today": "Stand heute",
"booking.accommodatesUpTo": "Bietet Platz für {nrOfGuests, plural, one {# Person } other {bis zu # Personen}}",
"booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}",
"booking.children": "{totalChildren, plural, one {# kind} other {# kinder}}",
"booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}",
"booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}",
"booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}",
"booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
"booking.thisRoomIsEquippedWith": "Dieses Zimmer ist ausgestattet mit",
"by": "bis",
"characters": "figuren",
"guest": "gast",

2
i18n/dictionaries/en.json
View File

@@ -364,6 +364,7 @@
"Zoom in": "Zoom in",
"Zoom out": "Zoom out",
"as of today": "as of today",
"booking.accommodatesUpTo": "Accommodates up to {nrOfGuests, plural, one {# person} other {# people}}",
"booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
"booking.children": "{totalChildren, plural, one {# child} other {# children}}",
"booking.confirmation.text": "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please <emailLink>email us.</emailLink>",
@@ -372,6 +373,7 @@
"booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
"booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
"booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
"booking.thisRoomIsEquippedWith": "This room is equipped with",
"by": "by",
"characters": "characters",
"from": "from",

2
i18n/dictionaries/fi.json
View File

@@ -347,12 +347,14 @@
"Zoom in": "Lähennä",
"Zoom out": "Loitonna",
"as of today": "tänään",
"booking.accommodatesUpTo": "Huoneeseen {nrOfGuests, plural, one {# person} other {mahtuu 2 henkilöä}}",
"booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}",
"booking.children": "{totalChildren, plural, one {# lapsi} other {# lasta}}",
"booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}",
"booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
"booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}",
"booking.terms": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset <termsLink>ehdot ja ehtoja</termsLink>, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti <privacyLink>Scandicin tietosuojavaltuuden</privacyLink> mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.",
"booking.thisRoomIsEquippedWith": "Tämä huone on varustettu",
"by": "mennessä",
"characters": "hahmoja",
"guest": "Vieras",

2
i18n/dictionaries/no.json
View File

@@ -344,11 +344,13 @@
"Zoom in": "Zoom inn",
"Zoom out": "Zoom ut",
"as of today": "per i dag",
"booking.accommodatesUpTo": "Plass til {nrOfGuests, plural, one {# person} other {opptil # personer}}",
"booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
"booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
"booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}",
"booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
"booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
"booking.thisRoomIsEquippedWith": "Dette rommet er utstyrt med",
"by": "innen",
"characters": "tegn",
"guest": "gjest",

2
i18n/dictionaries/sv.json
View File

@@ -344,12 +344,14 @@
"Zoom in": "Zooma in",
"Zoom out": "Zooma ut",
"as of today": "från och med idag",
"booking.accommodatesUpTo": "Rymmer {nrOfGuests, plural, one {# person} other {upp till # personer}}",
"booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}",
"booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
"booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
"booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
"booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}",
"booking.terms": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella <termsLink>Villkoren och villkoren</termsLink>, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med <privacyLink>Scandics integritetspolicy</privacyLink>. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.",
"booking.thisRoomIsEquippedWith": "Detta rum är utrustat med",
"by": "innan",
"characters": "tecken",
"guest": "gäst",

1
server/routers/hotels/schemas/room.ts
View File

@@ -89,5 +89,6 @@ export const roomSchema = z
roomSize: data.attributes.roomSize,
sortOrder: data.attributes.sortOrder,
type: data.type,
roomFacilities: data.attributes.roomFacilities,
}
})

8
types/components/hotelReservation/selectRate/roomSidePeek.ts Normal file
View File

@@ -0,0 +1,8 @@
import { RoomConfiguration } from "@/server/routers/hotels/output"
import { RoomData } from "@/types/hotel"
export type RoomSidePeekProps = {
roomConfiguration: RoomConfiguration
selectedRoom?: RoomData
}