RustLangES.github.io/src/components/cards/contributor_card.rs at 563896c30b0c49e3aec15e5c1b609505ff8b5f89 · jd-apprentice/RustLangES.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
use crate::components::icons::{GithubIcon, LocationIcon, TwitterIcon};
use leptos::{component, leptos_dom::helpers::location as location_dom, prelude::*, view, IntoView};

#[component]
pub fn ContributorCard(
    #[prop(into)] name: 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,
    #[prop(into)] contributions: u64,
) -> impl IntoView {
    let (easter_egg, set_easter_egg) = signal(false);

    Effect::new(move |_| {
        let location_dom = location_dom();
        set_easter_egg.set(
            location_dom
                .search()
                .map(|s| s.contains("easter_egg"))
                .unwrap_or(false),
        );
    });

    let name_for_class = name.clone();
    let name_for_contrib = name.clone();
    let contributions = Memo::new(move |_| {
        if name_for_contrib == "gg0074x" && easter_egg.get() {
            contributions + 300
        } else {
            contributions
        }
    });
    view! {
        <article
            class="hover:z-10 flex flex-col h-full gap-y-6 border border-black p-4 hover:bg-orange-500 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
            class=("bg-chiwa", move || name_for_class == "gg0074x" && easter_egg.get())
            >
            <a href=link.clone() target="_blank" class="group flex flex-col justify-between">
                <span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-16 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
                    <span class="sr-only text-black badge-content transition-all transform">
                        {move || contributions.get()}
                    </span>
                </span>
                <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 dark:text-white text-xl">{name}</h2>
                    {location
                        .map(|location| {
                            view! {
                                <div class="flex gap-2 items-center bg-slate-200/20 dark:bg-neutral-500/40 rounded-md p-1">
                                    <LocationIcon size=16 />
                                    <p class="font-work-sans text-black dark:text-white text-sm">
                                        {location}
                                    </p>
                                </div>
                            }
                        })}

                    <p class="font-work-sans text-black dark:text-white">{description}</p>
                </div>
            </a>
            <div class="ml-auto flex flex-row gap-2">
                {twitter
                    .map(|twitter| {
                        view! {
                            <a href=format!("https://twitter.com/{}", twitter) target="_blank">
                                <TwitterIcon size=30 />
                            </a>
                        }
                    })} <a href=link target="_blank">
                    <GithubIcon size=30 />
                </a>
            </div>
        </article>
    }
}