76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
import { NavLink, Link } from "react-router";
|
|
|
|
type CardProps = {
|
|
title: string;
|
|
description: string;
|
|
timestamp: number;
|
|
contributor: string;
|
|
uuid: string;
|
|
filepath: string;
|
|
};
|
|
|
|
export const Card = ({
|
|
title,
|
|
description,
|
|
timestamp,
|
|
contributor,
|
|
uuid,
|
|
filepath,
|
|
}: CardProps) => {
|
|
const [showMenu, setShowMenu] = useState<boolean>(false);
|
|
console.log(filepath);
|
|
return (
|
|
<div className="flex flex-row justify-center grow">
|
|
<div className="rounded-xl shadow-xl max-w-96 min-w-lg p-8 border border-solid border-stone-100 bg-neutral-100">
|
|
<img className="pb-4" src={"/uploads/" + filepath} />
|
|
<p className="font-bold text-xl">{title}</p>
|
|
<p className="text-lg italic">
|
|
submitted {timestamp} by{" "}
|
|
<span className="font-bold">{contributor}</span>
|
|
</p>
|
|
<p className="text-lg">
|
|
<span className="font-bold">Description: </span>
|
|
{description}
|
|
</p>
|
|
<hr className="m-4" />
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-row gap-4">
|
|
<div className="bg-pink-500 hover:bg-pink-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center">
|
|
<p className="font-bold text-xl text-neutral-50">
|
|
like
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="bg-slate-500 hover:bg-slate-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center"
|
|
onClick={() => setShowMenu(!showMenu)}
|
|
>
|
|
<p className="font-bold text-xl text-neutral-50">
|
|
menu
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{showMenu && (
|
|
<>
|
|
<Link to={`/edit/${uuid}`}>
|
|
<div className="bg-yellow-500 hover:bg-yellow-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center">
|
|
<p className="font-bold text-xl text-neutral-50">
|
|
edit
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
<div className="bg-green-500 hover:bg-green-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center">
|
|
<p className="font-bold text-xl text-neutral-50">
|
|
mark as posted
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|