Add disabled prop to ButtonLink (#1008)

- Migrates ButtonLink to Astro, and adds a disabled prop to it.
- Removes redundant ButtonWithTitle component.

See https://add-disabled-prop.ep-preview.click/programme/mentorship/ for
example

Closes #978

Author: egeakman

src/components/button-link/button-link.astro

@@ -0,0 +1,32 @@
+---
+import type React from 'react';
+
+export interface Props {
+  url?: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  secondary?: boolean;
+  isExternal?: boolean;
+}
+
+const { url, className = "", secondary = false, disabled = false, isExternal} = Astro.props;
+const resolvedIsExternal = isExternal !== undefined ? isExternal : url?.startsWith("http");
+---
+
+<a
+  class={`font-bold text-lg px-4 py-4 bg-button rounded-[60px] inline-block leading-4 hover:bg-button-hover not-prose
+    ${secondary || disabled ? "bg-primary text-white hover:bg-primary-hover" : "text-text-inverted"}
+    ${secondary ? "text-text" : ""}
+    ${className || ""}
+    ${disabled ? "opacity-50 pointer-events-none" : ""}`}
+  href={url}
+>
+  <slot />
+
+  {resolvedIsExternal && (
+    <span class="inline-block ml-1 font-system text-lg leading-4">
+      ↗
+    </span>
+  )}
+</a>

src/components/button-link/button-link.tsx

@@ -1,7 +1,7 @@
 ---
 import type { ImageMetadata } from "astro";
 import { Image } from "astro:assets";
-import { ButtonLink } from "../button-link/button-link";
+import ButtonLink from "../button-link/button-link.astro";
 
 export interface Props {
   title: string;
@@ -28,7 +28,7 @@ const { title, subtitle, url, image } = Astro.props;
     <h3 class="text-3xl font-bold mt-2 mb-4 text-primary">{title}</h3>
   </a>
   <ButtonLink
-    href={url}
+    url={url}
     className="mb-4"
     isExternal={false}
   >

src/components/button-link/index.tsx

@@ -1,5 +1,5 @@
 ---
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import HeaderButton from "./header-button.astro";
 
 export interface Props {
@@ -15,17 +15,17 @@ const IS_LIVE = false;
   {
     !mobile ? (
       <>
-        <ButtonLink secondary href="https://www.europython-society.org/coc/">
+        <ButtonLink secondary url="https://www.europython-society.org/coc/">
           <abbr title="Code of Conduct" class="no-underline md:hidden">
             CoC
           </abbr>
           <span class="hidden md:inline">Code of Conduct</span>
         </ButtonLink>
-        <ButtonLink href="https://voting.europython.eu" className="hidden md:block">
+        <ButtonLink url="https://voting.europython.eu" className="hidden md:block">
           <span>Community vote</span>
         </ButtonLink>
         {IS_LIVE && (
-          <ButtonLink href="/live">
+          <ButtonLink url="/live">
             Live
             <span class="hidden md:inline"> 📺</span>
           </ButtonLink>

src/components/button-with-title/button-with-title.tsx

@@ -1,6 +1,6 @@
 ---
 import Prose from "../prose/prose.astro";
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 import { Image } from "astro:assets";
 
@@ -31,12 +31,12 @@ import venueImage from "./prague.png";
     </Prose>
 
     <div class="space-x-4 mb-5">
-      <ButtonLink href="/where">
+      <ButtonLink url="/where">
         Where is EuroPython?
       </ButtonLink>
     </div>
     <div class="space-x-12">
-      <ButtonLink href="/explore">
+      <ButtonLink url="/explore">
         Explore Prague
       </ButtonLink>
     </div>