From 163b71efcb6db3da2eb2d54df6abef806311d05c Mon Sep 17 00:00:00 2001 From: Gianluca Iavicoli Date: Sat, 4 Jan 2025 10:40:16 +0100 Subject: [PATCH] docs: add documentation page --- content/2.components/book.md | 171 +++++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 content/2.components/book.md diff --git a/content/2.components/book.md b/content/2.components/book.md new file mode 100644 index 0000000..0466bba --- /dev/null +++ b/content/2.components/book.md @@ -0,0 +1,171 @@ +--- +title: Book +description: A 3D book component featuring customizable sizes and color gradients. +navBadges: + - value: New + type: lime +--- + +::ComponentLoader{label="Preview" componentName="BookDemo" type="examples"} +:: + +## API + +::steps + +### `Book` + +The `Book` component serves as a wrapper for creating an interactive 3D book effect. + +#### Props + +| Prop Name | Type | Default | Description | +| ------------ | ------- | ------- | --------------------------------------------- | +| `class` | String | - | Additional classes for styling the component. | +| `duration` | Number | 1000 | Animation duration in milliseconds. | +| `color` | String | "zinc" | Color theme for the book gradient. | +| `isStatic` | Boolean | false | Disables hover animations when true. | +| `size` | String | "md" | Size variant of the book. | +| `radius` | String | "md" | Border radius variant of the book. | +| `shadowSize` | String | "lg" | Shadow size variant of the book. | + +#### Usage + +```vue [MyBookComponent.vue] + + + +``` + +### `BookHeader` + +The `BookHeader` component is a flexible container with preserved 3D styling. It is intended to be used within a `Book` to hold content with a 3D transformation effect. + +#### Props + +| Prop Name | Type | Default | Description | +| --------- | ------ | ------- | -------------------------------------- | +| `class` | String | - | Additional classes for custom styling. | + +#### Usage + +```vue [MyBookComponent.vue] + + + +``` + +### `BookTitle` + +The `BookTitle` component is a flexible container with preserved 3D styling. It is intended to be used within a `Book` to hold content with a 3D transformation effect. + +#### Props + +| Prop Name | Type | Default | Description | +| --------- | ------ | ------- | -------------------------------------- | +| `class` | String | - | Additional classes for custom styling. | + +#### Usage + +```vue [MyBookComponent.vue] + + + +``` + +### `BookDescription` + +The `BookDescription` component is a flexible container with preserved 3D styling. It is intended to be used within a `Book` to hold content with a 3D transformation effect. + +#### Props + +| Prop Name | Type | Default | Description | +| --------- | ------ | ------- | -------------------------------------- | +| `class` | String | - | Additional classes for custom styling. | + +#### Usage + +```vue [MyBookComponent.vue] + + + +``` + +:: + +## Component Code + +You can copy and paste the following code to create these components: + +::code-group +::CodeViewerTab{label="Book.vue" icon="vscode-icons:file-type-vue" componentName="Book" type="ui" id="book"} +:: + +::CodeViewerTab{label="BookHeader.vue" icon="vscode-icons:file-type-vue" componentName="BookHeader" type="ui" id="book"} +:: + +::CodeViewerTab{label="BookTitle.vue" icon="vscode-icons:file-type-vue" componentName="BookTitle" type="ui" id="book"} +:: + +::CodeViewerTab{label="BookDescription.vue" icon="vscode-icons:file-type-vue" componentName="BookDescription" type="ui" id="book"} +:: + +```ts [index.ts] +export const BOOK_RADIUS_MAP = { + sm: "rounded-sm", + md: "rounded-md", + lg: "rounded-lg", + xl: "rounded-xl", +} as const; + +export const BOOK_SIZE_MAP = { + sm: { width: "180px", spineTranslation: "152px" }, + md: { width: "220px", spineTranslation: "192px" }, + lg: { width: "260px", spineTranslation: "232px" }, + xl: { width: "300px", spineTranslation: "272px" }, +} as const; + +export const BOOK_SHADOW_SIZE_MAP = { + sm: "-5px 0 15px 5px var(--shadowColor)", + md: "-7px 0 25px 7px var(--shadowColor)", + lg: "-10px 0 35px 10px var(--shadowColor)", + xl: "-12px 0 45px 12px var(--shadowColor)", +} as const; + +export const BOOK_COLOR_MAP = { + slate: { from: "from-slate-900", to: "to-slate-700" }, + gray: { from: "from-gray-900", to: "to-gray-700" }, + zinc: { from: "from-zinc-900", to: "to-zinc-700" }, + neutral: { from: "from-neutral-900", to: "to-neutral-700" }, + stone: { from: "from-stone-900", to: "to-stone-700" }, + red: { from: "from-red-900", to: "to-red-700" }, + orange: { from: "from-orange-900", to: "to-orange-700" }, + amber: { from: "from-amber-900", to: "to-amber-700" }, + yellow: { from: "from-yellow-900", to: "to-yellow-700" }, + lime: { from: "from-lime-900", to: "to-lime-700" }, + green: { from: "from-green-900", to: "to-green-700" }, + emerald: { from: "from-emerald-900", to: "to-emerald-700" }, + teal: { from: "from-teal-900", to: "to-teal-700" }, + cyan: { from: "from-cyan-900", to: "to-cyan-700" }, + sky: { from: "from-sky-900", to: "to-sky-700" }, + blue: { from: "from-blue-900", to: "to-blue-700" }, + indigo: { from: "from-indigo-900", to: "to-indigo-700" }, + violet: { from: "from-violet-900", to: "to-violet-700" }, + purple: { from: "from-purple-900", to: "to-purple-700" }, + fuchsia: { from: "from-fuchsia-900", to: "to-fuchsia-700" }, + pink: { from: "from-pink-900", to: "to-pink-700" }, + rose: { from: "from-rose-900", to: "to-rose-700" }, +} as const; + +export type BookColor = keyof typeof BOOK_COLOR_MAP; +export type BookSize = keyof typeof BOOK_SIZE_MAP; +export type BookRadius = keyof typeof BOOK_RADIUS_MAP; +export type BookShadowSize = keyof typeof BOOK_SHADOW_SIZE_MAP; + +export { default as Book } from "./Book.vue"; +export { default as BookHeader } from "./BookHeader.vue"; +export { default as BookTitle } from "./BookTitle.vue"; +export { default as BookDescription } from "./BookDescription.vue"; +``` + +::