bg-media

1"use client"
2 
3import React, { useRef, useState } from "react"
4import { cva } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7 
8// Make sure this utility exists in your project for combining class names
9 
10// Define the type for the variant and type props
11type OverlayVariant = "none" | "light" | "dark"
12type MediaType = "image" | "video"
13 
14// Update the cva call with these types
15const backgroundVariants = cva(
16  "relative h-screen max-h-[1000px] w-full min-h-[500px] lg:min-h-[600px]",
17  {
18    variants: {
19      overlay: {
20        none: "",
21        light:
22          "before:absolute before:inset-0 before:bg-white before:opacity-30",
23        dark: "before:absolute before:inset-0 before:bg-black before:opacity-30",
24      },
25      type: {
26        image: "",
27        video: "z-10",
28      },
29    },
30    defaultVariants: {
31      overlay: "none",
32      type: "image",
33    },
34  }
35)
36 
37interface BackgroundMediaProps {
38  variant?: OverlayVariant
39  type?: MediaType
40  src: string
41  alt?: string
42}
43 
44export const BackgroundMedia: React.FC<BackgroundMediaProps> = ({
45  variant = "light",
46  type = "image",
47  src,
48  alt = "",
49}) => {
50  const [isPlaying, setIsPlaying] = useState(true)
51  const mediaRef = useRef<HTMLVideoElement | null>(null)
52 
53  const toggleMediaPlay = () => {
54    if (type === "video" && mediaRef.current) {
55      if (isPlaying) {
56        mediaRef.current.pause()
57      } else {
58        mediaRef.current.play()
59      }
60      setIsPlaying(!isPlaying)
61    }
62  }
63 
64  const mediaClasses = cn(
65    backgroundVariants({ overlay: variant, type }),
66    "overflow-hidden"
67  )
68 
69  const renderMedia = () => {
70    if (type === "video") {
71      return (
72        <video
73          ref={mediaRef}
74          aria-hidden="true"
75          muted
76          className="absolute inset-0 h-full w-full object-cover transition-opacity duration-300 pointer-events-none"
77          autoPlay
78          playsInline
79        >
80          <source src={src} type="video/mp4" />
81          Your browser does not support the video tag.
82        </video>
83      )
84    } else {
85      return (
86        <img
87          src={src}
88          alt={alt}
89          className="absolute inset-0 h-full w-full object-cover rounded-br-[88px]"
90          loading="eager"
91        />
92      )
93    }
94  }
95 
96  return (
97    <div className={mediaClasses}>
98      {renderMedia()}
99      {type === "video" && (
100        <button
101          aria-label={isPlaying ? "Pause video" : "Play video"}
102// … truncated