Skip to content

Commit 259df5f

Browse files
thedevarchivethedevarchive
committed
Updated navigation links for better accessibility and styling consistency.
1 parent 574b093 commit 259df5f

File tree

4 files changed

+123
-116
lines changed

4 files changed

+123
-116
lines changed

‎.cursorrules

+2-1
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,5 @@ Key Conventions
3636
Other Details
3737

3838
- Label elements must be placed before their corresponding input field
39-
- Styles of each element should be placed in App.css file
39+
- Styles of each element should be placed in App.css file
40+
- Indentation for each line should be two spaces (" ")

‎src/App.jsx

+25-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from "react";
2-
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
2+
import { BrowserRouter as Router, Routes, Route, NavLink } from "react-router-dom";
33
import { IconButton } from "@mui/material";
44
import Brightness4Icon from '@mui/icons-material/Brightness4';
55
import Brightness7Icon from '@mui/icons-material/Brightness7';
@@ -131,38 +131,44 @@ function App() {
131131
{isDarkMode ? <Brightness7Icon /> : <Brightness4Icon />}
132132
</IconButton>
133133
</div>
134-
<p><em>Save your source code snippets in any programming language in one place</em></p>
134+
<p style={{ marginBottom: "40px" }}><em>Save your source code snippets in any programming language in one place.</em></p>
135135

136-
{/* Navigation */}
136+
{/* Navigate between Add Snippet and Your Snippets */}
137137
<nav style={{
138138
marginTop: "20px",
139-
marginBottom: "20px",
139+
marginBottom: "40px",
140140
display: "flex",
141-
gap: "20px",
141+
gap: "100px",
142142
justifyContent: "center"
143143
}}>
144-
<Link
144+
<NavLink
145145
to="/"
146-
style={{
146+
style={({ isActive }) => ({
147147
color: isDarkMode ? '#ffffff' : '#000000',
148148
textDecoration: 'none',
149149
fontSize: '1.1rem',
150-
fontWeight: 'bold'
151-
}}
150+
fontWeight: isActive ? 'bold' : 'normal',
151+
borderBottom: isActive ? `2px solid ${isDarkMode ? '#ffffff' : '#000000'}` : '2px solid transparent',
152+
paddingBottom: '3px',
153+
transition: 'border-color 0.3s ease-in-out'
154+
})}
152155
>
153-
Add Snippet
154-
</Link>
155-
<Link
156+
ADD SNIPPET
157+
</NavLink>
158+
<NavLink
156159
to="/view"
157-
style={{
160+
style={({ isActive }) => ({
158161
color: isDarkMode ? '#ffffff' : '#000000',
159162
textDecoration: 'none',
160163
fontSize: '1.1rem',
161-
fontWeight: 'bold'
162-
}}
164+
fontWeight: isActive ? 'bold' : 'normal',
165+
borderBottom: isActive ? `2px solid ${isDarkMode ? '#ffffff' : '#000000'}` : '2px solid transparent',
166+
paddingBottom: '3px',
167+
transition: 'border-color 0.3s ease-in-out'
168+
})}
163169
>
164-
View Snippets
165-
</Link>
170+
YOUR SNIPPETS
171+
</NavLink>
166172
</nav>
167173

168174
<Routes>
@@ -175,8 +181,6 @@ function App() {
175181
onAddLanguage={addLanguage}
176182
isDarkMode={isDarkMode}
177183
theme={theme}
178-
currentThemeOptions={currentThemeOptions}
179-
setTheme={setTheme}
180184
/>
181185
}
182186
/>
@@ -194,6 +198,8 @@ function App() {
194198
selectedLanguage={selectedLanguage}
195199
setSelectedLanguage={setSelectedLanguage}
196200
filteredSnippets={filteredSnippets}
201+
currentThemeOptions={currentThemeOptions}
202+
setTheme={setTheme}
197203
/>
198204
}
199205
/>

‎src/pages/AddSnippet.jsx

+1-24
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,8 @@
11
import { SnippetForm } from "../components/SnippetForm";
22

3-
export const AddSnippet = ({ onSave, languages, onAddLanguage, isDarkMode, theme, currentThemeOptions, setTheme }) => {
3+
export const AddSnippet = ({ onSave, languages, onAddLanguage, isDarkMode }) => {
44
return (
55
<div>
6-
<h3>Add Snippet</h3>
7-
<div style={{ marginBottom: "20px" }}>
8-
<label htmlFor="themeSelect">Select Theme: &nbsp;</label>
9-
<select
10-
value={Object.keys(currentThemeOptions).find(key => currentThemeOptions[key] === theme)}
11-
onChange={(e) => setTheme(currentThemeOptions[e.target.value])}
12-
style={{
13-
padding: "8px",
14-
borderRadius: "4px",
15-
backgroundColor: isDarkMode ? "#3b3b3b" : "#ffffff",
16-
border: "1px solid #ccc",
17-
color: isDarkMode ? "#ffffff" : "#333",
18-
width: "200px",
19-
fontSize: "16px"
20-
}}
21-
>
22-
{Object.keys(currentThemeOptions).map((themeName) => (
23-
<option key={themeName} value={themeName}>
24-
{themeName}
25-
</option>
26-
))}
27-
</select>
28-
</div>
296
<SnippetForm
307
onSave={onSave}
318
languages={languages}

‎src/pages/ViewSnippets.jsx

+95-72
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,100 @@
11
import { CATEGORIES } from "../components/SnippetForm";
22
import SnippetList from "../components/SnippetList";
33

4-
export const ViewSnippets = ({
5-
snippets,
6-
languages,
7-
onDelete,
8-
isDarkMode,
9-
theme,
10-
selectedCategory,
11-
setSelectedCategory,
12-
selectedLanguage,
13-
setSelectedLanguage,
14-
filteredSnippets
4+
export const ViewSnippets = ({
5+
snippets,
6+
languages,
7+
onDelete,
8+
isDarkMode,
9+
theme,
10+
selectedCategory,
11+
setSelectedCategory,
12+
selectedLanguage,
13+
setSelectedLanguage,
14+
filteredSnippets,
15+
currentThemeOptions,
16+
setTheme
1517
}) => {
16-
return (
17-
<div>
18-
<h3>Your Snippets</h3>
19-
{snippets.length > 0 ? (
20-
<>
21-
<label htmlFor="categorySelect">Select Category: &nbsp;</label>
22-
<select
23-
onChange={(e) => setSelectedCategory(e.target.value)}
24-
value={selectedCategory}
25-
style={{
26-
padding: "8px",
27-
borderRadius: "4px",
28-
backgroundColor: isDarkMode ? "#3b3b3b" : "#ffffff",
29-
border: "1px solid #ccc",
30-
color: isDarkMode ? "#ffffff" : "#333",
31-
width: "200px",
32-
fontSize: "16px",
33-
marginBottom: "20px"
34-
}}>
35-
<option value="All">All</option>
36-
{CATEGORIES.map((cat, index) => (
37-
<option key={index} value={cat}>{cat}</option>
38-
))}
39-
</select>
40-
<label htmlFor="languageSelect">&nbsp; Select Language: &nbsp;</label>
41-
<select
42-
onChange={(e) => setSelectedLanguage(e.target.value)}
43-
value={selectedLanguage}
44-
style={{
45-
padding: "8px",
46-
borderRadius: "4px",
47-
backgroundColor: isDarkMode ? "#3b3b3b" : "#ffffff",
48-
border: "1px solid #ccc",
49-
color: isDarkMode ? "#ffffff" : "#333",
50-
width: "200px",
51-
fontSize: "16px",
52-
marginBottom: "20px"
53-
}}>
54-
<option value="All">All</option>
55-
{languages.map((lang, index) => (
56-
<option key={index} value={lang}>{lang}</option>
57-
))}
58-
</select>
59-
{filteredSnippets.length > 0 ? (
60-
<div style={{ marginTop: "20px" }}>
61-
<SnippetList
62-
snippets={filteredSnippets}
63-
onDelete={onDelete}
64-
theme={theme}
65-
isDarkMode={isDarkMode}
66-
/>
67-
</div>
68-
) : (
69-
<p>No snippets in this category yet. Add some more snippets to see them here!</p>
70-
)}
71-
</>
72-
) : (
73-
<p>No snippets yet. Add one!</p>
74-
)}
75-
</div>
76-
);
18+
return (
19+
<div>
20+
{snippets.length > 0 ? (
21+
<>
22+
<div style={{ marginBottom: "20px" }}>
23+
<label htmlFor="themeSelect">Select Theme: &nbsp;</label>
24+
<select
25+
value={Object.keys(currentThemeOptions).find(key => currentThemeOptions[key] === theme)}
26+
onChange={(e) => setTheme(currentThemeOptions[e.target.value])}
27+
style={{
28+
padding: "8px",
29+
borderRadius: "4px",
30+
backgroundColor: isDarkMode ? "#3b3b3b" : "#ffffff",
31+
border: "1px solid #ccc",
32+
color: isDarkMode ? "#ffffff" : "#333",
33+
width: "200px",
34+
fontSize: "16px"
35+
}}
36+
>
37+
{Object.keys(currentThemeOptions).map((themeName) => (
38+
<option key={themeName} value={themeName}>
39+
{themeName}
40+
</option>
41+
))}
42+
</select>
43+
</div>
44+
<label htmlFor="categorySelect">Select Category: &nbsp;</label>
45+
<select
46+
onChange={(e) => setSelectedCategory(e.target.value)}
47+
value={selectedCategory}
48+
style={{
49+
padding: "8px",
50+
borderRadius: "4px",
51+
backgroundColor: isDarkMode ? "#3b3b3b" : "#ffffff",
52+
border: "1px solid #ccc",
53+
color: isDarkMode ? "#ffffff" : "#333",
54+
width: "200px",
55+
fontSize: "16px",
56+
marginBottom: "20px"
57+
}}>
58+
<option value="All">All</option>
59+
{CATEGORIES.map((cat, index) => (
60+
<option key={index} value={cat}>{cat}</option>
61+
))}
62+
</select>
63+
<label htmlFor="languageSelect">&nbsp; Select Language: &nbsp;</label>
64+
<select
65+
onChange={(e) => setSelectedLanguage(e.target.value)}
66+
value={selectedLanguage}
67+
style={{
68+
padding: "8px",
69+
borderRadius: "4px",
70+
backgroundColor: isDarkMode ? "#3b3b3b" : "#ffffff",
71+
border: "1px solid #ccc",
72+
color: isDarkMode ? "#ffffff" : "#333",
73+
width: "200px",
74+
fontSize: "16px",
75+
marginBottom: "20px"
76+
}}>
77+
<option value="All">All</option>
78+
{languages.map((lang, index) => (
79+
<option key={index} value={lang}>{lang}</option>
80+
))}
81+
</select>
82+
{filteredSnippets.length > 0 ? (
83+
<div style={{ marginTop: "20px" }}>
84+
<SnippetList
85+
snippets={filteredSnippets}
86+
onDelete={onDelete}
87+
theme={theme}
88+
isDarkMode={isDarkMode}
89+
/>
90+
</div>
91+
) : (
92+
<p>No snippets in this category yet. Add some more snippets to see them here!</p>
93+
)}
94+
</>
95+
) : (
96+
<p>No snippets yet. Add one!</p>
97+
)}
98+
</div>
99+
);
77100
};

0 commit comments

Comments
 (0)