Ticket

"use client";import {  type CSSProperties,  type ReactNode,  useSyncExternalStore,} from "react";import type { ReactParallaxTiltProps } from "react-parallax-tilt";import Tilt from "react-parallax-tilt";import { cn } from "@/helpers/classname-helper";const hoverTiltMedia =  "(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)";const ticketClipPath = `polygon(  0 var(--ticket-corner-size),  var(--ticket-corner-size) 0,  calc(100% - var(--ticket-corner-size)) 0,  100% var(--ticket-corner-size),  100% calc(100% - var(--ticket-stub-height) - var(--ticket-notch-size)),  calc(100% - var(--ticket-notch-size)) calc(100% - var(--ticket-stub-height)),  100% calc(100% - var(--ticket-stub-height) + var(--ticket-notch-size)),  100% calc(100% - var(--ticket-corner-size)),  calc(100% - var(--ticket-corner-size)) 100%,  var(--ticket-corner-size) 100%,  0 calc(100% - var(--ticket-corner-size)),  0 calc(100% - var(--ticket-stub-height) + var(--ticket-notch-size)),  var(--ticket-notch-size) calc(100% - var(--ticket-stub-height)),  0 calc(100% - var(--ticket-stub-height) - var(--ticket-notch-size)))`;const ticketBackground =  "linear-gradient(145deg, rgb(255 255 255 / 10%), transparent 42%), var(--ticket-paper)";const ticketShadow =  "drop-shadow(0 1px 1px rgb(15 15 15 / 10%)) drop-shadow(0 18px 26px rgb(15 15 15 / 13%))";type TicketCustomProperty =  | "--ticket-corner-size"  | "--ticket-ink"  | "--ticket-notch-size"  | "--ticket-paper"  | "--ticket-stub-height";type TicketRootStyle = CSSProperties &  Partial<Record<TicketCustomProperty, string>>;export type TicketTiltProps = Omit<  ReactParallaxTiltProps,  "children" | "className" | "style">;type CssLength = number | string;export type TicketProps = {  body: ReactNode;  stub: ReactNode;  "aria-hidden"?: boolean;  "aria-label"?: string;  bodyClassName?: string;  className?: string;  cornerSize?: CssLength;  ink?: string;  notchSize?: CssLength;  paper?: string;  stubClassName?: string;  stubHeight?: CssLength;  style?: CSSProperties;  ticketClassName?: string;  tilt?: boolean;  tiltProps?: TicketTiltProps;};function subscribeToHoverTilt(listener: () => void) {  const media = window.matchMedia(hoverTiltMedia);  media.addEventListener("change", listener);  return () => media.removeEventListener("change", listener);}function getHoverTiltSnapshot() {  return window.matchMedia(hoverTiltMedia).matches;}function getServerHoverTiltSnapshot() {  return false;}function toCssLength(value: CssLength) {  return typeof value === "number" ? `${value}px` : value;}export function Ticket({  "aria-hidden": ariaHidden,  "aria-label": ariaLabel,  body,  bodyClassName,  className,  cornerSize = 0,  ink = "#171714",  notchSize = 13,  paper = "#ff633f",  stub,  stubClassName,  stubHeight = "24%",  style,  ticketClassName,  tilt = true,  tiltProps,}: TicketProps) {  const hoverTiltEnabled = useSyncExternalStore(    subscribeToHoverTilt,    getHoverTiltSnapshot,    getServerHoverTiltSnapshot,  );  const {    glareEnable = false,    scale = 1.018,    tiltEnable: tiltEnabledByProp = true,    ...resolvedTiltProps  } = tiltProps ?? {};  const tiltEnabled = tilt && tiltEnabledByProp && hoverTiltEnabled;  const glareEnabled = tiltEnabled && glareEnable;  const rootStyle: TicketRootStyle = {    "--ticket-corner-size": toCssLength(cornerSize),    "--ticket-ink": ink,    "--ticket-notch-size": toCssLength(notchSize),    "--ticket-paper": paper,    "--ticket-stub-height": toCssLength(stubHeight),    filter: ticketShadow,    ...style,  };  return (    <div      className={cn("relative aspect-[5/12] w-[min(100%,17rem)]", className)}      style={rootStyle}    >      <Tilt        glareEnable={glareEnabled}        gyroscope={false}        key={glareEnabled ? "ticket-with-glare" : "ticket-without-glare"}        perspective={1100}        tiltMaxAngleX={6}        tiltMaxAngleY={6}        transitionEasing="cubic-bezier(0.23, 1, 0.32, 1)"        transitionSpeed={220}        {...resolvedTiltProps}        className="relative h-full w-full touch-pan-y [transform-style:preserve-3d]"        scale={tiltEnabled ? scale : 1}        style={{          clipPath: ticketClipPath,        }}        tiltEnable={tiltEnabled}      >        <article          aria-hidden={ariaHidden}          aria-label={ariaHidden ? undefined : ariaLabel}          className={cn(            "relative grid h-full w-full grid-rows-[minmax(0,1fr)_var(--ticket-stub-height)] overflow-hidden text-[var(--ticket-ink)] transition-[color,background-color] duration-[180ms] ease-[ease]",            ticketClassName,          )}          style={{ background: ticketBackground }}        >          <div            className={cn(              "relative min-h-0 min-w-0 overflow-hidden",              bodyClassName,            )}          >            {body}            <span              aria-hidden="true"              className="pointer-events-none absolute right-[calc(var(--ticket-notch-size)+6px)] bottom-px left-[calc(var(--ticket-notch-size)+6px)] z-[2] border-current border-b border-dashed opacity-30"            />          </div>          <div            className={cn(              "relative min-h-0 min-w-0 overflow-hidden",              stubClassName,            )}          >            {stub}          </div>        </article>      </Tilt>    </div>  );}