Skip to content

Commit 796863a

Browse files
Ciphroxxkeshav
Ciphrox
authored and
xkeshav
committed
seperated back button as a component
1 parent d2ab154 commit 796863a

File tree

6 files changed

+99
-100
lines changed

6 files changed

+99
-100
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/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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
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";
67
import BackButton from "@/components/ui/backButton.astro";
78
89
import { varnmala_english, varnmala_hindi } from "@/utils/common";
@@ -21,7 +22,6 @@ import { varnmala_english, varnmala_hindi } from "@/utils/common";
2122
</Fragment>
2223
<BackButton />
2324

24-
<a href="/varnmala" class="back-button">← Back</a>
2525
<article class="container__alphabets">
2626
<div id="english">
2727
<AlphabetComponent list={varnmala_english} title="English" />

‎src/pages/varnmala/english.astro‎

Lines changed: 85 additions & 81 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" }}>
@@ -40,98 +41,101 @@ import Help from "@/components/Help.astro";
4041
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"
4142
/>
4243
</Fragment>
43-
<div class="controls" id="controls">
44-
<div class="control-group">
45-
<label>Background:</label>
46-
<select id="bgSelector">
47-
<option value="none">None</option>
48-
<option value="gradient1">Gradient 1</option>
49-
<option value="gradient2">Gradient 2</option>
50-
<option value="pattern1">Pattern 1</option>
51-
</select>
52-
<button id="toggleBg">Toggle Background</button>
53-
</div>
44+
<BackButton />
45+
<article class="container__english">
46+
<div class="controls" id="controls">
47+
<div class="control-group">
48+
<label>Background:</label>
49+
<select id="bgSelector">
50+
<option value="none">None</option>
51+
<option value="gradient1">Gradient 1</option>
52+
<option value="gradient2">Gradient 2</option>
53+
<option value="pattern1">Pattern 1</option>
54+
</select>
55+
<button id="toggleBg">Toggle Background</button>
56+
</div>
5457

55-
<div class="control-group">
56-
<label>Font:</label>
57-
<select id="fontSelector">
58-
<option value="Arial">Arial</option>
59-
<option value="Georgia">Georgia</option>
60-
<option value="Times New Roman">Times New Roman</option>
61-
</select>
62-
<input type="color" id="colorPicker" value="#000000" />
58+
<div class="control-group">
59+
<label>Font:</label>
60+
<select id="fontSelector">
61+
<option value="Arial">Arial</option>
62+
<option value="Georgia">Georgia</option>
63+
<option value="Times New Roman">Times New Roman</option>
64+
</select>
65+
<input type="color" id="colorPicker" value="#000000" />
66+
</div>
6367
</div>
64-
</div>
65-
<article class="container__hindi" id="letterContainer">
66-
<div class="letter">A</div>
67-
</article>
68-
<script>
69-
import { colorBox, isAlphabet, random } from "@/utils/utils.js";
68+
<article class="container__hindi" id="letterContainer">
69+
<div class="letter">A</div>
70+
</article>
71+
<script>
72+
import { colorBox, isAlphabet, random } from "@/utils/utils.js";
7073

71-
const letterDiv = document.querySelector(".letter") as HTMLDivElement;
72-
const controls = document.getElementById("controls") as HTMLElement;
73-
const letterContainer = document.getElementById("letterContainer") as HTMLElement;
74-
const bgSelector = document.getElementById("bgSelector") as HTMLInputElement;
75-
const fontSelector = document.getElementById("fontSelector") as HTMLInputElement;
76-
const colorPicker = document.getElementById("colorPicker") as HTMLInputElement;
77-
const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement;
74+
const letterDiv = document.querySelector(".letter") as HTMLDivElement;
75+
const controls = document.getElementById("controls") as HTMLElement;
76+
const letterContainer = document.getElementById("letterContainer") as HTMLElement;
77+
const bgSelector = document.getElementById("bgSelector") as HTMLInputElement;
78+
const fontSelector = document.getElementById("fontSelector") as HTMLInputElement;
79+
const colorPicker = document.getElementById("colorPicker") as HTMLInputElement;
80+
const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement;
7881

79-
// Event Listeners
80-
bgSelector?.addEventListener("change", updateBackground);
81-
fontSelector?.addEventListener("change", updateFont);
82-
colorPicker?.addEventListener("change", updateColor);
83-
toggleBg?.addEventListener("click", toggleBackground);
82+
// Event Listeners
83+
bgSelector?.addEventListener("change", updateBackground);
84+
fontSelector?.addEventListener("change", updateFont);
85+
colorPicker?.addEventListener("change", updateColor);
86+
toggleBg?.addEventListener("click", toggleBackground);
8487

85-
document.addEventListener(
86-
"keydown",
87-
(e) => {
88-
e.preventDefault();
89-
const color = random(colorBox);
90-
const { key, keyCode } = e;
91-
if (isAlphabet(keyCode)) {
92-
const keyCapital = key.toUpperCase();
93-
drawLetter(keyCapital, colorPicker.value || color);
94-
}
95-
},
96-
false
97-
);
88+
document.addEventListener(
89+
"keydown",
90+
(e) => {
91+
e.preventDefault();
92+
const color = random(colorBox);
93+
const { key, keyCode } = e;
94+
if (isAlphabet(keyCode)) {
95+
const keyCapital = key.toUpperCase();
96+
drawLetter(keyCapital, colorPicker.value || color);
97+
}
98+
},
99+
false
100+
);
98101

99-
const drawLetter = (letter: string, color = "pink") => {
100-
letterDiv.innerHTML = letter;
101-
letterDiv.style.color = color;
102-
letterDiv.style.animation = "letterPop 0.3s ease-out";
103-
setTimeout(() => {
104-
letterDiv.style.animation = "";
105-
}, 300);
106-
};
102+
const drawLetter = (letter: string, color = "pink") => {
103+
letterDiv.innerHTML = letter;
104+
letterDiv.style.color = color;
105+
letterDiv.style.animation = "letterPop 0.3s ease-out";
106+
setTimeout(() => {
107+
letterDiv.style.animation = "";
108+
}, 300);
109+
};
107110

108-
function updateBackground() {
109-
letterContainer.className = "container__hindi";
110-
if (bgSelector.value !== "none") {
111-
letterContainer.classList.add(`bg-${bgSelector.value}`);
111+
function updateBackground() {
112+
letterContainer.className = "container__hindi";
113+
if (bgSelector.value !== "none") {
114+
letterContainer.classList.add(`bg-${bgSelector.value}`);
115+
}
112116
}
113-
}
114117

115-
function updateFont() {
116-
letterDiv.style.fontFamily = fontSelector.value;
117-
}
118+
function updateFont() {
119+
letterDiv.style.fontFamily = fontSelector.value;
120+
}
118121

119-
function updateColor() {
120-
letterDiv.style.color = colorPicker.value;
121-
}
122+
function updateColor() {
123+
letterDiv.style.color = colorPicker.value;
124+
}
122125

123-
function toggleBackground() {
124-
letterContainer.classList.toggle("no-background");
125-
}
126+
function toggleBackground() {
127+
letterContainer.classList.toggle("no-background");
128+
}
126129

127-
// Intersection Observer for sticky header
128-
const observer = new IntersectionObserver(
129-
([e]) => {
130-
controls.classList.toggle("sticky", e.intersectionRatio < 1);
131-
},
132-
{ threshold: [1] }
133-
);
130+
// Intersection Observer for sticky header
131+
const observer = new IntersectionObserver(
132+
([e]) => {
133+
controls.classList.toggle("sticky", e.intersectionRatio < 1);
134+
},
135+
{ threshold: [1] }
136+
);
134137

135-
observer.observe(controls);
136-
</script>
138+
observer.observe(controls);
139+
</script>
140+
</article>
137141
</BaseLayout>

‎src/pages/varnmala/reader.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import BackButton from "@/components/ui/backButton.astro";
2121
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."
2222
/>
2323
</Fragment>
24-
<a href="/varnmala" class="back-button">← Back</a>
24+
25+
<BackButton />
2526
<article id="container__reader">
2627
a🍎
2728
</article>

0 commit comments

Comments
 (0)