Skip to content

Commit 3cbbe83

Browse files
debabindebabin
committed
main 🧊 clear sections
1 parent 2064068 commit 3cbbe83

18 files changed

Lines changed: 122 additions & 138 deletions

File tree

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,7 @@ const HomePage = async () => {
8282
/>
8383
)}
8484

85-
<LandingHeader
86-
hooks={hooks}
87-
repository={{ stargazersCount: repositoryResponse.data.stargazers_count }}
88-
/>
85+
<LandingHeader hooks={hooks} stars={repositoryResponse.data.stargazers_count} />
8986

9087
<main>
9188
<LandingHero hooksCount={hooksCount} />

‎packages/newdocs/app/(app)/_components/sections/landing-contributors.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { useBoolean } from '@siberiacancode/reactuse';
3+
import { useDisclosure } from '@siberiacancode/reactuse';
44
import { ArrowUpRightIcon } from 'lucide-react';
55
import { motion } from 'motion/react';
66
import Link from 'next/link';
@@ -20,8 +20,6 @@ import { cn } from '@/src/lib';
2020

2121
const INITIAL_COUNT = 64;
2222

23-
const getInitials = (name: string) => name.slice(0, 2).toUpperCase();
24-
2523
export interface LandingContributor {
2624
avatar: string;
2725
name: string;
@@ -32,7 +30,7 @@ interface LandingContributorsProps {
3230
}
3331

3432
export const LandingContributors = ({ contributors }: LandingContributorsProps) => {
35-
const [showAll, toggleShowAll] = useBoolean();
33+
const collapse = useDisclosure();
3634
const hasMore = contributors.length > INITIAL_COUNT;
3735

3836
return (
@@ -76,7 +74,7 @@ export const LandingContributors = ({ contributors }: LandingContributorsProps)
7674
<div
7775
className={cn(
7876
'overflow-hidden transition-[max-height] duration-700 ease-in-out',
79-
showAll ? 'max-h-[4000px]' : 'max-h-44 md:max-h-72'
77+
collapse.opened ? 'max-h-[4000px]' : 'max-h-44 md:max-h-72'
8078
)}
8179
>
8280
<TooltipProvider delayDuration={100}>
@@ -88,7 +86,7 @@ export const LandingContributors = ({ contributors }: LandingContributorsProps)
8886
<Avatar className='border-border size-12 border'>
8987
<AvatarImage alt={contributor.name} src={contributor.avatar} />
9088
<AvatarFallback className='bg-muted text-muted-foreground text-xs font-medium'>
91-
{getInitials(contributor.name)}
89+
{contributor.name.slice(0, 1).toUpperCase()}
9290
</AvatarFallback>
9391
</Avatar>
9492
</div>
@@ -100,23 +98,23 @@ export const LandingContributors = ({ contributors }: LandingContributorsProps)
10098
</TooltipProvider>
10199
</div>
102100

103-
{hasMore && !showAll && (
101+
{hasMore && !collapse.opened && (
104102
<div className='absolute inset-x-0 bottom-0 flex h-20 items-center justify-center md:h-32'>
105103
<div className='from-background via-background/80 pointer-events-none absolute inset-0 bg-gradient-to-t to-transparent' />
106104
<Button
107105
className='relative rounded-full px-6'
108106
variant='ghost'
109-
onClick={() => toggleShowAll()}
107+
onClick={() => collapse.toggle()}
110108
>
111109
Show all {contributors.length}
112110
</Button>
113111
</div>
114112
)}
115113
</motion.div>
116114

117-
{showAll && (
115+
{collapse.opened && (
118116
<div className='mt-8 flex justify-center'>
119-
<Button className='rounded-full px-6' variant='ghost' onClick={() => toggleShowAll()}>
117+
<Button className='rounded-full px-6' variant='ghost' onClick={() => collapse.toggle()}>
120118
Show less
121119
</Button>
122120
</div>

‎packages/newdocs/app/(app)/_components/sections/landing-faq.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export const LandingFaq = () => (
4141
<section>
4242
<div className='container mx-auto px-6 py-12 md:py-24'>
4343
<div className='grid items-start gap-12 lg:grid-cols-[1fr_1.4fr] lg:gap-16'>
44-
{/* ── Heading ── */}
4544
<motion.div
4645
className='max-w-md'
4746
initial={{ opacity: 0, y: -28 }}
@@ -58,28 +57,23 @@ export const LandingFaq = () => (
5857
</p>
5958
</motion.div>
6059

61-
{/* ── Accordion ── */}
6260
<motion.div
6361
initial={{ opacity: 0, y: -28 }}
6462
transition={{ duration: 0.55, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
6563
viewport={{ once: true, amount: 0.25 }}
6664
whileInView={{ opacity: 1, y: 0 }}
6765
>
6866
<Accordion collapsible className='w-full' defaultValue='item-0' type='single'>
69-
{FAQ.map((faq, index) => {
70-
const value = `item-${index}`;
71-
72-
return (
73-
<AccordionItem key={value} value={value}>
74-
<AccordionTrigger className='py-6 text-left text-lg font-medium hover:no-underline md:text-xl'>
75-
{faq.question}
76-
</AccordionTrigger>
77-
<AccordionContent className='text-muted-foreground max-w-2xl pb-6 text-base leading-relaxed md:text-lg'>
78-
{faq.answer}
79-
</AccordionContent>
80-
</AccordionItem>
81-
);
82-
})}
67+
{FAQ.map((faq, index) => (
68+
<AccordionItem key={index} value={String(index)}>
69+
<AccordionTrigger className='py-6 text-left text-lg font-medium hover:no-underline md:text-xl'>
70+
{faq.question}
71+
</AccordionTrigger>
72+
<AccordionContent className='text-muted-foreground max-w-2xl pb-6 text-base leading-relaxed md:text-lg'>
73+
{faq.answer}
74+
</AccordionContent>
75+
</AccordionItem>
76+
))}
8377
</Accordion>
8478
</motion.div>
8579
</div>

‎packages/newdocs/app/(app)/_components/sections/landing-getting-started.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,15 @@ const frameworks = [
7878
export const LandingGettingStarted = () => {
7979
const [activeFrameworkIndex, setActiveFrameworkIndex] = useState(0);
8080
const activeFramework = frameworks[activeFrameworkIndex];
81-
const ActiveFrameworkIcon = activeFramework.icon;
81+
const ActiveFrameworkIcon = frameworks[activeFrameworkIndex].icon;
8282

83-
const interval = useInterval(() => {
84-
setActiveFrameworkIndex((current) => (current + 1) % frameworks.length);
85-
}, INTERVAL);
83+
const interval = useInterval(
84+
() =>
85+
setActiveFrameworkIndex(
86+
(currentActiveFrameworkIndex) => (currentActiveFrameworkIndex + 1) % frameworks.length
87+
),
88+
INTERVAL
89+
);
8690

8791
return (
8892
<section>
@@ -142,10 +146,8 @@ export const LandingGettingStarted = () => {
142146
onMouseEnter={interval.pause}
143147
onMouseLeave={interval.resume}
144148
>
145-
{/* ── Main card ── */}
146149
<div className='bg-card flex flex-col overflow-hidden rounded-xl p-8 md:p-10'>
147150
<div className='flex flex-1 flex-col'>
148-
{/* logo (link, no border, theme-aware) */}
149151
<Link
150152
aria-label={activeFramework.name}
151153
className='w-fit transition-opacity hover:opacity-70'
@@ -174,7 +176,6 @@ export const LandingGettingStarted = () => {
174176
</div>
175177
</div>
176178

177-
{/* ── Button, then loader bars under it ── */}
178179
<div className='mt-10'>
179180
<Button asChild className='rounded-full px-6'>
180181
<Link href={activeFramework.href} prefetch={false}>
@@ -198,7 +199,7 @@ export const LandingGettingStarted = () => {
198199
type='button'
199200
onClick={() => setActiveFrameworkIndex(index)}
200201
>
201-
{isActive ? (
202+
{isActive && (
202203
<span
203204
key={`${activeFrameworkIndex}-${interval.active}`}
204205
style={{
@@ -208,15 +209,14 @@ export const LandingGettingStarted = () => {
208209
}}
209210
className='bg-primary block h-full origin-left rounded-full'
210211
/>
211-
) : null}
212+
)}
212213
</button>
213214
);
214215
})}
215216
</div>
216217
</div>
217218
</div>
218219

219-
{/* ── Framework list: separate cards ── */}
220220
<div className='flex flex-col gap-3'>
221221
{frameworks.map((framework, index) => {
222222
const isActive = activeFrameworkIndex === index;

‎packages/newdocs/app/(app)/_components/sections/landing-header.tsx‎

Lines changed: 66 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -22,82 +22,80 @@ export interface LandingHeaderRepository {
2222

2323
export interface LandingHeaderProps extends ComponentProps<'header'> {
2424
hooks: LandingHeaderHook[];
25-
repository: LandingHeaderRepository;
25+
stars: number;
2626
}
2727

28-
export const LandingHeader = ({ hooks, repository, ...props }: LandingHeaderProps) => {
29-
const formattedCount = formatCount(repository.stargazersCount);
30-
31-
return (
32-
<header
33-
className='bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-50 w-full backdrop-blur'
34-
{...props}
35-
>
36-
<div className='container flex h-(--header-height) items-center justify-between gap-3 px-6'>
37-
<div className='hidden min-w-0 items-center justify-between gap-3 lg:flex'>
38-
<Link className='inline-flex items-center gap-2' href='/' prefetch={false}>
39-
<Image alt='ReactUse' height={12} src='/logo.svg' width={12} />
40-
41-
<span className='text-foreground text-lg font-semibold tracking-tight'>
42-
{CONFIG.NAME}
43-
</span>
44-
</Link>
45-
46-
<div className='flex items-center gap-2'>
47-
<Button asChild className='rounded-full' size='sm' variant='ghost'>
48-
<Link href='/docs/installation' prefetch={false}>
49-
Docs
50-
</Link>
51-
</Button>
52-
53-
<Button asChild className='rounded-full' size='sm' variant='ghost'>
54-
<Link href='/docs/functions' prefetch={false}>
55-
Functions
56-
</Link>
57-
</Button>
58-
</div>
59-
</div>
60-
61-
<div className='flex min-w-0 items-center justify-end gap-2'>
62-
<Button asChild className='rounded-full' size='sm'>
28+
export const LandingHeader = ({ hooks, stars, ...props }: LandingHeaderProps) => (
29+
<header
30+
className='bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-50 w-full backdrop-blur'
31+
{...props}
32+
>
33+
<div className='container flex h-(--header-height) items-center justify-between gap-3 px-6'>
34+
<div className='hidden min-w-0 items-center justify-between gap-3 lg:flex'>
35+
<Link className='inline-flex items-center gap-2' href='/' prefetch={false}>
36+
<Image alt='ReactUse' height={12} src='/logo.svg' width={12} />
37+
38+
<span className='text-foreground text-lg font-semibold tracking-tight'>
39+
{CONFIG.NAME}
40+
</span>
41+
</Link>
42+
43+
<div className='flex items-center gap-2'>
44+
<Button asChild className='rounded-full' size='sm' variant='ghost'>
6345
<Link href='/docs/installation' prefetch={false}>
64-
Getting Started
46+
Docs
6547
</Link>
6648
</Button>
6749

68-
<div className='flex items-center gap-1'>
69-
<Button asChild className='rounded-full' variant='outline'>
70-
<Link href={LINKS.GITHUB} prefetch={false} rel='noreferrer' target='_blank'>
71-
<Icons.gitHub className='size-4.5' />
72-
<StarIcon className='size-3.5' />
50+
<Button asChild className='rounded-full' size='sm' variant='ghost'>
51+
<Link href='/docs/functions' prefetch={false}>
52+
Functions
53+
</Link>
54+
</Button>
55+
</div>
56+
</div>
7357

74-
<span className='text-muted-foreground text-xs tabular-nums'>{formattedCount}</span>
75-
</Link>
76-
</Button>
58+
<div className='flex min-w-0 items-center justify-end gap-2'>
59+
<Button asChild className='rounded-full' size='sm'>
60+
<Link href='/docs/installation' prefetch={false}>
61+
Getting Started
62+
</Link>
63+
</Button>
7764

78-
<Button asChild className='rounded-full' size='icon' variant='ghost'>
79-
<Link href={LINKS.NPM} prefetch={false} rel='noreferrer' target='_blank'>
80-
<Icons.npm className='size-4.5' />
81-
</Link>
82-
</Button>
65+
<div className='flex items-center gap-1'>
66+
<Button asChild className='rounded-full' variant='outline'>
67+
<Link href={LINKS.GITHUB} prefetch={false} rel='noreferrer' target='_blank'>
68+
<Icons.gitHub className='size-4.5' />
69+
<StarIcon className='size-3.5' />
8370

84-
<ThemeButton />
85-
</div>
86-
</div>
87-
</div>
71+
<span className='text-muted-foreground text-xs tabular-nums'>
72+
{formatCount(stars)}
73+
</span>
74+
</Link>
75+
</Button>
8876

89-
<div className='border-border h-8 overflow-hidden border-t [mask-image:linear-gradient(to_right,transparent_0%,black_8%,black_92%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_right,transparent_0%,black_8%,black_92%,transparent_100%)]'>
90-
<Marquee className='h-full p-0 [--duration:250s] [--gap:0.25rem]'>
91-
{hooks.map((hook) => (
92-
<Fragment key={hook.name}>
93-
<div className='text-muted-foreground inline-flex items-center gap-4 px-[18px] font-mono text-xs tracking-tight'>
94-
{hook.name}
95-
</div>
96-
<div className='flex items-center text-[10px]'>•</div>
97-
</Fragment>
98-
))}
99-
</Marquee>
77+
<Button asChild className='rounded-full' size='icon' variant='ghost'>
78+
<Link href={LINKS.NPM} prefetch={false} rel='noreferrer' target='_blank'>
79+
<Icons.npm className='size-4.5' />
80+
</Link>
81+
</Button>
82+
83+
<ThemeButton />
84+
</div>
10085
</div>
101-
</header>
102-
);
103-
};
86+
</div>
87+
88+
<div className='border-border h-8 overflow-hidden border-t [mask-image:linear-gradient(to_right,transparent_0%,black_8%,black_92%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_right,transparent_0%,black_8%,black_92%,transparent_100%)]'>
89+
<Marquee className='h-full p-0 [--duration:250s] [--gap:0.25rem]'>
90+
{hooks.map((hook) => (
91+
<Fragment key={hook.name}>
92+
<div className='text-muted-foreground inline-flex items-center gap-4 px-[18px] font-mono text-xs tracking-tight'>
93+
{hook.name}
94+
</div>
95+
<div className='flex items-center text-[10px]'>•</div>
96+
</Fragment>
97+
))}
98+
</Marquee>
99+
</div>
100+
</header>
101+
);

‎packages/newdocs/app/(app)/_components/sections/landing-realese.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
'use client';
2-
31
import { Badge } from '@/src/components/ui';
42

53
interface LandingReleaseProps {

‎packages/newdocs/app/(app)/_components/sections/landing-stats.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@ interface LandingStatsProps {
77
stats: Stat[];
88
}
99

10-
const STAT_REPEAT_KEYS = ['first', 'second', 'third', 'fourth'] as const;
11-
1210
export const LandingStats = ({ stats }: LandingStatsProps) => (
1311
<div className='border-border bg-card/30 relative overflow-hidden border-y py-6'>
1412
<div className='flex whitespace-nowrap'>
15-
{STAT_REPEAT_KEYS.flatMap((repeatKey) =>
13+
{Array.from({ length: 4 }).map((_, index) =>
1614
stats.map((stat) => (
17-
<div key={`${repeatKey}-${stat.label}`} className='mx-12 flex items-center gap-3'>
15+
<div key={`${index}-${stat.label}`} className='mx-12 flex items-center gap-3'>
1816
<span className='font-display text-foreground text-3xl font-bold md:text-4xl'>
1917
{stat.value}
2018
</span>

packages/newdocs/app/(docs)/_components/layout/FunctionHeader/components/Burger/Burger.tsx renamed to packages/newdocs/app/(docs)/_components/layout/function-header/components/Burger/Burger.tsx

File renamed without changes.

packages/newdocs/app/(docs)/_components/layout/FunctionHeader/components/Search/Search.tsx renamed to packages/newdocs/app/(docs)/_components/layout/function-header/components/Search/Search.tsx

File renamed without changes.

packages/newdocs/app/(docs)/_components/layout/FunctionHeader/components/ThemeButton/ThemeButton.tsx renamed to packages/newdocs/app/(docs)/_components/layout/function-header/components/ThemeButton/ThemeButton.tsx

File renamed without changes.

0 commit comments

Comments
 (0)