Use a component for ambassador cards

nextflow-io · Mar 10, 2024 · 413286b · 413286b
1 parent b4338ca
commit 413286b
Show file tree

Hide file tree

Showing 2 changed files with 562 additions and 965 deletions.
diff --git a/src/components/AmbassadorCard.astro b/src/components/AmbassadorCard.astro
@@ -0,0 +1,31 @@
+---
+export interface Props {
+  name: string;
+  img: string;
+  country: string;
+  github: string;
+  linkedin: string;
+  twitter: string;
+}
+
+const { name, img, country, github, linkedin, twitter } = Astro.props;
+---
+
+<div class="feature">
+  <div class="feature-body ambassadors">
+    <img src={`img/${img}`} class="ambassador" />
+    <h4>{name}</h4>
+  </div>
+  <div class="feature-hover border-color">
+    <p class="text-muted">
+      <slot />
+      <br />
+      <img src={`https://flagicons.lipis.dev/flags/4x3/${country}.svg`} class="ambassador" width="15" length="15" />
+      <br />
+      <a href={`https://github.com/${github}`} target="_blank"><i class="fa fa-github fa-lg fa-lg"></i></a>
+      <a href={`https://linkedin.com/in/${linkedin}`} target="_blank"><i class="fa fa-linkedin fa-lg fa-lg"></i></a>
+      <a href={`https://twitter.com/${twitter}`} target="_blank"><i class="fa fa-twitter fa-lg fa-lg"></i></a>
+      <br />
+    </p>
+  </div>
+</div>