Skip to content

Commit 50064a0

Browse files
fezcodefezcode
committed
feat: settings.
1 parent 5b67657 commit 50064a0

File tree

4 files changed

+97
-46
lines changed

4 files changed

+97
-46
lines changed

‎src/components/CustomToggle.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
const CustomToggle = ({ id, checked, onChange, label, disabled }) => {
4+
return (
5+
<div className="flex items-center justify-between w-full">
6+
<label htmlFor={id} className={`text-lg cursor-pointer ${disabled ? 'text-gray-500' : 'text-white'}`}>
7+
{label}
8+
</label>
9+
<label className="relative inline-flex items-center cursor-pointer">
10+
<input
11+
type="checkbox"
12+
id={id}
13+
className="sr-only peer"
14+
checked={checked}
15+
onChange={onChange}
16+
disabled={disabled}
17+
/>
18+
<div className={`w-11 h-6 bg-gray-600 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}></div>
19+
</label>
20+
</div>
21+
);
22+
};
23+
24+
export default CustomToggle;

‎src/components/Sidebar.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import {
3333
import Fez from './Fez';
3434

3535
import { version } from '../version';
36-
import { useAnimation } from '../context/AnimationContext'; // Import useAnimation
3736

3837
const Sidebar = ({ isOpen, toggleSidebar, toggleModal }) => {
3938
const [isMainOpen, setIsMainOpen] = useState(true);
@@ -43,7 +42,6 @@ const Sidebar = ({ isOpen, toggleSidebar, toggleModal }) => {
4342
const [isGamesOpen, setIsGamesOpen] = useState(false);
4443
const [isExternalLinksOpen, setIsExternalLinksOpen] = useState(false);
4544
const [allSectionsOpen, setAllSectionsOpen] = useState(true); // New state for collapse all
46-
const { isAnimationEnabled, toggleAnimation } = useAnimation(); // Use the animation context
4745
const navigate = useNavigate(); // Initialize useNavigate
4846

4947
const location = useLocation();

‎src/pages/SettingsPage.js‎

Lines changed: 72 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
2+
import { Link } from 'react-router-dom'; // Import Link
3+
import { ArrowLeft } from '@phosphor-icons/react'; // Import ArrowLeft icon
24
import { useAnimation } from '../context/AnimationContext';
35
import usePageTitle from '../utils/usePageTitle';
6+
import colors from '../config/colors'; // Import colors
7+
import CustomToggle from '../components/CustomToggle'; // Import CustomToggle
48

59
const SettingsPage = () => {
610
usePageTitle('Settings');
@@ -13,9 +17,21 @@ const SettingsPage = () => {
1317
toggleShowAnimationsInnerPages,
1418
} = useAnimation();
1519

20+
const cardStyle = {
21+
backgroundColor: colors['app-alpha-10'],
22+
borderColor: colors['app-alpha-50'],
23+
color: colors.app,
24+
};
25+
1626
return (
1727
<div className="py-16 sm:py-24">
1828
<div className="mx-auto max-w-7xl px-6 lg:px-8">
29+
<Link
30+
to="/"
31+
className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
32+
>
33+
<ArrowLeft size={24} /> Back to Home
34+
</Link>
1935
<div className="mx-auto max-w-2xl text-center">
2036
<h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
2137
Settings
@@ -25,52 +41,65 @@ const SettingsPage = () => {
2541
</p>
2642
</div>
2743

28-
<div className="mt-16 max-w-xl mx-auto bg-gray-800/50 p-8 rounded-lg shadow-lg">
29-
<div className="flex items-center justify-between mb-6">
30-
<label htmlFor="enable-animations" className="text-white text-lg cursor-pointer">
31-
Enable Animations
32-
</label>
33-
<input
34-
type="checkbox"
35-
id="enable-animations"
36-
checked={isAnimationEnabled}
37-
onChange={toggleAnimation}
38-
className="toggle toggle-primary"
39-
/>
40-
</div>
44+
<div className="flex justify-center items-center mt-16">
45+
<div
46+
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform overflow-hidden h-full w-full max-w-4xl"
47+
style={cardStyle}
48+
>
49+
<div
50+
className="absolute top-0 left-0 w-full h-full opacity-10"
51+
style={{
52+
backgroundImage:
53+
'radial-gradient(circle, white 1px, transparent 1px)',
54+
backgroundSize: '10px 10px',
55+
}}
56+
></div>
57+
<div className="relative z-10 p-1">
58+
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Application Settings </h1>
59+
<hr className="border-gray-700 mb-4" />
4160

42-
<div className="flex items-center justify-between mb-6">
43-
<label htmlFor="show-animations-homepage" className="text-white text-lg cursor-pointer">
44-
Show animations in homepage
45-
</label>
46-
<input
47-
type="checkbox"
48-
id="show-animations-homepage"
49-
checked={showAnimationsHomepage}
50-
onChange={toggleShowAnimationsHomepage}
51-
className="toggle toggle-primary"
52-
disabled={!isAnimationEnabled} // Disable if animations are generally disabled
53-
/>
54-
</div>
61+
{/* Client-Side Notification */}
62+
<div className="bg-yellow-900 bg-opacity-30 border border-yellow-700 text-yellow-300 px-4 py-3 rounded relative mb-6" role="alert">
63+
<strong className="font-bold">Client-Side Only:</strong>
64+
<span className="block sm:inline ml-2">Your preferences are stored locally in your browser. No data is sent to any server.</span>
65+
</div>
66+
67+
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Animation Settings </h1>
68+
<hr className="border-gray-700 mb-4" />
5569

56-
<div className="flex items-center justify-between">
57-
<label htmlFor="show-animations-inner-pages" className="text-white text-lg cursor-pointer">
58-
Show animations in inner pages
59-
</label>
60-
<input
61-
type="checkbox"
62-
id="show-animations-inner-pages"
63-
checked={showAnimationsInnerPages}
64-
onChange={toggleShowAnimationsInnerPages}
65-
className="toggle toggle-primary"
66-
disabled={!isAnimationEnabled} // Disable if animations are generally disabled
67-
/>
70+
<div className="mb-6 ml-4 mr-4">
71+
<CustomToggle
72+
id="enable-animations"
73+
label="> Enable Animations"
74+
checked={isAnimationEnabled}
75+
onChange={toggleAnimation}
76+
/>
77+
<div className="ml-8 mt-4"> {/* Indent dependent options */}
78+
<CustomToggle
79+
id="show-animations-homepage"
80+
label=">> Show animations in homepage"
81+
checked={showAnimationsHomepage}
82+
onChange={toggleShowAnimationsHomepage}
83+
disabled={!isAnimationEnabled}
84+
/>
85+
<div className="mb-4"></div> {/* Add vertical space */}
86+
<CustomToggle
87+
id="show-animations-inner-pages"
88+
label=">> Show animations in inner pages"
89+
checked={showAnimationsInnerPages}
90+
onChange={toggleShowAnimationsInnerPages}
91+
disabled={!isAnimationEnabled}
92+
/>
93+
</div>
94+
{!isAnimationEnabled && (
95+
<div className="bg-red-900 bg-opacity-30 border border-red-700 text-red-300 px-4 py-3 rounded relative mt-6" role="alert">
96+
<strong className="font-bold">Animations Disabled:</strong>
97+
<span className="block sm:inline ml-2">Animation options are disabled because "Enable Animations" is off.</span>
98+
</div>
99+
)}
100+
</div>
101+
</div>
68102
</div>
69-
{!isAnimationEnabled && (
70-
<p className="text-sm text-gray-400 mt-2">
71-
Animation options are disabled because "Enable Animations" is off.
72-
</p>
73-
)}
74103
</div>
75104
</div>
76105
</div>

‎src/version.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const version = '0.1.8';
1+
export const version = '0.2.0';

0 commit comments

Comments
 (0)