Skip to content

Commit 414d770

Browse files
arihantcodesarihantcodes
committed
add 15 docs
1 parent acdef36 commit 414d770

14 files changed

+561
-163
lines changed

‎app/docs/[slug]/page.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { notFound } from 'next/navigation'
2+
import { MDXRemote } from 'next-mdx-remote/rsc'
3+
import fs from 'fs'
4+
import path from 'path'
5+
import { CodePreview } from '@/components/CodePreview'
6+
import { Button } from '@/components/ui/button'
7+
8+
const components = { CodePreview, Button }
9+
10+
export async function generateStaticParams() {
11+
const files = fs.readdirSync(path.join(process.cwd(), 'app/docs'))
12+
return files
13+
.filter((filename) => filename.endsWith('.mdx'))
14+
.map((filename) => ({
15+
slug: filename.replace('.mdx', ''),
16+
}))
17+
}
18+
19+
export default async function MDXPage({ params }: { params: { slug: string } }) {
20+
const { slug } = params
21+
const filePath = path.join(process.cwd(), 'app/docs', `${slug}.mdx`)
22+
23+
let source
24+
25+
try {
26+
source = fs.readFileSync(filePath, 'utf8')
27+
} catch (error) {
28+
notFound()
29+
}
30+
31+
return (
32+
<article className="max-w-3xl mx-auto prose prose-slate lg:prose-lg dark:prose-invert">
33+
<MDXRemote source={source} components={components} />
34+
</article>
35+
)
36+
}

‎app/docs/button.mdx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { CodePreview } from '@/components/CodePreview'
2+
import { Button } from '@/components/ui/button'
3+
4+
# Button Component
5+
6+
The Button component is a versatile and customizable button for your UI.
7+
8+
<CodePreview
9+
code={`import { Button } from '@/components/ui/button'
10+
11+
export function ButtonExample() {
12+
return (
13+
<div className="flex flex-wrap gap-4">
14+
<Button variant="default">Madar</Button>
15+
<Button variant="destructive">Destructive</Button>
16+
<Button variant="outline">Outline</Button>
17+
<Button variant="secondary">Secondary</Button>
18+
<Button variant="ghost">Ghost</Button>
19+
<Button variant="link">Link</Button>
20+
</div>
21+
)
22+
}`}
23+
>
24+
<div className="flex flex-wrap gap-4">
25+
<Button variant="default">madar</Button>
26+
<Button variant="destructive">Destructive</Button>
27+
<Button variant="outline">Outline</Button>
28+
<Button variant="secondary">Secondary</Button>
29+
<Button variant="ghost">Ghost</Button>
30+
<Button variant="link">Link</Button>
31+
</div>
32+
</CodePreview>
33+
34+
## Usage
35+
36+
To use the Button component in your project, import it from your components directory:
37+
38+
```bash
39+
import { Button } from '@/components/ui/button'
40+
41+
```

‎app/docs/introduction.mdx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Spectrum UI
2+
3+
Beautifully designed components built with Aceternity UI and ShadCN UI that you can copy and paste into your apps. Accessible. Customizable. Open Source.
4+
5+
## Introduction
6+
7+
Spectrum UI is a collection of re-usable components built using [Aceternity UI](https://ui.aceternity.com/) and [ShadCN UI](https://ui.shadcn.com) that you can copy and paste into your apps.
8+
9+
**What do you mean by copy and paste?**
10+
11+
Spectrum UI is not a component library. It's a collection of re-usable components that you can copy and paste into your projects.
12+
13+
**What? Why?**
14+
15+
The goal is to give you a set of beautiful, accessible, and customizable components that you can use in your projects. Use this as a reference implementation or copy and paste the code into your project and customize it to your needs.
16+
17+
## FAQ
18+
19+
### Is this a component library?
20+
21+
No. Spectrum UI is not a component library. It's a collection of re-usable components that you can copy and paste into your projects.
22+
23+
### Can I use this in my project?
24+
25+
Yes. Free to use for personal and commercial projects. No attribution required.
26+
27+
### Which frameworks are supported?
28+
29+
You can use these components in any framework that supports React. This includes Next.js, Gatsby, and others.
30+
31+
### Can I use this with JavaScript?
32+
33+
Yes. You can use these components in your JavaScript projects. We use TypeScript for type checking and documentation.
34+
35+
### Where's the documentation for X?
36+
37+
We're working on adding more documentation. For now, check out the source code for each component.
38+
39+
### Where's the UI for X?
40+
41+
We're working on adding more components. If you need something that's not in the library, you can build it using the existing components as a reference.
42+
43+
### Can I contribute?
44+
45+
Yes. We welcome contributions. Please read our contributing guidelines before submitting a pull request.
46+
47+
## Credits
48+
49+
- [Aceternity UI](https://ui.aceternity.com/)
50+
- [ShadCN UI](https://ui.shadcn.com)
51+
- [Next.js](https://nextjs.org)
52+
- [TypeScript](https://www.typescriptlang.org)
53+

‎app/docs/layout.tsx

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
'use client'
2+
3+
import Link from 'next/link'
4+
import { usePathname } from 'next/navigation'
5+
import { Button } from '@/components/ui/button'
6+
import { ScrollArea } from '@/components/ui/scroll-area'
7+
import { cn } from '@/lib/utils'
8+
import { ChevronDown, ChevronRight, Menu } from 'lucide-react'
9+
import { useState } from 'react'
10+
11+
const components = [
12+
{
13+
category: 'Getting Started',
14+
items: [
15+
{ name: 'Introduction', href: '/docs/introduction' },
16+
{ name: 'Installation', href: '/docs/installation' },
17+
],
18+
},
19+
{
20+
category: 'Components',
21+
items: [
22+
{ name: 'Button', href: '/docs/button' },
23+
{ name: 'Input', href: '/docs/input' },
24+
{ name: 'Card', href: '/docs/card' },
25+
{ name: 'Tabs', href: '/docs/tabs' },
26+
// Add more components here
27+
],
28+
},
29+
{
30+
category: 'Hooks',
31+
items: [
32+
{ name: 'useToggle', href: '/docs/use-toggle' },
33+
{ name: 'useMediaQuery', href: '/docs/use-media-query' },
34+
],
35+
},
36+
]
37+
38+
export default function DocsLayout({
39+
children,
40+
}: {
41+
children: React.ReactNode
42+
}) {
43+
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
44+
const pathname = usePathname()
45+
46+
return (
47+
<div className="flex flex-col md:flex-row min-h-screen">
48+
<Button
49+
variant="outline"
50+
size="icon"
51+
className="absolute top-4 left-4 md:hidden z-50"
52+
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
53+
>
54+
<Menu className="h-4 w-4" />
55+
</Button>
56+
<aside
57+
className={cn(
58+
"w-full md:w-64 border-r p-4 bg-background",
59+
"fixed inset-y-0 left-0 z-40 transition-transform duration-300 ease-in-out md:translate-x-0",
60+
isSidebarOpen ? "translate-x-0" : "-translate-x-full"
61+
)}
62+
>
63+
<ScrollArea className="h-[calc(100vh-2rem)]">
64+
<nav className="space-y-2 mt-16">
65+
{components.map((category) => (
66+
<div key={category.category} className="mb-4">
67+
<h3 className="mb-2 text-sm font-semibold text-muted-foreground">{category.category}</h3>
68+
{category.items.map((item) => (
69+
<Link key={item.href} href={item.href} passHref>
70+
<Button
71+
variant="ghost"
72+
className={cn(
73+
"w-full justify-start text-left font-normal",
74+
pathname === item.href && "bg-muted font-medium"
75+
)}
76+
>
77+
{pathname === item.href ? (
78+
<ChevronDown className="mr-2 h-4 w-4" />
79+
) : (
80+
<ChevronRight className="mr-2 h-4 w-4" />
81+
)}
82+
{item.name}
83+
</Button>
84+
</Link>
85+
))}
86+
</div>
87+
))}
88+
</nav>
89+
</ScrollArea>
90+
</aside>
91+
<main className="flex-grow p-6 md:p-8 lg:p-12 md:ml-64">{children}</main>
92+
</div>
93+
)
94+
}

‎app/page.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ShinyButton from "@/components/ui/shiny-button";
1212
import { Button } from "@/components/ui/button";
1313
import { Card } from "@/components/ui/card";
1414

15+
1516
export default function Home() {
1617
return (
1718
<div className="flex items-center justify-center flex-col">
@@ -71,6 +72,7 @@ export default function Home() {
7172
</Card>
7273
</div>
7374

75+
7476
<Link href="https://x.com/compose/tweet?text=I%27ve%20been%20using%20%23SpectrumUI%20 share%20yourtought%20%40arihantCodes%20">
7577
<Button className="">Share Your Thoughts On
7678
<Icons.twitter className="icon-class ml-1 w-3.5 " />

‎components/CodePreview.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
5+
import { cn } from "@/lib/utils";
6+
7+
interface CodePreviewProps {
8+
code: string;
9+
children: React.ReactNode;
10+
className?: string;
11+
}
12+
13+
export function CodePreview({ code, children, className }: CodePreviewProps) {
14+
return (
15+
<div className={cn("not-prose my-8", className)}>
16+
<Tabs defaultValue="preview" className="w-full">
17+
<TabsList className="w-full">
18+
<TabsTrigger value="preview" className="flex-1">
19+
Preview
20+
</TabsTrigger>
21+
<TabsTrigger value="code" className="flex-1">
22+
Code
23+
</TabsTrigger>
24+
</TabsList>
25+
<TabsContent value="preview" className="p-6 border rounded-md mt-2">
26+
{children}
27+
</TabsContent>
28+
<TabsContent value="code" className="mt-2">
29+
<pre className="p-4 rounded-md overflow-x-auto border">
30+
<code className="text-sm text-blue-700 dark:text-green-400">
31+
{code}
32+
</code>
33+
</pre>
34+
</TabsContent>
35+
</Tabs>
36+
</div>
37+
);
38+
}

‎components/navbar.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ import Search from "./search";
1313

1414
export const NAVLINKS = [
1515

16+
17+
{
18+
title: "Docs",
19+
href: "/docs/introduction",
20+
},
21+
1622
{
1723
title: "Components",
1824
href: "/components",

‎components/ui/border-beam.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { cn } from "@/lib/utils";
2+
3+
interface BorderBeamProps {
4+
className?: string;
5+
size?: number;
6+
duration?: number;
7+
borderWidth?: number;
8+
anchor?: number;
9+
colorFrom?: string;
10+
colorTo?: string;
11+
delay?: number;
12+
}
13+
14+
export const BorderBeam = ({
15+
className,
16+
size = 200,
17+
duration = 15,
18+
anchor = 90,
19+
borderWidth = 1.5,
20+
colorFrom = "#ffaa40",
21+
colorTo = "#9c40ff",
22+
delay = 0,
23+
}: BorderBeamProps) => {
24+
return (
25+
<div
26+
style={
27+
{
28+
"--size": size,
29+
"--duration": duration,
30+
"--anchor": anchor,
31+
"--border-width": borderWidth,
32+
"--color-from": colorFrom,
33+
"--color-to": colorTo,
34+
"--delay": `-${delay}s`,
35+
} as React.CSSProperties
36+
}
37+
className={cn(
38+
"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
39+
40+
// mask styles
41+
"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
42+
43+
// pseudo styles
44+
"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
45+
className,
46+
)}
47+
/>
48+
);
49+
};

‎lib/routes-config.ts

+22-13
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,35 @@
11
// for page navigation & to sort on leftbar
22
export const ROUTES = [
33
{
4-
title: "Getting Started",
5-
href: "getting-started",
4+
category: 'Getting Started',
65
items: [
7-
{ title: "Introduction", href: "/introduction" },
8-
{ title: "Dashboard", href: "/dashboardblock" },
9-
{ title: "Quick Start Guide", href: "/quick-start-guide" },
10-
{ title: "Project Structure", href: "/project-structure" },
11-
{ title: "Changelog", href: "/changelog" },
12-
{ title: "FAQ", href: "/faq" },
6+
{ name: 'Introduction', href: '/introduction' }, // Removed '/docs'
7+
{ name: 'Installation', href: '/installation' }, // Removed '/docs'
8+
],
9+
},
10+
{
11+
category: 'Components',
12+
items: [
13+
{ name: 'Button', href: '/button' },
14+
{ name: 'Input', href: '/input' },
15+
{ name: 'Card', href: '/card' },
16+
{ name: 'Tabs', href: '/tabs' },
17+
],
18+
},
19+
{
20+
category: 'Hooks',
21+
items: [
22+
{ name: 'useToggle', href: '/use-toggle' },
23+
{ name: 'useMediaQuery', href: '/use-media-query' },
1324
],
1425
},
15-
16-
1726
];
1827

19-
export const page_routes = ROUTES.map(({ href, items }) => {
28+
export const page_routes = ROUTES.map(({ items }) => {
2029
return items.map((link) => {
2130
return {
22-
title: link.title,
23-
href: href + link.href,
31+
title: link.name,
32+
href: link.href,
2433
};
2534
});
2635
}).flat();

0 commit comments

Comments
 (0)