Hero

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5export type HeroSize = "sm" | "md" | "lg"
6 
7type HeroSizeConfig = {
8  container: string
9  title: string
10}
11 
12const sizeConfig: Record<HeroSize, HeroSizeConfig> = {
13  sm: {
14    container: "w-[60vw] max-w-[800px]",
15    title: "text-[clamp(4px,4vw,4.5rem)]",
16  },
17  md: {
18    container: "w-[75vw] max-w-[1000px]",
19    title: "text-[clamp(4px,5vw,4.5rem)]",
20  },
21  lg: {
22    container: "w-[90vw] max-w-[1200px]",
23    title: "text-[clamp(4px,6vw,4.5rem)]",
24  },
25}
26 
27export type HeroProps = {
28  cover: string
29  coverTop?: number
30  size?: HeroSize
31  imgProps: React.ImgHTMLAttributes<HTMLImageElement>
32  className?: string
33}
34 
35export function Hero({
36  cover,
37  coverTop = 50,
38  size = "md",
39  imgProps,
40  className,
41}: HeroProps) {
42  const { container, title } = sizeConfig[size]
43  const { className: imgClassName, ...restImgProps } = imgProps
44 
45  return (
46    <div className={cn("flex w-full items-center justify-center", className)}>
47      <div
48        className={cn(
49          "relative flex items-center justify-center",
50          container
51        )}
52      >
53        <div className="w-full">
54          <img
55            {...restImgProps}
56            className={cn(
57              "block w-full object-cover object-center opacity-60 grayscale animate-lighting",
58              imgClassName
59            )}
60          />
61        </div>
62        <h1
63          className={cn(
64            "absolute left-1/2 inline-block w-full -translate-x-1/2 -translate-y-1/2 text-center bg-[rgba(4,37,43,0.45)]",
65            title
66          )}
67          style={{ top: `${coverTop}%` }}
68        >
69          {cover}
70        </h1>
71      </div>
72    </div>
73  )
74}