Skip to content

Commit 78028f8

Browse files
fahimahammedfahimahammed
committed
fix: fix merge conflict
2 parents d527342 + d340933 commit 78028f8

10 files changed

Lines changed: 1302 additions & 544 deletions

File tree

‎src/app/docs/layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
22

33
export default function DocsLayout({
44
children,
@@ -14,6 +14,7 @@ export default function DocsLayout({
1414
<li><a href="#installation" className="hover:text-blue-500">Installation</a></li>
1515
<li><a href="#project-setup" className="hover:text-blue-500">Project Setup</a></li>
1616
<li><a href="#usage-examples" className="hover:text-blue-500">Usage Examples</a></li>
17+
<li><a href="#AI-snippets" className="hover:text-blue-500">Ai snippets</a></li>
1718
</ul>
1819
</nav>
1920
</aside>

‎src/app/docs/page.tsx‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
'use client';
2-
import React from 'react';
3-
import { CodeBlock } from '../../components/CodeBlock';
1+
2+
"use client";
3+
4+
import React from "react";
5+
import { CodeBlock } from "@/components/CodeBlock";
6+
import { ComponentSnippetCard } from "@/components/ComponentSnippetCard";
7+
import { componentsData } from "@/data/components";
48

59
const DocsPage = () => {
610
return (
7-
<div>
11+
<div className="container mx-auto py-8">
12+
{/* Installation Section */}
813
<section id="installation">
914
<h1 className="text-4xl font-bold border-b pb-2">Installation</h1>
1015
<p className="mt-4 text-lg text-gray-700 dark:text-gray-300">
@@ -13,24 +18,27 @@ const DocsPage = () => {
1318

1419
<h2 className="text-2xl font-semibold mt-8">1. Fork the Repository</h2>
1520
<p className="mt-2 text-gray-600 dark:text-gray-400">
16-
First, navigate to the main repository page on GitHub and click the 'Fork' button in the top-right corner. This will create a copy of the project under your own GitHub account.
21+
First, navigate to the main repository page on GitHub and click the &apos;Fork&apos; button in the top-right corner. This will create a copy of the project under your own GitHub account.
1722
</p>
23+
<CodeBlock code="git clone https://github.com/[your-username]/DevUI.git" language="bash" />
1824

1925
<h2 className="text-2xl font-semibold mt-8">2. Clone Your Fork</h2>
2026
<p className="mt-2 text-gray-600 dark:text-gray-400">
2127
Now, clone the forked repository to your local machine. Replace `[your-username]` with your actual GitHub username.
2228
</p>
23-
<CodeBlock code="git clone https://github.com/[your-username]/DevUI.git" />
29+
<CodeBlock code="git clone https://github.com/[your-username]/DevUI.git" language="bash" />
2430

2531
<h2 className="text-2xl font-semibold mt-8">3. Navigate to the Directory</h2>
26-
<CodeBlock code="cd DevUI" />
27-
32+
<CodeBlock code="cd DevUI" language="bash" />
33+
2834
<h2 className="text-2xl font-semibold mt-8">4. Install Dependencies</h2>
2935
<p className="mt-2 text-gray-600 dark:text-gray-400">
3036
Install all the necessary packages using your preferred package manager.
3137
</p>
32-
<CodeBlock code="npm install" />
38+
<CodeBlock code="npm install" language="bash" />
3339
</section>
40+
41+
{/* Project Setup Section */}
3442
<section id="project-setup" className="mt-12">
3543
<h1 className="text-4xl font-bold border-b pb-2">Project Setup</h1>
3644
<p className="mt-4 text-lg text-gray-700 dark:text-gray-300">
@@ -41,10 +49,30 @@ const DocsPage = () => {
4149
<p className="mt-2 text-gray-600 dark:text-gray-400">
4250
To start the local development server, run the following command:
4351
</p>
44-
<CodeBlock code="npm run dev" />
52+
<CodeBlock code="npm run dev" language="bash" />
4553
<p className="mt-2 text-gray-600 dark:text-gray-400">
46-
This will start the application, usually on `http://localhost:3000`. You can now view the project in your browser.
54+
This will start the application, usually on <code className="text-primary">http://localhost:3000</code>. You can now view the project in your browser.
55+
</p>
56+
</section>
57+
58+
{/* Component Gallery Section */}
59+
<section id="AI-snippets" className="mt-12">
60+
<h1 className="text-4xl font-bold border-b pb-2">Components</h1>
61+
<p className="mt-4 text-lg text-gray-700 dark:text-gray-300">
62+
Explore the collection of reusable UI components built with React and Tailwind CSS, featuring copyable code snippets and AI-generated variations.
4763
</p>
64+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
65+
{componentsData.map((component) => (
66+
<ComponentSnippetCard
67+
key={component.id}
68+
title={component.title}
69+
description={component.description}
70+
preview={component.preview}
71+
code={component.code}
72+
category={component.category}
73+
/>
74+
))}
75+
</div>
4876
</section>
4977
</div>
5078
);

‎src/app/globals.css‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -43,39 +43,40 @@
4343
--radius-xl: calc(var(--radius) + 4px);
4444
}
4545

46+
4647
:root {
4748
--radius: 0.625rem;
48-
--background: oklch(1 0 0);
49+
--background: oklch(0.98 0 0);
4950
--foreground: oklch(0.145 0 0);
50-
--card: oklch(1 0 0);
51+
--card: oklch(1 0 0);
5152
--card-foreground: oklch(0.145 0 0);
5253
--popover: oklch(1 0 0);
5354
--popover-foreground: oklch(0.145 0 0);
54-
--primary: oklch(0.205 0 0);
55+
--primary: oklch(0.43 0.22 260);
5556
--primary-foreground: oklch(0.985 0 0);
56-
--secondary: oklch(0.97 0 0);
57+
--secondary: oklch(0.95 0 0);
5758
--secondary-foreground: oklch(0.205 0 0);
58-
--muted: oklch(0.97 0 0);
59-
--muted-foreground: oklch(0.556 0 0);
60-
--accent: oklch(0.97 0 0);
59+
--muted: oklch(0.95 0 0);
60+
--muted-foreground: oklch(0.5 0 0);
61+
--accent: oklch(0.95 0 0);
6162
--accent-foreground: oklch(0.205 0 0);
6263
--destructive: oklch(0.577 0.245 27.325);
63-
--border: oklch(0.922 0 0);
64-
--input: oklch(0.922 0 0);
65-
--ring: oklch(0.708 0 0);
64+
--border: oklch(0.9 0 0);
65+
--input: oklch(0.9 0 0);
66+
--ring: oklch(0.43 0.22 260);
6667
--chart-1: oklch(0.646 0.222 41.116);
6768
--chart-2: oklch(0.6 0.118 184.704);
6869
--chart-3: oklch(0.398 0.07 227.392);
6970
--chart-4: oklch(0.828 0.189 84.429);
7071
--chart-5: oklch(0.769 0.188 70.08);
7172
--sidebar: oklch(0.985 0 0);
7273
--sidebar-foreground: oklch(0.145 0 0);
73-
--sidebar-primary: oklch(0.205 0 0);
74+
--sidebar-primary: oklch(0.43 0.22 260);
7475
--sidebar-primary-foreground: oklch(0.985 0 0);
75-
--sidebar-accent: oklch(0.97 0 0);
76+
--sidebar-accent: oklch(0.95 0 0);
7677
--sidebar-accent-foreground: oklch(0.205 0 0);
77-
--sidebar-border: oklch(0.922 0 0);
78-
--sidebar-ring: oklch(0.708 0 0);
78+
--sidebar-border: oklch(0.9 0 0);
79+
--sidebar-ring: oklch(0.43 0.22 260);
7980
}
8081

8182
.dark {

‎src/app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22
import { useState, useMemo, useEffect } from "react";
3-
import { ComponentCard } from "@/components/ComponentCard";
3+
import { ComponentSnippetCard } from "@/components/ComponentSnippetCard";
44
import { componentsData } from "@/data/components";
55
// ❌ We are removing the Input component from here as it's moving to the Header
66
import { Badge } from "@/components/ui/badge";
@@ -279,7 +279,7 @@ const Index = () => {
279279
className="animate-fade-in"
280280
style={{ animationDelay: `${index * 0.05}s` }}
281281
>
282-
<ComponentCard {...component} highlightQuery={debouncedQuery} />
282+
<ComponentSnippetCard {...component} highlightQuery={debouncedQuery} />
283283
</div>
284284
);
285285
})}
@@ -294,7 +294,7 @@ const Index = () => {
294294
className="animate-fade-in"
295295
style={{ animationDelay: `${index * 0.05}s` }}
296296
>
297-
<ComponentCard {...component} highlightQuery={debouncedQuery} />
297+
<ComponentSnippetCard {...component} highlightQuery={debouncedQuery} />
298298
</div>
299299
);
300300
})}

0 commit comments

Comments
 (0)