feat: add location, description and twitter of the user

Author: Phosphorus-M

.gitignore

@@ -20,3 +20,4 @@ playwright/.cache/
 pnpm-lock.yaml
 .idea/
 settings.json
+style/

Cargo.lock

@@ -18,6 +18,7 @@ console_log = { version = "1"}
 console_error_panic_hook = { version = "0.1"}
 rand = "0.8.5"
 mod_use = "0.2.1"
+futures = "0.3.28"
 
 [dev-dependencies]
 rusty-hook = "^0.11.2"

Cargo.toml

@@ -1,28 +1,55 @@
 use leptos::*;
 
-use crate::components::icons::GithubIcon;
+use crate::components::icons::{GithubIcon, TwitterIcon, LocationIcon};
 
 #[component]
 pub fn ContributorCard(
     #[prop(into)] name: String,
-    #[prop(into)] description: String,
+    #[prop(into)] description: Option<String>,
+    #[prop(into)] twitter: Option<String>,
+    #[prop(into)] location: Option<String>,
     #[prop(into)] link: String,
     #[prop(into)] brand_src: String,
 ) -> impl IntoView {
+
     view! {
         <article>
             <a
-                href=link
+                href=link.clone()
                 target="_blank"
-                class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between h-full"
+                class="group flex flex-col gap-y-6 border border-black p-4 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between h-full"
             >
                 <div class="flex flex-col gap-y-2">
                     <img src=brand_src width="60" class="rounded-full mb-4" alt=name.clone()/>
                     <h2 class="font-work-sans text-black text-xl">{name.clone()}</h2>
+                    {if let Some(location) = location.clone() {
+                        view! {
+                            <div class="flex gap-2 items-center bg-slate-200/20 rounded-md p-1">
+                                <LocationIcon size=16/>
+                                <p class="font-work-sans text-black text-sm">{location}</p>
+                            </div>
+                        }
+                    } else {
+                        view! { <div class="hidden"></div> }
+                    }}
+
                     <p class="font-work-sans text-black">{description}</p>
                 </div>
-                <span class="ml-auto">
-                    <GithubIcon size=30/>
+                <span class="ml-auto flex">
+                    {if let Some(twitter) = twitter {
+                        view! {
+                            <div>
+                                <a href=format!("https://twitter.com/{}", twitter) target="_blank">
+                                    <TwitterIcon size=30/>
+                                </a>
+                            </div>
+                        }
+                    } else {
+                        view! { <div></div> }
+                    }}
+                    <a href=link.clone() target="_blank">
+                        <GithubIcon size=30/>
+                    </a>
                 </span>
             </a>
         </article>

src/components/cards/contributor_card.rs

@@ -0,0 +1,20 @@
+
+use leptos::*;
+
+#[component]
+pub fn LocationIcon(
+    #[prop(default = 40)] size: u32,
+    #[prop(default = "fill-black")] class: &'static str,
+) -> impl IntoView {
+    view! {
+        <svg
+            width=size
+            height=size
+            viewBox="0 0 16 16"
+            class=class
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="m12.596 11.596-3.535 3.536a1.5 1.5 0 0 1-2.122 0l-3.535-3.536a6.5 6.5 0 1 1 9.192-9.193 6.5 6.5 0 0 1 0 9.193Zm-1.06-8.132v-.001a5 5 0 1 0-7.072 7.072L8 14.07l3.536-3.534a5 5 0 0 0 0-7.072ZM8 9a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 9Z"></path>
+        </svg>
+    }
+}

src/components/icons/location_icon.rs

@@ -4,5 +4,7 @@ mod_use![
     discord_icon,
     github_icon,
     telegram_icon,
+    twitter_icon,
+    location_icon,
     next
 ];

src/components/icons/mod.rs

@@ -0,0 +1,19 @@
+use leptos::*;
+
+#[component]
+pub fn TwitterIcon(
+    #[prop(default = 40)] size: u32,
+    #[prop(default = "fill-black")] class: &'static str,
+) -> impl IntoView {
+    view! {
+        <svg
+            width=size
+            height=size
+            viewBox="0 0 512 512"
+            class=class
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M160.768 460.8c193.126 0 298.803-160.154 298.803-298.803 0-4.506 0-9.011-.205-13.517 20.48-14.746 38.298-33.382 52.43-54.477-18.842 8.397-39.118 13.927-60.417 16.589 21.709-12.902 38.298-33.587 46.285-58.163-20.275 12.083-42.803 20.685-66.765 25.395-19.251-20.48-46.49-33.178-76.595-33.178-57.958 0-105.062 47.104-105.062 105.063 0 8.192 1.024 16.179 2.662 23.961-87.245-4.3-164.66-46.284-216.474-109.772-9.01 15.564-14.13 33.587-14.13 52.838 0 36.454 18.636 68.608 46.694 87.45a106.224 106.224 0 01-47.514-13.108v1.434c0 50.79 36.25 93.389 84.173 103.014-8.807 2.458-18.023 3.687-27.648 3.687-6.759 0-13.312-.615-19.661-1.843 13.312 41.779 52.224 72.09 98.1 72.908-36.046 28.263-81.306 45.056-130.458 45.056-8.397 0-16.794-.41-24.986-1.433C46.285 443.392 101.58 460.8 160.768 460.8"></path>
+        </svg>
+    }
+}

src/components/icons/twitter_icon.rs

@@ -1,3 +1,4 @@
+use futures::future::join_all;
 use leptos::{error::Result, *};
 use serde::{Deserialize, Serialize};
 
@@ -8,6 +9,9 @@ pub struct Contributor {
     login: String,
     avatar_url: String,
     html_url: String,
+    bio: Option<String>,
+    twitter_username: Option<String>,
+    location: Option<String>,
 }
 
 async fn fetch_contributors() -> Result<Vec<Contributor>> {
@@ -18,6 +22,30 @@ async fn fetch_contributors() -> Result<Vec<Contributor>> {
     .await?
     .json::<Vec<Contributor>>()
     .await?;
+
+    let response = join_all(
+        response
+            .into_iter()
+            .map(|contributor| fetch_contributor_info(contributor.login.clone())),
+    ).await;
+
+    let response = response
+        .into_iter()
+        .filter_map(|contributor| contributor.ok())
+        .collect::<Vec<Contributor>>();
+
+    Ok(response)
+}
+
+async fn fetch_contributor_info(username: String) -> Result<Contributor> {
+    let response = reqwasm::http::Request::get(&format!(
+        "https://api.github.com/users/{}",
+        username
+    ))
+    .send()
+    .await?
+    .json::<Contributor>()
+    .await?;
     Ok(response)
 }
 
@@ -28,9 +56,11 @@ pub fn Contributors() -> impl IntoView {
         view! {
             <ContributorCard
                 name=item.login.clone()
-                description=""
+                description=item.bio.clone()
                 link=item.html_url.clone()
                 brand_src=item.avatar_url.clone()
+                twitter=item.twitter_username.clone()
+                location=item.location.clone()
             />
         }
     };