Skip to content

Commit 2cc64eb

Browse files
SincerelyFaustSincerelyFaust
committed
fix(example): redesign, include links
1 parent c936f5c commit 2cc64eb

3 files changed

Lines changed: 190 additions & 44 deletions

File tree

‎example/pnpm-lock.yaml‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/App.css‎

Lines changed: 103 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
:root {
2+
color: #0f172a;
3+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
4+
}
5+
6+
body {
7+
margin: 0;
8+
}
9+
110
.page {
211
min-height: 100vh;
312
width: 100%;
@@ -8,44 +17,97 @@
817

918
.content {
1019
width: 100%;
11-
max-width: 760px;
20+
max-width: 820px;
1221
min-width: 0;
1322
margin: 0 auto;
1423
}
1524

16-
.intro {
17-
margin-bottom: 28px;
25+
.hero {
26+
display: flex;
27+
align-items: flex-end;
28+
justify-content: space-between;
29+
gap: 20px;
30+
flex-wrap: wrap;
31+
margin-bottom: 24px;
1832
}
1933

20-
.label {
21-
margin: 0 0 10px;
22-
font-size: 0.82rem;
23-
font-weight: 600;
24-
letter-spacing: 0.08em;
25-
text-transform: uppercase;
26-
color: #6b7280;
34+
.hero-copy {
35+
max-width: 620px;
2736
}
2837

2938
h1 {
3039
margin: 0 0 10px;
31-
font-size: clamp(2rem, 5vw, 2.8rem);
32-
line-height: 1.1;
40+
font-size: clamp(2.3rem, 7vw, 4.25rem);
41+
line-height: 0.98;
42+
}
43+
44+
.package-name {
45+
display: inline-block;
46+
letter-spacing: -0.04em;
3347
}
3448

3549
.description {
36-
max-width: 560px;
37-
color: #4b5563;
50+
max-width: 620px;
51+
margin: 0;
52+
font-size: 1rem;
53+
line-height: 1.65;
54+
color: #475569;
55+
}
56+
57+
.hero-actions {
58+
display: flex;
59+
gap: 10px;
60+
flex-wrap: wrap;
61+
}
62+
63+
.link-pill {
64+
display: inline-flex;
65+
align-items: center;
66+
gap: 8px;
67+
height: 42px;
68+
padding: 0 14px;
69+
border: 1px solid #e2e8f0;
70+
border-radius: 999px;
71+
background: rgba(255, 255, 255, 0.9);
72+
color: #0f172a;
73+
text-decoration: none;
74+
font-weight: 600;
75+
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
76+
transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
77+
}
78+
79+
.link-pill:hover {
80+
transform: translateY(-1px);
81+
border-color: #cbd5e1;
82+
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
83+
}
84+
85+
.link-icon {
86+
width: 17px;
87+
height: 17px;
88+
flex: 0 0 auto;
3889
}
3990

4091
.panel {
4192
display: grid;
4293
gap: 16px;
4394
min-width: 0;
44-
padding: 20px;
95+
padding: 22px;
4596
border: 1px solid #e5e7eb;
46-
border-radius: 16px;
47-
background: #ffffff;
48-
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
97+
border-radius: 22px;
98+
background: rgba(255, 255, 255, 0.88);
99+
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
100+
backdrop-filter: blur(8px);
101+
}
102+
103+
.panel-header {
104+
display: grid;
105+
gap: 6px;
106+
}
107+
108+
.panel-description {
109+
margin: 0;
110+
color: #64748b;
49111
}
50112

51113
.frame-meta {
@@ -54,12 +116,12 @@ h1 {
54116
justify-content: space-between;
55117
gap: 12px;
56118
color: #111827;
57-
font-weight: 500;
119+
font-weight: 600;
58120
}
59121

60122
.width-value {
61123
font-size: 0.95rem;
62-
color: #6b7280;
124+
color: #64748b;
63125
}
64126

65127
.example-frame-shell {
@@ -72,8 +134,8 @@ h1 {
72134
max-width: 100%;
73135
padding: 14px;
74136
border: 1px dashed #d1d5db;
75-
border-radius: 12px;
76-
background: #f9fafb;
137+
border-radius: 16px;
138+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
77139
overflow: auto;
78140
resize: horizontal;
79141
}
@@ -99,7 +161,7 @@ h1 {
99161
.more {
100162
display: inline-flex;
101163
align-items: center;
102-
height: 32px;
164+
height: 34px;
103165
padding: 0 12px;
104166
border-radius: 999px;
105167
white-space: nowrap;
@@ -120,7 +182,7 @@ h1 {
120182
}
121183

122184
.more:hover {
123-
background: #f9fafb;
185+
background: #f8fafc;
124186
}
125187

126188
.popover {
@@ -129,16 +191,16 @@ h1 {
129191
max-width: min(320px, calc(100% - 16px));
130192
padding: 12px;
131193
border: 1px solid #e5e7eb;
132-
border-radius: 12px;
194+
border-radius: 14px;
133195
background: #ffffff;
134196
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);
135197
}
136198

137199
.popover-title {
138200
margin-bottom: 10px;
139201
font-size: 0.82rem;
140-
font-weight: 600;
141-
color: #4b5563;
202+
font-weight: 700;
203+
color: #475569;
142204
}
143205

144206
.popover-list {
@@ -147,3 +209,17 @@ h1 {
147209
gap: 8px;
148210
min-width: 0;
149211
}
212+
213+
@media (max-width: 640px) {
214+
.page {
215+
padding: 28px 16px;
216+
}
217+
218+
.panel {
219+
padding: 18px;
220+
}
221+
222+
h1 {
223+
font-size: 2.7rem;
224+
}
225+
}

‎example/src/App.tsx‎

Lines changed: 72 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,36 @@ const items: Item[] = [
2323
{ id: 6, label: "Design Systems" },
2424
];
2525

26+
const githubUrl =
27+
"https://github.com/SincerelyFaust/react-fit-list?tab=readme-ov-file";
28+
const npmUrl = "https://www.npmjs.com/package/react-fit-list";
29+
2630
function Tag({ children }: { children: React.ReactNode }) {
2731
return <span className="tag">{children}</span>;
2832
}
2933

34+
function GithubIcon() {
35+
return (
36+
<svg viewBox="0 0 24 24" aria-hidden="true" className="link-icon">
37+
<path
38+
fill="currentColor"
39+
d="M12 2C6.477 2 2 6.589 2 12.248c0 4.528 2.865 8.37 6.839 9.727.5.096.682-.222.682-.496 0-.245-.009-.893-.014-1.752-2.782.62-3.369-1.37-3.369-1.37-.455-1.173-1.11-1.486-1.11-1.486-.908-.636.069-.624.069-.624 1.004.072 1.532 1.054 1.532 1.054.892 1.566 2.341 1.114 2.91.852.091-.664.349-1.114.635-1.37-2.22-.259-4.555-1.138-4.555-5.063 0-1.118.39-2.033 1.029-2.75-.103-.26-.446-1.302.098-2.714 0 0 .84-.277 2.75 1.05A9.303 9.303 0 0 1 12 6.838a9.27 9.27 0 0 1 2.504.346c1.909-1.327 2.748-1.05 2.748-1.05.546 1.412.202 2.454.1 2.714.64.717 1.028 1.632 1.028 2.75 0 3.935-2.339 4.801-4.566 5.055.359.318.679.943.679 1.901 0 1.372-.012 2.479-.012 2.816 0 .276.18.596.688.495C19.138 20.614 22 16.774 22 12.248 22 6.589 17.523 2 12 2Z"
40+
/>
41+
</svg>
42+
);
43+
}
44+
45+
function NpmIcon() {
46+
return (
47+
<svg viewBox="0 0 24 24" aria-hidden="true" className="link-icon">
48+
<path
49+
fill="currentColor"
50+
d="M2 7.5v9h10.5v-6h3v6H22v-9H2Zm18 7.5h-2.5v-6h-7.5v6H4v-6h16v6Z"
51+
/>
52+
</svg>
53+
);
54+
}
55+
3056
function App() {
3157
const [frameWidth, setFrameWidth] = useState(320);
3258
const [popover, setPopover] = useState<PopoverState | null>(null);
@@ -108,33 +134,62 @@ function App() {
108134
return (
109135
<main className="page">
110136
<div className="content">
111-
<div className="intro">
112-
<p className="label">react-fit-list</p>
113-
<h1>Simple example</h1>
114-
<p className="description">
115-
Drag the resize handle on the demo window to see items collapse into
116-
a single <code>+N</code> button. Click it to open a popover with the
117-
hidden items.
118-
</p>
119-
</div>
137+
<section className="hero">
138+
<div className="hero-copy">
139+
<h1>
140+
<span className="package-name">react-fit-list</span>
141+
</h1>
142+
<p className="description">
143+
A headless React component for rendering a single-line list that
144+
collapses overflowing items into a <code>+N</code> indicator.
145+
</p>
146+
</div>
147+
148+
<div className="hero-actions" aria-label="Project links">
149+
<a
150+
className="link-pill"
151+
href={npmUrl}
152+
target="_blank"
153+
rel="noreferrer"
154+
>
155+
<NpmIcon />
156+
<span>NPM</span>
157+
</a>
158+
<a
159+
className="link-pill"
160+
href={githubUrl}
161+
target="_blank"
162+
rel="noreferrer"
163+
>
164+
<GithubIcon />
165+
<span>GitHub</span>
166+
</a>
167+
</div>
168+
</section>
120169

121170
<section className="panel">
122-
<div className="frame-meta">
123-
<span>Resizable container</span>
124-
<span className="width-value">{frameWidth}px</span>
171+
<div className="panel-header">
172+
<div className="frame-meta">
173+
<span>Try the component</span>
174+
<span className="width-value">{frameWidth}px</span>
175+
</div>
176+
<p className="panel-description">
177+
Drag the resize handle to test how the list fits and when the
178+
overflow button appears.
179+
</p>
125180
</div>
126181

127182
<div ref={frameShellRef} className="example-frame-shell">
128183
<div
129184
ref={frameRef}
130185
className="example-frame"
131-
style={{ width: "min(100%, 320px)" }}
186+
style={{ width: "min(100%, 360px)" }}
132187
>
133188
<div className="frame-toolbar" aria-hidden="true">
134-
<span />
135-
<span />
136-
<span />
137-
</div>
189+
<span />
190+
<span />
191+
<span />
192+
</div>
138193

139194
<FitList
140195
items={items}

0 commit comments

Comments
 (0)