Skip to content

Commit dc76b24

Browse files
franky47franky47
committed
doc: Features styles
1 parent 251209e commit dc76b24

File tree

2 files changed

+117
-101
lines changed

2 files changed

+117
-101
lines changed

‎packages/docs/src/app/(pages)/_landing/features.tsx‎

Lines changed: 115 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,114 @@
1+
import {
2+
BatteryFull,
3+
BookCheck,
4+
Feather,
5+
History,
6+
Hourglass,
7+
Link,
8+
Rainbow,
9+
SatelliteDish,
10+
Server,
11+
Shuffle,
12+
Sparkles,
13+
TestTube2
14+
} from 'lucide-react'
115
import React from 'react'
216

3-
export function FeatureGrid(props: React.ComponentProps<'section'>) {
17+
export function FeaturesSection(props: React.ComponentProps<'section'>) {
418
return (
519
<section
6-
className="container relative grid grid-cols-1 gap-x-12 gap-y-24 px-4 py-24 md:grid-cols-2 xl:grid-cols-3"
20+
className="container relative grid grid-cols-1 gap-x-12 gap-y-16 px-4 py-24 md:grid-cols-2 xl:grid-cols-3 xl:gap-y-24"
721
{...props}
8-
/>
22+
>
23+
<h2 className="sr-only">Features</h2>
24+
<Feature
25+
icon={
26+
<svg
27+
fill="none"
28+
width="1.2em"
29+
height="1.2em"
30+
viewBox="0 0 128 128"
31+
xmlns="http://www.w3.org/2000/svg"
32+
>
33+
<rect fill="currentColor" height="128" rx="6" width="128" />
34+
<path
35+
clip-rule="evenodd"
36+
d="m74.2622 99.468v14.026c2.2724 1.168 4.9598 2.045 8.0625 2.629 3.1027.585 6.3728.877 9.8105.877 3.3503 0 6.533-.321 9.5478-.964 3.016-.643 5.659-1.702 7.932-3.178 2.272-1.476 4.071-3.404 5.397-5.786 1.325-2.381 1.988-5.325 1.988-8.8313 0-2.5421-.379-4.7701-1.136-6.6841-.758-1.9139-1.85-3.6159-3.278-5.1062-1.427-1.4902-3.139-2.827-5.134-4.0104-1.996-1.1834-4.246-2.3011-6.752-3.353-1.8352-.7597-3.4812-1.4975-4.9378-2.2134-1.4567-.7159-2.6948-1.4464-3.7144-2.1915-1.0197-.7452-1.8063-1.5341-2.3598-2.3669-.5535-.8327-.8303-1.7751-.8303-2.827 0-.9643.2476-1.8336.7429-2.6079s1.1945-1.4391 2.0976-1.9943c.9031-.5551 2.0101-.9861 3.3211-1.2929 1.311-.3069 2.7676-.4603 4.3699-.4603 1.1658 0 2.3958.0877 3.6928.263 1.296.1753 2.6.4456 3.911.8109 1.311.3652 2.585.8254 3.824 1.3806 1.238.5552 2.381 1.198 3.43 1.9285v-13.1051c-2.127-.8182-4.45-1.4245-6.97-1.819s-5.411-.5917-8.6744-.5917c-3.3211 0-6.4674.3579-9.439 1.0738-2.9715.7159-5.5862 1.8336-7.844 3.353-2.2578 1.5195-4.0422 3.4553-5.3531 5.8075-1.311 2.3522-1.9665 5.1646-1.9665 8.4373 0 4.1785 1.2017 7.7433 3.6052 10.6945 2.4035 2.9513 6.0523 5.4496 10.9466 7.495 1.9228.7889 3.7145 1.5633 5.375 2.323 1.6606.7597 3.0954 1.5486 4.3044 2.3668s2.1628 1.7094 2.8618 2.6736c.7.9643 1.049 2.06 1.049 3.2873 0 .9062-.218 1.7462-.655 2.5202s-1.1 1.446-1.9885 2.016c-.8886.57-1.9956 1.016-3.3212 1.337-1.3255.321-2.8768.482-4.6539.482-3.0299 0-6.0305-.533-9.0021-1.6-2.9715-1.066-5.7245-2.666-8.2591-4.799zm-23.5596-34.9136h18.2974v-11.5544h-51v11.5544h18.2079v51.4456h14.4947z"
37+
className="fill-background"
38+
fill-rule="evenodd"
39+
/>
40+
</svg>
41+
}
42+
title="Type-safe"
43+
description="End-to-end type safety between Server and Client components."
44+
/>
45+
<Feature
46+
icon={<Shuffle size={32} />}
47+
title="Universal"
48+
description="Supports both the app router and pages router."
49+
/>
50+
<Feature
51+
icon={<BookCheck size={32} />}
52+
title="Simple"
53+
description={
54+
<>
55+
A familiar <code>React.useState</code>-like API, that syncs with the
56+
URL.
57+
</>
58+
}
59+
/>
60+
<Feature
61+
icon={<BatteryFull size={32} />}
62+
title="Batteries included"
63+
description="Built-in parsers for common state types."
64+
/>
65+
<Feature
66+
icon={<History size={32} />}
67+
title="History controls"
68+
description="Replace or append to navigation history and use the Back button to navigate state updates."
69+
/>
70+
<Feature
71+
icon={<Link size={32} />}
72+
title="Related queries"
73+
description={
74+
<>
75+
<code>useQueryStates</code> hook to manage multiple keys at once.
76+
</>
77+
}
78+
/>
79+
<Feature
80+
icon={<SatelliteDish size={32} />}
81+
title="Client-first"
82+
description="Shallow updates by default, opt-in to notify the server to re-render RSCs (with throttle control)."
83+
/>
84+
<Feature
85+
icon={<Server size={32} />}
86+
title="Server cache"
87+
description="Type-safe search params access in nested React Server Components."
88+
isNew
89+
/>
90+
<Feature
91+
icon={<Hourglass size={32} />}
92+
title="Transition"
93+
description="Support for useTransition to get loading states on server updates."
94+
isNew
95+
/>
96+
<Feature
97+
icon={<Rainbow size={32} />}
98+
title="Customizable"
99+
description="Make your own parser and serializer."
100+
/>
101+
<Feature
102+
icon={<Feather size={32} />}
103+
title="Tiny"
104+
description="Only 3.5kb gzipped."
105+
/>
106+
<Feature
107+
icon={<TestTube2 size={32} />}
108+
title="Tested"
109+
description="Tested against every Next.js release."
110+
/>
111+
</section>
9112
)
10113
}
11114

@@ -24,15 +127,20 @@ export function Feature({ title, description, icon, isNew }: FeatureProps) {
24127
<>
25128
<div className="space-y-4 xl:space-y-8">
26129
<div className="flex items-center gap-2">
27-
<span className="text-3xl" aria-hidden role="presentation">
130+
<span
131+
className="text-3xl text-zinc-500"
132+
aria-hidden
133+
role="presentation"
134+
>
28135
{icon}
29136
</span>
30137
<h3 className="text-2xl font-bold tracking-tighter dark:text-white md:text-3xl xl:text-4xl">
31138
{title}
32139
{isNew && (
33-
<sup className="ml-2" aria-label="New feature">
34-
✨
35-
</sup>
140+
<Sparkles
141+
className="ml-2 inline-block -translate-y-3 text-amber-500 dark:text-amber-300"
142+
aria-label="New feature"
143+
/>
36144
)}
37145
</h3>
38146
</div>

‎packages/docs/src/app/(pages)/page.tsx‎

Lines changed: 2 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Metadata } from 'next'
2-
import { Feature, FeatureGrid } from './_landing/features'
2+
import { FeaturesSection } from './_landing/features'
33
import { HeroSection } from './_landing/hero'
44

55
export const metadata: Metadata = {
@@ -15,99 +15,7 @@ export default function HomePage() {
1515
return (
1616
<main>
1717
<HeroSection />
18-
<FeatureGrid>
19-
<h2 className="sr-only">Features</h2>
20-
<Feature
21-
icon={
22-
<svg
23-
width="1.15em"
24-
height="1.15em"
25-
viewBox="0 0 32 32"
26-
xmlns="http://www.w3.org/2000/svg"
27-
role="presentation"
28-
>
29-
<title>TypeScript logo</title>
30-
<rect
31-
x="2"
32-
y="2"
33-
width="28"
34-
height="28"
35-
rx="1.312"
36-
fill="#3178c6"
37-
/>
38-
<path
39-
d="M18.245,23.759v3.068a6.492,6.492,0,0,0,1.764.575,11.56,11.56,0,0,0,2.146.192,9.968,9.968,0,0,0,2.088-.211,5.11,5.11,0,0,0,1.735-.7,3.542,3.542,0,0,0,1.181-1.266,4.469,4.469,0,0,0,.186-3.394,3.409,3.409,0,0,0-.717-1.117,5.236,5.236,0,0,0-1.123-.877,12.027,12.027,0,0,0-1.477-.734q-.6-.249-1.08-.484a5.5,5.5,0,0,1-.813-.479,2.089,2.089,0,0,1-.516-.518,1.091,1.091,0,0,1-.181-.618,1.039,1.039,0,0,1,.162-.571,1.4,1.4,0,0,1,.459-.436,2.439,2.439,0,0,1,.726-.283,4.211,4.211,0,0,1,.956-.1,5.942,5.942,0,0,1,.808.058,6.292,6.292,0,0,1,.856.177,5.994,5.994,0,0,1,.836.3,4.657,4.657,0,0,1,.751.422V13.9a7.509,7.509,0,0,0-1.525-.4,12.426,12.426,0,0,0-1.9-.129,8.767,8.767,0,0,0-2.064.235,5.239,5.239,0,0,0-1.716.733,3.655,3.655,0,0,0-1.171,1.271,3.731,3.731,0,0,0-.431,1.845,3.588,3.588,0,0,0,.789,2.34,6,6,0,0,0,2.395,1.639q.63.26,1.175.509a6.458,6.458,0,0,1,.942.517,2.463,2.463,0,0,1,.626.585,1.2,1.2,0,0,1,.23.719,1.1,1.1,0,0,1-.144.552,1.269,1.269,0,0,1-.435.441,2.381,2.381,0,0,1-.726.292,4.377,4.377,0,0,1-1.018.105,5.773,5.773,0,0,1-1.969-.35A5.874,5.874,0,0,1,18.245,23.759Zm-5.154-7.638h4V13.594H5.938v2.527H9.92V27.375h3.171Z"
40-
fill="#fff"
41-
fillRule="evenodd"
42-
/>
43-
</svg>
44-
}
45-
title="Type-safe"
46-
description="End-to-end type safety between Server and Client components."
47-
/>
48-
<Feature
49-
icon="🔀"
50-
title="Universal"
51-
description="Supports both the app router and pages router."
52-
/>
53-
<Feature
54-
icon="🧘‍♀️"
55-
title="Simple"
56-
description={
57-
<>
58-
A familiar <code>React.useState</code>-like API, that syncs with
59-
the URL.
60-
</>
61-
}
62-
/>
63-
<Feature
64-
icon="🔋"
65-
title="Batteries included"
66-
description="Built-in parsers for common state types."
67-
/>
68-
<Feature
69-
icon="🕰"
70-
title="History controls"
71-
description="Replace or append to navigation history and use the Back button to navigate state updates."
72-
/>
73-
<Feature
74-
icon="♊️"
75-
title="Related queries"
76-
description={
77-
<>
78-
<code>useQueryStates</code> hook to manage multiple keys at once.
79-
</>
80-
}
81-
/>
82-
<Feature
83-
icon="📡"
84-
title="Client-first"
85-
description="Shallow updates by default, opt-in to notify the server to re-render RSCs (with throttle control)."
86-
/>
87-
<Feature
88-
icon="🗃"
89-
title="Server cache"
90-
description="Type-safe search params access in nested React Server Components."
91-
isNew
92-
/>
93-
<Feature
94-
icon="⌛️"
95-
title="Transition"
96-
description="Support for useTransition to get loading states on server updates."
97-
isNew
98-
/>
99-
<Feature
100-
icon="🌈"
101-
title="Customizable"
102-
description="Make your own parser and serializer."
103-
/>
104-
<Feature icon="🪶" title="Tiny" description="Only 3.5kb gzipped." />
105-
<Feature
106-
icon="🧪"
107-
title="Tested"
108-
description="Tested against every Next.js release."
109-
/>
110-
</FeatureGrid>
18+
<FeaturesSection />
11119
</main>
11220
)
11321
}

0 commit comments

Comments
 (0)