@@ -17,43 +17,45 @@ export default function GrantPreview({ grant }) {
1717 key={grant.slug}
1818 className={`mb-4 cursor-pointer bg-wall-100 rounded-lg ${className}`}
1919 >
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"}
20+ <Link href={`/grants/${grant.slug}`} passHref>
21+ <a>
22+ <div className="p-8">
23+ <div className="flex items-center mb-4">
24+ <h3 className="type-ui" id={grant.slug}>
25+ {grant.title}
26+ </h3>
27+ <div className={`bg-wall-500 text-wall-100 badge-sm ml-2`}>
28+ {!isCompleted ? (isOpen ? "Open" : "In Progress") : "Completed"}
29+ </div>
2830 </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`}>
31+ <p className="mb-4">{grant.extra.description}</p>
32+ <div className="flex w-full flex-col md:flex-row md:items-center justify-between">
33+ <p className="text-wall-500">
34+ <strong>Reward: </strong>
35+ {grant.extra.reward}
36+ </p>
37+ <div className="flex items-center flex-wrap md:mt-0 mt-4">
38+ {grant.taxonomies.grant_type.map((category) => {
39+ const className = classnames({
40+ "bg-blue-400 text-white": category === "Proposal",
41+ "bg-green-400 text-white": category === "Apprenticeship",
42+ "bg-yellow-300": category === "Bounty",
43+ });
44+ return (
45+ <div className={`${className} badge-sm mr-1 my-1`}>
46+ {category}
47+ </div>
48+ );
49+ })}
50+ {grant.taxonomies.grant_category.map((category) => (
51+ <div className="bg-wall-500 text-wall-100 badge-sm mr-1 my-1">
4552 {category}
4653 </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+ ))}
55+ </div>
5456 </div>
5557 </div>
56− </div>
58+ </a>
5759 </Link>
5860 </div>
5961 );