82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Card } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Markdown from "react-markdown";
|
|
|
|
// Using the same interface as ResearchCard for data consistency
|
|
interface Props {
|
|
title: string;
|
|
href: string;
|
|
description: string;
|
|
dates: string;
|
|
venue?: string;
|
|
tags: readonly string[];
|
|
image?: string;
|
|
video?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function ResearchListItem({
|
|
title,
|
|
href,
|
|
description,
|
|
dates,
|
|
venue,
|
|
image,
|
|
video, // Video is less common in this layout but supported
|
|
className,
|
|
}: Props) {
|
|
return (
|
|
<Link href={href} className={cn("cards rounded-xl block no-underline", className)}>
|
|
<Card className="group flex flex-col md:flex-row overflow-hidden">
|
|
{/* Image Container (Fixed Width) */}
|
|
{(image || video) && (
|
|
<div className="relative w-full md:w-48 flex-shrink-0 bg-muted/30">
|
|
{video ? (
|
|
<video
|
|
src={video}
|
|
autoPlay loop muted playsInline
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={image!}
|
|
alt={title}
|
|
width={200}
|
|
height={150}
|
|
className="max-h-30 h-full w-full object-contain p-2"
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Text Content Container (Flexible Width) */}
|
|
<div className="flex flex-1 flex-col p-4">
|
|
<h3 className="font-bold text-lg">{title}</h3>
|
|
<div className="flex items-center gap-x-2 text-xs text-muted-foreground mt-1">
|
|
{venue && <span className="font-semibold text-primary">{venue}</span>}
|
|
{venue && <span>•</span>}
|
|
<time>{dates}</time>
|
|
</div>
|
|
|
|
<div className="prose max-w-full text-pretty text-xs font-normal dark:prose-invert mt-2">
|
|
<Markdown>{description}</Markdown>
|
|
</div>
|
|
{/*
|
|
<CardContent className="mt-auto flex flex-col px-0 pb-0 pt-4">
|
|
<div className="flex flex-row flex-wrap gap-1">
|
|
{tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary" className="px-2 py-0.5 text-[10px] font-normal">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent> */}
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
} |