Skip to content

Commit 16016ad

Browse files
sandeeprudolasandeeprudola
committed
chore: fix formatting and lint issues
1 parent 1d59acb commit 16016ad

File tree

3 files changed

+89
-85
lines changed

3 files changed

+89
-85
lines changed

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import router from '@/routes';
55
const App = () => {
66
useEffect(() => {
77
let lastPathname = window.location.pathname;
8-
8+
99
const unsubscribe = router.subscribe((state) => {
1010
// Only scroll to top on pathname changes, not on query/hash changes
1111
if (state.location.pathname !== lastPathname) {

‎src/components/shared/DarkModeToggle.tsx‎

Lines changed: 81 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ const DarkModeToggle = () => {
1111
useEffect(() => {
1212
// Sync with localStorage and system preference on mount
1313
const theme = localStorage.getItem('theme');
14-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
15-
14+
const prefersDark = window.matchMedia(
15+
'(prefers-color-scheme: dark)',
16+
).matches;
17+
1618
if (theme === 'dark') {
1719
document.documentElement.classList.add('dark');
1820
setIsDarkMode(true);
@@ -85,98 +87,98 @@ const DarkModeToggle = () => {
8587
aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
8688
role="switch"
8789
aria-checked={isDarkMode}
88-
>
89-
<div
90-
className="absolute inset-0 rounded-full overflow-hidden"
91-
style={{
92-
background: isDarkMode
93-
? 'linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, transparent 50%, rgba(71, 85, 105, 0.1) 100%)'
94-
: 'linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, rgba(56, 189, 248, 0.2) 100%)',
95-
opacity: isHovered ? 1 : 0.6,
96-
transition: 'opacity 0.3s ease',
97-
}}
98-
/>
99-
100-
<span
101-
className="absolute rounded-full blur-md transition-all duration-500"
102-
style={{
103-
width: `${thumbWidth}px`,
104-
height: `${thumbWidth}px`,
105-
backgroundColor: isDarkMode ? '#818cf8' : '#fbbf24',
106-
opacity: isHovered ? 0.5 : 0.3,
107-
transform: `translateX(${translateX}px)`,
108-
}}
109-
/>
110-
111-
<span
112-
className="relative z-10 inline-flex h-7 w-7 items-center justify-center rounded-full bg-white overflow-hidden"
113-
style={{
114-
transform: `translateX(${translateX}px) ${isHovered ? 'scale(1.1)' : 'scale(1)'}`,
115-
boxShadow: isDarkMode
116-
? '0 3px 12px rgba(129, 140, 248, 0.5), 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.7)'
117-
: '0 3px 12px rgba(251, 191, 36, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8)',
118-
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
119-
}}
12090
>
12191
<div
122-
className="absolute inset-0"
92+
className="absolute inset-0 rounded-full overflow-hidden"
12393
style={{
12494
background: isDarkMode
125-
? 'radial-gradient(circle, rgba(129, 140, 248, 0.3) 0%, transparent 70%)'
126-
: 'radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%)',
95+
? 'linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, transparent 50%, rgba(71, 85, 105, 0.1) 100%)'
96+
: 'linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, rgba(56, 189, 248, 0.2) 100%)',
97+
opacity: isHovered ? 1 : 0.6,
98+
transition: 'opacity 0.3s ease',
12799
}}
128100
/>
129101

130-
<Sun
131-
className="absolute transition-all duration-500"
132-
size={16}
102+
<span
103+
className="absolute rounded-full blur-md transition-all duration-500"
133104
style={{
134-
color: '#f59e0b',
135-
opacity: isDarkMode ? 0 : 1,
136-
transform: isDarkMode
137-
? 'rotate(360deg) scale(0.3)'
138-
: `rotate(0deg) scale(1) ${isHovered ? 'rotate(30deg)' : ''}`,
139-
filter: isDarkMode
140-
? 'blur(2px)'
141-
: 'blur(0px) drop-shadow(0 0 6px rgba(245, 158, 11, 0.5))',
142-
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
105+
width: `${thumbWidth}px`,
106+
height: `${thumbWidth}px`,
107+
backgroundColor: isDarkMode ? '#818cf8' : '#fbbf24',
108+
opacity: isHovered ? 0.5 : 0.3,
109+
transform: `translateX(${translateX}px)`,
143110
}}
144111
/>
145112

146-
<Moon
147-
className="absolute transition-all duration-500"
148-
size={16}
113+
<span
114+
className="relative z-10 inline-flex h-7 w-7 items-center justify-center rounded-full bg-white overflow-hidden"
149115
style={{
150-
color: '#818cf8',
151-
opacity: isDarkMode ? 1 : 0,
152-
transform: isDarkMode
153-
? 'rotate(0deg) scale(1)'
154-
: 'rotate(-360deg) scale(0.3)',
155-
filter: isDarkMode
156-
? 'drop-shadow(0 0 6px rgba(129, 140, 248, 0.5))'
157-
: 'blur(2px)',
116+
transform: `translateX(${translateX}px) ${isHovered ? 'scale(1.1)' : 'scale(1)'}`,
117+
boxShadow: isDarkMode
118+
? '0 3px 12px rgba(129, 140, 248, 0.5), 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.7)'
119+
: '0 3px 12px rgba(251, 191, 36, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8)',
158120
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
159121
}}
160-
/>
161-
</span>
122+
>
123+
<div
124+
className="absolute inset-0"
125+
style={{
126+
background: isDarkMode
127+
? 'radial-gradient(circle, rgba(129, 140, 248, 0.3) 0%, transparent 70%)'
128+
: 'radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%)',
129+
}}
130+
/>
162131

163-
<Sun
164-
className="absolute left-2 top-1/2 -translate-y-1/2 transition-all duration-500"
165-
size={12}
166-
style={{
167-
color: 'rgba(255, 255, 255, 0.9)',
168-
opacity: isDarkMode ? 0.2 : 0.7,
169-
}}
170-
/>
171-
<Moon
172-
className="absolute right-2 top-1/2 -translate-y-1/2 transition-all duration-500"
173-
size={12}
174-
style={{
175-
color: 'rgba(255, 255, 255, 0.9)',
176-
opacity: isDarkMode ? 0.7 : 0.2,
177-
}}
178-
/>
179-
</button>
132+
<Sun
133+
className="absolute transition-all duration-500"
134+
size={16}
135+
style={{
136+
color: '#f59e0b',
137+
opacity: isDarkMode ? 0 : 1,
138+
transform: isDarkMode
139+
? 'rotate(360deg) scale(0.3)'
140+
: `rotate(0deg) scale(1) ${isHovered ? 'rotate(30deg)' : ''}`,
141+
filter: isDarkMode
142+
? 'blur(2px)'
143+
: 'blur(0px) drop-shadow(0 0 6px rgba(245, 158, 11, 0.5))',
144+
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
145+
}}
146+
/>
147+
148+
<Moon
149+
className="absolute transition-all duration-500"
150+
size={16}
151+
style={{
152+
color: '#818cf8',
153+
opacity: isDarkMode ? 1 : 0,
154+
transform: isDarkMode
155+
? 'rotate(0deg) scale(1)'
156+
: 'rotate(-360deg) scale(0.3)',
157+
filter: isDarkMode
158+
? 'drop-shadow(0 0 6px rgba(129, 140, 248, 0.5))'
159+
: 'blur(2px)',
160+
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
161+
}}
162+
/>
163+
</span>
164+
165+
<Sun
166+
className="absolute left-2 top-1/2 -translate-y-1/2 transition-all duration-500"
167+
size={12}
168+
style={{
169+
color: 'rgba(255, 255, 255, 0.9)',
170+
opacity: isDarkMode ? 0.2 : 0.7,
171+
}}
172+
/>
173+
<Moon
174+
className="absolute right-2 top-1/2 -translate-y-1/2 transition-all duration-500"
175+
size={12}
176+
style={{
177+
color: 'rgba(255, 255, 255, 0.9)',
178+
opacity: isDarkMode ? 0.7 : 0.2,
179+
}}
180+
/>
181+
</button>
180182
</div>
181183
);
182184
};

‎src/pages/News/NewsPage.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -383,11 +383,13 @@ const NewsPage: React.FC = () => {
383383
whileTap={{ scale: 0.95 }}
384384
>
385385
{cat}
386-
<span className={`ml-2 text-xs rounded-full px-2 py-1 ${
387-
activeCategory === cat
388-
? 'bg-white text-black bg-opacity-30'
389-
: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300'
390-
}`}>
386+
<span
387+
className={`ml-2 text-xs rounded-full px-2 py-1 ${
388+
activeCategory === cat
389+
? 'bg-white text-black bg-opacity-30'
390+
: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300'
391+
}`}
392+
>
391393
{(postsByCategory[cat] || []).length}
392394
</span>
393395
</motion.button>

0 commit comments

Comments
 (0)