82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
'use client'
|
||
|
||
import Image from 'next/image'
|
||
import { useState } from 'react'
|
||
import { ChevronDown, ChevronUp } from 'lucide-react'
|
||
|
||
interface ActivityProps {
|
||
activity: {
|
||
title: string
|
||
coverImage: string
|
||
description: string
|
||
date: string
|
||
participants: string[]
|
||
organizer: string
|
||
}
|
||
}
|
||
|
||
const ActivityCard: React.FC<ActivityProps> = ({ activity }) => {
|
||
const [isExpanded, setIsExpanded] = useState(false)
|
||
|
||
return (
|
||
<div className="bg-white shadow-lg rounded-lg overflow-hidden">
|
||
<div className="relative h-48">
|
||
<Image
|
||
src={activity.coverImage}
|
||
alt={activity.title}
|
||
layout="fill"
|
||
objectFit="cover"
|
||
/>
|
||
</div>
|
||
<div className="p-6">
|
||
<h3 className="text-xl font-semibold mb-2">{activity.title}</h3>
|
||
<p className="text-gray-600 mb-2">{activity.description}</p>
|
||
<p className="text-sm text-gray-500 mb-2">日期：{activity.date}</p>
|
||
<p className="text-sm text-gray-500 mb-2">组织者：{activity.organizer}</p>
|
||
<div className="mt-4">
|
||
<p className="text-sm font-semibold mb-1">参与者：</p>
|
||
{activity.participants.length <= 3 ? (
|
||
<ul className="list-disc list-inside">
|
||
{activity.participants.map((participant, index) => (
|
||
<li key={index} className="text-sm text-gray-600">{participant}</li>
|
||
))}
|
||
</ul>
|
||
) : (
|
||
<div>
|
||
<ul className="list-disc list-inside">
|
||
{activity.participants.slice(0, 3).map((participant, index) => (
|
||
<li key={index} className="text-sm text-gray-600">{participant}</li>
|
||
))}
|
||
</ul>
|
||
{isExpanded && (
|
||
<ul className="list-disc list-inside mt-2">
|
||
{activity.participants.slice(3).map((participant, index) => (
|
||
<li key={index + 3} className="text-sm text-gray-600">{participant}</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
<button
|
||
className="mt-2 text-sm text-blue-600 hover:text-blue-800 flex items-center"
|
||
onClick={() => setIsExpanded(!isExpanded)}
|
||
>
|
||
{isExpanded ? (
|
||
<>
|
||
收起 <ChevronUp className="ml-1 w-4 h-4" />
|
||
</>
|
||
) : (
|
||
<>
|
||
展开更多 ({activity.participants.length - 3}) <ChevronDown className="ml-1 w-4 h-4" />
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ActivityCard
|
||
|