-
-
Notifications
You must be signed in to change notification settings - Fork 420
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(next.js): migrate to
next.js 13 app/ directory
- Loading branch information
1 parent
088a82c
commit fb96f6f
Showing
84 changed files
with
428 additions
and
910 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,15 @@ | ||
| { | ||
| "files.exclude": { | ||
| "**/.git": true, | ||
| "**/.svn": true, | ||
| "**/.hg": true, | ||
| "**/CVS": true, | ||
| "**/.DS_Store": true, | ||
| "**/Thumbs.db": true, | ||
| "**/.next": true, | ||
| "**/.vercel": true, | ||
| "**/build": true, | ||
| "**/coverage": true, | ||
| "**/lib": true, | ||
| "**/node_modules": true | ||
| } | ||
| } | ||
| "**/node_modules": true, | ||
| "**/.DS_Store": true, | ||
| "**/Thumbs.db": true | ||
| }, | ||
| "typescript.tsdk": "node_modules/typescript/lib", | ||
| "typescript.enablePromptUseWorkspaceTsdk": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import type { ComponentProps, FC, PropsWithChildren } from 'react'; | ||
| import { Card } from '~/src'; | ||
|
|
||
| const CodePreviewContainer: FC<PropsWithChildren> = function ({ children }) { | ||
| return <div className="flex flex-col gap-2">{children}</div>; | ||
| }; | ||
|
|
||
| const CodePreviewCard: FC<PropsWithChildren & ComponentProps<'div'>> = function ({ children, className }) { | ||
| return ( | ||
| <div className={className}> | ||
| <Card>{children}</Card> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const CodePreviewContent: FC<PropsWithChildren> = function ({ children }) { | ||
| return <div className="py-4">{children}</div>; | ||
| }; | ||
|
|
||
| const CodePreviewTitle: FC<PropsWithChildren> = function ({ children }) { | ||
| return <span className="text-2xl font-bold">{children}</span>; | ||
| }; | ||
|
|
||
| export const CodePreview = Object.assign(CodePreviewContainer, { | ||
| Card: CodePreviewCard, | ||
| Content: CodePreviewContent, | ||
| Title: CodePreviewTitle, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| 'use client'; | ||
|
|
||
| import type { FC } from 'react'; | ||
| import { CodePreview } from '~/app/components/code-preview'; | ||
| import type { AccordionProps } from '~/src'; | ||
| import { Accordion } from '~/src'; | ||
|
|
||
| const AccordionPage: FC = () => { | ||
| return ( | ||
| <div className="grid grid-cols-1 gap-y-9"> | ||
| <CodePreview> | ||
| <CodePreview.Title>Default accordion</CodePreview.Title> | ||
| <CodePreview.Card className="dark:!bg-gray-900"> | ||
| <ExampleAccordion /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| <CodePreview> | ||
| <CodePreview.Title>Collapse all</CodePreview.Title> | ||
| <CodePreview.Card className="dark:!bg-gray-900"> | ||
| <ExampleAccordion collapseAll /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const ExampleAccordion: FC<Omit<AccordionProps, 'children'>> = (props) => { | ||
| return ( | ||
| <Accordion {...props}> | ||
| <Accordion.Panel> | ||
| <Accordion.Title>What is Flowbite?</Accordion.Title> | ||
| <Accordion.Content> | ||
| <p className="mb-2 text-gray-500 dark:text-gray-400"> | ||
| Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, | ||
| dropdowns, modals, navbars, and more. | ||
| </p> | ||
| <p className="text-gray-500 dark:text-gray-400"> | ||
| Check out this guide to learn how to | ||
| <a | ||
| href="https://flowbite.com/docs/getting-started/introduction/" | ||
| className="text-blue-600 hover:underline dark:text-blue-500" | ||
| > | ||
| get started | ||
| </a> | ||
| and start developing websites even faster with components on top of Tailwind CSS. | ||
| </p> | ||
| </Accordion.Content> | ||
| </Accordion.Panel> | ||
| <Accordion.Panel> | ||
| <Accordion.Title>Is there a Figma file available?</Accordion.Title> | ||
| <Accordion.Content> | ||
| <p className="mb-2 text-gray-500 dark:text-gray-400"> | ||
| Flowbite is first conceptualized and designed using the Figma software so everything you see in the library | ||
| has a design equivalent in our Figma file. | ||
| </p> | ||
| <p className="text-gray-500 dark:text-gray-400"> | ||
| Check out the | ||
| <a href="https://flowbite.com/figma/" className="text-blue-600 hover:underline dark:text-blue-500"> | ||
| Figma design system | ||
| </a> | ||
| based on the utility classes from Tailwind CSS and components from Flowbite. | ||
| </p> | ||
| </Accordion.Content> | ||
| </Accordion.Panel> | ||
| <Accordion.Panel> | ||
| <Accordion.Title>What are the differences between Flowbite and Tailwind UI?</Accordion.Title> | ||
| <Accordion.Content> | ||
| <p className="mb-2 text-gray-500 dark:text-gray-400"> | ||
| The main difference is that the core components from Flowbite are open source under the MIT license, whereas | ||
| Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone | ||
| components, whereas Tailwind UI offers sections of pages. | ||
| </p> | ||
| <p className="mb-2 text-gray-500 dark:text-gray-400"> | ||
| However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no | ||
| technical reason stopping you from using the best of two worlds. | ||
| </p> | ||
| <p className="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p> | ||
| <ul className="list-disc pl-5 text-gray-500 dark:text-gray-400"> | ||
| <li> | ||
| <a href="https://flowbite.com/pro/" className="text-blue-600 hover:underline dark:text-blue-500"> | ||
| Flowbite Pro | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="https://tailwindui.com/" | ||
| rel="nofollow" | ||
| className="text-blue-600 hover:underline dark:text-blue-500" | ||
| > | ||
| Tailwind UI | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </Accordion.Content> | ||
| </Accordion.Panel> | ||
| </Accordion> | ||
| ); | ||
| }; | ||
|
|
||
| export default AccordionPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| 'use client'; | ||
|
|
||
| import type { FC } from 'react'; | ||
| import { HiEye, HiInformationCircle } from 'react-icons/hi'; | ||
| import { CodePreview } from '~/app/components/code-preview'; | ||
| import type { AlertProps } from '~/src'; | ||
| import { Alert } from '~/src'; | ||
|
|
||
| const AlertPage: FC = () => { | ||
| return ( | ||
| <> | ||
| <CodePreview> | ||
| <CodePreview.Title>Default alert</CodePreview.Title> | ||
| <CodePreview.Card> | ||
| <ExampleAlert color="info" /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| <CodePreview> | ||
| <CodePreview.Title>Alert with icon</CodePreview.Title> | ||
| <CodePreview.Card> | ||
| <ExampleAlert color="failure" icon={HiInformationCircle} /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| <CodePreview> | ||
| <CodePreview.Title>Dismissable alert</CodePreview.Title> | ||
| <CodePreview.Card> | ||
| <ExampleAlert color="success" onDismiss={() => alert('Alert dismissed!')} /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| <CodePreview> | ||
| <CodePreview.Title>Rounded</CodePreview.Title> | ||
| <CodePreview.Card> | ||
| <ExampleAlert color="warning" rounded /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| <CodePreview> | ||
| <CodePreview.Title>Border accent</CodePreview.Title> | ||
| <CodePreview.Card> | ||
| <ExampleAlert color="warning" withBorderAccent /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| <CodePreview> | ||
| <CodePreview.Title>Additional content</CodePreview.Title> | ||
| <CodePreview.Card> | ||
| <ExampleAlert additionalContent={<ExampleAdditionalContent />} color="warning" icon={HiInformationCircle} /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| <CodePreview> | ||
| <CodePreview.Title>All options</CodePreview.Title> | ||
| <CodePreview.Card> | ||
| <ExampleAlert | ||
| additionalContent={<ExampleAdditionalContent />} | ||
| color="success" | ||
| icon={HiInformationCircle} | ||
| onDismiss={() => alert('Alert dismissed!')} | ||
| rounded | ||
| /> | ||
| </CodePreview.Card> | ||
| </CodePreview> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const ExampleAlert: FC<AlertProps> = (props) => { | ||
| return ( | ||
| <Alert {...props}> | ||
| <span> | ||
| <span className="font-medium">Info alert!</span> Change a few things up and try submitting again. | ||
| </span> | ||
| </Alert> | ||
| ); | ||
| }; | ||
|
|
||
| const ExampleAdditionalContent: FC = () => { | ||
| return ( | ||
| <> | ||
| <div className="mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800"> | ||
| More info about this info alert goes here. This example text is going to run a bit longer so that you can see | ||
| how spacing within an alert works with this kind of content. | ||
| </div> | ||
| <div className="flex"> | ||
| <button | ||
| type="button" | ||
| className="mr-2 inline-flex items-center rounded-lg bg-blue-700 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-800 dark:hover:bg-blue-900" | ||
| > | ||
| <HiEye className="-ml-0.5 mr-2 h-4 w-4" /> | ||
| View more | ||
| </button> | ||
| <button | ||
| type="button" | ||
| className="rounded-lg border border-blue-700 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:ring-4 focus:ring-blue-300 dark:border-blue-800 dark:text-blue-800 dark:hover:text-white" | ||
| > | ||
| Dismiss | ||
| </button> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default AlertPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import type { FC, PropsWithChildren } from 'react'; | ||
|
|
||
| const ComponentDocsLayout: FC<PropsWithChildren> = ({ children }) => { | ||
| return <div className="mx-auto flex flex-col gap-8 dark:text-white">{children}</div>; | ||
| }; | ||
|
|
||
| export default ComponentDocsLayout; |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
4 changes: 2 additions & 2 deletions
4
pages/docs/components/progress.tsx → app/docs/components/progress/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.