chore(projects): add tools and rac-rs

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);

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>
   );
 }

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;

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} />
         ))}