Travel Postcard

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { forwardRef, type ComponentPropsWithoutRef } from "react";
import Image from "next/image";
 
import { cn } from "@/lib/cn";
 
import { MapPin } from "lucide-react";
 
export type TravelPostcardCardProps = Readonly<
  {
    image?: string;
    title?: string;
    message?: string;
    location?: string;
    country?: string;
    date?: string;
    author?: string;
    icon?: React.ReactNode;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Production-ready Travel Postcard component — styled with Tailwind CSS.
export const TravelPostcardCard = forwardRef<
  HTMLDivElement,
  TravelPostcardCardProps
>(
  (
    {
      className,
      image = "/wallpaper-3.png",
      title = "Greetings from Sundarbans!",
      message = "Postcard",
      location = "West Bengal, India",
      country = "INDIA",
      date = "06.2026",
      author = "JD",
      icon,
      ...props
    },
    ref,
  ) => {
    return (
      <div
        ref={ref}
        data-slot="travel-postcard-card"
        className={cn(
          "w-72 overflow-hidden border border-[#e8e0d0] bg-[#fffdf5] font-serif shadow-[4px_4px_0_#e8e0d0]",
          className,
        )}
        {...props}
      >
        {/* Image section */}
        <div className="relative h-40">
          <Image
            src={image}
            alt={title}
            fill
            sizes="288px"
            className="object-cover sepia-[0.2]"
          />
 
          {/* Map badge */}
          <div className="absolute top-2 right-2 flex h-10 w-8 flex-col items-center justify-center border border-neutral-100 bg-white/90 shadow-sm">
            {icon ?? <MapPin size={10} className="text-[#55534f]" />}
            <span className="mt-0.5 font-mono text-[6px] text-neutral-500">
              {country}
            </span>
          </div>
        </div>
 
        <div className="relative p-4">
          {/* decorative stamp */}
          <div className="absolute top-3 right-4 h-20 w-16 rotate-3 rounded-sm border-2 border-red-400/40 opacity-30" />
 
          <p className="mb-2 font-mono text-[10px] tracking-[0.3em] text-[#a09080] uppercase">
            {message}
          </p>
 
          <h3 className="mb-2 text-lg leading-snug font-normal text-[#3d3530] italic">
            {title}
          </h3>
 
          <div className="flex items-center gap-1.5 text-[11px] text-[#8a7e70]">
            <MapPin size={10} />
            <span>{location}</span>
          </div>
 
          <p className="mt-3 text-right font-mono text-[10px] text-[#b0a595]">
            — {author} · {date}
          </p>
        </div>
      </div>
    );
  },
);
 
TravelPostcardCard.displayName = "TravelPostcardCard";