Skip to content

Commit 7829c2d

Browse files
fezcodefezcode
committed
feat: anchors in setting pages
1 parent a7e1b31 commit 7829c2d

File tree

2 files changed

+18
-15
lines changed

2 files changed

+18
-15
lines changed

‎src/pages/brutalist-views/BrutalistSettingsPage.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ const SettingsPage = () => {
256256

257257
<div className="grid grid-cols-1 gap-12">
258258
{/* Layout Configuration */}
259-
<Section title="Interface Layout" icon={<LayoutIcon />} delay={0.0}>
259+
<Section id="interface" title="Interface Layout" icon={<LayoutIcon />} delay={0.0}>
260260
<div className="space-y-8">
261261
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 p-6 border border-white/5 bg-white/[0.01] rounded-sm">
262262
<div>
@@ -337,6 +337,7 @@ const SettingsPage = () => {
337337

338338
{/* Reading Experience */}
339339
<Section
340+
id="reader"
340341
title="Reader Experience"
341342
icon={<ArticleIcon />}
342343
delay={0.05}
@@ -373,7 +374,7 @@ const SettingsPage = () => {
373374
</Section>
374375

375376
{/* Typography Configuration */}
376-
<Section title="Discovery Log Typography" icon={<LayoutIcon />} delay={0.07}>
377+
<Section id="typography" title="Discovery Log Typography" icon={<LayoutIcon />} delay={0.07}>
377378
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
378379
<div className="p-6 border border-white/5 bg-white/[0.01] rounded-sm space-y-6">
379380
<div>
@@ -417,6 +418,7 @@ const SettingsPage = () => {
417418

418419
{/* Performance & Animation */}
419420
<Section
421+
id="motion"
420422
title="Motion & Performance"
421423
icon={<FilmStripIcon />}
422424
delay={0.1}
@@ -537,7 +539,7 @@ const SettingsPage = () => {
537539
</Section>
538540

539541
{/* DND Experience Settings */}
540-
<Section title="DND Experience" icon={<FilmStripIcon />} delay={0.32}>
542+
<Section id="dnd" title="DND Experience" icon={<FilmStripIcon />} delay={0.32}>
541543
<p className="mb-10 text-gray-500 font-mono text-[10px] uppercase tracking-[0.2em]">
542544
Fine-tune the immersive effects of the "From Serfs and Frauds" archives.
543545
</p>
@@ -552,7 +554,7 @@ const SettingsPage = () => {
552554
</Section>
553555

554556
{/* Toast Verification */}
555-
<Section title="System Feedback" icon={<ArticleIcon />} delay={0.35}>
557+
<Section id="feedback" title="System Feedback" icon={<ArticleIcon />} delay={0.35}>
556558
<p className="mb-10 text-gray-500 font-mono text-[10px] uppercase tracking-[0.2em]">
557559
Verify notification delivery and visual signatures for different system alerts.
558560
</p>
@@ -586,6 +588,7 @@ const SettingsPage = () => {
586588

587589
{/* Advanced Settings */}
588590
<Section
591+
id="advanced"
589592
title="Advanced Settings"
590593
icon={<DatabaseIcon />}
591594
delay={0.4}
@@ -628,7 +631,7 @@ const SettingsPage = () => {
628631
</Section>
629632

630633
{/* Danger Zone */}
631-
<Section title="Reset All Data" icon={<TrashIcon />} delay={0.5}>
634+
<Section id="danger-zone" title="Reset All Data" icon={<TrashIcon />} delay={0.5}>
632635
<div className="border-4 border-red-500/20 bg-red-500/5 p-8 rounded-sm">
633636
<div className="flex flex-col md:flex-row items-center gap-8">
634637
<div className="p-4 bg-red-500 text-black rounded-sm shrink-0">

‎src/pages/luxe-views/LuxeSettingsPage.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const LuxeSettingsPage = () => {
152152
<div className="space-y-12">
153153

154154
{/* Interface Layout */}
155-
<LuxeSection title="Interface" icon={<LayoutIcon />} delay={0.1}>
155+
<LuxeSection id="interface" title="Interface" icon={<LayoutIcon />} delay={0.1}>
156156
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
157157
<div className="space-y-8">
158158
<div className="p-6 border-l-2 border-[#8D4004]/20 bg-white/40 space-y-4">
@@ -214,7 +214,7 @@ const LuxeSettingsPage = () => {
214214
</LuxeSection>
215215

216216
{/* Reader Experience */}
217-
<LuxeSection title="Reader" icon={<ArticleIcon />} delay={0.15}>
217+
<LuxeSection id="reader" title="Reader" icon={<ArticleIcon />} delay={0.15}>
218218
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
219219
<div className="space-y-6">
220220
<h3 className="font-outfit text-[10px] uppercase tracking-[0.3em] text-black/30">Visual Mode</h3>
@@ -241,7 +241,7 @@ const LuxeSettingsPage = () => {
241241
</LuxeSection>
242242

243243
{/* Typography */}
244-
<LuxeSection title="Typography" icon={<LayoutIcon />} delay={0.2}>
244+
<LuxeSection id="typography" title="Typography" icon={<LayoutIcon />} delay={0.2}>
245245
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
246246
<div className="space-y-6">
247247
<h3 className="font-outfit text-[10px] uppercase tracking-[0.3em] text-black/30">Header Font</h3>
@@ -272,7 +272,7 @@ const LuxeSettingsPage = () => {
272272
</LuxeSection>
273273

274274
{/* Motion & Performance */}
275-
<LuxeSection title="Motion" icon={<FilmStripIcon />} delay={0.25}>
275+
<LuxeSection id="motion" title="Motion" icon={<FilmStripIcon />} delay={0.25}>
276276
<div className="space-y-8">
277277
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 p-6 border-l-2 border-black/5 bg-white/20">
278278
<div>
@@ -294,7 +294,7 @@ const LuxeSettingsPage = () => {
294294
</LuxeSection>
295295

296296
{/* Visual Matrix */}
297-
<LuxeSection title="Visual Matrix" icon={<MagicWandIcon />} delay={0.3}>
297+
<LuxeSection id="visual-matrix" title="Visual Matrix" icon={<MagicWandIcon />} delay={0.3}>
298298
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-6">
299299
<CustomToggle id="fx-invert" colorTheme="amber" label="Invert Colors" checked={isInverted} onChange={toggleInvert} {...toggleClasses} />
300300
<CustomToggle id="fx-retro" colorTheme="amber" label="Retro CRT" checked={isRetro} onChange={toggleRetro} {...toggleClasses} />
@@ -347,7 +347,7 @@ const LuxeSettingsPage = () => {
347347
</LuxeSection>
348348

349349
{/* DND Experience */}
350-
<LuxeSection title="D&D Pages Effects" icon={<FilmStripIcon />} delay={0.35}>
350+
<LuxeSection id="dnd" title="D&D Pages Effects" icon={<FilmStripIcon />} delay={0.35}>
351351
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
352352
<CustomToggle id="dnd-lightning" label="Lightning" checked={isLightningEnabled} onChange={toggleLightning} colorTheme="amber" {...toggleClasses} />
353353
<CustomToggle id="dnd-loot" label="Loot Feedback" checked={isLootDiscoveryEnabled} onChange={toggleLootDiscovery} colorTheme="amber" {...toggleClasses} />
@@ -358,7 +358,7 @@ const LuxeSettingsPage = () => {
358358
</LuxeSection>
359359

360360
{/* Achievements */}
361-
<LuxeSection title="Achievements" icon={<TrophyIcon />} delay={0.4}>
361+
<LuxeSection id="achievements" title="Achievements" icon={<TrophyIcon />} delay={0.4}>
362362
<CustomToggle
363363
id="enable-achievement-toasts"
364364
label="Achievement Toasts"
@@ -370,7 +370,7 @@ const LuxeSettingsPage = () => {
370370
</LuxeSection>
371371

372372
{/* Feedback Verification */}
373-
<LuxeSection title="Verification" icon={<ArticleIcon />} delay={0.45}>
373+
<LuxeSection id="verification" title="Verification" icon={<ArticleIcon />} delay={0.45}>
374374
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
375375
{[
376376
{ label: 'Success', type: 'success', color: 'text-emerald-600 bg-emerald-50' },
@@ -390,7 +390,7 @@ const LuxeSettingsPage = () => {
390390
</LuxeSection>
391391

392392
{/* Advanced / Maintenance */}
393-
<LuxeSection title="Maintenance" icon={<DatabaseIcon />} delay={0.5}>
393+
<LuxeSection id="maintenance" title="Maintenance" icon={<DatabaseIcon />} delay={0.5}>
394394
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
395395
<div className="space-y-4">
396396
<h3 className="font-playfairDisplay text-xl">Sidebar Cache</h3>
@@ -408,7 +408,7 @@ const LuxeSettingsPage = () => {
408408
</LuxeSection>
409409

410410
{/* Factory Reset */}
411-
<LuxeSection title="Termination" icon={<TrashIcon />} delay={0.55}>
411+
<LuxeSection id="termination" title="Termination" icon={<TrashIcon />} delay={0.55}>
412412
<div className="p-8 border border-rose-500/20 bg-rose-500/5 rounded-sm flex flex-col md:flex-row items-center gap-8">
413413
<div className="w-16 h-16 flex items-center justify-center bg-rose-500 text-white rounded-full shrink-0">
414414
<WarningIcon size={32} weight="bold" />

0 commit comments

Comments
 (0)