diff --git a/apps/docs/content/components/tabs/colors.raw.jsx b/apps/docs/content/components/tabs/colors.raw.jsx new file mode 100644 index 0000000000..38163ff07a --- /dev/null +++ b/apps/docs/content/components/tabs/colors.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/colors.ts b/apps/docs/content/components/tabs/colors.ts index ff9140ba8b..d5bef810aa 100644 --- a/apps/docs/content/components/tabs/colors.ts +++ b/apps/docs/content/components/tabs/colors.ts @@ -1,27 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger" - ]; - - return ( -
- {colors.map((color) => ( - - - - - - ))} -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/controlled.raw.jsx b/apps/docs/content/components/tabs/controlled.raw.jsx new file mode 100644 index 0000000000..9038268ef4 --- /dev/null +++ b/apps/docs/content/components/tabs/controlled.raw.jsx @@ -0,0 +1,38 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("photos"); + + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/controlled.ts b/apps/docs/content/components/tabs/controlled.ts index 54ae1ee402..2c3f0cacb4 100644 --- a/apps/docs/content/components/tabs/controlled.ts +++ b/apps/docs/content/components/tabs/controlled.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("photos"); - - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/custom-styles.raw.jsx b/apps/docs/content/components/tabs/custom-styles.raw.jsx new file mode 100644 index 0000000000..d245ce75df --- /dev/null +++ b/apps/docs/content/components/tabs/custom-styles.raw.jsx @@ -0,0 +1,131 @@ +import {Tabs, Tab, Chip} from "@nextui-org/react"; + +export const GalleryIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const VideoIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
+ + + + Photos + + 9 + +
+ } + /> + + + Music + + 3 + + + } + /> + + + Videos + + 1 + + + } + /> + + + ); +} diff --git a/apps/docs/content/components/tabs/custom-styles.ts b/apps/docs/content/components/tabs/custom-styles.ts index ff197991d6..da3ea9093a 100644 --- a/apps/docs/content/components/tabs/custom-styles.ts +++ b/apps/docs/content/components/tabs/custom-styles.ts @@ -1,113 +1,7 @@ -const GalleryIcon = `export const GalleryIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const VideoIcon = `export const VideoIcon = (props) => ( - -);`; - -const App = `import {Tabs, Tab, Chip} from "@nextui-org/react"; -import {GalleryIcon} from "./GalleryIcon"; -import {MusicIcon} from "./MusicIcon"; -import {VideoIcon} from "./VideoIcon"; - -export default function App() { - return ( -
- - - - Photos - 9 -
- } - /> - - - Music - 3 - - } - /> - - - Videos - 1 - - } - /> - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/GalleryIcon.jsx": GalleryIcon, - "/MusicIcon.jsx": MusicIcon, - "/VideoIcon.jsx": VideoIcon, }; export default { diff --git a/apps/docs/content/components/tabs/disabled-item.raw.jsx b/apps/docs/content/components/tabs/disabled-item.raw.jsx new file mode 100644 index 0000000000..36b3b20580 --- /dev/null +++ b/apps/docs/content/components/tabs/disabled-item.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/disabled-item.ts b/apps/docs/content/components/tabs/disabled-item.ts index 9106c67548..90d0beb6b7 100644 --- a/apps/docs/content/components/tabs/disabled-item.ts +++ b/apps/docs/content/components/tabs/disabled-item.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./disabled-item.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/disabled.raw.jsx b/apps/docs/content/components/tabs/disabled.raw.jsx new file mode 100644 index 0000000000..d37812b165 --- /dev/null +++ b/apps/docs/content/components/tabs/disabled.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/disabled.ts b/apps/docs/content/components/tabs/disabled.ts index 4e5449d763..1a215cc91f 100644 --- a/apps/docs/content/components/tabs/disabled.ts +++ b/apps/docs/content/components/tabs/disabled.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/dynamic.raw.jsx b/apps/docs/content/components/tabs/dynamic.raw.jsx new file mode 100644 index 0000000000..53570bebfe --- /dev/null +++ b/apps/docs/content/components/tabs/dynamic.raw.jsx @@ -0,0 +1,38 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + let tabs = [ + { + id: "photos", + label: "Photos", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + }, + { + id: "music", + label: "Music", + content: + "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + }, + { + id: "videos", + label: "Videos", + content: + "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + }, + ]; + + return ( +
+ + {(item) => ( + + + {item.content} + + + )} + +
+ ); +} diff --git a/apps/docs/content/components/tabs/dynamic.ts b/apps/docs/content/components/tabs/dynamic.ts index 3e13d8eab0..5d3c97bb9a 100644 --- a/apps/docs/content/components/tabs/dynamic.ts +++ b/apps/docs/content/components/tabs/dynamic.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - let tabs = [ - { - id: "photos", - label: "Photos", - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." - }, - { - id: "music", - label: "Music", - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." - }, - { - id: "videos", - label: "Videos", - content: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." - } - ]; - - return ( -
- - {(item) => ( - - - - {item.content} - - - - )} - -
- ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/form.raw.jsx b/apps/docs/content/components/tabs/form.raw.jsx new file mode 100644 index 0000000000..61422dd9fa --- /dev/null +++ b/apps/docs/content/components/tabs/form.raw.jsx @@ -0,0 +1,67 @@ +import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("login"); + + return ( +
+ + + + +
+ + +

+ Need to create an account?{" "} + setSelected("sign-up")}> + Sign up + +

+
+ +
+
+ + +
+ + + +

+ Already have an account?{" "} + setSelected("login")}> + Login + +

+
+ +
+
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/form.raw.tsx b/apps/docs/content/components/tabs/form.raw.tsx new file mode 100644 index 0000000000..1e3e7f4c79 --- /dev/null +++ b/apps/docs/content/components/tabs/form.raw.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("login"); + + return ( +
+ + + + +
+ + +

+ Need to create an account?{" "} + setSelected("sign-up")}> + Sign up + +

+
+ +
+
+ + +
+ + + +

+ Already have an account?{" "} + setSelected("login")}> + Login + +

+
+ +
+
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/form.ts b/apps/docs/content/components/tabs/form.ts index 679964350b..2f8c0d8490 100644 --- a/apps/docs/content/components/tabs/form.ts +++ b/apps/docs/content/components/tabs/form.ts @@ -1,138 +1,5 @@ -const App = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("login"); - - return ( -
- - - - -
- - -

- Need to create an account?{" "} - setSelected("sign-up")}> - Sign up - -

-
- -
-
- - -
- - - -

- Already have an account?{" "} - setSelected("login")}> - Login - -

-
- -
-
- - - - -
- ); -}`; - -const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("login"); - - return ( -
- - - - -
- - -

- Need to create an account?{" "} - setSelected("sign-up")}> - Sign up - -

-
- -
-
- - -
- - - -

- Already have an account?{" "} - setSelected("login")}> - Login - -

-
- -
-
- - - - -
- ); -}`; +import App from "./form.raw.jsx?raw"; +import AppTs from "./form.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/icons.raw.jsx b/apps/docs/content/components/tabs/icons.raw.jsx new file mode 100644 index 0000000000..17bca089e6 --- /dev/null +++ b/apps/docs/content/components/tabs/icons.raw.jsx @@ -0,0 +1,112 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export const GalleryIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const VideoIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
+ + + + Photos +
+ } + /> + + + Music + + } + /> + + + Videos + + } + /> + + + ); +} diff --git a/apps/docs/content/components/tabs/icons.ts b/apps/docs/content/components/tabs/icons.ts index b272ee4257..22a410c88f 100644 --- a/apps/docs/content/components/tabs/icons.ts +++ b/apps/docs/content/components/tabs/icons.ts @@ -1,100 +1,7 @@ -const GalleryIcon = `export const GalleryIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const VideoIcon = `export const VideoIcon = (props) => ( - -);`; - -const App = `import {Tabs, Tab} from "@nextui-org/react"; -import {GalleryIcon} from "./GalleryIcon"; -import {MusicIcon} from "./MusicIcon"; -import {VideoIcon} from "./VideoIcon"; - -export default function App() { - return ( -
- - - - Photos -
- } - /> - - - Music - - } - /> - - - Videos - - } - /> - - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/GalleryIcon.jsx": GalleryIcon, - "/MusicIcon.jsx": MusicIcon, - "/VideoIcon.jsx": VideoIcon, }; export default { diff --git a/apps/docs/content/components/tabs/placement.raw.jsx b/apps/docs/content/components/tabs/placement.raw.jsx new file mode 100644 index 0000000000..2fdc1e7578 --- /dev/null +++ b/apps/docs/content/components/tabs/placement.raw.jsx @@ -0,0 +1,51 @@ +import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + const [placement, setPlacement] = React.useState("top"); + + return ( +
+ setPlacement(value)} + > + top + bottom + start + end + +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+
+ ); +} diff --git a/apps/docs/content/components/tabs/placement.ts b/apps/docs/content/components/tabs/placement.ts index 558a4bbdb5..eee2244366 100644 --- a/apps/docs/content/components/tabs/placement.ts +++ b/apps/docs/content/components/tabs/placement.ts @@ -1,48 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [placement, setPlacement] = React.useState("top"); - return ( -
- setPlacement(value)} - > - top - bottom - start - end - -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
-
- ); -}`; +import App from "./placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/radius.raw.jsx b/apps/docs/content/components/tabs/radius.raw.jsx new file mode 100644 index 0000000000..0959a31088 --- /dev/null +++ b/apps/docs/content/components/tabs/radius.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const radiusList = ["full", "lg", "md", "sm", "none"]; + + return ( +
+ {radiusList.map((radius) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/radius.ts b/apps/docs/content/components/tabs/radius.ts index 75c39db1d7..7b78db1ce0 100644 --- a/apps/docs/content/components/tabs/radius.ts +++ b/apps/docs/content/components/tabs/radius.ts @@ -1,26 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const radiusList = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
- {radiusList.map((radius) => ( - - - - - - ))} -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/sizes.raw.jsx b/apps/docs/content/components/tabs/sizes.raw.jsx new file mode 100644 index 0000000000..589d1a18a8 --- /dev/null +++ b/apps/docs/content/components/tabs/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/sizes.ts b/apps/docs/content/components/tabs/sizes.ts index 9e20158653..85a2f5b30b 100644 --- a/apps/docs/content/components/tabs/sizes.ts +++ b/apps/docs/content/components/tabs/sizes.ts @@ -1,24 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const sizes = [ - "sm", - "md", - "lg", - ]; - - return ( -
- {sizes.map((size) => ( - - - - - - ))} -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/usage.raw.jsx b/apps/docs/content/components/tabs/usage.raw.jsx new file mode 100644 index 0000000000..54c7a54cce --- /dev/null +++ b/apps/docs/content/components/tabs/usage.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/usage.ts b/apps/docs/content/components/tabs/usage.ts index 552e09828a..1118304c37 100644 --- a/apps/docs/content/components/tabs/usage.ts +++ b/apps/docs/content/components/tabs/usage.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/variants.raw.jsx b/apps/docs/content/components/tabs/variants.raw.jsx new file mode 100644 index 0000000000..d63d01a387 --- /dev/null +++ b/apps/docs/content/components/tabs/variants.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const variants = ["solid", "underlined", "bordered", "light"]; + + return ( +
+ {variants.map((variant) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/variants.ts b/apps/docs/content/components/tabs/variants.ts index 53c80deb2b..ddea95fb2e 100644 --- a/apps/docs/content/components/tabs/variants.ts +++ b/apps/docs/content/components/tabs/variants.ts @@ -1,25 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const variants = [ - "solid", - "underlined", - "bordered", - "light", - ]; - - return ( -
- {variants.map((variant) => ( - - - - - - ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/vertical.raw.jsx b/apps/docs/content/components/tabs/vertical.raw.jsx new file mode 100644 index 0000000000..b1229a8965 --- /dev/null +++ b/apps/docs/content/components/tabs/vertical.raw.jsx @@ -0,0 +1,43 @@ +import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react"; + +export default function App() { + const [isVertical, setIsVertical] = React.useState(true); + + return ( +
+ + Vertical + +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+
+ ); +} diff --git a/apps/docs/content/components/tabs/vertical.ts b/apps/docs/content/components/tabs/vertical.ts index 7487c22bb1..697ac10343 100644 --- a/apps/docs/content/components/tabs/vertical.ts +++ b/apps/docs/content/components/tabs/vertical.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react"; - -export default function App() { - const [isVertical, setIsVertical] = React.useState(true); - return ( -
- - Vertical - -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
-
- ); -}`; +import App from "./vertical.raw.jsx?raw"; const react = { "/App.jsx": App,