homepage: add outlink icon for outlink projects

hyprland-community · Jun 19, 2024 · 2ea1fa3 · 2ea1fa3
1 parent b85f33a
commit 2ea1fa3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -1,7 +1,10 @@
 ---
+import { cn } from "#lib/helper"
+
 interface Props {
   url: string
   target?: string
+  class?: string
 }
 
 const { url, target } = Astro.props
@@ -10,8 +13,10 @@ const { url, target } = Astro.props
 <a
   href={url}
   target={target ?? "_blank"}
-  class="button max-w-max rounded-xl bg-deepCyan px-5 py-2.5 text-base font-bold text-black shadow transition-all hover:scale-[1.02]"
-  ><slot /></a
+  class={cn(
+    "button flex max-w-max justify-center gap-1 rounded-xl bg-deepCyan px-5 py-2.5 align-middle text-base font-bold text-black shadow transition-all hover:scale-[1.02]",
+    Astro.props.class,
+  )}><slot /></a
 >
 
 <style>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -18,6 +18,7 @@ import ProjectContent from "#components/homepage/ProjectContent.astro"
 import ProjectBanner from "#components/homepage/ProjectBanner.astro"
 import ProjectLogo from "#components/homepage/ProjectLogo.astro"
 import ProjectBody from "#components/homepage/ProjectBody.astro"
+import IconOutlink from "~icons/mingcute/external-link-line"
 
 const projects: {
   name: string
@@ -112,6 +113,7 @@ const projects: {
                 >
                   <Button url={url} slot="button">
                     {button}
+                    {url.startsWith("http") && <IconOutlink class="size-6" />}
                   </Button>
                 </ProjectContent>
                 {icon && (