General issues fix

app/[lang]/page.tsx

@@ -4,7 +4,6 @@ import Image from "next/image"
 import Link from "next/link"
 import PSELogo from "@/public/icons/archstar.webp"
 import { motion } from "framer-motion"
-import { Divide } from "lucide-react"
 
 import { siteConfig } from "@/config/site"
 import { Button } from "@/components/ui/button"
@@ -47,7 +46,7 @@ export default function IndexPage({ params: { lang } }: any) {
             </div>
           }
           actions={
-            <Link href={`/projects`} className="group flex items-center gap-2">
+            <Link href={`/projects`} className="flex items-center gap-2 group">
               <Button className="w-full sm:w-auto">
                 <div className="flex items-center gap-1">
                   <span className="text-base font-medium uppercase">

app/[lang]/projects/[id]/page.tsx

@@ -1,13 +1,9 @@
 import { Metadata, ResolvingMetadata } from "next"
-import Image from "next/image"
 import Link from "next/link"
 import { projects } from "@/data/projects"
-import GithubVector from "@/public/social-medias/github-fill.svg"
-import GlobalVector from "@/public/social-medias/global-line.svg"
-import TwitterVector from "@/public/social-medias/twitter-fill.svg"
 
 import { siteConfig } from "@/config/site"
-import { ProjectInterface } from "@/lib/types"
+import { ProjectInterface, ProjectStatus } from "@/lib/types"
 import { AppContent } from "@/components/ui/app-content"
 import { Markdown, createMarkdownElement } from "@/components/ui/markdown"
 import { WikiCard } from "@/components/cards/wiki-card"
@@ -16,7 +12,7 @@ import { Icons } from "@/components/icons"
 import DiscoverMoreProjects from "@/components/project/discover-more-projects"
 import { ProjectTags } from "@/components/project/project-detail-tags"
 import ProjectExtraLinks from "@/components/project/project-extra-links"
-import { ThemesStatusMapping } from "@/components/project/project-filters-bar"
+import { ProjectLinkIconMap } from "@/components/project/project-links"
 import { WikiSideNavigation } from "@/components/wiki-side-navigation"
 import { useTranslation } from "@/app/i18n"
 import { LocaleTypes } from "@/app/i18n/settings"
@@ -69,7 +65,6 @@ export default async function ProjectDetailPage({ params }: PageProps) {
     "projects/" + currProject.id
   )
 
-  const { github, twitter, website } = currProject.links ?? {}
   const hasSocialLinks = Object.keys(currProject?.links ?? {}).length > 0
 
   const editPageURL = siteConfig?.editProjectPage(currProject.id, lang)
@@ -110,44 +105,25 @@ export default async function ProjectDetailPage({ params }: PageProps) {
                   </div>
                   {hasSocialLinks && (
                     <div className="flex flex-wrap items-center justify-start gap-6 pt-4">
-                      {github && (
-                        <Link href={github} target="_blank" rel="noreferrer">
-                          <div className="flex items-center gap-2">
-                            <Image
-                              src={GithubVector}
-                              alt=""
-                              width={16}
-                              height={16}
-                            />
-                            <p className="text-slate-600">Github</p>
-                          </div>
-                        </Link>
-                      )}
-                      {website && (
-                        <Link href={website} target="_blank" rel="noreferrer">
-                          <div className="flex items-center gap-2">
-                            <Image
-                              src={GlobalVector}
-                              alt=""
-                              width={16}
-                              height={16}
-                            />
-                            <p className="text-slate-600">Website</p>
-                          </div>
-                        </Link>
-                      )}
-                      {twitter && (
-                        <Link href={twitter} target="_blank" rel="noreferrer">
-                          <div className="flex items-center gap-2">
-                            <Image
-                              src={TwitterVector}
-                              alt=""
-                              width={16}
-                              height={16}
-                            />
-                            <p className="text-slate-600">Twitter</p>
-                          </div>
-                        </Link>
+                      {Object?.entries(currProject.links ?? {})?.map(
+                        ([key, value]) => {
+                          return (
+                            <Link
+                              key={key}
+                              href={value ?? ""}
+                              target="_blank"
+                              rel="noreferrer"
+                              className="group"
+                            >
+                              <div className="flex items-center gap-2">
+                                {ProjectLinkIconMap?.[key]}
+                                <p className="capitalize duration-200 text-slate-600 group-hover:text-orange">
+                                  {key}
+                                </p>
+                              </div>
+                            </Link>
+                          )
+                        }
                       )}
                     </div>
                   )}

app/i18n/locales/en/projects/unirep-protocol.json

@@ -1,4 +1,4 @@
 {
-  "description": "### Overview\nUniRep is a zero-knowledge protocol that securely manages user data through anonymous identifiers, enabling trustless interactions and enhanced user privacy in applications. UniRep expands the notion of reputation to include various user data aspects, such as preferences, activity, alignments, and ownership.\n\nUsing anonymous identifiers [(epoch keys)](https://developer.unirep.io/docs/protocol/epoch-key) the protocol allows for trustless engagement with applications while preserving user privacy. This approach promotes non-custodial applications that don't hold user data, reducing data breach risks and emphasizing security for both users and developers.\n\nUniRep was originally proposed by BarryWhiteHat in this [ethresear.ch](https://ethresear.ch) post\n\n### Features\n\nUniRep aims to be the ultimate foundation for constructing tailored, yet fully compatible, zero-knowledge (zk) applications. It functions as a powerful memory layer for zk, offering private, non-repudiable data storage and retrieval capabilities. With UniRep, users can effortlessly receive data, prove facts about their information, and store the results while enjoying robust privacy assurances. The protocol empowers developers to create bespoke zk applications without compromising on interoperability and efficiency.\n\nKey UniRep features include:\n\n|  |  |\n|  --------  |  -------  |\n| **Data Storage** | Unirep allows small amounts of data to be associated with anonymous users. Applications can conditionally associate data, like requiring a user to prove control of an Ethereum address before attesting to it. |\n| **Extensible Proofs** | The system is designed to be extended with custom application logic. For example, an application might require proof of Ethereum address control to [sign up](https://github.com/Unirep/zketh/blob/b7e0fdf3dcc1b3f97673da20837ed9c7d3e27c9f/packages/circuits/circuits/signupWithAddress.circom). |\n| **Trustless Interoperability** | Applications can interconnect by having users create proofs using publicly available state. |\n| **No Forced Data Sharing** | Unirep applications cannot see what data belongs to what user, unless the user reveals it. User data also cannot be changed unless the user provides the application with an [epoch key](https://developer.unirep.io/docs/protocol/epoch-key). |\n\n### Applications\n\n - Anon Transfer - [Website](https://anon-transfer.online/) | [GitHub](https://github.com/vivianjeng/anon-transfer)\n - Trustlist - [Website](https://trustlist.xyz/) | [GitHub](https://github.com/trustlist/trustlist)\n - Unirep Social TW - [GitHub](https://github.com/social-tw/social-tw-website)\n - Unirep Social - [Website](https://unirep.social/) | [GitHub](https://github.com/Unirep/Unirep-Social)\n - Sacred Protocol - [Website](https://www.sacredprotocol.com/)\n - My-Badge -  [GitHub](https://github.com/kittybest/my-badge)\n - Voteathon - [Website](https://voteathon.org/) | [GitHub](https://github.com/NicoSerranoP/voteathon)",
+  "description": "### Overview\n\nUniRep is a zero-knowledge protocol that securely manages user data through anonymous identifiers, enabling trustless interactions and enhanced user privacy in applications. UniRep expands the notion of reputation to include various user data aspects, such as preferences, activity, alignments, and ownership.\n\nUsing anonymous identifiers [(epoch keys)](https://developer.unirep.io/docs/protocol/epoch-key) the protocol allows for trustless engagement with applications while preserving user privacy. This approach promotes non-custodial applications that don't hold user data, reducing data breach risks and emphasizing security for both users and developers.\n\nUniRep was originally proposed by BarryWhiteHat in this [ethresear.ch](https://ethresear.ch) post\n\n### Features\n\nUniRep aims to be the ultimate foundation for constructing tailored, yet fully compatible, zero-knowledge (zk) applications. It functions as a powerful memory layer for zk, offering private, non-repudiable data storage and retrieval capabilities. With UniRep, users can effortlessly receive data, prove facts about their information, and store the results while enjoying robust privacy assurances. The protocol empowers developers to create bespoke zk applications without compromising on interoperability and efficiency.\n\nKey UniRep features include:\n\n- **Data Storage**: Unirep allows small amounts of data to be associated with anonymous users. Applications can conditionally associate data, like requiring a user to prove control of an Ethereum address before attesting to it.\n\n- **Extensible Proofs**: The system is designed to be extended with custom application logic. For example, an application might require proof of Ethereum address control to [sign up](https://github.com/Unirep/zketh/blob/b7e0fdf3dcc1b3f97673da20837ed9c7d3e27c9f/packages/circuits/circuits/signupWithAddress.circom).\n\n- **Trustless Interoperability**: Applications can interconnect by having users create proofs using publicly available state.\n\n- **No Forced Data Sharing**: Unirep applications cannot see what data belongs to what user, unless the user reveals it. User data also cannot be changed unless the user provides the application with an [epoch key](https://developer.unirep.io/docs/protocol/epoch-key).\n\n### Applications\n\n- Anon Transfer - [Website](https://anon-transfer.online/) | [GitHub](https://github.com/vivianjeng/anon-transfer)\n- Trustlist - [Website](https://trustlist.xyz/) | [GitHub](https://github.com/trustlist/trustlist)\n- Unirep Social TW - [GitHub](https://github.com/social-tw/social-tw-website)\n- Unirep Social - [Website](https://unirep.social/) | [GitHub](https://github.com/Unirep/Unirep-Social)\n- Sacred Protocol - [Website](https://www.sacredprotocol.com/)\n- My-Badge -  [GitHub](https://github.com/kittybest/my-badge)\n- Voteathon - [Website](https://voteathon.org/) | [GitHub](https://github.com/NicoSerranoP/voteathon)",
   "tldr": "A Zero-Knowledge Protocol built to handle anonymous user data."
 }

components/cards/wiki-card.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from "react"
 import Image from "next/image"
 
 import { ProjectInterface, ProjectSectionLabelMapping } from "@/lib/types"
-import { cn } from "@/lib/utils"
+import { cn, removeProtocol } from "@/lib/utils"
 import { useTranslation } from "@/app/i18n/client"
 
 import { AppLink } from "../app-link"
@@ -50,7 +50,7 @@ const WikiDetail = ({ label, value }: WikiDetailProps) => {
 const WikiLink = ({ href, external, children }: WikiLinkProps) => {
   return (
     <AppLink
-      className="text-anakiwa-500 duration-200 hover:text-anakiwa-700"
+      className="duration-200 text-anakiwa-500 hover:text-anakiwa-700"
       href={href}
       external={external}
     >
@@ -86,10 +86,10 @@ export const WikiCard = ({
               alt={`${project.name} banner`}
               width={290}
               height={140}
-              className=" bg-cover"
+              className="bg-cover "
             />
             {!project?.image && (
-              <span className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 px-5 text-center text-3xl font-bold text-black">
+              <span className="absolute w-full px-5 text-3xl font-bold text-center text-black -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
                 {project?.imageAlt || project?.name}
               </span>
             )}
@@ -102,9 +102,12 @@ export const WikiCard = ({
             <WikiDetail
               label={t("filterLabels.builtWith")}
               value={
-                <div className=" flex flex-col gap-1">
+                <div className="flex flex-col gap-1 ">
                   {builtWithKeys.map((key) => (
-                    <WikiLink href="#" key={key}>
+                    <WikiLink
+                      href={`/${lang}/projects?builtWith=${key}`}
+                      key={key}
+                    >
                       {key}
                     </WikiLink>
                   ))}
@@ -125,7 +128,7 @@ export const WikiCard = ({
                 label="Website"
                 value={
                   <WikiLink href={website} external>
-                    {website}
+                    {removeProtocol(website)}
                   </WikiLink>
                 }
               />
@@ -140,15 +143,15 @@ export const WikiCard = ({
                 alt={`${project.name} banner`}
                 width={290}
                 height={140}
-                className=" bg-cover"
+                className="bg-cover "
               />
               {!project?.image && (
-                <span className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 px-5 text-center text-3xl font-bold text-black">
+                <span className="absolute w-full px-5 text-3xl font-bold text-center text-black -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
                   {project?.imageAlt || project?.name}
                 </span>
               )}
             </div>
-            <div className="flex items-center justify-center bg-white py-4">
+            <div className="flex items-center justify-center py-4 bg-white">
               <span className="text-xs font-normal text-black">
                 {t("prevBrandImage")}
               </span>

components/icons.tsx

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

components/project/discover-more-projects.tsx

@@ -38,8 +38,8 @@ export default function DiscoverMoreProjects({ project, lang }: ProjectProps) {
   return (
     <div className="w-full bg-cover-gradient">
       <div className="mx-auto flex w-full max-w-[644px] flex-col items-center justify-center gap-14 px-6 py-12 md:px-0 md:py-16">
-        <h2 className="text-center text-3xl font-bold">{t("discoverMore")}</h2>
-        <div className="grid grid-cols-1 flex-col gap-5 md:grid-cols-2 md:flex-row">
+        <h2 className="text-3xl font-bold text-center">{t("discoverMore")}</h2>
+        <div className="grid flex-col grid-cols-1 gap-5 md:grid-cols-2 md:flex-row">
           {suggestedProject?.map((project: ProjectInterface) => (
             <ProjectCard border project={project} lang={lang} />
           ))}

components/project/project-extra-links.tsx

@@ -65,18 +65,15 @@ export default function ProjectExtraLinks({
     return (
       <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
-          {icon && <span className="text-anakiwa-500">{icon}</span>}
-          <p className="font-sans text-xl font-medium text-tuatara-700">
-            {label}
-          </p>
+          <p className="py-2 text-[22px] font-bold text-tuatara-700">{label}</p>
         </div>
         <div className="flex flex-col items-start gap-2">
           {links.map(({ label, url }: ActionLinkTypeLink) => {
             return (
               <Link
                 href={url}
                 target="_blank"
-                className="flex cursor-pointer items-center gap-1 overflow-hidden border-b-2 border-transparent font-sans font-normal text-tuatara-950 duration-200 ease-in-out hover:border-orange"
+                className="flex items-center gap-1 overflow-hidden font-sans font-normal duration-200 ease-in-out border-b cursor-pointer border-anakiwa-400 text-tuatara-950 hover:border-orange"
               >
                 {label}
                 <Icons.externalUrl />

components/project/project-filters-bar.tsx

@@ -18,8 +18,8 @@ import { IThemeStatus, IThemesButton, LangProps } from "@/types/common"
 import {
   ProjectSectionLabelMapping,
   ProjectSections,
+  ProjectStatus,
   ProjectStatusLabelMapping,
-  ProjectStatusList,
 } from "@/lib/types"
 import { cn, queryStringToObject } from "@/lib/utils"
 import { useTranslation } from "@/app/i18n/client"
@@ -288,16 +288,17 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
             className="hidden"
             label={t("filterLabels.projectStatus")}
           >
-            {ProjectStatusList.map((section) => {
-              const label = ProjectStatusLabelMapping[section]
+            {Object.keys(ProjectStatus).map((section: any) => {
+              // @ts-ignore
+              const label = ProjectStatusLabelMapping?.[section]
               return <Checkbox key={section} name={section} label={label} />
             })}
           </FilterWrapper>
         </div>
       </Modal>
       <div className="flex flex-col gap-6">
         <span className="text-lg font-medium">{t("whatDoYouWantDoToday")}</span>
-        <div className="grid grid-cols-1 items-center justify-between gap-3 md:grid-cols-5 md:gap-12">
+        <div className="grid items-center justify-between grid-cols-1 gap-3 md:grid-cols-5 md:gap-12">
           <FilterButtons lang={lang} />
           <div className="col-span-1 grid grid-cols-[1fr_auto] gap-2 md:col-span-3 md:gap-3">
             <Input
@@ -325,7 +326,7 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
               <button
                 disabled={!hasActiveFilters}
                 onClick={clearAllFilters}
-                className="opacity-85 hidden cursor-pointer bg-transparent text-primary hover:opacity-100 disabled:pointer-events-none disabled:opacity-50 md:block"
+                className="hidden bg-transparent cursor-pointer opacity-85 text-primary hover:opacity-100 disabled:pointer-events-none disabled:opacity-50 md:block"
               >
                 <div className="flex items-center gap-2 border-b-2 border-black">
                   <span className="text-sm font-medium">{t("clearAll")}</span>