Skip to content

Commit ab04bb7

Browse files
old-doorold-door
authored
Merge pull request #2 from old-door/1-add-filtering-test-approach-example
1 add filtering test approach example
2 parents 4c6aed1 + 29a8ce1 commit ab04bb7

File tree

16 files changed

+725
-19
lines changed

16 files changed

+725
-19
lines changed

‎public/images/coffee-maker.jpg‎

67 KB
Loading

‎public/images/desk.jpg‎

65.9 KB
Loading

‎public/images/headphones.jpg‎

65.9 KB
Loading

‎public/images/laptop.jpg‎

46.6 KB
Loading

‎public/images/shoes.jpg‎

72.1 KB
Loading

‎public/images/t-shirt.jpg‎

45.9 KB
Loading

‎src/App.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,41 @@
1-
import { Routes, Route, Link } from 'react-router-dom'
1+
import { Routes, Route, NavLink } from 'react-router-dom'
22
import Home from './pages/Home'
33
import TablePage from './pages/TablePage'
4+
import Items from './pages/Items'
5+
import './index.css'
6+
import React from 'react'
7+
8+
const navItems = [
9+
{ to: '/', label: 'Home', testId: 'nav-home' },
10+
{ to: '/table', label: 'Table', testId: 'nav-table' },
11+
{ to: '/items', label: 'Items', testId: 'nav-items' },
12+
]
413

514
export default function App() {
615
return (
716
<div>
817
<nav style={{ padding: 12 }}>
9-
<Link to="/" data-testid="nav-home">Home</Link>
10-
{' '}|{' '}
11-
<Link to="/table" data-testid="nav-table">Table</Link>
18+
{navItems.map((item, index) => (
19+
<React.Fragment key={item.to}>
20+
{index > 0 && ' | '}
21+
<NavLink
22+
to={item.to}
23+
data-testid={item.testId}
24+
style={({ isActive }) => ({
25+
textDecoration: isActive ? 'underline' : 'none',
26+
})}
27+
>
28+
{item.label}
29+
</NavLink>
30+
</React.Fragment>
31+
))}
1232
</nav>
1333

1434
<main style={{ padding: 12 }}>
1535
<Routes>
1636
<Route path="/" element={<Home />} />
1737
<Route path="/table" element={<TablePage />} />
38+
<Route path="/items" element={<Items />} />
1839
</Routes>
1940
</main>
2041
</div>

‎src/index.css‎

Lines changed: 106 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
font-weight: 400;
55

66
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
7+
color: #e0e0e0;
8+
background-color: #1a1a1a;
99

1010
font-synthesis: none;
1111
text-rendering: optimizeLegibility;
@@ -15,54 +15,146 @@
1515

1616
a {
1717
font-weight: 500;
18-
color: #646cff;
18+
color: #a3bffa;
1919
text-decoration: inherit;
2020
}
2121
a:hover {
22-
color: #535bf2;
22+
color: #c0d4ff;
2323
}
2424

2525
body {
2626
margin: 0;
27-
display: flex;
28-
place-items: center;
2927
min-width: 320px;
3028
min-height: 100vh;
3129
}
3230

3331
h1 {
3432
font-size: 3.2em;
3533
line-height: 1.1;
34+
color: #ffffff;
3635
}
3736

3837
button {
3938
border-radius: 8px;
40-
border: 1px solid transparent;
39+
border: 1px solid #333;
4140
padding: 0.6em 1.2em;
4241
font-size: 1em;
4342
font-weight: 500;
4443
font-family: inherit;
45-
background-color: #1a1a1a;
44+
background-color: #2a2a2a;
45+
color: #e0e0e0;
4646
cursor: pointer;
47-
transition: border-color 0.25s;
47+
transition: border-color 0.25s, background-color 0.25s;
4848
}
4949
button:hover {
50-
border-color: #646cff;
50+
border-color: #a3bffa;
51+
background-color: #333;
5152
}
52-
button:focus,
53-
button:focus-visible {
53+
button:active {
5454
outline: 4px auto -webkit-focus-ring-color;
55+
background-color: #444;
56+
}
57+
58+
input[type="checkbox"],
59+
input[type="number"] {
60+
background-color: #2a2a2a;
61+
border: 1px solid #444;
62+
color: #e0e0e0;
63+
padding: 2px;
64+
border-radius: 4px;
65+
}
66+
input[type="checkbox"]:checked {
67+
background-color: #a3bffa;
68+
border-color: #a3bffa;
69+
}
70+
input[type="number"]:focus {
71+
outline: none;
72+
border-color: #c0d4ff;
73+
box-shadow: 0 0 4px rgba(163, 191, 250, 0.5);
74+
}
75+
76+
.container {
77+
border: 1px solid #333;
78+
padding: 1rem;
79+
border-radius: 8px;
80+
background-color: #222;
81+
color: #e0e0e0;
82+
}
83+
84+
.item-card {
85+
display: flex;
86+
flex-direction: column;
87+
align-items: start;
88+
transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
89+
cursor: pointer;
90+
}
91+
.item-card:hover {
92+
background-color: #2e2e2e;
93+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
94+
transform: scale(1.05);
5595
}
5696

5797
@media (prefers-color-scheme: light) {
5898
:root {
5999
color: #213547;
60100
background-color: #ffffff;
61101
}
102+
body {
103+
color: #213547;
104+
background-color: #ffffff;
105+
}
106+
h1 {
107+
font-size: 3.2em;
108+
line-height: 1.1;
109+
color: #213547;
110+
}
111+
112+
a {
113+
color: #646cff;
114+
}
62115
a:hover {
63-
color: #747bff;
116+
color: #213547;
64117
}
118+
65119
button {
120+
border: 1px solid #ccc;
121+
background-color: #fff;
122+
color: #213547;
123+
}
124+
button:hover {
125+
border-color: #646cff;
66126
background-color: #f9f9f9;
67127
}
68-
}
128+
button:active {
129+
outline: 4px auto -webkit-focus-ring-color;
130+
background-color: #eee;
131+
}
132+
133+
input[type="checkbox"],
134+
input[type="number"] {
135+
background-color: #fff;
136+
border: 1px solid #ccc;
137+
color: #213547;
138+
padding: 2px;
139+
border-radius: 4px;
140+
}
141+
input[type="checkbox"]:checked {
142+
background-color: #646cff;
143+
border-color: #646cff;
144+
}
145+
input[type="number"]:focus {
146+
outline: none;
147+
border-color: #646cff;
148+
box-shadow: 0 0 4px rgba(100, 108, 255, 0.5);
149+
}
150+
151+
.container {
152+
border-color: #ccc;
153+
background-color: #f8f8f8;
154+
color: #213547;
155+
}
156+
.item-card:hover {
157+
background-color: #f0f0f0;
158+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
159+
}
160+
}

‎src/pages/Home.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default function Home() {
99
<ul>
1010
<li><strong>/</strong> — this page</li>
1111
<li><strong>/table</strong> — table with sortable columns</li>
12+
<li><strong>/items</strong> — items list with filters</li>
1213
</ul>
1314

1415
<p>

0 commit comments

Comments
 (0)