Skip to content

Commit 8ef1e35

Browse files
LyesWebLyesWeb
committed
feat: implement tabbed navigation for content display in App component, enhancing user experience with multiple modes
1 parent 6fddc0a commit 8ef1e35

2 files changed

Lines changed: 351 additions & 81 deletions

File tree

‎example/demo-app/src/App.tsx‎

Lines changed: 201 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
import { HideMe } from 'react-sensitive-hide';
2+
import { useState } from 'react';
3+
4+
type TabId = 'blur' | 'blackout' | 'captcha' | 'age-verification';
5+
6+
interface Tab {
7+
id: TabId;
8+
label: string;
9+
icon: string;
10+
}
11+
12+
const tabs: Tab[] = [
13+
{ id: 'blur', label: 'Default Blur Mode', icon: '👁️' },
14+
{ id: 'blackout', label: 'Blackout Mode', icon: '⬛' },
15+
{ id: 'captcha', label: 'CAPTCHA Mode', icon: '🔢' },
16+
{ id: 'age-verification', label: 'Age Verification Mode', icon: '🔞' },
17+
];
218

319
function App() {
20+
const [activeTab, setActiveTab] = useState<TabId>('blur');
21+
422
return (
523
<div className="container">
624
<header className="header">
@@ -9,110 +27,215 @@ function App() {
927
</header>
1028

1129
<main>
12-
<section className="section">
13-
<h2>Default Blur Mode</h2>
14-
15-
<div className="example">
16-
<h3>Basic Usage</h3>
17-
<p>
18-
This is a normal paragraph with some <HideMe>sensitive information</HideMe> that
19-
you can reveal by clicking on it.
20-
</p>
21-
<div className="code">
30+
{/* Tabs Navigation */}
31+
<div className="tabs-container">
32+
<div className="tabs" role="tablist">
33+
{tabs.map((tab) => (
34+
<button
35+
key={tab.id}
36+
role="tab"
37+
aria-selected={activeTab === tab.id}
38+
aria-controls={`panel-${tab.id}`}
39+
id={`tab-${tab.id}`}
40+
className={`tab ${activeTab === tab.id ? 'tab--active' : ''}`}
41+
onClick={() => setActiveTab(tab.id)}
42+
>
43+
<span className="tab-icon">{tab.icon}</span>
44+
<span className="tab-label">{tab.label}</span>
45+
</button>
46+
))}
47+
</div>
48+
</div>
49+
50+
{/* Tab Panels */}
51+
<div className="tab-panels">
52+
{/* Default Blur Mode */}
53+
{activeTab === 'blur' && (
54+
<div
55+
role="tabpanel"
56+
id="panel-blur"
57+
aria-labelledby="tab-blur"
58+
className="tab-panel"
59+
>
60+
<section className="section">
61+
<h2>Default Blur Mode</h2>
62+
<p className="section-description">
63+
The default mode that applies a blur effect to sensitive content.
64+
Click on the blurred text to reveal it instantly.
65+
</p>
66+
67+
<div className="example">
68+
<h3>Basic Usage</h3>
69+
<p>
70+
This is a normal paragraph with some <HideMe>sensitive information</HideMe> that
71+
you can reveal by clicking on it.
72+
</p>
73+
<div className="code">
2274
{`<HideMe>sensitive information</HideMe>`}
75+
</div>
76+
</div>
77+
78+
<div className="example">
79+
<h3>Custom Blur Amount</h3>
80+
<p>
81+
You can customize the blur intensity:
82+
<HideMe blurAmount={10}>highly blurred content</HideMe>
83+
</p>
84+
<div className="code">
85+
{`<HideMe blurAmount={10}>
86+
highly blurred content
87+
</HideMe>`}
88+
</div>
89+
</div>
90+
</section>
2391
</div>
24-
</div>
25-
</section>
26-
27-
<section className="section">
28-
<h2>Blackout Mode</h2>
29-
30-
<div className="example">
31-
<h3>Basic Blackout</h3>
32-
<p>
33-
This text will be completely blacked out:
34-
<HideMe mode="blur" blackOut={true}>This text will be completely blacked out</HideMe>
35-
</p>
36-
<div className="code">
92+
)}
93+
94+
{/* Blackout Mode */}
95+
{activeTab === 'blackout' && (
96+
<div
97+
role="tabpanel"
98+
id="panel-blackout"
99+
aria-labelledby="tab-blackout"
100+
className="tab-panel"
101+
>
102+
<section className="section">
103+
<h2>Blackout Mode</h2>
104+
<p className="section-description">
105+
Completely blacks out sensitive content with solid blocks.
106+
Perfect for redacted information or extra privacy.
107+
</p>
108+
109+
<div className="example">
110+
<h3>Basic Blackout</h3>
111+
<p>
112+
This text will be completely blacked out:
113+
<HideMe mode="blur" blackOut={true}>This text will be completely blacked out</HideMe>
114+
</p>
115+
<div className="code">
37116
{`<HideMe mode="blur" blackOut={true}>
38117
This text will be completely blacked out
39118
</HideMe>`}
119+
</div>
120+
</div>
121+
122+
<div className="example">
123+
<h3>Redacted Document Style</h3>
124+
<p>
125+
Classified information: <HideMe blackOut={true}>TOP SECRET DOCUMENT</HideMe> requires
126+
clearance level 5 or above.
127+
</p>
128+
<div className="code">
129+
{`<HideMe blackOut={true}>
130+
TOP SECRET DOCUMENT
131+
</HideMe>`}
132+
</div>
133+
</div>
134+
</section>
40135
</div>
41-
</div>
42-
</section>
43-
44-
<section className="section">
45-
<h2>CAPTCHA Mode</h2>
46-
47-
<div className="example">
48-
<h3>Easy Difficulty</h3>
49-
<p>
50-
This content requires solving a simple math problem to reveal:
51-
<HideMe mode="captcha" captchaDifficulty="easy">secret password: admin123</HideMe>
52-
</p>
53-
<div className="code">
136+
)}
137+
138+
{/* CAPTCHA Mode */}
139+
{activeTab === 'captcha' && (
140+
<div
141+
role="tabpanel"
142+
id="panel-captcha"
143+
aria-labelledby="tab-captcha"
144+
className="tab-panel"
145+
>
146+
<section className="section">
147+
<h2>CAPTCHA Mode</h2>
148+
<p className="section-description">
149+
Protects content with a math problem that must be solved before revealing.
150+
Great for bot protection or adding an extra verification layer.
151+
</p>
152+
153+
<div className="example">
154+
<h3>Easy Difficulty</h3>
155+
<p>
156+
This content requires solving a simple math problem to reveal:
157+
<HideMe mode="captcha" captchaDifficulty="easy">secret password: admin123</HideMe>
158+
</p>
159+
<div className="code">
54160
{`<HideMe mode="captcha" captchaDifficulty="easy">
55161
secret password: admin123
56162
</HideMe>`}
57-
</div>
58-
</div>
163+
</div>
164+
</div>
59165

60-
<div className="example">
61-
<h3>Medium Difficulty</h3>
62-
<p>
63-
Medium difficulty math problems:
64-
<HideMe mode="captcha" captchaDifficulty="medium">API key: xyz789</HideMe>
65-
</p>
66-
<div className="code">
166+
<div className="example">
167+
<h3>Medium Difficulty</h3>
168+
<p>
169+
Medium difficulty math problems:
170+
<HideMe mode="captcha" captchaDifficulty="medium">API key: xyz789</HideMe>
171+
</p>
172+
<div className="code">
67173
{`<HideMe mode="captcha" captchaDifficulty="medium">
68174
API key: xyz789
69175
</HideMe>`}
70-
</div>
71-
</div>
176+
</div>
177+
</div>
72178

73-
<div className="example">
74-
<h3>Hard Difficulty</h3>
75-
<p>
76-
Hard difficulty with more complex math:
77-
<HideMe mode="captcha" captchaDifficulty="hard">Database password: superSecret2024!</HideMe>
78-
</p>
79-
<div className="code">
179+
<div className="example">
180+
<h3>Hard Difficulty</h3>
181+
<p>
182+
Hard difficulty with more complex math:
183+
<HideMe mode="captcha" captchaDifficulty="hard">Database password: superSecret2024!</HideMe>
184+
</p>
185+
<div className="code">
80186
{`<HideMe mode="captcha" captchaDifficulty="hard">
81187
Database password: superSecret2024!
82188
</HideMe>`}
189+
</div>
190+
</div>
191+
</section>
83192
</div>
84-
</div>
85-
</section>
86-
87-
<section className="section">
88-
<h2>Age Verification Mode</h2>
89-
90-
<div className="example">
91-
<h3>Default Age Verification (18+)</h3>
92-
<p>
93-
This content requires age verification:
94-
<HideMe mode="age-verification">Adult content for 18+ users</HideMe>
95-
</p>
96-
<div className="code">
193+
)}
194+
195+
{/* Age Verification Mode */}
196+
{activeTab === 'age-verification' && (
197+
<div
198+
role="tabpanel"
199+
id="panel-age-verification"
200+
aria-labelledby="tab-age-verification"
201+
className="tab-panel"
202+
>
203+
<section className="section">
204+
<h2>Age Verification Mode</h2>
205+
<p className="section-description">
206+
Requires users to verify their age by entering their date of birth.
207+
Ideal for age-restricted content.
208+
</p>
209+
210+
<div className="example">
211+
<h3>Default Age Verification (18+)</h3>
212+
<p>
213+
This content requires age verification:
214+
<HideMe mode="age-verification">Adult content for 18+ users</HideMe>
215+
</p>
216+
<div className="code">
97217
{`<HideMe mode="age-verification">
98218
Adult content for 18+ users
99219
</HideMe>`}
100-
</div>
101-
</div>
220+
</div>
221+
</div>
102222

103-
<div className="example">
104-
<h3>Custom Minimum Age (21+)</h3>
105-
<p>
106-
This content requires you to be 21 or older:
107-
<HideMe mode="age-verification" minimumAge={21}>Content for 21+ users only</HideMe>
108-
</p>
109-
<div className="code">
223+
<div className="example">
224+
<h3>Custom Minimum Age (21+)</h3>
225+
<p>
226+
This content requires you to be 21 or older:
227+
<HideMe mode="age-verification" minimumAge={21}>Content for 21+ users only</HideMe>
228+
</p>
229+
<div className="code">
110230
{`<HideMe mode="age-verification" minimumAge={21}>
111231
Content for 21+ users only
112232
</HideMe>`}
233+
</div>
234+
</div>
235+
</section>
113236
</div>
114-
</div>
115-
</section>
237+
)}
238+
</div>
116239
</main>
117240

118241
<footer className="footer">

0 commit comments

Comments
 (0)