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

feat(SW-2975): Added top campaign to campaign overview page

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-06-24 10:22:07 +00:00
parent 438de66a1f
commit 11201e238d
13 changed files with 212 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx
View File

@@ -21,20 +21,24 @@ import type { HotelDataWithUrl } from "@/types/hotel"
interface CampaignHotelListingClientProps {
heading: string
hotels: HotelDataWithUrl[]
visibleCountMobile?: 3 | 6
visibleCountDesktop?: 3 | 6
}
export default function CampaignHotelListingClient({
heading,
hotels,
visibleCountMobile = 3,
visibleCountDesktop = 6,
}: CampaignHotelListingClientProps) {
const intl = useIntl()
const isMobile = useMediaQuery("(max-width: 767px)")
const scrollRef = useRef<HTMLElement>(null)
const initialCount = isMobile ? 3 : 6 // Initial number of hotels to show
const thresholdCount = isMobile ? 6 : 9 // This is the threshold at which we start showing the "Show More" button
const showAllThreshold = isMobile ? 9 : 18 // This is the threshold at which we show the "Show All" button
const incrementCount = isMobile ? 3 : 6 // Number of hotels to increment when the button is clicked
const initialCount = isMobile ? visibleCountMobile : visibleCountDesktop // Initial number of hotels to show
const thresholdCount = initialCount + 3 // This is the threshold at which we start showing the "Show More" button
const showAllThreshold = initialCount * 3 // This is the threshold at which we show the "Show All" button
const incrementCount = initialCount // Number of hotels to increment when the button is clicked
const [visibleCount, setVisibleCount] = useState(() =>
// Set initial visible count based on the number of hotels and the threshold
@@ -86,8 +90,8 @@ export default function CampaignHotelListingClient({
return (
<section className={styles.hotelListingSection} ref={scrollRef}>
<header className={styles.header}>
<Typography variant="Title/md">
<h2 className={styles.heading}>{heading}</h2>
<Typography variant="Title/Subtitle/lg">
<h3>{heading}</h3>
</Typography>
</header>
<ul className={styles.list}>