Merge pull request #24 from RustLangES/ui_fixes

UI some improvements
RustLangES · Oct 14, 2024 · fe11ca9 · fe11ca9
2 parents d646a9d + ba50a9b
commit fe11ca9
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 118 deletions.
diff --git a/src/components/Clickable.astro b/src/components/Clickable.astro
@@ -9,18 +9,29 @@ type Alignment =
   | "evenly"
   | "stretch";
 const {
-  className,
+  alt,
+  img,
+  href,
+  text,
+  maxWidth = true,
+  className = "",
   justify = "center",
 }: {
+  alt?: string;
+  img?: string;
+  text?: string;
+  href?: string;
+  maxWidth?: bool;
   justify?: Alignment;
   className?: string;
 } = Astro.props;
 ---
 
 <style>
   .clickable {
-    @apply inline-flex items-center 
-      px-5 shadow-md border-black border-[2px];
+    @apply inline-flex items-center
+      py-2 px-4 border-black border-[2px];
+    background: #ffedd5;
     box-shadow: 5px 5px 0px 1px #000;
     transition-duration: 200ms;
   }
@@ -29,6 +40,19 @@ const {
     box-shadow: none;
   }
 </style>
-<div class=`clickable ${className} justify-${justify}`>
-  <slot />
-</div>
+
+{href &&
+  <a class=`clickable ${maxWidth ? "max-w-[150px]" : ""} ${className} justify-${justify} text-${justify}` target="_blank" href={href}>
+    {img && <img class="w-5" src={img} alt={alt} />}
+    {text && <p class="pl-5">{text}</p>}
+    <slot />
+  </a>
+}
+
+{!href &&
+  <div class=`clickable ${className} justify-${justify} text-${justify}`>
+    {img && <img class="w-5" src={img} alt={alt} />}
+    {text && <p class="pl-5">{text}</p>}
+    <slot />
+  </div>
+}
diff --git a/src/globals.css b/src/globals.css
@@ -5,7 +5,7 @@
 :root {
   --background: #fed7aa;
   --orange: #f97316;
-  --light-orange: #ffedd5;
+  --light-orange: #ffce9a;
   --black: #000;
 }
 
@@ -54,6 +54,10 @@ iframe {
   height: 100%; /* Responsive height */
 }
 
+footer {
+    background: #FFCE9A;
+}
+
 .sec {
   @apply sticky top-0;
   background: var(--background);

diff --git a/src/layouts/ClickableGrid.astro b/src/layouts/ClickableGrid.astro
@@ -0,0 +1,37 @@
+---
+import Clickable from '@components/Clickable.astro';
+
+interface ClickableItem {
+  t?: string;
+  text?: string;
+  href?: string;
+  img?: string;
+  alt?: string;
+  className?: string;
+}
+
+interface Props {
+  items: ClickableItem[][];
+  className?: string;
+}
+
+const { items, className = '' } = Astro.props;
+---
+
+<div class={`flex flex-col gap-2 ${className}`}>
+  {items.map((row, rowIndex) => (
+    <div class="flex justify-center items-center gap-8">
+      {row.map((item, colIndex) => (
+        <Clickable
+          href={item.href}
+          img={item.img}
+          text={item.text}
+          alt={item.alt}
+          className={`${colIndex % 2 === 1 ? 'mt-[50px]' : 'mt-[25px]'} ${item.className || ''}`}
+        >
+          {item.t}
+        </Clickable>
+      ))}
+    </div>
+  ))}
+</div>
diff --git a/src/sections/Community.astro b/src/sections/Community.astro
@@ -3,6 +3,7 @@ import image1 from "../../public/rust_book.png";
 import image2 from "../../public/road_map.png";
 import Clickable from "../components/Clickable.astro";
 import Section from "@layouts/section.astro";
+import ClickableGrid from "@layouts/ClickableGrid.astro";
 import { readTOMLFiles } from "../utils/readProjects";
 
 interface Project {
@@ -49,19 +50,19 @@ const prebuiltData = await readTOMLFiles("proyectos-comunitarios/proyectos");
   </div>
 </Section>
 <Section title="Aprender">
-  <Fragment slot="content">
-    <!-- First row -->
-    <div class="flex justify-center items-center gap-8">
-      <Clickable>Roadmap</Clickable>
-      <Clickable className="mt-[50px]">El Libro</Clickable>
-    </div>
-
-    <!-- Second row -->
-    <div class="flex justify-center items-center gap-8">
-      <Clickable>Rust para c# Developers</Clickable>
-      <Clickable className="mt-[50px]">Mas</Clickable>
-    </div>
-  </Fragment>
+  <ClickableGrid slot="content" items={[[{
+    t: "Roadmap",
+    href: 'https://roadmap.rustlang-es.org'
+  }, {
+    t: "El Libro",
+    href: 'https://book.rustlang-es.org'
+  }], [{
+    t: "Rust para c# Developers",
+    href: 'https://dotnet-book.rustlang-es.org'
+  }, {
+    t: "Mas",
+    href: 'https://rustlang-es.org/aprende'
+  }]]} />
 </Section>
 <Section title="Conectar" subtitle="y ser parte">
   <div
@@ -96,44 +97,37 @@ const prebuiltData = await readTOMLFiles("proyectos-comunitarios/proyectos");
     justify-center
     animate-infinite-scroll
     p-5"
-        id="projects-container"
-      >
-        {
-          [...prebuiltData, ...prebuiltData].map((project: Project) => {
-            if (project.button_text.length > 0)
-              return (
-                <Clickable
-                  className="relative flex flex-col mx-3 w-[85vw] h-full flex-shrink-0 p-2"
-                  justify="normal"
-                >
-                  {project.brand_as_letter ? (
-                    <p class="flex flex-row justify-center items-center h-14 w-14 rounded-full self-start bg-[#ffedd5]">
-                      {project.brand_src}
-                    </p>
-                  ) : (
-                    <img
-                      alt="icon"
-                      src={`project-assets/${project.brand_src.substring(2)}`}
-                      class="h-14 w-14 rounded-full self-start"
-                    />
-                  )}
+      id="projects-container"
+    >
+      {
+        [...prebuiltData, ...prebuiltData].map((project: Project) => {
+          if (project.button_text.length > 0)
+            return (
+              <Clickable
+                className="relative flex flex-col mx-3 w-[85vw] h-full flex-shrink-0 p-2"
+                justify="start"
+              >
+                {project.brand_as_letter ? (
+                  <p class="flex flex-row justify-center items-center h-14 w-14 rounded-full self-start bg-[#ffedd5]">
+                    {project.brand_src}
+                  </p>
+                ) : (
+                  <img
+                    alt=`logo de ${project.name.join(" ")}`
+                    src={`project-assets/${project.brand_src.substring(2)}`}
+                    class="h-14 w-14 rounded-full self-start"
+                  />
+                )}
 
-                  <p class="font-bold  self-start">{project.name.join(" ")}</p>
-                  <p class="text-black text-pretty">{project.description}</p>
-                  <a
-                    href={project.button_link}
-                    target="_blank"
-                    class="self-start absolute bottom-0 mb-2"
-                  >
-                    <Clickable>{project.button_text}</Clickable>
-                  </a>
-                </Clickable>
-              );
-          })
-        }
+                <p class="font-bold  self-start">{project.name.join(" ")}</p>
+                <p class="text-black text-pretty">{project.description}</p>
+                <Clickable href={project.button_link} maxWidth={false} className="self-start absolute bottom-0 mb-2">{project.button_text}</Clickable>
+              </Clickable>
+            );
+        })
+      }
       </ul>
     </div>
-
     <!-- TODO: set href -->
     <a href="">
       <Clickable className="text-1xl p-2"> Publica </Clickable>
@@ -148,17 +142,20 @@ const prebuiltData = await readTOMLFiles("proyectos-comunitarios/proyectos");
   height="[80vh]"
   className="z-10"
 >
-  <div slot="content" class="flex flex-col justify-center items-center">
-    <div class="flex justify-center items-center gap-10">
-      <Clickable>Servicios</Clickable>
-      <Clickable className="mt-[50px]">Aplicaciones Multiplataforma</Clickable>
-    </div>
-    <div class="flex justify-center items-center gap-10">
-      <Clickable>Videojuegos</Clickable>
-      <Clickable className="mt-[50px]">Inteligencia Artificial</Clickable>
-    </div>
-    <div class="mt-10 justify-center items-center">
-      <Clickable>Y mucho, mucho mas</Clickable>
-    </div>
-  </div>
+  <ClickableGrid slot="content" items={[[{
+    t: 'Servicios',
+    href: 'https://github.com/flosse/rust-web-framework-comparison'
+  }, {
+    t: 'Aplicaciones Multiplataforma',
+    href: 'https://areweguiyet.com/#ecosystem'
+  }], [{
+    t: 'Videojuegos',
+    href: 'https://arewegameyet.rs/#ecosystem'
+  }, {
+    t: 'Inteligencia Artificial',
+    href: 'https://www.arewelearningyet.com/'
+  }], [{
+    t: 'Y mucho, mucho más',
+    href: 'https://awesome-rust.com/'
+  }]]} />
 </Section>
diff --git a/src/sections/Footer.astro b/src/sections/Footer.astro
@@ -5,39 +5,38 @@ import github_svg from "@assets/github.svg";
 import discord_svg from "@assets/discord.svg";
 import linkeding_svg from "@assets/Linkedin.svg";
 import telegram_svg from "@assets/Telegram.svg";
----
-
-<section class="relative z-10">
-  <div class="flex flex-col justify-start pt-10 items-center sec h-[80vh]">
-    <p class="text-[30px] from-neutral-500 font-medium">Se parte de la</p>
-    <h2 class="text-[35px] text-orange-500">Comunidad</h2>
-    <p class="mt-10 font-medium text-xl">Y Descubre Como La</p>
-    <p class="font-medium text-xl">Comunidad Esta integrando</p>
-    <p class="font-medium text-xl">Rust en Distintas Areas</p>
-    <div class="flex flex-col justify-center items-center gap-10 mt-44">
-      <div class="flex justify-between
-            items-center gap-10">
-        <Clickable>
-          <img src={github_svg.src} class="w-5" alt="Logo de github" />
-          <p class="pl-5">Github</p>
-        </Clickable>
 
-        <Clickable>
-          <img class="w-5" src={discord_svg.src} alt="Logo de discord" />
-          <p class="pl-5">Discord</p>
-        </Clickable>
-      </div>
+import ClickableGrid from "@layouts/ClickableGrid.astro";
+---
 
-      <div class="flex justify-between items-center gap-10">
-        <Clickable>
-          <img class="w-5" src={linkeding_svg.src} alt="Logo de linkedin" />
-          <p class="pl-5">Linkedin</p>
-        </Clickable>
-        <Clickable>
-          <img class="w-5" src={telegram_svg.src} alt="Logo de telegram" />
-          <p class="pl-5">Telegram</p>
-        </Clickable>
-      </div>
-    </div>
-  </div>
-</section>
+<footer class="relative z-10 flex flex-col justify-start pt-10 items-center w-full h-[80vh]">
+  <p class="text-[30px] from-neutral-500 font-medium">Se parte de la</p>
+  <h2 class="text-[35px] text-orange-500">Comunidad</h2>
+  <p class="mt-10 font-medium text-xl">Y Descubre Como La</p>
+  <p class="font-medium text-xl">Comunidad Esta integrando</p>
+  <p class="font-medium text-xl">Rust en Distintas Areas</p>
+  <ClickableGrid className="my-24" items={[
+    [{
+      text: 'Github',
+      img: github_svg.src,
+      alt: "Logo de github",
+      href: 'https://github.com/RustLangES'
+    }, {
+      text: 'Discord',
+      img: discord_svg.src,
+      alt: "Logo de discord",
+      href: 'https://discord.gg/rustlanges'
+    }],
+    [{
+      text: 'Linkedin',
+      img: linkeding_svg.src,
+      alt: "Logo de linkedin",
+      href: 'https://linkedin.com/company/RustLangES'
+    }, {
+      text: 'Telegram',
+      img: telegram_svg.src,
+      alt: "Logo de telegram",
+      href: 'https://t.me/rust_es'
+    }]
+  ]} />
+</footer>
diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro
@@ -12,10 +12,8 @@ import discord_svg from "@assets/discord.svg";
   <h4>Un espacio seguro</h4>
   <h3>En Español</h3>
 
-  <a href="https://discord.gg/rustlanges" target="_blank" class="my-10">
-    <Clickable className="py-1 px-3">
-      <img src={discord_svg.src} alt="Discord" class="mr-2" />
-      Discord
-    </Clickable>
-  </a>
+  <Clickable href="https://discord.gg/rustlanges" target="_blank" className="my-10">
+    <img src={discord_svg.src} alt="Discord" class="mr-2" />
+    Discord
+  </Clickable>
 </div>
diff --git a/src/sections/WhyRust.astro b/src/sections/WhyRust.astro
@@ -2,6 +2,7 @@
 import chart from "@assets/rust_performance.svg";
 import Clickable from "@components/Clickable.astro";
 import Section from "@layouts/section.astro";
+import ClickableGrid from "@layouts/ClickableGrid.astro";
 ---
 
 <div
@@ -43,14 +44,17 @@ import Section from "@layouts/section.astro";
   subtitle="Moderno"
   description="Todas las herramientas que necesitas, Ya incluidas en la instalación"
 >
-  <Fragment slot="content">
-    <div class="flex justify-center items-center gap-8">
-      <Clickable className="px-2 py-4"> Formatter </Clickable>
-      <Clickable className="px-2 py-4"> Gestor de paquetes </Clickable>
-    </div>
-    <div class="flex justify-center items-center gap-6">
-      <Clickable className="px-2 py-4"> Reglas para calidad </Clickable>
-      <Clickable className="px-2 py-4"> Y mucho más </Clickable>
-    </div>
-  </Fragment>
+  <ClickableGrid slot="content" items={[[{
+      t: 'Formatter',
+      href: 'https://rust-lang.github.io/rustfmt'
+    }, {
+      t: 'Gestor de Paquetes',
+      href: 'https://doc.rust-lang.org/cargo'
+    }], [{
+      t: 'Reglas para Calidad',
+      href: 'https://doc.rust-lang.org/clippy'
+    }, {
+      t: 'Y mucho más',
+      href: 'https://github.com/rust-unofficial/awesome-rust'
+    }]]} />
 </Section>