components/space/sub/header.tsx

import { Heart } from "lucide-react";

import { Space } from "@/utils/types";

export const SpaceHeader = ({ space }: { space: Space }) => {
  return (
    <figure className="relative z-[1] h-[200px] px-6 py-4 mb-4">
      <div
        className={`bg-gradient-to-br ${space.colorFrom} ${space.colorTo} absolute w-full top-0 left-0 h-full rounded-2xl -z-[1]`}
      />
      <div
        className={`bg-gradient-to-br ${space.colorFrom} ${space.colorTo} -z-[1] blur-lg opacity-50 h-full w-full absolute top-0 left-0`}
      />
      <div className="flex items-center justify-between w-full relative">
        <p>tags</p>
        <p className="flex items-center justify-end gap-1 text-sm text-white">
          <Heart size={14} />
          {space.likes}
        </p>
      </div>
      <p className="absolute top-0 left-0 h-full w-full flex items-center justify-center opacity-90 text-7xl text-center whitespace-nowrap truncate">
        {space.emoji}
      </p>
    </figure>
  );
};