Skip to content

Commit 762416d

Browse files
author
Numan
committed
feat: refactor component data handling and update documentation source
1 parent 2c72682 commit 762416d

12 files changed

Lines changed: 115 additions & 94 deletions

File tree

‎app/(docs-page)/components/page.tsx‎

Lines changed: 32 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,51 @@
11
'use client';
2-
import { useState } from 'react';
3-
import { motion } from 'framer-motion';
42
import Link from 'next/link';
53
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
64
import Image from 'next/image';
7-
import preview from '@/assets/preview';
8-
const appsDesign = [
9-
{
10-
id: 'motionNumber',
11-
name: 'motion number',
12-
url: '/components/motion-number',
13-
imgSrc: preview.motionNumber,
14-
},
15-
{
16-
id: 'buttons',
17-
url: '/components/buttons',
18-
name: 'buttons',
19-
imgSrc: preview.buttons,
20-
},
21-
{
22-
id: 'horizontal-scrolling',
23-
url: '/components/horizontal-scroll',
24-
name: 'scrolling',
25-
imgSrc: preview.horizontascroll,
26-
},
27-
{
28-
id: 'clip-path',
29-
url: '/components/clip-path',
30-
name: 'Clip-Path',
31-
imgSrc: preview.clippath,
32-
},
33-
{
34-
id: 'image-reveal',
35-
url: '/components/product-cards',
36-
name: 'Cards',
37-
imgSrc: preview.card,
38-
},
39-
];
5+
import componentsOverviewCards from '@/configs/componentsOverview';
406

417
export default function Home() {
428
return (
439
<>
4410
<div className='pt-20 pb-5'>
45-
<h1
46-
className={'sm:text-3xl text-2xl font-semibold tracking-tight pb-1'}
47-
>
11+
<h1 className={'sm:text-3xl text-2xl font-semibold tracking-tight pb-1'}>
4812
Components
4913
</h1>
5014

5115
<p className='md:text-lg text-sm text-muted-foreground lg:w-[80%]'>
5216
Beautifully designed components that you can copy and paste into your
5317
apps. Accessible. Customizable. Open Source.
5418
</p>
55-
<>
56-
<div className='grid md:grid-cols-3 grid-cols-2 gap-6 py-4'>
57-
{appsDesign.map((component, index) => {
58-
return (
59-
<>
60-
<Link
61-
href={component?.url}
62-
className='border p-2 transition-all rounded-lg'
63-
>
64-
<>
65-
<AspectRatio.Root ratio={16 / 9}>
66-
<Image
67-
src={component.imgSrc}
68-
alt='hero-sec'
69-
width={100}
70-
height={100}
71-
className='w-full h-full rounded-md'
72-
/>
73-
</AspectRatio.Root>
74-
</>
75-
<div className='sm:py-2 py-1 sm:px-4 px-2'>
76-
<h1 className='2xl:text-xl xl:text-xl md:text-lg text-sm font-medium leading-[140%] capitalize'>
77-
{component.name}
78-
</h1>
79-
</div>
80-
</Link>
81-
</>
82-
);
83-
})}
84-
</div>
85-
</>
19+
20+
<div className='grid md:grid-cols-3 grid-cols-2 gap-6 py-4'>
21+
{componentsOverviewCards?.map((component, index) => {
22+
return (
23+
<>
24+
<Link
25+
href={component?.url}
26+
className='border p-2 transition-all rounded-lg'
27+
>
28+
<>
29+
<AspectRatio.Root ratio={16 / 9}>
30+
<Image
31+
src={component.imgSrc}
32+
alt='hero-sec'
33+
width={100}
34+
height={100}
35+
className='w-full h-full rounded-md'
36+
/>
37+
</AspectRatio.Root>
38+
</>
39+
<div className='sm:py-2 py-1 sm:px-4 px-2'>
40+
<h1 className='2xl:text-xl xl:text-xl md:text-lg text-sm font-medium leading-[140%] capitalize'>
41+
{component.name}
42+
</h1>
43+
</div>
44+
</Link>
45+
</>
46+
);
47+
})}
48+
</div>
8649
</div>
8750
</>
8851
);

‎app/live-components/[componentName]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Suspense } from 'react';
22
import { notFound } from 'next/navigation';
3-
import docs from '@/configs/docs.json';
3+
import docs from '@/configs/componentsDocumentation.json';
44
import dynamic from 'next/dynamic';
55
export async function generateStaticParams() {
66
const paths = docs.dataArray.flatMap((category) =>

‎components/website/code-components/component-code-preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
TabsList,
66
TabsTrigger,
77
} from '@/components/website/ui/tabs';
8-
import docs from '@/configs/docs.json';
8+
import docs from '@/configs/componentsDocumentation.json';
99

1010
import ComponentPreview from './component-preview';
1111
import { extractCodeFromFilePath } from '@/lib/code';

‎components/website/code-components/drawer-code-preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
TabsList,
66
TabsTrigger,
77
} from '@/components/website/ui/tabs';
8-
import docs from '@/configs/docs.json';
8+
import docs from '@/configs/componentsDocumentation.json';
99
import {
1010
Dialog,
1111
DialogContent,

‎components/website/code-components/iframe-component-preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from '@/components/website/ui/tabs';
1010
import ComponentPreview from './component-preview';
1111
import { PreCode } from './pre-code';
12-
import docs from '@/configs/docs.json';
12+
import docs from '@/configs/componentsDocumentation.json';
1313
import { Code, Eye } from 'lucide-react';
1414
import { ReactNode } from 'react';
1515

‎components/website/code-components/pagination.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from 'next/link';
22
import { ChevronsLeft, ChevronsRight } from 'lucide-react';
3-
import docsData from '@/configs/docs.json' assert { type: 'json' };
3+
import docsData from '@/configs/componentsDocumentation.json' assert { type: 'json' };
44
import { generateSidebarData } from '../constant';
55

66
export function ComponentPagination({ doc }: any) {

‎components/website/searchbar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,17 @@ import { Command } from 'cmdk';
1515
import { Dialog, DialogContent } from '@/components/website/ui/dialog';
1616
import { ScrollArea } from '@/components/website/ui//scroll-area';
1717
import { generateSidebarData } from './constant';
18-
import docsData from '@/configs/docs.json' assert { type: 'json' };
18+
// import docsData from '@/configs/docs.json' assert { type: 'json' };
1919
import { cn } from '@/lib/utils';
2020
import { basePath } from './sidebar';
21-
import { MainComponents, SpecialComponents } from '@/configs/docs';
21+
import { creativeComponents, basicComponents } from '@/configs/leftSideComponentMetaData';
2222

2323
// import { componentsArr } from './sidebar';
2424

2525
export function SearchDialog({ classname }: { classname?: string }) {
2626
const router = useRouter();
2727
const { setTheme } = useTheme();
28-
const searchbardata = [...basePath, ...SpecialComponents, ...MainComponents];
28+
const searchbardata = [...basePath, ...basicComponents, ...creativeComponents];
2929
console.log(searchbardata);
3030

3131
const [searchOpen, setSearchOpen] = React.useState(false);

‎components/website/sidebar.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import Link from 'next/link';
55
import { usePathname } from 'next/navigation';
66
import { Component, Rocket } from 'lucide-react';
77
import { IRecentPage, useRecentPagesStore } from '@/hooks/useZustStore';
8-
import docsData from '@/configs/docs.json' assert { type: 'json' };
8+
// import docsData from '@/configs/docs.json' assert { type: 'json' };
99
import { useTheme } from 'next-themes';
10-
import { generateSidebarData } from './constant';
11-
import { MainComponents, SpecialComponents } from '@/configs/docs';
10+
// import { generateSidebarData } from './constant';
11+
import { creativeComponents, basicComponents } from '@/configs/leftSideComponentMetaData';
1212

1313
export const basePath = [
1414
{
@@ -29,7 +29,7 @@ function DocsSidebar() {
2929
const { addVisitedPage, getRecentPages, removeAllRecentPages } =
3030
useRecentPagesStore();
3131
const [recentPages, setRecentPages] = useState<IRecentPage[]>([]);
32-
const groupedComponents = MainComponents.reduce((acc, component) => {
32+
const groupedComponents = creativeComponents.reduce((acc, component) => {
3333
const group = component.component || null;
3434
//@ts-ignore
3535
if (!acc[group]) {
@@ -41,7 +41,7 @@ function DocsSidebar() {
4141
return acc;
4242
}, {});
4343

44-
const sidebarData = generateSidebarData(docsData.dataArray);
44+
// const sidebarData = generateSidebarData(docsData.dataArray);
4545
// console.log(sidebarData);
4646

4747
useEffect(() => {
@@ -83,7 +83,7 @@ function DocsSidebar() {
8383
})}
8484
</ul>
8585
<h1 className='text-lg font-semibold pb-1'>Components</h1>
86-
{SpecialComponents?.map((link: any) => {
86+
{basicComponents?.map((link: any) => {
8787
return (
8888
<>
8989
<li

configs/docs.json renamed to configs/componentsDocumentation.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,20 @@
9696
],
9797
"type": "card"
9898
},
99+
{
100+
"name": "Card Hover",
101+
"componentArray": [
102+
{
103+
"componentName": "cardhover",
104+
"filesrc": "components/card-hover/card-hover.tsx",
105+
"iframeSrc": "live-components/card-hover",
106+
"parentlink": "card-hover",
107+
"parentName": "Card Hover"
108+
}
109+
],
110+
"type": "card-hover",
111+
"new": true
112+
},
99113
{
100114
"name": "Footers",
101115
"componentArray": [

‎configs/componentsOverview.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import preview from "@/assets/preview";
2+
3+
const componentsOverviewCards = [
4+
{
5+
id: 'motionNumber',
6+
name: 'motion number',
7+
url: '/components/motion-number',
8+
imgSrc: preview.motionNumber,
9+
},
10+
{
11+
id: 'buttons',
12+
url: '/components/buttons',
13+
name: 'buttons',
14+
imgSrc: preview.buttons,
15+
},
16+
{
17+
id: 'horizontal-scrolling',
18+
url: '/components/horizontal-scroll',
19+
name: 'scrolling',
20+
imgSrc: preview.horizontascroll,
21+
},
22+
{
23+
id: 'clip-path',
24+
url: '/components/clip-path',
25+
name: 'Clip-Path',
26+
imgSrc: preview.clippath,
27+
},
28+
{
29+
id: 'image-reveal',
30+
url: '/components/product-cards',
31+
name: 'Cards',
32+
imgSrc: preview.card,
33+
},
34+
];
35+
36+
export default componentsOverviewCards;

0 commit comments

Comments
 (0)