project pages updates

This commit is contained in:
Kalidou Diagne
2024-03-19 11:53:58 +00:00
parent 3b923a0420
commit 2a1a19a736
9 changed files with 93 additions and 72 deletions

View File

@@ -22,9 +22,9 @@ export default async function ProjectsPage({ params: { lang } }: any) {
<ProjectFiltersBar lang={lang} />
</PageHeader>
<div className="w-full bg-anakiwa-100 pb-28">
<div className="container">
<div className="py-8">
<div className="w-full bg-white pb-28">
<div className="container flex flex-col gap-14 py-8">
<div>
<ProjectResultBar lang={lang} />
</div>
<ProjectList lang={lang} />

View File

@@ -11,6 +11,7 @@ import { AppContent } from "@/components/ui/app-content"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Icons } from "@/components/icons"
import { PageHeader } from "@/components/page-header"
import { useTranslation } from "@/app/i18n/client"
import ResourcesContent from "../content/resources.md"
@@ -166,35 +167,40 @@ const ResourceNav = ({ lang }: LangProps["params"]) => {
})}
</ul>
</div>
<Link
href={siteConfig.addGithubResource}
target="_blank"
rel="noreferrer"
passHref
>
<Button size="lg" icon={Icons.gitHub}>
<span className="pl-2 text-left text-sm font-medium">
{t("editResources")}
</span>
</Button>
</Link>
</div>
)
}
export default function ResourcePage({ params: { lang } }: LangProps) {
const { t } = useTranslation(lang, "resources-page")
const { t: common } = useTranslation(lang, "common")
return (
<main className="bg-second-gradient">
<main className="bg-white">
<PageHeader
title={t("title")}
subtitle={t("subtitle")}
actions={
<Link
href={siteConfig.addGithubResource}
target="_blank"
rel="noreferrer"
passHref
>
<Button size="lg">
<div className="flex items-center gap-1">
<Icons.discord size={18} />
<span className="pl-2 text-left text-sm font-medium uppercase">
{common("addResource")}
</span>
<Icons.externalUrl size={22} />
</div>
</Button>
</Link>
}
/>
<AppContent className="container grid grid-cols-1 gap-6 py-10 md:grid-cols-[3fr_1fr] md:pb-20 lg:grid-cols-[4fr_1fr]">
<div className="flex flex-col gap-6">
<section className="flex flex-col gap-8">
<Label.PageTitle label={t("title")} />
<p className="font-sans text-base font-normal leading-[27px] text-tuatara-950">
{t("subtitle")}
</p>
</section>
<article className="flex flex-col space-y-8 ">
<ResourcesContent
components={{

View File

@@ -70,5 +70,7 @@
"whatDoYouWantDoToday": "What do you want to do today?",
"showingProjects": "Showing {{count}} projects",
"showingProjectsWith": "Showing {{count}} projects with:",
"connectWithUsOnPlatform": "Connect with us on {{platform}}"
"connectWithUsOnPlatform": "Connect with us on {{platform}}",
"addResource": "Add a resource",
"notCurrentlyActive": "Not Currently Active"
}

View File

@@ -40,8 +40,8 @@ export const Icons = {
),
discord: (props: LucideProps) => (
<svg
width={props?.width || 24}
height={props?.width || 24}
width={props?.size || 24}
height={props?.size || 24}
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
@@ -254,8 +254,8 @@ export const Icons = {
),
externalUrl: (props: LucideProps) => (
<svg
width="24"
height="25"
width={props.size || 24}
height={props.size || 25}
viewBox="0 0 24 25"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"

View File

@@ -7,6 +7,7 @@ import { VariantProps, cva } from "class-variance-authority"
import { ProjectInterface, ProjectLinkWebsite } from "@/lib/types"
import { cn } from "@/lib/utils"
import { useTranslation } from "@/app/i18n/client"
import { LocaleTypes } from "@/app/i18n/settings"
import { Icons } from "../icons"
@@ -29,11 +30,11 @@ const TagsIconMapping: Record<string, any> = {
}
const projectCardVariants = cva(
"flex w-[310px] cursor-pointer flex-col overflow-hidden rounded-lg transition duration-150 ease-in hover:scale-105",
"flex w-[310px] cursor-pointer flex-col overflow-hidden rounded-lg transition duration-150 ease-in hover:scale-105",
{
variants: {
showLinks: {
true: "min-h-[460px]",
true: "min-h-[450px]",
false: "min-h-[200px]",
},
border: {
@@ -51,9 +52,13 @@ export default function ProjectCard({
className,
lang,
}: ProjectCardProps & { lang: LocaleTypes }) {
const { t } = useTranslation(lang, "common")
const router = useRouter()
const { id, image, links, name, tldr, tags, imageAlt } = project
const { id, image, links, name, tldr, tags, imageAlt, projectStatus } =
project
const projectNotActive = projectStatus !== "active"
return (
<div
@@ -76,7 +81,7 @@ export default function ProjectCard({
)}
</div>
)}
<div className="flex h-full flex-col justify-between gap-5 rounded-b-lg bg-white p-5">
<div className="flex h-full flex-col justify-between rounded-b-lg bg-white p-4">
<div className="flex flex-col justify-start gap-2">
<div className="mb-2 flex gap-2">
{tags?.themes?.map((theme, index) => {
@@ -94,21 +99,30 @@ export default function ProjectCard({
})}
</div>
<h1 className="text-xl font-bold text-black">{name}</h1>
<p className="text-slate-900/80">{tldr}</p>
</div>
{showLinks && (
<div className="mr-auto flex items-center justify-start gap-2">
{Object.entries(links ?? {})?.map(([website, url], index) => {
return (
<ProjectLink
key={index}
url={url}
website={website as ProjectLinkWebsite}
/>
)
})}
<div className="flex h-28 flex-col gap-4">
<p className="text-slate-900/80">{tldr}</p>
</div>
)}
</div>
<div className="mt-auto flex justify-between">
{showLinks && (
<div className="flex items-center justify-start gap-3">
{Object.entries(links ?? {})?.map(([website, url], index) => {
return (
<ProjectLink
key={index}
url={url}
website={website as ProjectLinkWebsite}
/>
)
})}
</div>
)}
{projectNotActive && (
<span className="text-sm font-medium italic leading-[21px] text-tuatara-400">
{t("notCurrentlyActive")}
</span>
)}
</div>
</div>
</div>
)

View File

@@ -25,15 +25,13 @@ export function ProjectLink({ website, url }: ProjectLinkProps) {
target="_blank"
rel="noopener noreferrer"
>
<div className="rounded bg-[#F5F5F6] px-4 py-1">
<Image
src={image}
alt={`${website}Vector`}
className="cursor-pointer"
width={18}
height={18}
/>
</div>
<Image
src={image}
alt={`${website}Vector`}
className="h-5 cursor-pointer text-black"
width={20}
height={20}
/>
</a>
)
}

View File

@@ -1,10 +1,10 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="github-fill" clip-path="url(#clip0_3593_4160)">
<path id="Vector" d="M12.5205 2C6.99551 2 2.52051 6.475 2.52051 12C2.51938 14.0993 3.17932 16.1456 4.40672 17.8487C5.63413 19.5517 7.36665 20.8251 9.35851 21.488C9.85851 21.575 10.0455 21.275 10.0455 21.012C10.0455 20.775 10.0325 19.988 10.0325 19.15C7.52051 19.613 6.87051 18.538 6.67051 17.975C6.55751 17.687 6.07051 16.8 5.64551 16.562C5.29551 16.375 4.79551 15.912 5.63251 15.9C6.42051 15.887 6.98251 16.625 7.17051 16.925C8.07051 18.437 9.50851 18.012 10.0825 17.75C10.1705 17.1 10.4325 16.663 10.7205 16.413C8.49551 16.163 6.17051 15.3 6.17051 11.475C6.17051 10.387 6.55751 9.488 7.19551 8.787C7.09551 8.537 6.74551 7.512 7.29551 6.137C7.29551 6.137 8.13251 5.875 10.0455 7.163C10.8596 6.93706 11.7007 6.82334 12.5455 6.825C13.3955 6.825 14.2455 6.937 15.0455 7.162C16.9575 5.862 17.7955 6.138 17.7955 6.138C18.3455 7.513 17.9955 8.538 17.8955 8.788C18.5325 9.488 18.9205 10.375 18.9205 11.475C18.9205 15.313 16.5835 16.163 14.3585 16.413C14.7205 16.725 15.0335 17.325 15.0335 18.263C15.0335 19.6 15.0205 20.675 15.0205 21.013C15.0205 21.275 15.2085 21.587 15.7085 21.487C17.6935 20.8168 19.4184 19.541 20.6404 17.8392C21.8624 16.1373 22.5199 14.0951 22.5205 12C22.5205 6.475 18.0455 2 12.5205 2Z" fill="#4A5754"/>
</g>
<defs>
<clipPath id="clip0_3593_4160">
<rect width="24" height="24" fill="white" transform="translate(0.520508)"/>
</clipPath>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99667 0.395996C7.63749 0.39722 5.35566 1.2328 3.5592 2.75332C1.76275 4.27384 0.568814 6.38015 0.190885 8.69562C-0.187044 11.0111 0.275672 13.3847 1.49631 15.3921C2.71694 17.3995 4.61589 18.9097 6.8536 19.6527C7.34727 19.7444 7.53323 19.4384 7.53323 19.1782C7.53323 18.9181 7.52335 18.1638 7.52006 17.3391C4.75547 17.9363 4.1713 16.1725 4.1713 16.1725C3.72041 15.0271 3.06875 14.7261 3.06875 14.7261C2.16697 14.1141 3.13623 14.1256 3.13623 14.1256C4.1351 14.1959 4.66004 15.1449 4.66004 15.1449C5.54536 16.6552 6.98524 16.2183 7.55132 15.963C7.64019 15.3233 7.89855 14.888 8.18323 14.641C5.97486 14.3923 3.65458 13.5447 3.65458 9.75848C3.64089 8.77654 4.00735 7.82695 4.67814 7.10616C4.57611 6.85745 4.23547 5.85281 4.77522 4.4882C4.77522 4.4882 5.60954 4.22313 7.50855 5.50102C9.13739 5.05812 10.8559 5.05812 12.4848 5.50102C14.3822 4.22313 15.2148 4.4882 15.2148 4.4882C15.7562 5.84954 15.4156 6.85418 15.3136 7.10616C15.9865 7.82706 16.3537 8.77831 16.3388 9.76175C16.3388 13.5562 14.0135 14.3923 11.8019 14.6361C12.1573 14.9437 12.4749 15.5442 12.4749 16.467C12.4749 17.7891 12.4634 18.8526 12.4634 19.1782C12.4634 19.4417 12.6428 19.7493 13.1463 19.6527C15.3843 18.9096 17.2834 17.3991 18.504 15.3914C19.7246 13.3837 20.1871 11.0097 19.8088 8.69401C19.4304 6.37832 18.2359 4.27199 16.4388 2.75173C14.6418 1.23147 12.3594 0.396444 9.99996 0.395996H9.99667Z" fill="#3A3B40" />
<path d="M3.8218 14.5836C3.80041 14.6327 3.72142 14.6474 3.65724 14.613C3.59307 14.5787 3.54535 14.5149 3.56839 14.4641C3.59142 14.4134 3.66877 14.4003 3.73294 14.4347C3.79712 14.469 3.84649 14.5345 3.8218 14.5836Z" fill="#3A3B40" />
<path d="M4.2249 15.0302C4.19082 15.0473 4.15183 15.0521 4.11461 15.0437C4.07739 15.0353 4.04425 15.0144 4.02085 14.9844C3.95667 14.9157 3.9435 14.8208 3.99287 14.7782C4.04224 14.7357 4.1311 14.7553 4.19528 14.8241C4.25946 14.8928 4.27427 14.9877 4.2249 15.0302Z" fill="#3A3B40" />
<path d="M4.61725 15.5979C4.55636 15.6405 4.45268 15.5979 4.39509 15.5129C4.37916 15.4976 4.3665 15.4793 4.35784 15.4591C4.34919 15.4388 4.34473 15.417 4.34473 15.3951C4.34473 15.3731 4.34919 15.3513 4.35784 15.331C4.3665 15.3108 4.37916 15.2925 4.39509 15.2772C4.45597 15.2363 4.55965 15.2772 4.61725 15.3607C4.67484 15.4441 4.67649 15.5554 4.61725 15.5979Z" fill="#3A3B40" />
<path d="M5.14883 16.1481C5.09453 16.2087 4.98428 16.1923 4.89377 16.1105C4.80326 16.0287 4.78186 15.9174 4.83617 15.8585C4.89047 15.7996 5.00073 15.816 5.09453 15.8962C5.18832 15.9763 5.20643 16.0892 5.14883 16.1481Z" fill="#3A3B40" />
<path d="M5.89426 16.4688C5.86958 16.5457 5.75768 16.5801 5.64578 16.5474C5.53388 16.5147 5.45983 16.423 5.48122 16.3445C5.50261 16.266 5.61616 16.23 5.72971 16.266C5.84325 16.3019 5.91566 16.3887 5.89426 16.4688Z" fill="#3A3B40" />
<path d="M6.70648 16.5244C6.70648 16.6046 6.61433 16.6733 6.49585 16.6749C6.37736 16.6766 6.28027 16.6111 6.28027 16.5309C6.28027 16.4508 6.37242 16.382 6.4909 16.3804C6.60939 16.3788 6.70648 16.4426 6.70648 16.5244Z" fill="#3A3B40" />
<path d="M7.46365 16.3981C7.47846 16.4783 7.39618 16.5617 7.2777 16.5814C7.15921 16.601 7.05554 16.5536 7.04073 16.475C7.02592 16.3965 7.11149 16.3114 7.22668 16.2901C7.34187 16.2689 7.44884 16.3179 7.46365 16.3981Z" fill="#3A3B40" />
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -1,10 +1,10 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="global-line" clip-path="url(#clip0_3593_4165)">
<path id="Vector" d="M12.5205 22C6.99751 22 2.52051 17.523 2.52051 12C2.52051 6.477 6.99751 2 12.5205 2C18.0435 2 22.5205 6.477 22.5205 12C22.5205 17.523 18.0435 22 12.5205 22ZM10.2305 19.667C9.24392 17.5743 8.67238 15.3102 8.54751 13H4.58251C4.77709 14.5389 5.41443 15.9882 6.41708 17.1717C7.41972 18.3552 8.74452 19.2221 10.2305 19.667V19.667ZM10.5505 13C10.7015 15.439 11.3985 17.73 12.5205 19.752C13.6728 17.6766 14.346 15.3695 14.4905 13H10.5505V13ZM20.4585 13H16.4935C16.3686 15.3102 15.7971 17.5743 14.8105 19.667C16.2965 19.2221 17.6213 18.3552 18.6239 17.1717C19.6266 15.9882 20.2639 14.5389 20.4585 13V13ZM4.58251 11H8.54751C8.67238 8.68979 9.24392 6.42569 10.2305 4.333C8.74452 4.77788 7.41972 5.64475 6.41708 6.8283C5.41443 8.01184 4.77709 9.4611 4.58251 11V11ZM10.5515 11H14.4895C14.3453 8.6306 13.6725 6.32353 12.5205 4.248C11.3682 6.32345 10.6951 8.63052 10.5505 11H10.5515ZM14.8105 4.333C15.7971 6.42569 16.3686 8.68979 16.4935 11H20.4585C20.2639 9.4611 19.6266 8.01184 18.6239 6.8283C17.6213 5.64475 16.2965 4.77788 14.8105 4.333V4.333Z" fill="#4A5754"/>
</g>
<defs>
<clipPath id="clip0_3593_4165">
<rect width="24" height="24" fill="white" transform="translate(0.520508)"/>
</clipPath>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
<g clip-path="url(#clip0_7993_65541)">
<path d="M13.5685 7.146C12.9839 3.65771 11.6048 1.2085 10 1.2085C8.39516 1.2085 7.01613 3.65771 6.43145 7.146H13.5685ZM6.12903 10.896C6.12903 11.7632 6.17742 12.5952 6.2621 13.396H13.7339C13.8185 12.5952 13.8669 11.7632 13.8669 10.896C13.8669 10.0288 13.8185 9.19678 13.7339 8.396H6.2621C6.17742 9.19678 6.12903 10.0288 6.12903 10.896ZM19.2218 7.146C18.0686 4.49365 15.7339 2.44287 12.8508 1.61475C13.8347 2.93506 14.5121 4.92334 14.8669 7.146H19.2218ZM7.14516 1.61475C4.26613 2.44287 1.92742 4.49365 0.778226 7.146H5.13306C5.48387 4.92334 6.16129 2.93506 7.14516 1.61475ZM19.6532 8.396H15.0282C15.1129 9.21631 15.1613 10.0562 15.1613 10.896C15.1613 11.7358 15.1129 12.5757 15.0282 13.396H19.6492C19.871 12.5952 19.996 11.7632 19.996 10.896C19.996 10.0288 19.871 9.19678 19.6532 8.396ZM4.83871 10.896C4.83871 10.0562 4.8871 9.21631 4.97177 8.396H0.346774C0.129032 9.19678 0 10.0288 0 10.896C0 11.7632 0.129032 12.5952 0.346774 13.396H4.96774C4.8871 12.5757 4.83871 11.7358 4.83871 10.896ZM6.43145 14.646C7.01613 18.1343 8.39516 20.5835 10 20.5835C11.6048 20.5835 12.9839 18.1343 13.5685 14.646H6.43145ZM12.8548 20.1772C15.7339 19.3491 18.0726 17.2983 19.2258 14.646H14.871C14.5161 16.8687 13.8387 18.8569 12.8548 20.1772ZM0.778226 14.646C1.93145 17.2983 4.26613 19.3491 7.14919 20.1772C6.16532 18.8569 5.4879 16.8687 5.13306 14.646H0.778226Z" fill="#3A3B40" />
</g>
<defs>
<clipPath id="clip0_7993_65541">
<rect width="20" height="20" fill="white" transform="translate(0 0.895996)" />
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -45,6 +45,7 @@ module.exports = {
tuatara: {
100: "#E5E6E8",
200: "#CDCFD4",
400: "#808590",
500: "#656A75",
600: "#565964",
700: "#4A4C54",