Skip to content

Commit 66a00de

Browse files
debabindebabin
committed
main 🧊 pretty code
1 parent faeaf75 commit 66a00de

62 files changed

Lines changed: 313 additions & 421 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"husky": "^9.1.7",
4242
"lucide-react": "1.9.0",
4343
"lint-staged": "^16.4.0",
44-
"prettier-plugin-tailwindcss": "^0.7.3",
44+
"prettier-plugin-tailwindcss": "0.7.2",
4545
"typescript": "^6.0.3"
4646
}
4747
}

‎packages/newdocs/app/(app)/(root)/page.tsx‎

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -36,26 +36,22 @@ const advantages = [
3636
title: 'Consistent API'
3737
},
3838
{
39-
description:
40-
'Install via CLI or copy directly. Configure hooks to fit your exact needs.',
39+
description: 'Install via CLI or copy directly. Configure hooks to fit your exact needs.',
4140
number: '03',
4241
title: 'Customizable'
4342
},
4443
{
45-
description:
46-
'From state management to browser APIs, sensors, elements, and utilities.',
44+
description: 'From state management to browser APIs, sensors, elements, and utilities.',
4745
number: '04',
4846
title: '158+ Hooks'
4947
},
5048
{
51-
description:
52-
'Import only what you need. Unused hooks are excluded from your bundle.',
49+
description: 'Import only what you need. Unused hooks are excluded from your bundle.',
5350
number: '05',
5451
title: 'Tree Shakeable'
5552
},
5653
{
57-
description:
58-
'60+ contributors, actively maintained with regular updates and new hooks.',
54+
description: '60+ contributors, actively maintained with regular updates and new hooks.',
5955
number: '06',
6056
title: 'Community Driven'
6157
}
@@ -144,45 +140,45 @@ export default async function HomePage() {
144140
const allHooks = hooks.length > 0 ? hooks : featuredHooks;
145141

146142
return (
147-
<div className='min-h-screen bg-background'>
143+
<div className='bg-background min-h-screen'>
148144
<main>
149145
<LandingHero />
150146

151-
<div className='relative overflow-hidden border-y border-border bg-card/30 py-6'>
147+
<div className='border-border bg-card/30 relative overflow-hidden border-y py-6'>
152148
<div className='animate-marquee flex whitespace-nowrap'>
153149
{[...stats, ...stats, ...stats, ...stats].map((stat, index) => (
154150
<div className='mx-12 flex items-center gap-3' key={`${stat.label}-${index}`}>
155-
<span className='font-display text-3xl font-bold text-foreground md:text-4xl'>
151+
<span className='font-display text-foreground text-3xl font-bold md:text-4xl'>
156152
{stat.value}
157153
</span>
158-
<span className='text-sm uppercase tracking-wider text-muted-foreground md:text-base'>
154+
<span className='text-muted-foreground text-sm tracking-wider uppercase md:text-base'>
159155
{stat.label}
160156
</span>
161157
</div>
162158
))}
163159
</div>
164160
</div>
165161

166-
<section className='border-t border-border'>
162+
<section className='border-border border-t'>
167163
<div className='mx-auto max-w-6xl px-6 py-24 md:py-32'>
168-
<h2 className='font-display text-5xl font-bold tracking-tighter text-foreground md:text-7xl lg:text-8xl'>
164+
<h2 className='font-display text-foreground text-5xl font-bold tracking-tighter md:text-7xl lg:text-8xl'>
169165
Why reactuse?
170166
</h2>
171167

172168
<div className='mt-12 flex flex-col gap-0 md:mt-16'>
173169
{advantages.map((advantage) => (
174170
<div
175-
className='group flex items-start gap-6 border-b border-border/40 py-5 transition-colors last:border-0 hover:border-[color:color-mix(in_oklab,var(--brand)_30%,transparent)] md:gap-8'
171+
className='group border-border/40 flex items-start gap-6 border-b py-5 transition-colors last:border-0 hover:border-[color:color-mix(in_oklab,var(--brand)_30%,transparent)] md:gap-8'
176172
key={advantage.title}
177173
>
178-
<span className='font-display pt-1 text-3xl leading-none text-muted-foreground/40 transition-colors group-hover:text-[var(--brand)] md:text-4xl'>
174+
<span className='font-display text-muted-foreground/40 pt-1 text-3xl leading-none transition-colors group-hover:text-[var(--brand)] md:text-4xl'>
179175
{advantage.number}
180176
</span>
181177
<div className='flex-1'>
182-
<h3 className='font-display text-2xl font-semibold text-foreground transition-colors group-hover:text-[var(--brand)] md:text-3xl'>
178+
<h3 className='font-display text-foreground text-2xl font-semibold transition-colors group-hover:text-[var(--brand)] md:text-3xl'>
183179
{advantage.title}
184180
</h3>
185-
<p className='mt-2 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg'>
181+
<p className='text-muted-foreground mt-2 max-w-2xl text-base leading-relaxed md:text-lg'>
186182
{advantage.description}
187183
</p>
188184
</div>
@@ -194,11 +190,11 @@ export default async function HomePage() {
194190

195191
<LandingHooksShowcase hooks={allHooks} />
196192

197-
<section className='border-t border-border'>
193+
<section className='border-border border-t'>
198194
<div className='mx-auto max-w-6xl px-6 py-24 md:py-32'>
199195
<div className='grid gap-12 lg:grid-cols-[1fr,1.5fr] lg:gap-20'>
200196
<div>
201-
<h2 className='sticky top-24 font-display text-5xl font-bold tracking-tighter text-foreground md:text-7xl lg:text-8xl'>
197+
<h2 className='font-display text-foreground sticky top-24 text-5xl font-bold tracking-tighter md:text-7xl lg:text-8xl'>
202198
FAQ
203199
</h2>
204200
</div>
@@ -208,28 +204,34 @@ export default async function HomePage() {
208204
</div>
209205
</section>
210206

211-
<section className='border-t border-border bg-card/30'>
207+
<section className='border-border bg-card/30 border-t'>
212208
<div className='mx-auto max-w-6xl px-6 py-24 md:py-32'>
213-
<h2 className='font-display text-5xl font-bold tracking-tighter text-foreground md:text-7xl lg:text-8xl'>
209+
<h2 className='font-display text-foreground text-5xl font-bold tracking-tighter md:text-7xl lg:text-8xl'>
214210
Sponsors
215211
</h2>
216-
<p className='mt-6 max-w-xl text-lg text-muted-foreground'>
212+
<p className='text-muted-foreground mt-6 max-w-xl text-lg'>
217213
reactuse is open source and free to use. Your sponsorship helps maintain the library,
218214
add new hooks, and support the community.
219215
</p>
220216

221-
<div className='mt-12 rounded-2xl border border-dashed border-border bg-card/50 px-8 py-20 text-center'>
222-
<p className='mb-6 text-muted-foreground'>No sponsors yet. Be the first to support reactuse!</p>
217+
<div className='border-border bg-card/50 mt-12 rounded-2xl border border-dashed px-8 py-20 text-center'>
218+
<p className='text-muted-foreground mb-6'>
219+
No sponsors yet. Be the first to support reactuse!
220+
</p>
223221
<div className='flex flex-col justify-center gap-3 sm:flex-row'>
224-
<Link href='https://github.com/sponsors/siberiacancode' rel='noreferrer' target='_blank'>
222+
<Link
223+
href='https://github.com/sponsors/siberiacancode'
224+
rel='noreferrer'
225+
target='_blank'
226+
>
225227
<Button className='h-9 rounded-full px-6 transition-colors' size='sm'>
226228
<IconHeartFilled className='mr-2 h-3.5 w-3.5' />
227229
Sponsor on GitHub
228230
</Button>
229231
</Link>
230232
<Link href='https://opencollective.com/reactuse' rel='noreferrer' target='_blank'>
231233
<Button
232-
className='h-9 rounded-full border-border bg-transparent px-6 text-foreground transition-colors hover:bg-[color:color-mix(in_oklab,var(--brand)_8%,transparent)] hover:text-[var(--brand)]'
234+
className='border-border text-foreground h-9 rounded-full bg-transparent px-6 transition-colors hover:bg-[color:color-mix(in_oklab,var(--brand)_8%,transparent)] hover:text-[var(--brand)]'
233235
size='sm'
234236
variant='outline'
235237
>
@@ -241,24 +243,25 @@ export default async function HomePage() {
241243
</div>
242244
</section>
243245

244-
<section className='border-t border-border'>
246+
<section className='border-border border-t'>
245247
<div className='mx-auto max-w-6xl px-6 py-24 md:py-32'>
246248
<div className='mb-12 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between'>
247249
<div>
248-
<h2 className='font-display text-5xl font-bold tracking-tighter text-foreground md:text-7xl lg:text-8xl'>
250+
<h2 className='font-display text-foreground text-5xl font-bold tracking-tighter md:text-7xl lg:text-8xl'>
249251
Contributors
250252
</h2>
251-
<p className='mt-4 text-lg text-muted-foreground'>
253+
<p className='text-muted-foreground mt-4 text-lg'>
252254
Built with love by 60+ amazing developers
253255
</p>
254256
</div>
255257
<Link
256-
className='text-sm text-muted-foreground transition-colors hover:text-[var(--brand)]'
258+
className='text-muted-foreground text-sm transition-colors hover:text-[var(--brand)]'
257259
href='https://github.com/siberiacancode'
258260
rel='noreferrer'
259261
target='_blank'
260262
>
261-
Maintained by <span className='font-semibold text-foreground'>SIBERIA CAN CODE</span>
263+
Maintained by{' '}
264+
<span className='text-foreground font-semibold'>SIBERIA CAN CODE</span>
262265
</Link>
263266
</div>
264267

@@ -274,7 +277,7 @@ export default async function HomePage() {
274277
>
275278
<img
276279
alt={contributor.name}
277-
className='h-10 w-10 rounded-full border border-border bg-card transition-all hover:z-10 hover:scale-110'
280+
className='border-border bg-card h-10 w-10 rounded-full border transition-all hover:z-10 hover:scale-110'
278281
src={contributor.avatar}
279282
style={
280283
{
@@ -289,46 +292,44 @@ export default async function HomePage() {
289292
</section>
290293
</main>
291294

292-
<footer className='border-t border-border'>
295+
<footer className='border-border border-t'>
293296
<div className='mx-auto max-w-6xl px-6 py-16'>
294297
<div className='flex flex-col items-center text-center'>
295298
<Link className='inline-flex items-center gap-3' href='/'>
296-
<img
297-
alt='reactuse'
298-
className='h-10 w-10'
299-
src='/logo.svg'
300-
/>
301-
<span className='font-display text-4xl font-bold text-foreground uppercase'>reactuse</span>
299+
<img alt='reactuse' className='h-10 w-10' src='/logo.svg' />
300+
<span className='font-display text-foreground text-4xl font-bold uppercase'>
301+
reactuse
302+
</span>
302303
</Link>
303304

304-
<p className='mt-4 max-w-md text-muted-foreground'>
305+
<p className='text-muted-foreground mt-4 max-w-md'>
305306
The largest and most useful React hooks library. Built by the community, for the
306307
community.
307308
</p>
308309

309310
<div className='mt-8 flex items-center gap-6'>
310311
<Link
311-
className='text-sm text-muted-foreground transition-colors hover:text-[var(--brand)]'
312+
className='text-muted-foreground text-sm transition-colors hover:text-[var(--brand)]'
312313
href='/docs/installation'
313314
>
314315
Docs
315316
</Link>
316317
<Link
317-
className='text-sm text-muted-foreground transition-colors hover:text-[var(--brand)]'
318+
className='text-muted-foreground text-sm transition-colors hover:text-[var(--brand)]'
318319
href='/functions/hooks/useActiveElement'
319320
>
320321
Hooks
321322
</Link>
322323
<Link
323-
className='text-sm text-muted-foreground transition-colors hover:text-[var(--brand)]'
324+
className='text-muted-foreground text-sm transition-colors hover:text-[var(--brand)]'
324325
href={siteConfig.links.github}
325326
rel='noreferrer'
326327
target='_blank'
327328
>
328329
GitHub
329330
</Link>
330331
<Link
331-
className='text-sm text-muted-foreground transition-colors hover:text-[var(--brand)]'
332+
className='text-muted-foreground text-sm transition-colors hover:text-[var(--brand)]'
332333
href={siteConfig.links.npm}
333334
rel='noreferrer'
334335
target='_blank'
@@ -339,7 +340,7 @@ export default async function HomePage() {
339340

340341
<div className='mt-8'>
341342
<Link
342-
className='inline-flex items-center gap-2 text-muted-foreground transition-colors hover:text-[var(--brand)]'
343+
className='text-muted-foreground inline-flex items-center gap-2 transition-colors hover:text-[var(--brand)]'
343344
href={siteConfig.links.github}
344345
rel='noreferrer'
345346
target='_blank'
@@ -348,11 +349,11 @@ export default async function HomePage() {
348349
</Link>
349350
</div>
350351

351-
<div className='mt-10 w-full border-t border-border/50 pt-8'>
352-
<p className='text-xs text-muted-foreground'>
352+
<div className='border-border/50 mt-10 w-full border-t pt-8'>
353+
<p className='text-muted-foreground text-xs'>
353354
{new Date().getFullYear()} reactuse. Released under the MIT License.
354355
</p>
355-
<p className='mt-2 text-xs text-muted-foreground'>
356+
<p className='text-muted-foreground mt-2 text-xs'>
356357
Made with care by{' '}
357358
<Link
358359
className='text-foreground transition-colors hover:text-[var(--brand)]'

‎packages/newdocs/app/functions/_components/function-api.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@ export const FunctionApi = ({ apiParameters }: FunctionApiProps) => {
4444

4545
apiParameters.forEach((parameter, index) => {
4646
if (parameter.tag === 'overload') {
47-
const isFirstOverload =
48-
apiParameters.findIndex(({ tag }) => tag === 'overload') === index;
47+
const isFirstOverload = apiParameters.findIndex(({ tag }) => tag === 'overload') === index;
4948

5049
if (!isFirstOverload) {
5150
groupIndex++;
@@ -119,4 +118,4 @@ export const FunctionApi = ({ apiParameters }: FunctionApiProps) => {
119118
))}
120119
</div>
121120
);
122-
};
121+
};

‎packages/newdocs/app/functions/_components/function-contributors.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
2-
1+
import { Avatar, AvatarFallback, AvatarImage } from '@/ui/avatar';
2+
33
interface FunctionContributorsProps {
44
contributors: {
55
name: string;
@@ -8,15 +8,15 @@ interface FunctionContributorsProps {
88
}
99

1010
export const FunctionContributors = (props: FunctionContributorsProps) => (
11-
<div className='my-4 flex flex-wrap gap-4'>
12-
{(props.contributors ?? []).map(({ name, avatar }) => (
13-
<div key={name} className='flex gap-2'>
14-
<Avatar>
15-
<AvatarImage alt={name} src={avatar} />
16-
<AvatarFallback>{name.charAt(0)}</AvatarFallback>
17-
</Avatar>
18-
<h3 className='mt-1 leading-7'>{name}</h3>
19-
</div>
20-
))}
21-
</div>
22-
);
11+
<div className='my-4 flex flex-wrap gap-4'>
12+
{(props.contributors ?? []).map(({ name, avatar }) => (
13+
<div key={name} className='flex gap-2'>
14+
<Avatar>
15+
<AvatarImage alt={name} src={avatar} />
16+
<AvatarFallback>{name.charAt(0)}</AvatarFallback>
17+
</Avatar>
18+
<h3 className='mt-1 leading-7'>{name}</h3>
19+
</div>
20+
))}
21+
</div>
22+
);

0 commit comments

Comments
 (0)