Merged in monorepo-step-1 (pull request #1080)
Migrate to a monorepo setup - step 1 * Move web to subfolder /apps/scandic-web * Yarn + transitive deps - Move to yarn - design-system package removed for now since yarn doesn't support the parameter for token (ie project currently broken) - Add missing transitive dependencies as Yarn otherwise prevents these imports - VS Code doesn't pick up TS path aliases unless you open /apps/scandic-web instead of root (will be fixed with monorepo) * Pin framer-motion to temporarily fix typing issue https://github.com/adobe/react-spectrum/issues/7494 * Pin zod to avoid typ error There seems to have been a breaking change in the types returned by zod where error is now returned as undefined instead of missing in the type. We should just handle this but to avoid merge conflicts just pin the dependency for now. * Pin react-intl version Pin version of react-intl to avoid tiny type issue where formatMessage does not accept a generic any more. This will be fixed in a future commit, but to avoid merge conflicts just pin for now. * Pin typescript version Temporarily pin version as newer versions as stricter and results in a type error. Will be fixed in future commit after merge. * Setup workspaces * Add design-system as a monorepo package * Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN * Fix husky for monorepo setup * Update netlify.toml * Add lint script to root package.json * Add stub readme * Fix react-intl formatMessage types * Test netlify.toml in root * Remove root toml * Update netlify.toml publish path * Remove package-lock.json * Update build for branch/preview builds Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
committed by
Linus Flood
Linus Flood
parent
667cab6fb6
commit
80100e7631
@@ -0,0 +1,63 @@
|
||||
.card {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
min-height: 200px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.priceVariants {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: var(--Spacing-x2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1367px) {
|
||||
.content {
|
||||
padding: var(--Spacing-x2) 0 var(--Spacing-x2) var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.text {
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-direction: row;
|
||||
}
|
||||
.imageContainer {
|
||||
width: 315px;
|
||||
height: 100%;
|
||||
}
|
||||
.priceVariants {
|
||||
max-width: 260px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
||||
|
||||
import styles from "./HotelCardSkeleton.module.css"
|
||||
|
||||
export function HotelCardSkeleton() {
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
{/* image container */}
|
||||
<div className={styles.imageContainer}>
|
||||
<SkeletonShimmer width={"100%"} height="100%" />
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<SkeletonShimmer height={"65px"} />
|
||||
<div className={styles.text}>
|
||||
<SkeletonShimmer height={"20px"} />
|
||||
<SkeletonShimmer height={"20px"} />
|
||||
<SkeletonShimmer height={"20px"} />
|
||||
<SkeletonShimmer height={"20px"} />
|
||||
</div>
|
||||
<SkeletonShimmer height={"56px"} />
|
||||
<SkeletonShimmer height={"52px"} width={"150px"} />
|
||||
</div>
|
||||
|
||||
<div className={styles.priceVariants}>
|
||||
{/* price variants */}
|
||||
{Array.from({ length: 2 }).map((_, index) => (
|
||||
<SkeletonShimmer key={index} height={"100px"} />
|
||||
))}
|
||||
<SkeletonShimmer height={"40px"} />
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.priceCard {
|
||||
padding: var(--Spacing-x-one-and-half);
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.divider {
|
||||
margin: var(--Spacing-x-half) 0;
|
||||
}
|
||||
|
||||
.priceRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding: var(--Spacing-x-quarter) 0;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.perNight {
|
||||
font-weight: 400;
|
||||
font-size: var(--typography-Caption-Regular-fontSize);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import Divider from "@/components/TempDesignSystem/Divider"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
|
||||
import styles from "./hotelPriceCard.module.css"
|
||||
|
||||
import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"
|
||||
|
||||
export default function HotelPriceCard({
|
||||
productTypePrices,
|
||||
isMemberPrice = false,
|
||||
}: PriceCardProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<dl className={styles.priceCard}>
|
||||
{isMemberPrice ? (
|
||||
<div className={styles.priceRow}>
|
||||
<dt>
|
||||
<Caption color="red">
|
||||
{intl.formatMessage({ id: "Member price" })}
|
||||
</Caption>
|
||||
</dt>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.priceRow}>
|
||||
<dt>
|
||||
<Caption color="uiTextHighContrast">
|
||||
{intl.formatMessage({ id: "Standard price" })}
|
||||
</Caption>
|
||||
</dt>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.priceRow}>
|
||||
<dt>
|
||||
<Caption
|
||||
type="bold"
|
||||
color={isMemberPrice ? "red" : "uiTextHighContrast"}
|
||||
>
|
||||
{intl.formatMessage({ id: "From" })}
|
||||
</Caption>
|
||||
</dt>
|
||||
<dd>
|
||||
<div className={styles.price}>
|
||||
<Subtitle
|
||||
type="two"
|
||||
color={isMemberPrice ? "red" : "uiTextHighContrast"}
|
||||
>
|
||||
{productTypePrices.localPrice.pricePerNight}
|
||||
</Subtitle>
|
||||
<Body
|
||||
color={isMemberPrice ? "red" : "uiTextHighContrast"}
|
||||
textTransform="bold"
|
||||
>
|
||||
{productTypePrices.localPrice.currency}
|
||||
<span className={styles.perNight}>
|
||||
/{intl.formatMessage({ id: "night" })}
|
||||
</span>
|
||||
</Body>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
{productTypePrices?.requestedPrice && (
|
||||
<div className={styles.priceRow}>
|
||||
<dt>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage({ id: "Approx." })}
|
||||
</Caption>
|
||||
</dt>
|
||||
<dd>
|
||||
<Caption color={"uiTextMediumContrast"}>
|
||||
{productTypePrices.requestedPrice.pricePerNight}{" "}
|
||||
{productTypePrices.requestedPrice.currency}
|
||||
</Caption>
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
{productTypePrices.localPrice.pricePerStay !==
|
||||
productTypePrices.localPrice.pricePerNight && (
|
||||
<>
|
||||
<Divider color="subtle" className={styles.divider} />
|
||||
<div className={styles.priceRow}>
|
||||
<dt>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage({ id: "Total" })}
|
||||
</Caption>
|
||||
</dt>
|
||||
<dd>
|
||||
<Caption color={"uiTextMediumContrast"}>
|
||||
{productTypePrices.localPrice.pricePerStay}{" "}
|
||||
{productTypePrices.localPrice.currency}
|
||||
</Caption>
|
||||
</dd>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { ErrorCircleIcon } from "@/components/Icons"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
|
||||
import styles from "./noPriceAvailable.module.css"
|
||||
|
||||
export default function NoPriceAvailableCard() {
|
||||
const intl = useIntl()
|
||||
return (
|
||||
<div className={styles.priceCard}>
|
||||
<div className={styles.noRooms}>
|
||||
<div>
|
||||
<ErrorCircleIcon color="red" />
|
||||
</div>
|
||||
<Caption color="uiTextHighContrast">
|
||||
{intl.formatMessage({
|
||||
id: "There are no rooms available that match your request.",
|
||||
})}
|
||||
</Caption>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.priceCard {
|
||||
padding: var(--Spacing-x-one-and-half);
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.noRooms {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card.active {
|
||||
border: 1px solid var(--Base-Border-Hover);
|
||||
}
|
||||
|
||||
.card.active {
|
||||
border: 1px solid var(--Base-Border-Hover);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imageContainer img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hotelInformation {
|
||||
margin-bottom: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.hotelContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.hotelDescription {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.titleContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
margin-top: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.addressContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.address {
|
||||
display: none;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.addressMobile {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.facilities {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--Spacing-x1);
|
||||
margin-top: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.facilitiesItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.button {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.specialAlerts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.prices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.strikedText {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width: 1024px) {
|
||||
.imageContainer {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1367px) {
|
||||
.card.pageListing {
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pageListing .hotelDescription {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pageListing .imageContainer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 314px;
|
||||
}
|
||||
|
||||
.pageListing .hotelInformation {
|
||||
width: min(422px, 100%);
|
||||
padding-right: var(--Spacing-x2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pageListing .facilities {
|
||||
margin: var(--Spacing-x1) 0;
|
||||
}
|
||||
|
||||
.pageListing .hotelContent {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x2);
|
||||
padding-left: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.pageListing .titleContainer {
|
||||
margin-bottom: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.pageListing .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pageListing .addressMobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pageListing .address {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pageListing .prices {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
208
apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
Normal file
208
apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
"use client"
|
||||
|
||||
import { useParams } from "next/dist/client/components/navigation"
|
||||
import { memo, useCallback } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { selectRate } from "@/constants/routes/hotelReservation"
|
||||
import { useHotelsMapStore } from "@/stores/hotels-map"
|
||||
|
||||
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
||||
import { PriceTagIcon } from "@/components/Icons"
|
||||
import HotelLogo from "@/components/Icons/Logos"
|
||||
import ImageGallery from "@/components/ImageGallery"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
import Divider from "@/components/TempDesignSystem/Divider"
|
||||
import Link from "@/components/TempDesignSystem/Link"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
|
||||
import { getSingleDecimal } from "@/utils/numberFormatting"
|
||||
|
||||
import ReadMore from "../ReadMore"
|
||||
import TripAdvisorChip from "../TripAdvisorChip"
|
||||
import HotelPriceCard from "./HotelPriceCard"
|
||||
import NoPriceAvailableCard from "./NoPriceAvailableCard"
|
||||
import { hotelCardVariants } from "./variants"
|
||||
|
||||
import styles from "./hotelCard.module.css"
|
||||
|
||||
import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
|
||||
import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
|
||||
import type { Lang } from "@/constants/languages"
|
||||
|
||||
function HotelCard({
|
||||
hotel,
|
||||
isUserLoggedIn,
|
||||
state = "default",
|
||||
type = HotelCardListingTypeEnum.PageListing,
|
||||
bookingCode = "",
|
||||
}: HotelCardProps) {
|
||||
const params = useParams()
|
||||
const lang = params.lang as Lang
|
||||
const intl = useIntl()
|
||||
const { setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore()
|
||||
|
||||
const { hotelData } = hotel
|
||||
const { price } = hotel
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
if (hotelData) {
|
||||
setActiveHotelPin(hotelData.name)
|
||||
}
|
||||
}, [setActiveHotelPin, hotelData])
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
if (hotelData) {
|
||||
setActiveHotelPin(null)
|
||||
setActiveHotelCard(null)
|
||||
}
|
||||
}, [setActiveHotelPin, hotelData, setActiveHotelCard])
|
||||
|
||||
if (!hotel || !hotelData) return null
|
||||
|
||||
const amenities = hotelData.detailedFacilities.slice(0, 5)
|
||||
|
||||
const classNames = hotelCardVariants({
|
||||
type,
|
||||
state,
|
||||
})
|
||||
|
||||
const addressStr = `${hotelData.address.streetAddress}, ${hotelData.address.city}`
|
||||
const galleryImages = mapApiImagesToGalleryImages(
|
||||
hotelData.galleryImages || []
|
||||
)
|
||||
const fullPrice = hotel.price?.public?.rateType?.toLowerCase() === "regular"
|
||||
|
||||
return (
|
||||
<article
|
||||
className={classNames}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<div>
|
||||
<div className={styles.imageContainer}>
|
||||
<ImageGallery title={hotelData.name} images={galleryImages} fill />
|
||||
{hotelData.ratings?.tripAdvisor && (
|
||||
<TripAdvisorChip rating={hotelData.ratings.tripAdvisor.rating} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.hotelContent}>
|
||||
<section className={styles.hotelInformation}>
|
||||
<div className={styles.titleContainer}>
|
||||
<HotelLogo
|
||||
hotelId={hotelData.operaId}
|
||||
hotelType={hotelData.hotelType}
|
||||
/>
|
||||
<Subtitle textTransform="capitalize" color="uiTextHighContrast">
|
||||
{hotelData.name}
|
||||
</Subtitle>
|
||||
<div className={styles.addressContainer}>
|
||||
<address className={styles.address}>
|
||||
<Caption color="uiTextPlaceholder">{addressStr}</Caption>
|
||||
</address>
|
||||
<address className={styles.addressMobile}>
|
||||
<Caption color="burgundy" type="underline" asChild>
|
||||
<Link
|
||||
href={`https://www.google.com/maps/dir/?api=1&destination=${hotelData.location.latitude},${hotelData.location.longitude}`}
|
||||
target="_blank"
|
||||
aria-label={intl.formatMessage({
|
||||
id: "Driving directions",
|
||||
})}
|
||||
title={intl.formatMessage({
|
||||
id: "Driving directions",
|
||||
})}
|
||||
color="burgundy"
|
||||
size="small"
|
||||
>
|
||||
{addressStr}
|
||||
</Link>
|
||||
</Caption>
|
||||
</address>
|
||||
<div>
|
||||
<Divider variant="vertical" color="subtle" />
|
||||
</div>
|
||||
<Caption color="uiTextPlaceholder">
|
||||
{intl.formatMessage(
|
||||
{ id: "{number} km to city center" },
|
||||
{
|
||||
number: getSingleDecimal(
|
||||
hotelData.location.distanceToCentre / 1000
|
||||
),
|
||||
}
|
||||
)}
|
||||
</Caption>
|
||||
</div>
|
||||
</div>
|
||||
<Body className={styles.hotelDescription}>
|
||||
{hotelData.hotelContent.texts.descriptions?.short}
|
||||
</Body>
|
||||
<div className={styles.facilities}>
|
||||
{amenities.map((facility) => {
|
||||
const IconComponent = mapFacilityToIcon(facility.id)
|
||||
return (
|
||||
<div className={styles.facilitiesItem} key={facility.id}>
|
||||
{IconComponent && <IconComponent color="grey80" />}
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{facility.name}
|
||||
</Caption>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<ReadMore
|
||||
label={intl.formatMessage({ id: "See hotel details" })}
|
||||
hotelId={hotelData.operaId}
|
||||
hotel={hotelData}
|
||||
showCTA={true}
|
||||
/>
|
||||
</section>
|
||||
<div className={styles.prices}>
|
||||
{!price ? (
|
||||
<NoPriceAvailableCard />
|
||||
) : (
|
||||
<>
|
||||
{bookingCode && (
|
||||
<span
|
||||
className={`${styles.bookingCode} ${fullPrice ? styles.strikedText : ""}`}
|
||||
>
|
||||
<PriceTagIcon height={20} width={20} />
|
||||
{bookingCode}
|
||||
</span>
|
||||
)}
|
||||
{(!isUserLoggedIn || (bookingCode && !fullPrice)) &&
|
||||
price.public && (
|
||||
<HotelPriceCard productTypePrices={price.public} />
|
||||
)}
|
||||
{price.member && (
|
||||
<HotelPriceCard
|
||||
productTypePrices={price.member}
|
||||
isMemberPrice
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
asChild
|
||||
theme="base"
|
||||
intent="primary"
|
||||
size="small"
|
||||
className={styles.button}
|
||||
>
|
||||
<Link
|
||||
href={`${selectRate(lang)}?hotel=${hotel.hotelData.operaId}`}
|
||||
color="none"
|
||||
keepSearchParams
|
||||
>
|
||||
{intl.formatMessage({ id: "See rooms" })}
|
||||
</Link>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(HotelCard)
|
||||
@@ -0,0 +1,20 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./hotelCard.module.css"
|
||||
|
||||
export const hotelCardVariants = cva(styles.card, {
|
||||
variants: {
|
||||
type: {
|
||||
pageListing: styles.pageListing,
|
||||
mapListing: styles.mapListing,
|
||||
},
|
||||
state: {
|
||||
active: styles.active,
|
||||
default: styles.default,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
type: "pageListing",
|
||||
state: "default",
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user