Miao-Yunzai/component/ListItem.tsx

88 lines
2.9 KiB
TypeScript
Raw Normal View History

2024-06-17 22:52:15 +08:00
import React from 'react'
2024-06-15 11:18:45 +08:00
export interface MovieType {
2024-06-17 22:52:15 +08:00
id: number //
image: string //
title: string // Prognosis Negative
starRating: string // 2.66
rating: string // PG-13
year: string // 2021
genre: string // Comedy
runtime: string // 1h 46m
cast: string // Simon Pegg, Zach Galifianakis
}
2024-06-15 11:18:45 +08:00
2024-06-17 22:52:15 +08:00
export default function ListItem({ movie }: { movie: MovieType }) {
return (
<article className="flex items-start space-x-6 p-6">
<img
src={movie.image}
alt=""
width="60"
height="88"
className="flex-none rounded-md bg-slate-100"
/>
<div className="min-w-0 relative flex-auto">
<h2 className="font-semibold text-slate-900 truncate pr-20">
{movie.title}
</h2>
<dl className="mt-2 flex flex-wrap text-sm leading-6 font-medium">
<div className="absolute top-0 right-0 flex items-center space-x-1">
<dt className="text-sky-500">
<span className="sr-only">Star rating</span>
<svg width="16" height="20" fill="currentColor">
<path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" />
</svg>
</dt>
<dd>{movie.starRating}</dd>
</div>
<div>
<dt className="sr-only">Rating</dt>
<dd className="px-1.5 ring-1 ring-slate-200 rounded">
{movie.rating}
</dd>
</div>
<div className="ml-2">
<dt className="sr-only">Year</dt>
<dd>{movie.year}</dd>
</div>
<div>
<dt className="sr-only">Genre</dt>
<dd className="flex items-center">
<svg
width="2"
height="2"
fill="currentColor"
className="mx-2 text-slate-300"
aria-hidden="true"
>
<circle cx="1" cy="1" r="1" />
</svg>
{movie.genre}
</dd>
</div>
<div>
<dt className="sr-only">Runtime</dt>
<dd className="flex items-center">
<svg
width="2"
height="2"
fill="currentColor"
className="mx-2 text-slate-300"
aria-hidden="true"
>
<circle cx="1" cy="1" r="1" />
</svg>
{movie.runtime}
</dd>
</div>
<div className="flex-none w-full mt-2 font-normal">
<dt className="sr-only">Cast</dt>
<dd className="text-slate-400">{movie.cast}</dd>
</div>
</dl>
</div>
</article>
)
}