Layer

'use client';

import { useState } from 'react';
import { Layer } from '@/ui/Layer';
import { Button } from '@/ui/buttons/Button';

export function LayerDemo() {
  const [isOpen, setIsOpen] = useState(false);
  const close = () => setIsOpen(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Open Layer</Button>
      <Layer
        heading="Your stay"
        isOpen={isOpen}
        onClose={close}
        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}
      >
        <div className="space-y-20 p-20">
          <p>
            A Layer covers the whole screen and slides in from the side. Press Escape or use the
            close button to dismiss it.
          </p>
          <p>
            Its body scrolls on its own, below the header, while the page behind it stays locked.
          </p>
        </div>
      </Layer>
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Layer } from '@/ui/Layer';
import { Button } from '@/ui/buttons/Button';

export function LayerButtonsDemo() {
  const [isOpen, setIsOpen] = useState(false);
  const [step, setStep] = useState(1);

  const close = () => {
    setIsOpen(false);
    setStep(1);
  };

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Book an activity</Button>
      <Layer
        heading={`Step ${step} of 2`}
        isOpen={isOpen}
        onClose={close}
        leftButton={
          step > 1
            ? { label: 'Previous step', icon: 'ArrowDefaultLeft', onClick: () => setStep(1) }
            : undefined
        }
        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}
      >
        <div className="space-y-20 p-20">
          {step === 1 ? (
            <>
              <p>Choose an activity for your stay.</p>
              <Button onClick={() => setStep(2)}>Continue</Button>
            </>
          ) : (
            <>
              <p>Pick a time slot. The back arrow returns to the previous step.</p>
              <Button onClick={close}>Confirm</Button>
            </>
          )}
        </div>
      </Layer>
    </div>
  );
}

'use client';

import { useRef, useState } from 'react';
import { Layer } from '@/ui/Layer';
import { Button } from '@/ui/buttons/Button';

export function LayerScaleDemo() {
  const [isOpen, setIsOpen] = useState(false);
  const trigger = useRef<HTMLButtonElement>(null);
  const close = () => setIsOpen(false);

  return (
    <div>
      <Button ref={trigger} onClick={() => setIsOpen(true)} icon="ArrowDefaultRight">
        See the gallery
      </Button>
      <Layer
        animation="scale"
        origin={trigger}
        heading="Gallery"
        isOpen={isOpen}
        onClose={close}
        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}
      >
        <div className="grid grid-cols-2 gap-8 p-20 md:grid-cols-3">
          {Array.from({ length: 9 }, (_, index) => (
            <div key={index} className="bg-lightSand rounded-16 aspect-square" />
          ))}
        </div>
      </Layer>
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Layer } from '@/ui/Layer';
import { Button } from '@/ui/buttons/Button';

export function LayerPinnedDemo() {
  const [isOpen, setIsOpen] = useState(false);
  const close = () => setIsOpen(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)} icon="Search">
        Search a resort
      </Button>
      <Layer
        heading="Search"
        isOpen={isOpen}
        onClose={close}
        pinToVisualViewport
        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}
      >
        <div className="p-20">
          <input
            aria-label="Destination"
            className="w-full rounded-pill border border-black px-20 py-12"
            placeholder="Where do you want to go?"
          />
        </div>
      </Layer>
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Layer } from '@/ui/Layer';
import { Button } from '@/ui/buttons/Button';

export function LayerNestedDemo() {
  const [isFiltersOpen, setIsFiltersOpen] = useState(false);
  const [isDatesOpen, setIsDatesOpen] = useState(false);

  const closeFilters = () => setIsFiltersOpen(false);
  const closeDates = () => setIsDatesOpen(false);

  return (
    <div>
      <Button onClick={() => setIsFiltersOpen(true)}>Filters</Button>
      <Layer
        heading="Filters"
        isOpen={isFiltersOpen}
        onClose={closeFilters}
        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: closeFilters }}
      >
        <div className="space-y-20 p-20">
          <p>A second layer can open on top of this one.</p>
          <Button onClick={() => setIsDatesOpen(true)}>Choose dates</Button>
        </div>
      </Layer>
      <Layer
        heading="Dates"
        hLevel={2}
        isOpen={isDatesOpen}
        onClose={closeDates}
        leftButton={{ label: 'Back to filters', icon: 'ArrowDefaultLeft', onClick: closeDates }}
      >
        <div className="p-20">
          <p>Escape closes this layer only, and returns to the filters.</p>
        </div>
      </Layer>
    </div>
  );
}

'use client';

import { Layer } from '@/ui/Layer';
import { Button } from '@/ui/buttons/Button';
import { useLayer } from '@/ui/hooks/useLayer';

export function LayerUseLayerDemo() {
  const { close, isOpen, open } = useLayer({
    onClose: () => console.log('Layer closed'),
    onOpen: () => console.log('Layer opened'),
  });

  return (
    <div>
      <Button onClick={open}>Open with useLayer</Button>
      <Layer
        heading="Driven by useLayer"
        isOpen={isOpen}
        onClose={close}
        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}
      >
        <div className="p-20">
          <p>`open` and `close` keep the same identity across renders.</p>
        </div>
      </Layer>
    </div>
  );
}