Add Play Store download button to header
Seto Elkahfi committed
Jul 12, 2025 at 11:39 UTC
ceaf7eb38d3aff2e35eb09395ea59af8ae568486
2 files changed
+70
-1
src/components/layout/Header.astro
+10
-1
@@ -1,6 +1,7 @@
1
---
2
import { SITE } from '@/config'
3
import ThemeToggle from '@/components/ui/ThemeToggle.astro'
4
+import PlayStoreButton from '@/components/ui/PlayStoreButton.astro'
5
---
6
7
<header>
@@ -9,7 +10,10 @@ import ThemeToggle from '@/components/ui/ThemeToggle.astro'
10
{SITE.favicon && <img src="/favicon.svg" alt="favicon" class="favicon" />}
11
<a href="/">{SITE.title}</a>
12
</div>
12
- <ThemeToggle />
13
+ <div class="header-right">
14
+ <PlayStoreButton />
15
+ <ThemeToggle />
16
+ </div>
17
</nav>
18
</header>
19
<style>
@@ -31,6 +35,11 @@ import ThemeToggle from '@/components/ui/ThemeToggle.astro'
35
.logo-container {
36
position: relative;
37
}
38
+ .header-right {
39
+ display: flex;
40
+ align-items: center;
41
+ gap: 1rem;
42
+ }
43
.favicon {
44
position: absolute;
45
width: 1.125rem;
src/components/ui/PlayStoreButton.astro
new
+60
@@ -0,0 +1,60 @@
1
+---
2
+import { SITE } from '@/config'
3
+---
4
+
5
+<a
6
+ href="https://play.google.com/store/apps/dev?id=9116586035310009096"
7
+ class="play-store-button"
8
+ target="_blank"
9
+ rel="noopener noreferrer"
10
+>
11
+ <div class="play-store-icon">
12
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
13
+ <path
14
+ d="M3.609 1.814L13.792 12 3.61 22.186c-.37-.372-.585-.89-.585-1.435V3.25c0-.546.214-1.063.584-1.436zM14.746 12.96l4.497-2.58-3.182-1.83-3.483 2.077 2.168 2.334zM5.304 1.317l8.483 4.883-2.168 2.334L5.303 1.316zM19.243 9.889c.606.348.972.992.972 1.69 0 .55-.212 1.066-.583 1.439l-4.503 2.584-2.165-2.333 3.496-2.088 2.783-1.292z"
15
+ fill="currentColor"></path>
16
+ </svg>
17
+ </div>
18
+ <div class="play-store-text">
19
+ <span class="download-text">Download</span>
20
+ </div>
21
+</a>
22
+
23
+<style>
24
+ .play-store-button {
25
+ display: flex;
26
+ align-items: center;
27
+ background-color: var(--text-primary);
28
+ color: var(--bg);
29
+ text-decoration: none;
30
+ padding: 0.4rem 0.75rem;
31
+ border-radius: 6px;
32
+ transition: opacity 0.2s ease;
33
+ font-size: 0.875rem;
34
+ }
35
+
36
+ .play-store-button:hover {
37
+ opacity: 0.9;
38
+ }
39
+
40
+ .play-store-button:active {
41
+ opacity: 0.7;
42
+ }
43
+
44
+ .play-store-icon {
45
+ margin-right: 0.5rem;
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ }
50
+
51
+ .play-store-text {
52
+ display: flex;
53
+ align-items: center;
54
+ line-height: 1;
55
+ }
56
+
57
+ .download-text {
58
+ font-weight: var(--font-weight-bold);
59
+ }
60
+</style>