94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
"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[];
|
|
link?: string;
|
|
image?: string;
|
|
video?: string;
|
|
links?: readonly {
|
|
icon: React.ReactNode;
|
|
type: string;
|
|
href: string;
|
|
}[];
|
|
className?: string;
|
|
}
|
|
|
|
export function ExperienceCard({
|
|
title,
|
|
href,
|
|
description,
|
|
dates,
|
|
image,
|
|
links,
|
|
className,
|
|
}: Props) {
|
|
return (
|
|
<Link
|
|
href={href || "#"}
|
|
className={cn(
|
|
"cards group block rounded-xl overflow-hidden font-normal no-underline cursor-pointer"
|
|
, className
|
|
)}
|
|
>
|
|
{/* 3. The Card component now has its conflicting shadow removed. */}
|
|
<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"
|
|
/>
|
|
)}
|
|
<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}
|
|
{links && links.length > 0 && (
|
|
<span className="inline-flex gap-x-1">
|
|
{links.map((link, idx) => (
|
|
<Badge
|
|
variant="secondary"
|
|
className="align-middle text-xs"
|
|
key={idx}
|
|
>
|
|
{link.type}
|
|
</Badge>
|
|
))}
|
|
</span>
|
|
)}
|
|
<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>
|
|
);
|
|
} |