From 8b39235405a326a4dea2137a409c39d706ba222f Mon Sep 17 00:00:00 2001
From: MeexReay <meexreay@gmail.com>
Date: Sat, 30 Aug 2025 17:37:16 +0300
Subject: [PATCH] chore(projects): add tools and rac-rs

---
 src/app/globals.css            |  4 ++++
 src/app/projects/page.tsx      | 28 ++++++++++++++++++++++++++++
 src/components/Badge.tsx       |  6 ++++++
 src/components/ProjectCard.tsx |  2 +-
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 40348b2..020f5cc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,10 @@
 
 @custom-variant dark (&:is(.dark *));
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 00f3e10..2501ec4 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -107,6 +107,16 @@ export default function Projects() {
     },
   ];
 
+  const tools: ProjectProps[] = [
+    {
+      name: "rac-rs",
+      authorId: "kostya-zero",
+      projectGit: "https://github.com/kostya-zero/rac-rs",
+      description: "A Rust client library for RAC protocol.",
+      tags: ["Active", "Client", "WRAC", "RAC", "v2", "TLS"],
+    }
+  ];
+
   return (
     <main className={"flex flex-col gap-4 w-full"}>
       <PageTitle id={"projects"}>Projects</PageTitle>
@@ -157,6 +167,24 @@ export default function Projects() {
           />
         ))}
       </div>
+      <Title id={"servers"}>Tools</Title>
+      <Text>
+        You can use these tools for your projects! Don&apos;t be shy!
+      </Text>
+      <div className={"grid grid-cols-1 md:grid-cols-2 gap-4 w-full"}>
+        {tools.map((tool) => (
+          <ProjectCard
+            key={tool.name}
+            name={tool.name}
+            externalDownload={tool.externalDownload}
+            externalLink={tool.externalLink}
+            authorId={tool.authorId}
+            projectGit={tool.projectGit}
+            description={tool.description}
+            tags={tool.tags}
+          />
+        ))}
+      </div>
     </main>
   );
 }
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 46d0332..23f49f7 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -28,6 +28,12 @@ export default function Badge({ text }: Props) {
       color = "#024a70";
       description = "The project is in unknown state.";
       break;
+    case "Client":
+      description = "This tool is for client development.";
+      break;
+    case "Server":
+      description = "This tool is for server development.";
+      break;
     case "WRAC":
       description = "Supports connection via WebSocket-base RAC protocol.";
       break;
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 9a86777..e1a3162 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -41,7 +41,7 @@ function ProjectCard({
 
       <p className={"text-stone-400 mb-1"}>{description}</p>
 
-      <div className={"flex flex-row mt-auto gap-1 items-center"}>
+      <div className={"flex flex-wrap flex-row mt-auto gap-1 items-center"}>
         {tags.map((tag) => (
           <Badge text={tag} key={tag} />
         ))}