git.iko.soy/urbit.org
on 514b5fc help sign in
urbit.org/components/GrantPreview.js
60 lines 2.2 kB history raw
1import classnames from "classnames";
2import Link from "next/link";
4export default function GrantPreview({ grant }) {
5 const isCompleted = grant.extra.completed;
6 const isOpen = !isCompleted && grant.extra.assignee === "";
7 const type = grant.taxonomies.grant_type;
9 const className = classnames({
10 "bg-lightBlue": type.includes("Proposal") && isOpen,
11 "bg-green-200": type.includes("Apprenticeship") && isOpen,
12 "bg-yellow-100": type.includes("Bounty") && isOpen,
13 });
15 return (
16 <div
17 key={grant.slug}
18 className={`mb-4 cursor-pointer bg-wall-100 rounded-lg ${className}`}
19 >
20 <Link href={`/grants/${grant.slug}`}>
21 <div className="p-8">
22 <div className="flex items-center mb-4">
23 <h3 className="type-ui" id={grant.slug}>
24 {grant.title}
25 </h3>
26 <div className={`bg-wall-500 text-wall-100 badge-sm ml-2`}>
27 {!isCompleted ? (isOpen ? "Open" : "In Progress") : "Completed"}
28 </div>
29 </div>
30 <p className="mb-4">{grant.extra.description}</p>
31 <div className="flex w-full flex-col md:flex-row md:items-center justify-between">
32 <p className="text-wall-500">
33 <strong>Reward: </strong>
34 {grant.extra.reward}
35 </p>
36 <div className="flex items-center flex-wrap md:mt-0 mt-4">
37 {grant.taxonomies.grant_type.map((category) => {
38 const className = classnames({
39 "bg-blue-400 text-white": category === "Proposal",
40 "bg-green-400 text-white": category === "Apprenticeship",
41 "bg-yellow-300": category === "Bounty",
42 });
43 return (
44 <div className={`${className} badge-sm mr-1 my-1`}>
45 {category}
46 </div>
47 );
48 })}
49 {grant.taxonomies.grant_category.map((category) => (
50 <div className="bg-wall-500 text-wall-100 badge-sm mr-1 my-1">
51 {category}
52 </div>
53 ))}
54 </div>
55 </div>
56 </div>
57 </Link>
58 </div>
59 );