57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { forwardRef, useState } from 'react';
|
|
import { IProject, Media } from '../../types/IProject';
|
|
|
|
export const Project = forwardRef<HTMLDivElement, IProject<Media>>(
|
|
({ src, title, tags, media, year }, ref) => {
|
|
const [buffering, setBuffering] = useState(true);
|
|
|
|
return (
|
|
<div
|
|
itemProp="project"
|
|
itemScope
|
|
itemType={`https://schema.org/${title}`}
|
|
ref={ref}
|
|
className="relative flex flex-col aspect-square"
|
|
>
|
|
{media === Media.img ? (
|
|
<div
|
|
className="flex-1 bg-center bg-no-repeat bg-cover"
|
|
style={{ backgroundImage: `url(${src})` }}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="relative flex-1 overflow-hidden bg-center bg-no-repeat bg-cover"
|
|
style={{ backgroundImage: `url(${src[1]})` }}
|
|
>
|
|
<video
|
|
src={src[0]}
|
|
muted
|
|
loop
|
|
autoPlay
|
|
className="object-cover object-center w-full h-full -mb-px"
|
|
onPlaying={() => setBuffering(false)}
|
|
onWaiting={() => setBuffering(true)}
|
|
/>
|
|
{buffering && <div className="absolute" />}
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col justify-between gap-2 my-4">
|
|
<div className="flex justify-between">
|
|
<h4 className="text-xl font-medium">{title}</h4>
|
|
<p className="text-xl font-medium">{year}</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{tags.map(tag => (
|
|
<p key={tag} className="font-medium m-caption text-[#737AA1]">
|
|
{tag}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
Project.displayName = 'Project';
|