Skip to content

Commit 902725b

Browse files
mindapivessamindapivessa
committed
extracted 8 reusuable components
1 parent f2984a2 commit 902725b

4 files changed

Lines changed: 50 additions & 184 deletions

File tree

‎app/upgrades/changelog/ChangelogClient.tsx‎

Lines changed: 37 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Link from 'next/link';
66
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
77

88
import { LinkCard } from '../../components/ui/Card';
9-
import { cn } from '../../components/ui/cn';
109
import { FilterSelect } from '../../components/ui/FilterSelect';
1110
import { CloseIcon, VibenetIcon } from '../../components/ui/icons';
1211
import { Text } from '../../components/ui/Text';
@@ -266,106 +265,42 @@ export function ChangelogClient() {
266265
</button>
267266
</div>
268267
<div className="space-y-5">
269-
<div>
270-
<Text variant="label.medium" tone="muted" className="mb-2.5 text-[13px]">
271-
Upgrade
272-
</Text>
273-
<div className="flex flex-wrap gap-2">
274-
{[
275-
{ value: 'all', label: 'All' },
276-
...getUpgradesReversed().map((u) => ({ value: u.id, label: u.name })),
277-
].map((o) => (
278-
<button
279-
key={o.value}
280-
type="button"
281-
onClick={() => setUpgradeFilter(o.value)}
282-
className={cn(
283-
'rounded-full px-3 py-1.5 text-[13px] transition-colors',
284-
upgradeFilter === o.value
285-
? 'bg-black text-white'
286-
: 'bg-bds-gray-5 text-bds-gray-60',
287-
)}
288-
>
289-
{o.label}
290-
</button>
291-
))}
292-
</div>
293-
</div>
294-
<div>
295-
<Text variant="label.medium" tone="muted" className="mb-2.5 text-[13px]">
296-
Type
297-
</Text>
298-
<div className="flex flex-wrap gap-2">
299-
{[
300-
{ value: 'all', label: 'All' },
301-
...allKinds.map((k) => ({ value: k, label: kindLabel(k) })),
302-
].map((o) => (
303-
<button
304-
key={o.value}
305-
type="button"
306-
onClick={() => handleKindChange(o.value)}
307-
className={cn(
308-
'rounded-full px-3 py-1.5 text-[13px] transition-colors',
309-
kindFilter === o.value
310-
? 'bg-black text-white'
311-
: 'bg-bds-gray-5 text-bds-gray-60',
312-
)}
313-
>
314-
{o.label}
315-
</button>
316-
))}
317-
</div>
318-
</div>
319-
<div>
320-
<Text variant="label.medium" tone="muted" className="mb-2.5 text-[13px]">
321-
Category
322-
</Text>
323-
<div className="flex flex-wrap gap-2">
324-
{[
325-
{ value: 'all', label: 'All' },
326-
...CATEGORY_ORDER.map((c) => ({ value: c, label: CATEGORY_METADATA[c].label })),
327-
].map((o) => (
328-
<button
329-
key={o.value}
330-
type="button"
331-
onClick={() => handleCategoryChange(o.value)}
332-
className={cn(
333-
'rounded-full px-3 py-1.5 text-[13px] transition-colors',
334-
categoryFilter === o.value
335-
? 'bg-black text-white'
336-
: 'bg-bds-gray-5 text-bds-gray-60',
337-
)}
338-
>
339-
{o.label}
340-
</button>
341-
))}
342-
</div>
343-
</div>
344-
<div>
345-
<Text variant="label.medium" tone="muted" className="mb-2.5 text-[13px]">
346-
Lifecycle
347-
</Text>
348-
<div className="flex flex-wrap gap-2">
349-
{[
350-
{ value: 'all', label: 'All' },
351-
...allLifecycle.map((s) => ({ value: s, label: LIFECYCLE_LABELS[s] })),
352-
].map((o) => (
353-
<button
354-
key={o.value}
355-
type="button"
356-
onClick={() => handleLifecycleChange(o.value)}
357-
className={cn(
358-
'rounded-full px-3 py-1.5 text-[13px] transition-colors',
359-
lifecycleFilter === o.value
360-
? 'bg-black text-white'
361-
: 'bg-bds-gray-5 text-bds-gray-60',
362-
)}
363-
>
364-
{o.label}
365-
</button>
366-
))}
367-
</div>
368-
</div>
268+
<FilterGroup
269+
label="Upgrade"
270+
options={[
271+
{ value: 'all', label: 'All' },
272+
...getUpgradesReversed().map((u) => ({ value: u.id, label: u.name })),
273+
]}
274+
value={upgradeFilter}
275+
onChange={setUpgradeFilter}
276+
/>
277+
<FilterGroup
278+
label="Type"
279+
options={[
280+
{ value: 'all', label: 'All' },
281+
...allKinds.map((k) => ({ value: k, label: kindLabel(k) })),
282+
]}
283+
value={kindFilter}
284+
onChange={handleKindChange}
285+
/>
286+
<FilterGroup
287+
label="Category"
288+
options={[
289+
{ value: 'all', label: 'All' },
290+
...CATEGORY_ORDER.map((c) => ({ value: c, label: CATEGORY_METADATA[c].label })),
291+
]}
292+
value={categoryFilter}
293+
onChange={handleCategoryChange}
294+
/>
295+
<FilterGroup
296+
label="Lifecycle"
297+
options={[
298+
{ value: 'all', label: 'All' },
299+
...allLifecycle.map((s) => ({ value: s, label: LIFECYCLE_LABELS[s] })),
300+
]}
301+
value={lifecycleFilter}
302+
onChange={handleLifecycleChange}
303+
/>
369304
</div>
370305
{activeFilterCount > 0 ? (
371306
<div className="mt-6 border-t border-bds-gray-10 pt-4">
@@ -445,9 +380,7 @@ export function ChangelogClient() {
445380
<UpgradeIllustration upgradeId={change.upgrade} />
446381
</div>
447382
) : getVibenetChangeById(change.id) ? (
448-
<svg width="18" height="18" viewBox="5 5 30 30" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-bds-gray-40" aria-hidden="true">
449-
<path d="M30.2895 14.8575L20.0038 20.0002M20.0038 20.0002L10.2895 14.2861M20.0038 20.0002L20.0038 30.8571M30.8608 22.8275V17.1724C30.8608 15.3861 29.9078 13.7354 28.3608 12.8423L22.4737 9.44331C20.9267 8.55015 19.0207 8.55015 17.4737 9.44331L11.5865 12.8423C10.0395 13.7354 9.08649 15.3861 9.08649 17.1724V22.8275C9.08649 24.6138 10.0395 26.2644 11.5865 27.1576L17.4737 30.5566C19.0207 31.4497 20.9267 31.4497 22.4737 30.5566L28.3608 27.1576C29.9078 26.2644 30.8608 24.6138 30.8608 22.8275Z" />
450-
</svg>
383+
<VibenetIcon size={18} className="shrink-0 text-bds-gray-40" />
451384
) : null}
452385
<Text variant="label.regular" tone="muted">
453386
{scheduleLabel(change)}

‎app/upgrades/changelog/[slug]/ChangeDetailClient.tsx‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
66

77
import { Button } from '../../../components/ui/Button';
88
import { cn } from '../../../components/ui/cn';
9+
import { ExternalLinkIcon } from '../../../components/ui/icons';
10+
import { LabeledCard } from '../../../components/ui/LabeledCard';
911
import { Text } from '../../../components/ui/Text';
1012
import { StatusPill } from '../../components/Badges';
1113
import { getLifecycleForChange, getUpgradeForChange } from '../../data/upgrades';
@@ -127,19 +129,7 @@ export function ChangeDetailClient({ change }: ChangeDetailClientProps) {
127129
size="sm"
128130
>
129131
{label}
130-
<svg
131-
aria-hidden="true"
132-
width="14"
133-
height="14"
134-
viewBox="0 0 16 16"
135-
fill="none"
136-
stroke="currentColor"
137-
strokeWidth="1.5"
138-
strokeLinecap="round"
139-
strokeLinejoin="round"
140-
>
141-
<path d="M5 11L11 5M11 5H6M11 5V10" />
142-
</svg>
132+
<ExternalLinkIcon />
143133
</Button>
144134
);
145135
})}
@@ -165,10 +155,7 @@ export function ChangeDetailClient({ change }: ChangeDetailClientProps) {
165155
) : null}
166156
</div>
167157
<aside className="space-y-4">
168-
<div className="rounded-xl border border-bds-gray-10 p-5">
169-
<Text variant="label.medium" tone="muted" className={lifecycle ? 'mb-5' : 'mb-3'}>
170-
Lifecycle
171-
</Text>
158+
<LabeledCard label="Lifecycle" labelSpacing={lifecycle ? 'mb-5' : 'mb-3'}>
172159
{lifecycle ? (
173160
<div className="space-y-3">
174161
{UPGRADE_NETWORKS.map((network) => {
@@ -204,13 +191,10 @@ export function ChangeDetailClient({ change }: ChangeDetailClientProps) {
204191
) : (
205192
<Text variant="label.regular" tone="muted">Not scheduled.</Text>
206193
)}
207-
</div>
194+
</LabeledCard>
208195

209196
{upgrade ? (
210-
<div className="rounded-xl border border-bds-gray-10 p-5">
211-
<Text variant="label.medium" tone="muted" className="mb-4">
212-
Upgrade
213-
</Text>
197+
<LabeledCard label="Upgrade">
214198
<Text variant="headline">{upgrade.name}</Text>
215199
<Text variant="label.regular" tone="muted" className="mt-2">
216200
{upgrade.summary}
@@ -223,7 +207,7 @@ export function ChangeDetailClient({ change }: ChangeDetailClientProps) {
223207
>
224208
Learn More
225209
</Button>
226-
</div>
210+
</LabeledCard>
227211
) : null}
228212
</aside>
229213
</motion.div>

‎app/upgrades/changelog/[slug]/page.tsx‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
22
import { notFound } from 'next/navigation';
33

44
import { Button } from '../../../components/ui/Button';
5+
import { ExternalLinkIcon } from '../../../components/ui/icons';
56
import { Text } from '../../../components/ui/Text';
67
import { CategoryBadge, KindBadge, StatusPill } from '../../components/Badges';
78
import { getChangeBySlug } from '../../data/changes';
@@ -60,19 +61,7 @@ export default async function ChangePage(props: ChangePageProps) {
6061
{change.specUrl ? (
6162
<Button href={change.specUrl} target="_blank" rel="noopener noreferrer" variant="outline" size="sm">
6263
Documentation
63-
<svg
64-
aria-hidden="true"
65-
width="14"
66-
height="14"
67-
viewBox="0 0 16 16"
68-
fill="none"
69-
stroke="currentColor"
70-
strokeWidth="1.5"
71-
strokeLinecap="round"
72-
strokeLinejoin="round"
73-
>
74-
<path d="M5 11L11 5M11 5H6M11 5V10" />
75-
</svg>
64+
<ExternalLinkIcon />
7665
</Button>
7766
) : null}
7867
{change.kind === 'eip' ? (
@@ -84,19 +73,7 @@ export default async function ChangePage(props: ChangePageProps) {
8473
size="sm"
8574
>
8675
Upstream EIP
87-
<svg
88-
aria-hidden="true"
89-
width="14"
90-
height="14"
91-
viewBox="0 0 16 16"
92-
fill="none"
93-
stroke="currentColor"
94-
strokeWidth="1.5"
95-
strokeLinecap="round"
96-
strokeLinejoin="round"
97-
>
98-
<path d="M5 11L11 5M11 5H6M11 5V10" />
99-
</svg>
76+
<ExternalLinkIcon />
10077
</Button>
10178
) : null}
10279
</div>

‎app/upgrades/upgrade/[fork]/page.tsx‎

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
22
import { notFound } from 'next/navigation';
33

44
import { Button } from '../../../components/ui/Button';
5+
import { AnimatedArrowIcon, ExternalLinkIcon } from '../../../components/ui/icons';
56
import { Text } from '../../../components/ui/Text';
67
import { CategoryBadge, KindBadge, StatusPill } from '../../components/Badges';
78
import { UpgradeIllustration } from '../../components/UpgradeIllustration';
@@ -85,19 +86,7 @@ export default async function UpgradeDetailPage(props: UpgradePageProps) {
8586
<div className="mt-6 flex">
8687
<Button href={upgrade.specUrl} target="_blank" rel="noopener noreferrer" variant="outline" size="sm">
8788
Documentation
88-
<svg
89-
aria-hidden="true"
90-
width="14"
91-
height="14"
92-
viewBox="0 0 16 16"
93-
fill="none"
94-
stroke="currentColor"
95-
strokeWidth="1.5"
96-
strokeLinecap="round"
97-
strokeLinejoin="round"
98-
>
99-
<path d="M5 11L11 5M11 5H6M11 5V10" />
100-
</svg>
89+
<ExternalLinkIcon />
10190
</Button>
10291
</div>
10392
) : null}
@@ -131,24 +120,7 @@ export default async function UpgradeDetailPage(props: UpgradePageProps) {
131120
{change.summary}
132121
</Text>
133122
</div>
134-
<svg
135-
width="16"
136-
height="16"
137-
viewBox="0 0 20 20"
138-
fill="none"
139-
aria-hidden="true"
140-
className="shrink-0 text-bds-gray-40 transition-[transform,color] duration-200 ease-out group-hover:translate-x-[3px] group-hover:text-base-blue"
141-
>
142-
<path d="M7.5 4L13.5 10L7.5 16" stroke="currentColor" strokeWidth="1.5" />
143-
<path
144-
d="M13.5 10H0"
145-
stroke="currentColor"
146-
strokeWidth="1.5"
147-
strokeDasharray="13.5"
148-
strokeDashoffset="13.5"
149-
className="transition-[stroke-dashoffset] duration-200 ease-out group-hover:[stroke-dashoffset:0]"
150-
/>
151-
</svg>
123+
<AnimatedArrowIcon className="shrink-0 text-bds-gray-40 transition-[transform,color] duration-200 ease-out group-hover:translate-x-[3px] group-hover:text-base-blue" />
152124
</a>
153125
);
154126
})

0 commit comments

Comments
 (0)