Spaces:
Running
Running
File size: 2,573 Bytes
b10df03 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import Image from "next/image";
import { TiHeartFullOutline } from "react-icons/ti";
import { SpaceProps } from "@/utils/type";
import Link from "next/link";
interface Props {
space: SpaceProps;
}
export const Space: React.FC<Props> = ({ space }) => {
return (
<Link
href={`https://huggingface.co/spaces/${space.id}`}
target="_blank"
className="bg-gray-50 border border-gray-200 px-6 py-4 rounded-xl transition-all duration-300 hover:ring-[4px] hover:ring-blue-500/10"
>
<header className="flex items-center justify-between gap-5">
<div>
<h2 className="font-semibold text-black">{space?.title}</h2>
{space.shortDescription && (
<p className="text-gray-500 text-xs mt-0.5 line-clamp-1">
{space.shortDescription}
</p>
)}
<div className="flex items-center justify-start gap-2 whitespace-pre-line mt-2">
<Image
src={
space.authorData.avatarUrl?.startsWith("/")
? `https://huggingface.co${space.authorData.avatarUrl}`
: space.authorData.avatarUrl
}
alt={space.authorData.name}
width={24}
height={24}
className="rounded-full w-4 h-4"
/>
<div>
<p className="text-gray-500 text-xs font-regular">
{space.authorData.name}
</p>
</div>
</div>
</div>
<div className="space-y-3 flex flex-col items-end">
<div
className="rounded-full truncate min-w-[2.5rem] min-h-[2.5rem] max-w-[2.5rem] max-h-[2.5rem] overflow-hidden flex items-center justify-center bg-gradient-to-br from-blue-500 to-red-500 border-[2px] border-white ring-1 ring-gray-200"
style={{
// @ts-ignore
"--tw-gradient-from": `${space.colorFrom} var(--tw-gradient-to-position)`,
"--tw-gradient-to": space.colorTo,
}}
>
{space?.emoji && (
<p className="text-xl">
{/* keep only 1 char */}
{space.emoji}
</p>
)}
</div>
<div className="flex items-center max-w-max rounded-full px-1.5 py-1 text-sm bg-gray-100/80 border border-gray-200 text-gray-600">
<TiHeartFullOutline className="w-5" />
<p className="text-gray-500 text-xs font-regular">{space.likes}</p>
</div>
</div>
</header>
</Link>
);
};
|