Bento Grid 1

1'use client'
2 
3import { useState } from 'react'
4import { SlidersHorizontal } from 'lucide-react'
5 
6import { Button } from '@/components/ui/button'
7 
8import { destinationsByRegion, type Destination, type RegionId } from "@/components/data/bento-grid-1-data"
9import { BentoGrid1DestinationCard } from './bento-grid-1-destination-card'
10import { BentoGrid1FilterColumn, BentoGrid1FilterGrid, BentoGrid1FilterItem } from './bento-grid-1-filter-grid'
11import { BentoGrid1SlidingTabs } from './bento-grid-1-sliding-tabs'
12 
13const columnHeights = [
14  ['h-[300px]', 'h-[300px]'],
15  ['h-[420px]', 'h-[180px]'],
16  ['h-[300px]', 'h-[300px]'],
17] as const
18 
19function buildColumns(items: Destination[]) {
20  return columnHeights.map((heights, columnIndex) => {
21    const start = columnIndex * 2
22    return heights
23      .map((heightClass, rowIndex) => {
24        const destination = items[start + rowIndex]
25        if (!destination) {
26          return null
27        }
28 
29        return { destination, heightClass }
30      })
31      .filter((entry): entry is { destination: Destination; heightClass: (typeof heights)[number] } => entry !== null)
32  })
33}
34 
35export function BentoGrid1() {
36  const [activeRegion, setActiveRegion] = useState<RegionId>('top-rated')
37  const [favorites, setFavorites] = useState<number[]>([])
38 
39  const activeDestinations = destinationsByRegion[activeRegion]
40  const columns = buildColumns(activeDestinations)
41 
42  const toggleFavorite = (id: number) => {
43    setFavorites(prev => (prev.includes(id) ? prev.filter(favId => favId !== id) : [...prev, id]))
44  }
45 
46  return (
47    <section className='w-full'>
48      <div className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
49        <div className='mb-8 flex flex-col gap-2 text-center sm:mb-12 lg:mb-16'>
50          <h2 className='text-3xl tracking-tight sm:text-4xl lg:text-5xl'>
51            <span className='text-foreground font-bold'>Top</span>{' '}
52            <span className='text-foreground font-semibold'>Destinations</span>
53          </h2>
54          <p className='text-muted-foreground mx-auto max-w-2xl'>
55            There are Many Variations of Passages Of Lorem Ipsum Available
56          </p>
57        </div>
58 
59        <div className='mb-8 flex flex-wrap items-center justify-between gap-4'>
60          <BentoGrid1SlidingTabs value={activeRegion} onValueChange={setActiveRegion} />
61          <Button variant='outline' className='h-9 cursor-pointer px-4 py-2'>
62            <SlidersHorizontal data-icon='inline-start' />
63            Filter
64// … truncated