index.tsx•3.85 kB
import { BiCategory } from "react-icons/bi";
import { BsTags } from "react-icons/bs";
import { Category } from "@/types/category";
import Crumb from "./crumb";
import Markdown from "@/components/markdown";
import Preview from "./preview";
import { Project } from "@/types/project";
import Projects from "../projects";
import Stars from "../stars";
import moment from "moment";
export default ({
category,
project,
more_projects,
}: {
category?: Category;
project: Project;
more_projects?: Project[];
}) => {
const tagsArr = project.tags ? project.tags.split(",") : [];
return (
<div className="mx-auto max-w-7xl px-5 py-4 md:px-10 md:py-4 lg:py-4">
<Crumb category={category} project={project} />
<div className="mx-auto w-full max-w-7xl py-8 md:py-8 lg:py-8">
<div className="grid gap-12 sm:gap-20 lg:grid-cols-2 mt-8">
<div className="flex flex-col items-start gap-2">
<h1 className="text-4xl font-bold md:text-6xl">{project.title}</h1>
<div className="flex items-center gap-2 mt-4">
<p className="text-md sm:text-md">
Created at{" "}
<span className="text-primary">
{moment(project.updated_at).fromNow()}
</span>
</p>
<p className="text-md sm:text-md">
by <span className="text-primary">{project.author_name}</span>
</p>
</div>
<div className="mt-4">
<Stars />
</div>
<p className="text-sm text-[#808080] sm:text-xl mt-4">
{project.description}
</p>
<div className="mb-8 mt-8 h-px w-full bg-black"></div>
<div className="mb-6 flex flex-col gap-2 text-sm text-[#808080] sm:text-base lg:mb-8">
<p className="font-medium">
<BiCategory className="inline-block mr-2" />
Categories
</p>
<div className="flex flex-wrap gap-2 mt-1">
<span className="text-primary text-xs border border-solid border-primary rounded-md px-2 py-1">
{project.category}
</span>
</div>
<p className="font-medium mt-4">
<BsTags className="inline-block mr-2" />
Tags
</p>
{tagsArr &&
tagsArr.map((tag) => (
<p key={tag}>
<input
type="checkbox"
className="mr-2"
readOnly
checked={tagsArr && tagsArr.includes(tag)}
/>
{tag}
</p>
))}
</div>
<div className="flex flex-col gap-4 font-semibold sm:flex-row">
<a
href={project.url}
target="_blank"
className="flex items-center gap-2 rounded-md border border-solid bg-primary text-white px-6 py-3 truncate"
>
<span>Visit {project.title} 👉</span>
</a>
</div>
</div>
{(project.img_url || project.avatar_url) && (
<div className="min-h-96 rounded-md overflow-hidden">
<Preview project={project} />
</div>
)}
</div>
</div>
{project.summary && (
<div className="w-full md:max-w-7xl mx-auto px-8 py-4 mt-16 text-left border border-gray-200 rounded-lg">
<Markdown content={project.summary || ""} />
</div>
)}
<div className="w-full text-center">
<p className="mx-auto font-bold text-3xl mt-16 mb-4">View More</p>
{more_projects && <Projects projects={more_projects} />}
</div>
</div>
);
};