Skip to content

Commit 12048ce

Browse files
nikoshellnikoshell
committed
New button component.
1 parent d4af522 commit 12048ce

File tree

8 files changed

+93
-51
lines changed

8 files changed

+93
-51
lines changed

‎src/components/card/card.astro‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import type { ImageMetadata } from "astro";
33
import { Image } from "astro:assets";
4-
import ButtonLink from "../button-link/button-link.astro";
4+
import Button from "@ui/Button.astro";
55
66
export interface Props {
77
title: string;
@@ -14,7 +14,7 @@ const { title, subtitle, url, image } = Astro.props;
1414
---
1515

1616
<div
17-
class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
17+
class="min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
1818
>
1919
<a href={url} class="block">
2020
<div class="relative w-full">
@@ -34,11 +34,6 @@ const { title, subtitle, url, image } = Astro.props;
3434
</a>
3535
<slot />
3636
</div>
37-
<a
38-
class="text-xs px-2 py-1 mt-4 bg-[#141F36] text-white rounded-[10px] inline-block w-fit mx-auto leading-4 hover:bg-button-hover not-prose mt-auto"
39-
href={url}
40-
>
41-
{subtitle}
42-
<span class="inline-block ml-1 font-system text-lg leading-4"> ↗ </span>
43-
</a>
37+
38+
<Button secondary url={url}>{subtitle}</Button>
4439
</div>

‎src/components/header/header-actions.astro‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import ButtonLink from "../button-link/button-link.astro";
3+
import Button from "@ui/Button.astro";
34
import HeaderButton from "./header-button.astro";
45
import Search from "astro-pagefind/components/Search";
56
@@ -26,15 +27,8 @@ const IS_LIVE = false;
2627
{
2728
!mobile ? (
2829
<>
29-
<ButtonLink url="/tickets" className="hidden md:block">
30-
<span>Register Now! 🎟️</span>
31-
</ButtonLink>
32-
{IS_LIVE && (
33-
<ButtonLink url="/live">
34-
Live
35-
<span class="hidden md:inline"> 📺</span>
36-
</ButtonLink>
37-
)}
30+
<Button url="/tickets">Register Now! 🎟️</Button>
31+
{IS_LIVE && <Button url="/live">Live 📺</Button>}
3832
</>
3933
) : null
4034
}

‎src/components/hero-section/prague.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import Prose from "../prose/prose.astro";
3-
import ButtonLink from "../button-link/button-link.astro";
3+
import Button from "@ui/Button.astro";
44
import { Title } from "../typography/title";
55
import { Image } from "astro:assets";
66
@@ -31,10 +31,10 @@ import venueImage from "./prague.png";
3131
</Prose>
3232

3333
<div class="space-x-4 mb-5">
34-
<ButtonLink url="/where"> Where is EuroPython? </ButtonLink>
34+
<Button url="/where"> Where is EuroPython? </Button>
3535
</div>
3636
<div class="space-x-12">
37-
<ButtonLink url="/explore"> Explore Prague </ButtonLink>
37+
<Button url="/explore"> Explore Prague </Button>
3838
</div>
3939
</div>
4040
</article>

‎src/components/hero2/hero.astro‎

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2+
import { Logo } from "../logo";
23
import { Image } from "astro:assets";
34
import heroImage from "./conference_photo.jpg";
45
56
import IconWithLabel from "./icon-label.astro";
6-
import ButtonLink from "../../components/button-link/button-link.astro";
7+
import Button from "@ui/Button.astro";
78
8-
import HeaderLogo from "../header/header-logo.astro";
99
const action1 = "https://ep2025.europython.eu/tickets";
1010
const action2 = "https://ep2025.europython.eu/sponsorship/sponsor/";
1111
---
@@ -80,16 +80,16 @@ const action2 = "https://ep2025.europython.eu/sponsorship/sponsor/";
8080
></svg
8181
>
8282
</div>
83-
<div class="relative z-10 text-center">
84-
<div class="flex items-center space-x-3 p-10 md:mt-20">
85-
<div class="w-25 h-25 flex items-center justify-center">
86-
<HeaderLogo />
83+
<div class="prose-xl relative z-10 text-center">
84+
<div class="flex items-center space-x-3 p-10 md:mt-20 justify-center">
85+
<div class="w-200 h-200 flex items-center justify-center">
86+
<Logo className="h-full block md:w-full lg:w-[200px] pr-3 lg:pr-8" />
8787
</div>
88-
<h1 class="text-5xl md:text-9xl m-0 font-bold text-[#17223A]">
88+
<h1 class="text-5xl md:text-8xl lg:text-9xl m-0 font-bold text-[#17223A]">
8989
EuroPython
9090
</h1>
9191
</div>
92-
<p class="max-w-2xl mx-10 md:mx-40 text-center text-lg text-gray-700 mt-2">
92+
<p class="max-w-2xl mx-10 md:mx-40 text-center text-xl text-gray-700 mt-2">
9393
Discover the latest Python trends, learn from 180+ expert speakers,
9494
network with fellow developers, enjoy social events, and explore open
9595
spaces to spark new ideas.
@@ -106,27 +106,12 @@ const action2 = "https://ep2025.europython.eu/sponsorship/sponsor/";
106106
</div>
107107

108108
<!-- Second 2x1 Grid with Action Buttons -->
109-
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 m-6">
109+
<div class="text-center grid grid-cols-1 md:grid-cols-2 gap-4 m-6">
110110
<div>
111-
<ButtonLink
112-
secondary
113-
url={action1}
114-
className="mb-4 rounded-lg text-xl"
115-
isExternal={true}
116-
>
117-
Register Now
118-
</ButtonLink>
111+
<Button secondary url={action1}> Register Now </Button>
119112
</div>
120113
<div class="btn-outline">
121-
<a
122-
class="font-bold text-lg px-4 py-4 bg-button rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose outline-solid outline bg-transparent rounded-xlborder text-xl text-secondary outline-secondary text-black"
123-
href={action2}
124-
>
125-
Call for Sponsors
126-
<span class="inline-block ml-1 font-system text-lg leading-4">
127-
↗
128-
</span></a
129-
>
114+
<Button outline url={action2}> Call for Sponsors </Button>
130115
</div>
131116
</div>
132117
</div>

‎src/components/keynoters/keynoters.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
import ButtonLink from "../button-link/button-link.astro";
32
import Keynoter from "./keynoter.astro";
43
import Headline from "@ui/Headline.astro"
4+
import Button from "@ui/Button.astro";
55
66
import { getCollection } from "astro:content";
77
@@ -118,7 +118,7 @@ const placeholders = Math.max(0, 6 - keynoters.length);
118118
<span class="text-body-light inline-block mr-2">#</span>
119119
See other sessions
120120
</h3>
121-
<ButtonLink url="/sessions">List of Sessions</ButtonLink>
121+
<Button url="/sessions">List of Sessions</Button>
122122
</div>
123123
</div>
124124
</section>

‎src/components/sponsors/sponsors.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Fragment } from "react";
55
import { Fullbleed } from "../layout/fullbleed";
66
import Headline from "@ui/Headline.astro"
77
8-
import ButtonLink from "../button-link/button-link.astro";
8+
import Button from "@ui/Button.astro";
99
1010
import SponsorTier from "./sponsor-tier.astro";
1111
@@ -68,7 +68,7 @@ const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
6868
}
6969

7070
<div class="mt-4 text-center">
71-
<ButtonLink url="/sponsor">Become a sponsor</ButtonLink>
71+
<Button url="/sponsor">Become a sponsor</Button>
7272
</div>
7373
{
7474
topTier && topTier.sponsors.length > 0 && (

‎src/components/ui/Button.astro‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
const {
3+
url,
4+
class: className = "",
5+
secondary = false,
6+
outline = false,
7+
disabled = false,
8+
isExternal
9+
} = Astro.props;
10+
11+
const resolvedIsExternal = isExternal ?? url?.startsWith("http");
12+
13+
const baseClasses = "font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
14+
const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover border-transparent";
15+
const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
16+
const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
17+
const disabledClasses = "opacity-50 pointer-events-none";
18+
---
19+
20+
{url ? (
21+
<a
22+
href={disabled ? undefined : url}
23+
class={`${baseClasses}
24+
${outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
25+
${disabled ? disabledClasses : ""}
26+
${className}`}
27+
aria-disabled={disabled}
28+
{...(resolvedIsExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
29+
>
30+
<slot />
31+
{resolvedIsExternal && <span class="ml-1 text-lg leading-4">↗</span>}
32+
</a>
33+
) : (
34+
<button
35+
class={`${baseClasses}
36+
${outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
37+
${disabled ? disabledClasses : ""}
38+
${className}`}
39+
disabled={disabled}
40+
aria-disabled={disabled}
41+
>
42+
<slot />
43+
</button>
44+
)}

‎src/pages/test_components.astro‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
---
3+
import Layout from "../layouts/HomePageLayout.astro";
4+
import Button from "@ui/Button.astro";
5+
import Headline from "@ui/Headline.astro"
6+
---
7+
8+
<Layout
9+
title=""
10+
description=""
11+
>
12+
13+
<Headline as="h1" id="components" title="Example components" />
14+
<section class="prose-xl my-10">
15+
<Headline id="button" title="Button" />
16+
<div class="grid gap-2 w-[200px]">
17+
<Button>Primary Button</Button>
18+
<Button secondary>Secondary Button</Button>
19+
<Button outline>Outline Button</Button>
20+
<Button disabled>Disabled Button</Button>
21+
<Button url="/about">Internal Link</Button>
22+
<Button url="https://example.com">External Link</Button>
23+
</section>
24+
</Layout>

0 commit comments

Comments
 (0)