Skip to content

Commit d24c3bf

Browse files
CiphroxCiphrox
committed
seperated back button as a component
1 parent f253d82 commit d24c3bf

File tree

8 files changed

+124
-104
lines changed

8 files changed

+124
-104
lines changed

‎src/assets/styles/alphabets/[alphabet]/board.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,6 @@
99
justify-content: flex-start;
1010
padding: 1rem;
1111

12-
& .back {
13-
background: var(--background);
14-
color: var(--text);
15-
border: 1px solid var(--border);
16-
border-radius: 0.5rem;
17-
padding: 0.5rem 1rem;
18-
margin-bottom: 1rem;
19-
cursor: pointer;
20-
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
21-
}
22-
2312
& .container__alphabet {
2413
display: grid;
2514
gap: 2rem;

‎src/components/ui/backButton.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<button class="back" onclick="window.history.back()"> ← Back </button>
2+
3+
<style>
4+
.back {
5+
background: var(--background);
6+
color: var(--text);
7+
border: 1px solid var(--border);
8+
border-radius: 0.5rem;
9+
padding: 0.5rem 1rem;
10+
margin-bottom: 1rem;
11+
cursor: pointer;
12+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
13+
}
14+
</style>

‎src/pages/alphabets/[alphabet]/board.astro‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import rawAlphabetData from "@/data/alphabets.json";
77
import BaseLayout from "@/layouts/Base";
88
import { type AlphabetsData } from "@/types/alphabet.ts";
99
10+
import BackButton from "@/components/ui/backButton.astro";
11+
1012
const alphabetData = rawAlphabetData as AlphabetsData;
1113
1214
export async function getStaticPaths() {
@@ -25,14 +27,13 @@ const data = alphabetData[alphabet as keyof AlphabetsData].data;
2527

2628
<BaseLayout meta={{ title: `Alphabets - ${alphabet.charAt(0).toUpperCase() + alphabet.slice(1)}` }}>
2729
<article class="container__alphabets">
28-
<button class="back" onclick="window.history.back()"> ← Back </button>
29-
30+
<BackButton />
3031
<div class="container__alphabet">
3132
<div class="list">
3233
{
3334
data &&
3435
Object.values(data).map((d) => {
35-
return <LetterCard item={d} category= {alphabet} />;
36+
return <LetterCard item={d} category={alphabet} />;
3637
})
3738
}
3839
</div>

‎src/pages/alphabets/[alphabet]/playground.astro‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
---
22
import "@/assets/styles/alphabets/[alphabet]/playground.css";
3+
34
import Help from "@/components/Help.astro";
45
import BaseLayout from "@/layouts/Base";
56
import rawAlphabetData from "@/data/alphabets.json";
6-
import { type AlphabetsData } from "@/types/alphabet";
7+
import BackButton from "@/components/ui/backButton.astro";
78
9+
import { type AlphabetsData } from "@/types/alphabet";
810
const alphabetData = rawAlphabetData as AlphabetsData;
911
1012
export async function getStaticPaths() {
@@ -26,6 +28,8 @@ const currentCategory = alphabetData[alphabet as keyof AlphabetsData];
2628
description="Press any letter key (A-Z) to see the corresponding information from the selected alphabet category."
2729
/>
2830
</Fragment>
31+
32+
<BackButton />
2933
<article class="tv container__typing">
3034
<div class="letter">A</div>
3135
<div class="emoji">{currentCategory.icon}</div>

‎src/pages/varnmala/alphabet.astro‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
---
2-
import AlphabetComponent from "@/components/Alphabet.astro";
32
import "@/assets/styles/varnmala/alphabet.css";
4-
import Help from "@/components/Help.astro";
53
import BaseLayout from "@/layouts/Base";
4+
5+
import AlphabetComponent from "@/components/Alphabet.astro";
6+
import Help from "@/components/Help.astro";
7+
import BackButton from "@/components/ui/backButton.astro";
8+
69
import { varnmala_english, varnmala_hindi } from "@/utils/common";
710
---
811

@@ -17,8 +20,8 @@ import { varnmala_english, varnmala_hindi } from "@/utils/common";
1720
description="Varnmala is a collection of alphabets in Hindi and English. It is used to teach kids the basics of language."
1821
/>
1922
</Fragment>
23+
<BackButton />
2024

21-
<a href="/varnmala" class="back-button">← Back</a>
2225
<article class="container__alphabets">
2326
<div id="english">
2427
<AlphabetComponent list={varnmala_english} title="English" />

‎src/pages/varnmala/english.astro‎

Lines changed: 84 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import BaseLayout from "@/layouts/Base";
33
import "@/assets/styles/varnmala/english.css";
44
import Help from "@/components/Help.astro";
5+
import BackButton from "@/components/ui/backButton.astro";
56
---
67

78
<BaseLayout meta={{ title: "English" }}>
@@ -11,100 +12,101 @@ import Help from "@/components/Help.astro";
1112
description="Just press any letter fron keyboard and it display the letter and it's relative word in clear way and if you type again it will change the color"
1213
/>
1314
</Fragment>
14-
<a href="/varnmala" class="back-button">← Back</a>
15+
<BackButton />
1516
<article class="container__english">
16-
<div class="controls" id="controls">
17-
<div class="control-group">
18-
<label>Background:</label>
19-
<select id="bgSelector">
20-
<option value="none">None</option>
21-
<option value="gradient1">Gradient 1</option>
22-
<option value="gradient2">Gradient 2</option>
23-
<option value="pattern1">Pattern 1</option>
24-
</select>
25-
<button id="toggleBg">Toggle Background</button>
26-
</div>
17+
<div class="controls" id="controls">
18+
<div class="control-group">
19+
<label>Background:</label>
20+
<select id="bgSelector">
21+
<option value="none">None</option>
22+
<option value="gradient1">Gradient 1</option>
23+
<option value="gradient2">Gradient 2</option>
24+
<option value="pattern1">Pattern 1</option>
25+
</select>
26+
<button id="toggleBg">Toggle Background</button>
27+
</div>
2728

28-
<div class="control-group">
29-
<label>Font:</label>
30-
<select id="fontSelector">
31-
<option value="Arial">Arial</option>
32-
<option value="Georgia">Georgia</option>
33-
<option value="Times New Roman">Times New Roman</option>
34-
</select>
35-
<input type="color" id="colorPicker" value="#000000" />
29+
<div class="control-group">
30+
<label>Font:</label>
31+
<select id="fontSelector">
32+
<option value="Arial">Arial</option>
33+
<option value="Georgia">Georgia</option>
34+
<option value="Times New Roman">Times New Roman</option>
35+
</select>
36+
<input type="color" id="colorPicker" value="#000000" />
37+
</div>
3638
</div>
37-
</div>
38-
<article class="container__hindi" id="letterContainer">
39-
<div class="letter">A</div>
40-
</article>
41-
<script>
42-
import { colorBox, isAlphabet, random } from "@/utils/utils.js";
39+
<article class="container__hindi" id="letterContainer">
40+
<div class="letter">A</div>
41+
</article>
42+
<script>
43+
import { colorBox, isAlphabet, random } from "@/utils/utils.js";
4344

44-
const letterDiv = document.querySelector(".letter") as HTMLDivElement;
45-
const controls = document.getElementById("controls") as HTMLElement;
46-
const letterContainer = document.getElementById("letterContainer") as HTMLElement;
47-
const bgSelector = document.getElementById("bgSelector") as HTMLInputElement;
48-
const fontSelector = document.getElementById("fontSelector") as HTMLInputElement;
49-
const colorPicker = document.getElementById("colorPicker") as HTMLInputElement;
50-
const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement;
45+
const letterDiv = document.querySelector(".letter") as HTMLDivElement;
46+
const controls = document.getElementById("controls") as HTMLElement;
47+
const letterContainer = document.getElementById("letterContainer") as HTMLElement;
48+
const bgSelector = document.getElementById("bgSelector") as HTMLInputElement;
49+
const fontSelector = document.getElementById("fontSelector") as HTMLInputElement;
50+
const colorPicker = document.getElementById("colorPicker") as HTMLInputElement;
51+
const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement;
5152

52-
// Event Listeners
53-
bgSelector?.addEventListener("change", updateBackground);
54-
fontSelector?.addEventListener("change", updateFont);
55-
colorPicker?.addEventListener("change", updateColor);
56-
toggleBg?.addEventListener("click", toggleBackground);
53+
// Event Listeners
54+
bgSelector?.addEventListener("change", updateBackground);
55+
fontSelector?.addEventListener("change", updateFont);
56+
colorPicker?.addEventListener("change", updateColor);
57+
toggleBg?.addEventListener("click", toggleBackground);
5758

58-
document.addEventListener(
59-
"keydown",
60-
(e) => {
61-
e.preventDefault();
62-
const color = random(colorBox);
63-
const { key, keyCode } = e;
64-
if (isAlphabet(keyCode)) {
65-
const keyCapital = key.toUpperCase();
66-
drawLetter(keyCapital, colorPicker.value || color);
67-
}
68-
},
69-
false
70-
);
59+
document.addEventListener(
60+
"keydown",
61+
(e) => {
62+
e.preventDefault();
63+
const color = random(colorBox);
64+
const { key, keyCode } = e;
65+
if (isAlphabet(keyCode)) {
66+
const keyCapital = key.toUpperCase();
67+
drawLetter(keyCapital, colorPicker.value || color);
68+
}
69+
},
70+
false
71+
);
7172

72-
const drawLetter = (letter: string, color = "pink") => {
73-
letterDiv.innerHTML = letter;
74-
letterDiv.style.color = color;
75-
letterDiv.style.animation = "letterPop 0.3s ease-out";
76-
setTimeout(() => {
77-
letterDiv.style.animation = "";
78-
}, 300);
79-
};
73+
const drawLetter = (letter: string, color = "pink") => {
74+
letterDiv.innerHTML = letter;
75+
letterDiv.style.color = color;
76+
letterDiv.style.animation = "letterPop 0.3s ease-out";
77+
setTimeout(() => {
78+
letterDiv.style.animation = "";
79+
}, 300);
80+
};
8081

81-
function updateBackground() {
82-
letterContainer.className = "container__hindi";
83-
if (bgSelector.value !== "none") {
84-
letterContainer.classList.add(`bg-${bgSelector.value}`);
82+
function updateBackground() {
83+
letterContainer.className = "container__hindi";
84+
if (bgSelector.value !== "none") {
85+
letterContainer.classList.add(`bg-${bgSelector.value}`);
86+
}
8587
}
86-
}
8788

88-
function updateFont() {
89-
letterDiv.style.fontFamily = fontSelector.value;
90-
}
89+
function updateFont() {
90+
letterDiv.style.fontFamily = fontSelector.value;
91+
}
9192

92-
function updateColor() {
93-
letterDiv.style.color = colorPicker.value;
94-
}
93+
function updateColor() {
94+
letterDiv.style.color = colorPicker.value;
95+
}
9596

96-
function toggleBackground() {
97-
letterContainer.classList.toggle("no-background");
98-
}
97+
function toggleBackground() {
98+
letterContainer.classList.toggle("no-background");
99+
}
99100

100-
// Intersection Observer for sticky header
101-
const observer = new IntersectionObserver(
102-
([e]) => {
103-
controls.classList.toggle("sticky", e.intersectionRatio < 1);
104-
},
105-
{ threshold: [1] }
106-
);
101+
// Intersection Observer for sticky header
102+
const observer = new IntersectionObserver(
103+
([e]) => {
104+
controls.classList.toggle("sticky", e.intersectionRatio < 1);
105+
},
106+
{ threshold: [1] }
107+
);
107108

108-
observer.observe(controls);
109-
</script>
109+
observer.observe(controls);
110+
</script>
111+
</article>
110112
</BaseLayout>

‎src/pages/varnmala/reader.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import "@/assets/styles/varnmala/reader.css";
33
import Help from "@/components/Help.astro";
44
import BaseLayout from "@/layouts/Base";
5+
6+
import BackButton from "@/components/ui/backButton.astro";
57
---
68

79
<BaseLayout meta={{ title: "Reader" }}>
@@ -19,7 +21,8 @@ import BaseLayout from "@/layouts/Base";
1921
description="Press any letter key (A-Z) to display it with a related emoji. Toggle the speaker buttons to change voices, and use the audio button to mute/unmute sounds."
2022
/>
2123
</Fragment>
22-
<a href="/varnmala" class="back-button">← Back</a>
24+
25+
<BackButton />
2326
<article id="container__reader">
2427
<span class="letter" id="letter">a</span>
2528
<span class="emoji" id="emoji" role="img" aria-label="apple"> 🍎 </span>

‎src/pages/varnmala/typing.astro‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
---
22
import "@/assets/styles/varnmala/typing.css";
3+
34
import Help from "@/components/Help.astro";
45
import BaseLayout from "@/layouts/Base";
6+
import BackButton from "@/components/ui/backButton.astro";
7+
58
---
69

710
<BaseLayout meta={{ title: "Typing" }}>
811
<Fragment slot="header-right">
912
<Help
10-
title="Typing"
11-
description="Press any letter key (A-Z) to see the letter, related emoji, and spelling word animation."
13+
title="Typing"
14+
description="Press any letter key (A-Z) to see the letter, related emoji, and spelling word animation."
1215
/>
1316
</Fragment>
14-
<a href="/varnmala" class="back-button">← Back</a>
17+
18+
<BackButton />
1519
<article class="tv container__typing">
1620
<div class="letter">A</div>
1721
<div class="emoji">🎸</div>

0 commit comments

Comments
 (0)