test

leolabdev · Dec 19, 2024 · 47d32b2 · 47d32b2
1 parent 8c61b45
commit 47d32b2
Showing 1 changed file with 31 additions and 46 deletions.
diff --git a/src/components/projects.rs b/src/components/projects.rs
@@ -1,74 +1,59 @@
-use crate::models::Project;
 use yew::prelude::*;
 
+#[derive(Clone, PartialEq, Properties)]
+pub struct Project {
+    pub title: String,
+    pub subtitle: String,
+    pub description: String,
+    pub technologies: Vec<String>,
+    pub image_url: String,
+    pub links: Vec<(String, String)>,
+    pub reverse: bool,
+}
+
 #[derive(Properties, PartialEq)]
 pub struct ProjectsProps {
     pub projects: Vec<Project>,
 }
 
 #[function_component(Projects)]
 pub fn projects(props: &ProjectsProps) -> Html {
-    let projects = props.projects.clone();
-
     html! {
-        <section id="projects" class="text-custom-main px-4 xl:px-0 py-16 max-w-[1200px] mx-auto">
-            <h2 class="text-4xl mb-14 font-bold">{"Projects I'm proud of"}</h2>
+        <section id="projects" class="text-custom-main px-4 py-16 max-w-6xl mx-auto">
+            <h2 class="text-2xl mb-8">{"Projects I'm proud of"}</h2>
             <div class="grid gap-8">
-                { for projects.into_iter().map(|project| {
-                    let links = project.links.clone();
-                    let technologies = project.technologies.clone();
-
+                { for props.projects.iter().map(|project| {
                     let (text_col_start, image_col_start, text_align_class, border_class) = if project.reverse {
-                        ("col-start-1", "col-start-6", "sm:text-left", "border-l sm:border-t border-t sm:border-b-0 border-l-custom-add border-t-custom-add sm:border-t-custom-add p-4")
+                        (
+                            "col-start-1",
+                            "col-start-6",
+                            "sm:text-left",
+                            "border-l sm:border-t border-b sm:border-b-0 border-l-custom-add border-b-custom-add sm:border-t-custom-add p-4"
+                        )
                     } else {
-                        ("col-start-5", "col-start-1", "text-right", "border-r border-t sm:border-b-0 sm:border-t border-r-custom-add border-t-custom-add sm:border-t-custom-add p-4")
+                        (
+                            "col-start-5",
+                            "col-start-1",
+                            "sm:text-right",
+                            "border-r border-b sm:border-b-0 sm:border-t border-r-custom-add border-b-custom-add sm:border-t-custom-add p-4"
+                        )
                     };
 
                     html! {
                         <article class="sm:grid gap-4 sm:grid-cols-10 relative">
                             <div class={format!("col-span-6 {} row-start-1 row-end-2 order-2 {} relative z-10", text_col_start, text_align_class)}>
-                                <h4 class="text-base font-mono">{ &project.subtitle }</h4>
-                                <h3 class="text-2xl font-bold text-custom-add mb-2">
-                                    { &project.title }
-                                    { links.into_iter().map(|link| html! {
-                                       <a href={link.url.clone()} target="_blank" class="">
-                                                { if let Some(icon_url) = link.icon_url {
-                                                    html! {
-                                                        <img
-                                                        src={icon_url}
-                                                        alt={link.sr_text.clone()}
-                                                        class="w-6 h-6 inline-block ml-2 mb-[2px] filter invert brightness-0"
-                                                    />
-                                                }
-                                            } else {
-                                                html! {}
-                                            }}
-                                            <span class="sr-only">{ link.sr_text.clone().unwrap_or_default() }</span>
-                                        </a>
-                                    }).collect::<Html>() }
-                                </h3>
-
+                                <h3 class="text-sm">{ &project.subtitle }</h3>
+                                <h4 class="text-lg text-custom-add">{ &project.title }</h4>
                                 <p class="text-base mb-4 p-4 bg-custom-bg-add rounded-lg">{ &project.description }</p>
-                                <h4 class="font-semibold">{"Technologies used include:"}</h4>
-                                    <ul class={format!("flex flex-wrap gap-[6px] text-base max-w-[80%] {}", if project.reverse { "justify-start" } else { "ml-auto justify-end" })}>
-                                        { technologies.into_iter().map(|tech| html! {
-                                         <li class="hover:text-custom-active">
-                                            <a href={tech.url} target="_blank" rel="noopener noreferrer">
-                                                { tech.name }
-                                                             </a>
-                                                               </li>
-                                       }).collect::<Html>() }
-                                    </ul>
                             </div>
                             <img
-                                src={project.image_url}
+                                src={project.image_url.clone()}
                                 alt={format!("Screenshot of {}", project.title)}
-                                class={format!("rounded-3xl mt-4 col-span-5 {} row-start-1 row-end-2 {}", image_col_start, border_class)}
-                                loading="lazy"
+                                class={format!("rounded-3xl col-span-5 {} row-start-1 row-end-2 {}", image_col_start, border_class)}
                             />
                         </article>
                     }
-                }) }
+                })}
             </div>
         </section>
     }