my-website-v2/frontend/islands/ProjectCard.tsx

export const ProjectCard = function ProjectCard(props: ProjectProps) {
  return (
    <div
      class={`md:m-8 group space-y-1 rounded-md ${
        props.wip ? "border-2" : "cursor-pointer"
      } bg-[#44485b] px-3 py-2 m-4 shadow-md transition-all duration-300 ease-in-out border-b-4 border-b-[#94e2d5] hover:shadow-xl hover:scale-105`}
      style={
        props.wip
          ? {
              borderTopStyle: "dashed",
              borderRightStyle: "dashed",
              borderLeftStyle: "dashed",
            }
          : {}
      }
      onClick={() => props.repo && open(props.repo, "_blank")}
    >
      <div class="flex items-center justify-between">
        <h2 class="text-lg text-white font-black uppercase">
          <a href={props.repo} target="_blank">
            {props.title}
          </a>
        </h2>
        <div class="bg-[#585b70] text-[#a6adc8] text-xs font-bold uppercase px-2.5 py-0.5 rounded-full">
          {props.repo && (
            <a
              class="hover:underline"
              href={props.repo}
              target="_blank"
              onClick={(e) => e.stopPropagation()}
            >
              Active
            </a>
          )}
          {!props.repo && !props.wip && <span>Dead</span>}
          {props.wip && <span>WIP</span>}
        </div>
      </div>
      <p class="whitespace-pre-wrap italic font-light text-lg text-[#a6adc8]">
        {props.summary}
      </p>
      <p class="whitespace-pre-wrap text-sm font-semibold text-[#a6adc8]">
        {props.tech}
      </p>
    </div>
  );
};

type ProjectProps = {
  title: string;
  repo?: string;
  summary: string;
  tech: string;
  wip?: boolean;
};