components/space.tsx

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>
  );
};