p-sw/pswui-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: apply directory component in component installation section

Browse Source
This commit is contained in:
p-sw 2024-06-15 04:47:47 +09:00
parent 4d8614bd5f
commit 0d24d253f6
3 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/docs/components/Dialog.mdx
View File

@ -1,6 +1,6 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
import { DialogDemo } from "./DialogBlocks/Preview";
import Examples from "./DialogBlocks/Examples";
@ -24,10 +24,14 @@ A modal window that prompts the user to take an action or provides critical info
## Installation
1. Create a new file `Dialog.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={GITHUB_COMP("Dialog")} />
1. Create a new directory named `Dialog` in your component folder.
2. Create following files in the folder, and paste the code into the file.
* `index.ts`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
* `Context.ts`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
* `Component.tsx`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
## Usage

16
src/docs/components/Tabs.mdx
View File

@ -1,6 +1,6 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
import { TabsDemo } from "./TabsBlocks/Preview";
# Tabs
@ -23,10 +23,16 @@ Organizes content into multiple sections with tabbed navigation.
## Installation
1. Create a new file `Tabs.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={GITHUB_COMP("Tabs")} />
1. Create a new directory named `Tabs` in your component folder.
2. Create following files in the folder, and paste the code into the file.
* `index.ts`
<LoadedCode from={GITHUB_DIR_COMP("Tabs", "index.ts")} />
* `Component.tsx`
<LoadedCode from={GITHUB_DIR_COMP("Tabs", "Component.tsx")} />
* `Context.ts`
<LoadedCode from={GITHUB_DIR_COMP("Tabs", "Context.ts")} />
* `Hook.ts`
<LoadedCode from={GITHUB_DIR_COMP("Tabs", "Hook.ts")} />
## Usage

18
src/docs/components/Toast.mdx
View File

@ -1,6 +1,6 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_STORY, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
import { LoadedCode, GITHUB_STORY, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode";
import { ToastDemo } from "./ToastBlocks/Preview";
import Examples from "./ToastBlocks/Examples";
@ -24,10 +24,18 @@ A brief message alert to inform users about events or actions.
## Installation
1. Create a new file `Toast.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={GITHUB_COMP("Toast")} />
1. Create a new directory named `Toast` in your component folder.
2. Create following files in the folder, and paste the code into the file.
* `index.ts`
<LoadedCode from={GITHUB_DIR_COMP("Toast", "index.ts")} />
* `Variant.ts`
<LoadedCode from={GITHUB_DIR_COMP("Toast", "Variant.ts")} />
* `Store.ts`
<LoadedCode from={GITHUB_DIR_COMP("Toast", "Store.ts")} />
* `Component.tsx`
<LoadedCode from={GITHUB_DIR_COMP("Toast", "Component.tsx")} />
* `Hook.ts`
<LoadedCode from={GITHUB_DIR_COMP("Toast", "Hook.ts")} />
## Usage