87 | >(({ className, ...props }, ref) => (
88 | | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ))
97 | TableCell.displayName = "TableCell"
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | TableCaption.displayName = "TableCaption"
110 |
111 | export {
112 | Table,
113 | TableHeader,
114 | TableBody,
115 | TableFooter,
116 | TableHead,
117 | TableRow,
118 | TableCell,
119 | TableCaption,
120 | }
121 |
--------------------------------------------------------------------------------
/config/docs.ts:
--------------------------------------------------------------------------------
1 | import { DocsConfig } from "types"
2 |
3 | export const docsConfig: DocsConfig = {
4 | mainNav: [
5 | {
6 | title: "Documentation",
7 | href: "/docs",
8 | },
9 | {
10 | title: "Guides",
11 | href: "/guides",
12 | },
13 | ],
14 | sidebarNav: [
15 | {
16 | title: "Getting Started",
17 | items: [
18 | {
19 | title: "Introduction",
20 | href: "/docs",
21 | },
22 | ],
23 | },
24 | {
25 | title: "Documentation",
26 | items: [
27 | {
28 | title: "Introduction",
29 | href: "/docs/documentation",
30 | },
31 | {
32 | title: "Contentlayer",
33 | href: "/docs/in-progress",
34 | disabled: true,
35 | },
36 | {
37 | title: "Components",
38 | href: "/docs/documentation/components",
39 | },
40 | {
41 | title: "Code Blocks",
42 | href: "/docs/documentation/code-blocks",
43 | },
44 | {
45 | title: "Style Guide",
46 | href: "/docs/documentation/style-guide",
47 | },
48 | {
49 | title: "Search",
50 | href: "/docs/in-progress",
51 | disabled: true,
52 | },
53 | ],
54 | },
55 | {
56 | title: "Blog",
57 | items: [
58 | {
59 | title: "Introduction",
60 | href: "/docs/in-progress",
61 | disabled: true,
62 | },
63 | {
64 | title: "Build your own",
65 | href: "/docs/in-progress",
66 | disabled: true,
67 | },
68 | {
69 | title: "Writing Posts",
70 | href: "/docs/in-progress",
71 | disabled: true,
72 | },
73 | ],
74 | },
75 | {
76 | title: "Dashboard",
77 | items: [
78 | {
79 | title: "Introduction",
80 | href: "/docs/in-progress",
81 | disabled: true,
82 | },
83 | {
84 | title: "Layouts",
85 | href: "/docs/in-progress",
86 | disabled: true,
87 | },
88 | {
89 | title: "Server Components",
90 | href: "/docs/in-progress",
91 | disabled: true,
92 | },
93 | {
94 | title: "Authentication",
95 | href: "/docs/in-progress",
96 | disabled: true,
97 | },
98 | {
99 | title: "Database with Prisma",
100 | href: "/docs/in-progress",
101 | disabled: true,
102 | },
103 | {
104 | title: "API Routes",
105 | href: "/docs/in-progress",
106 | disabled: true,
107 | },
108 | ],
109 | },
110 | {
111 | title: "Marketing Site",
112 | items: [
113 | {
114 | title: "Introduction",
115 | href: "/docs/in-progress",
116 | disabled: true,
117 | },
118 | {
119 | title: "File Structure",
120 | href: "/docs/in-progress",
121 | disabled: true,
122 | },
123 | {
124 | title: "Tailwind CSS",
125 | href: "/docs/in-progress",
126 | disabled: true,
127 | },
128 | {
129 | title: "Typography",
130 | href: "/docs/in-progress",
131 | disabled: true,
132 | },
133 | ],
134 | },
135 | ],
136 | }
137 |
--------------------------------------------------------------------------------
/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { Drawer as DrawerPrimitive } from "vaul"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Drawer = ({
9 | shouldScaleBackground = true,
10 | ...props
11 | }: React.ComponentProps) => (
12 |
16 | )
17 | Drawer.displayName = "Drawer"
18 |
19 | const DrawerTrigger = DrawerPrimitive.Trigger
20 |
21 | const DrawerPortal = DrawerPrimitive.Portal
22 |
23 | const DrawerClose = DrawerPrimitive.Close
24 |
25 | const DrawerOverlay = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, ...props }, ref) => (
29 |
34 | ))
35 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
36 |
37 | const DrawerContent = React.forwardRef<
38 | React.ElementRef,
39 | React.ComponentPropsWithoutRef
40 | >(({ className, children, ...props }, ref) => (
41 |
42 |
43 |
51 |
52 | {children}
53 |
54 |
55 | ))
56 | DrawerContent.displayName = "DrawerContent"
57 |
58 | const DrawerHeader = ({
59 | className,
60 | ...props
61 | }: React.HTMLAttributes) => (
62 |
66 | )
67 | DrawerHeader.displayName = "DrawerHeader"
68 |
69 | const DrawerFooter = ({
70 | className,
71 | ...props
72 | }: React.HTMLAttributes) => (
73 |
77 | )
78 | DrawerFooter.displayName = "DrawerFooter"
79 |
80 | const DrawerTitle = React.forwardRef<
81 | React.ElementRef,
82 | React.ComponentPropsWithoutRef
83 | >(({ className, ...props }, ref) => (
84 |
92 | ))
93 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName
94 |
95 | const DrawerDescription = React.forwardRef<
96 | React.ElementRef,
97 | React.ComponentPropsWithoutRef
98 | >(({ className, ...props }, ref) => (
99 |
104 | ))
105 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName
106 |
107 | export {
108 | Drawer,
109 | DrawerPortal,
110 | DrawerOverlay,
111 | DrawerTrigger,
112 | DrawerClose,
113 | DrawerContent,
114 | DrawerHeader,
115 | DrawerFooter,
116 | DrawerTitle,
117 | DrawerDescription,
118 | }
119 |
--------------------------------------------------------------------------------
/components/user-name-form.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { useRouter } from "next/navigation"
5 | import { zodResolver } from "@hookform/resolvers/zod"
6 | import { User } from "@prisma/client"
7 | import { useForm } from "react-hook-form"
8 | import * as z from "zod"
9 |
10 | import { cn } from "@/lib/utils"
11 | import { userNameSchema } from "@/lib/validations/user"
12 | import { buttonVariants } from "@/components/ui/button"
13 | import {
14 | Card,
15 | CardContent,
16 | CardDescription,
17 | CardFooter,
18 | CardHeader,
19 | CardTitle,
20 | } from "@/components/ui/card"
21 | import { Input } from "@/components/ui/input"
22 | import { Label } from "@/components/ui/label"
23 | import { toast } from "@/components/ui/use-toast"
24 | import { Icons } from "@/components/icons"
25 |
26 | interface UserNameFormProps extends React.HTMLAttributes {
27 | user: Pick
28 | }
29 |
30 | type FormData = z.infer
31 |
32 | export function UserNameForm({ user, className, ...props }: UserNameFormProps) {
33 | const router = useRouter()
34 | const {
35 | handleSubmit,
36 | register,
37 | formState: { errors },
38 | } = useForm({
39 | resolver: zodResolver(userNameSchema),
40 | defaultValues: {
41 | name: user?.name || "",
42 | },
43 | })
44 | const [isSaving, setIsSaving] = React.useState(false)
45 |
46 | async function onSubmit(data: FormData) {
47 | setIsSaving(true)
48 |
49 | const response = await fetch(`/api/users/${user.id}`, {
50 | method: "PATCH",
51 | headers: {
52 | "Content-Type": "application/json",
53 | },
54 | body: JSON.stringify({
55 | name: data.name,
56 | }),
57 | })
58 |
59 | setIsSaving(false)
60 |
61 | if (!response?.ok) {
62 | return toast({
63 | title: "Something went wrong.",
64 | description: "Your name was not updated. Please try again.",
65 | variant: "destructive",
66 | })
67 | }
68 |
69 | toast({
70 | description: "Your name has been updated.",
71 | })
72 |
73 | router.refresh()
74 | }
75 |
76 | return (
77 |
120 | )
121 | }
122 |
--------------------------------------------------------------------------------
/content/docs/documentation/components.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Components
3 | description: Use React components in Markdown using MDX.
4 | ---
5 |
6 | The following components are available out of the box for use in Markdown.
7 |
8 | If you'd like to build and add your own custom components, see the [Custom Components](#custom-components) section below.
9 |
10 | ## Built-in Components
11 |
12 | ### 1. Callout
13 |
14 | ```mdx
15 |
16 |
17 | This is a default callout. You can embed **Markdown** inside a `callout`.
18 |
19 |
20 | ```
21 |
22 |
23 |
24 | This is a default callout. You can embed **Markdown** inside a `callout`.
25 |
26 |
27 |
28 |
29 |
30 | This is a warning callout. It uses the props `type="warning"`.
31 |
32 |
33 |
34 |
35 |
36 | This is a danger callout. It uses the props `type="danger"`.
37 |
38 |
39 |
40 | ### 2. Card
41 |
42 | ```mdx
43 |
44 |
45 | #### Heading
46 |
47 | You can use **markdown** inside cards.
48 |
49 |
50 | ```
51 |
52 |
53 |
54 | #### Heading
55 |
56 | You can use **markdown** inside cards.
57 |
58 |
59 |
60 | You can also use HTML to embed cards in a grid.
61 |
62 | ```mdx
63 |
64 |
65 | #### Card One
66 | You can use **markdown** inside cards.
67 |
68 |
69 |
70 | #### Card Two
71 | You can also use `inline code` and code blocks.
72 |
73 |
74 | ```
75 |
76 |
77 |
78 | #### Card One
79 | You can use **markdown** inside cards.
80 |
81 |
82 |
83 | #### Card Two
84 | You can also use `inline code` and code blocks.
85 |
86 |
87 |
88 | ---
89 |
90 | ## Custom Components
91 |
92 | You can add your own custom components using the `components` props from `useMDXComponent`.
93 |
94 | ```ts title="components/mdx.tsx" {2,6}
95 | import { Callout } from "@/components/callout"
96 | import { CustomComponent } from "@/components/custom"
97 |
98 | const components = {
99 | Callout,
100 | CustomComponent,
101 | }
102 |
103 | export function Mdx({ code }) {
104 | const Component = useMDXComponent(code)
105 |
106 | return (
107 |
108 |
109 |
110 | )
111 | }
112 | ```
113 |
114 | Once you've added your custom component, you can use it in MDX as follows:
115 |
116 | ```js
117 |
118 | ```
119 |
120 | ---
121 |
122 | ## HTML Elements
123 |
124 | You can overwrite HTML elements using the same technique above.
125 |
126 | ```ts {4}
127 | const components = {
128 | Callout,
129 | CustomComponent,
130 | hr: ({ ...props }) =>
,
131 | }
132 | ```
133 |
134 | This will overwrite the `
` tag or `---` in Mardown with the HTML output above.
135 |
136 | ---
137 |
138 | ## Styling
139 |
140 | Tailwind CSS classes can be used inside MDX for styling.
141 |
142 | ```mdx
143 | This text will be red.
144 | ```
145 |
146 | Make sure you have configured the path to your content in your `tailwind.config.js` file:
147 |
148 | ```js title="tailwind.config.js" {6}
149 | /** @type {import('tailwindcss').Config} */
150 | module.exports = {
151 | content: [
152 | "./app/**/*.{ts,tsx}",
153 | "./components/**/*.{ts,tsx}",
154 | "./content/**/*.{md,mdx}",
155 | ],
156 | }
157 | ```
158 |
--------------------------------------------------------------------------------
|