import {
  Bookmark,
  Ellipsis,
  Heart,
  MessageSquareMore,
  Repeat2,
  Share,
} from "lucide-react";

export function MonochromaticJoshuaCard() {
  return (
    <div className="border border-[#f0f0f0] dark:border-[#252525] bg-[#fafafa] dark:bg-[#111111] rounded-lg overflow-hidden flex flex-col max-w-[500px] w-full shadow-lg">
      <div className="grid grid-cols-[1fr_50px] border-b border-[#f0f0f0] dark:border-[#252525]">
        <div className="relative p-3 px-4 flex items-center gap-2">
          <h3 className="text-[#2a2a2a] dark:text-[#ededed] text-base font-medium">
            Inno AI
          </h3>
          <p className="text-[#848484] dark:text-[#9f9f9f] text-sm">@inno-ai</p>
        </div>
        <button className="relative flex items-center justify-center border-l border-[#f0f0f0] dark:border-[#252525] cursor-pointer hover:bg-[#f0f0f0] dark:hover:bg-[#252525] transition-colors duration-200">
          <Ellipsis className="text-[#9f9f9f] text-sm size-4" />
        </button>
      </div>

      <div className="relative h-[250px]">
        <img
          src="https://pbs.twimg.com/media/GsMd54QaUAAeV7T?format=jpg&name=4096x4096"
          alt="Amsterdam cityscape"
          className="w-full h-full object-cover"
        />
      </div>
      <div className="relative p-4 border-t border-[#f0f0f0] dark:border-[#252525]">
        <p className="dark:text-[#a3a3a3] text-[#2a2a2a] text-base font-medium">
          The most remarkable aspect of life is not merely to foresee what lies
          ahead, but rather to take initiative and actively shape the future
          according to our dreams and aspirations.
        </p>
      </div>

      <div className="grid grid-cols-[1fr_70px] border-t border-[#f0f0f0] dark:border-[#252525]">
        <div className="relative p-3 px-4 flex items-center gap-5">
          <button className="flex items-center gap-1 cursor-pointer group transition-colors duration-200">
            <MessageSquareMore className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm size-4 dark:group-hover:text-neutral-300 group-hover:text-neutral-500" />
            <p className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm dark:group-hover:text-neutral-300 group-hover:text-neutral-500">
              197
            </p>
          </button>
          <button className="flex items-center gap-1 cursor-pointer group transition-colors duration-200">
            <Repeat2 className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm size-4 dark:group-hover:text-neutral-300 group-hover:text-neutral-500" />
            <p className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm dark:group-hover:text-neutral-300 group-hover:text-neutral-500">
              75
            </p>
          </button>
          <button className="flex items-center gap-1 cursor-pointer group transition-colors duration-200">
            <Heart className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm size-4 dark:group-hover:text-neutral-300 group-hover:text-neutral-500" />
            <p className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm dark:group-hover:text-neutral-300 group-hover:text-neutral-500">
              999
            </p>
          </button>
        </div>
        <div className="relative flex items-center justify-center gap-3 border-l border-[#f0f0f0] dark:border-[#252525]">
          <button className="flex items-center gap-1 cursor-pointer group transition-colors duration-200">
            <Bookmark className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm size-4 dark:group-hover:text-neutral-300 group-hover:text-neutral-500" />
          </button>
          <button className="flex items-center gap-1 cursor-pointer group transition-colors duration-200">
            <Share className="dark:text-[#9f9f9f] text-[#2a2a2a] text-sm size-4 dark:group-hover:text-neutral-300   group-hover:text-neutral-500" />
          </button>
        </div>
      </div>
    </div>
  );
}
Monochromatic Joshua Card

Card Design by Joshua Guo. You can find the original design here.

Installation

Card Design by Joshua Guo. You can find the original design here.

Installation

Inno AI
