website/components/list-item.tsx

"use client";

//import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import Link from "next/link";
import Markdown from "react-markdown";
import React from "react";
import { ChevronRightIcon } from "lucide-react";
import { Card, CardHeader } from "./ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";

interface Props {
  title: string;
  href?: string;
  description: string;
  dates: string;
  tags: readonly string[];
  image?: string;
  className?: string;
}

export function ExperienceCard({
  title,
  href,
  description,
  dates,
  image,
  className,
}: Props) {
  return (
    <Link
      href={href || "#"}
      className={cn(
        "cards group block rounded-xl overflow-hidden font-normal no-underline cursor-pointer"
        , className
      )}
    >
      <Card className="flex flex-row items-center p-4 shadow-none">
        <div className="flex-none flex-shrink-0 size-12">
          <Avatar className="h-full w-full rounded-md bg-muted-background">
            {image && (
              <AvatarImage
                src={image}
                alt={title}
                className="object-contain"
                fetchPriority="low"
                sizes="48"
              />
            )}
            <AvatarFallback>{title[0]}</AvatarFallback>
          </Avatar>
        </div>

        <div className="flex-grow ml-4 items-center flex-col">
          <CardHeader className="p-0">
            <div className="flex items-center justify-between gap-x-2 text-base">
              <h3 className="inline-flex items-center justify-center gap-x-2 font-semibold leading-none text-xs sm:text-sm">
                {title}
                <ChevronRightIcon className="size-4 shrink-0 translate-x-0 transform opacity-0 transition-all duration-300 ease-out group-hover:translate-x-1 group-hover:opacity-100" />
              </h3>
              <div className="text-xs sm:text-sm tabular-nums text-muted-foreground text-right whitespace-nowrap">
                {dates}
              </div>
            </div>

            <div className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert pt-1">
              <Markdown>{description}</Markdown>
            </div>
          </CardHeader>
        </div>
      </Card>
    </Link>
  );
}