Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Documentation fixes and new components (datepicker, banner) #953

Merged
merged 6 commits into from
Sep 11, 2023
Merged

Documentation fixes and new components (datepicker, banner) #953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6111581
docs(homepage): add banner component
zoltanszogyenyi Sep 11, 2023
7bb9c73
docs(homepage): add banner component and remove duplicate datepicker
zoltanszogyenyi Sep 11, 2023
86f45fc
docs(README): add banner component and update alt tags for images
zoltanszogyenyi Sep 11, 2023
38f6867
docs(banner): fix attribute camelcase
zoltanszogyenyi Sep 11, 2023
b9d77d2
docs(sidebar): add `new` label tags to datepicker and banner
zoltanszogyenyi Sep 11, 2023
d563b3a
docs(footer): fix color for the footer component links
zoltanszogyenyi Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 41 additions & 27 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,17 +170,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/accordion">
<img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
<img alt="React Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/alert">
<img alt="Tailwind CSS Alert" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
<img alt="React Alert" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/avatar">
<img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
<img alt="React Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
</a>
</td>
</tr>
Expand All @@ -192,17 +192,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/banner">
<img alt="Tailwind CSS Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg">
<img alt="React Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/badge">
<img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
<img alt="React Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/breadcrumb">
<img alt="Tailwind CSS Breadcrumb" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
<img alt="React Breadcrumb" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
</a>
</td>
</tr>
Expand All @@ -214,17 +214,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/button">
<img alt="Tailwind CSS Button" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
<img alt="React Button" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/button-group">
<img alt="Tailwind CSS Button group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
<img alt="React Button group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/card">
<img alt="Tailwind CSS Card" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
<img alt="React Card" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
</a>
</td>
</tr>
Expand All @@ -236,17 +236,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/carousel/">
<img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
<img alt="React Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/datepicker">
<img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
<img alt="React Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/dropdown">
<img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
<img alt="React Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
</a>
</td>
</tr>
Expand All @@ -258,17 +258,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/footer">
<img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
<img alt="React Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/forms">
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
<img alt="React Forms" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/list-group">
<img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
<img alt="React List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
</a>
</td>
</tr>
Expand All @@ -280,17 +280,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/modal">
<img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
<img alt="React Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/navbar">
<img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
<img alt="React Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/pagination">
<img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
<img alt="React Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
</a>
</td>
</tr>
Expand All @@ -302,17 +302,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/progress-bar">
<img alt="Tailwind CSS Progress bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
<img alt="React Progress bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/rating">
<img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
<img alt="React Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/sidebar">
<img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
<img alt="React Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
</a>
</td>
</tr>
Expand All @@ -324,17 +324,17 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/spinner">
<img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
<img alt="React Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/table">
<img alt="Tailwind CSS Table" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
<img alt="React Table" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/tabs">
<img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
<img alt="React Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
</a>
</td>
</tr>
Expand All @@ -346,20 +346,34 @@ If you want to contribute to Flowbite React, you can follow the [contributing gu
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/tooltip">
<img alt="Tailwind CSS Tooltip" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
<img alt="React Tooltip" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/timeline">
<img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
<img alt="React Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/toast">
<img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
<img alt="React Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Sticky Banner</td>
<td width="33.3333%"></td>
<td width="33.3333%"></td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/docs/components/banner">
<img alt="React Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg">
</a>
</td>
<td width="33.3333%"></td>
<td width="33.3333%"></td>
</tr>
</table>

## Community
Expand Down
6 changes: 3 additions & 3 deletions app/components/banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ export const Banner: FC = () => {
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
></path>
</svg>
Expand Down
24 changes: 8 additions & 16 deletions app/data/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,14 +232,6 @@ export const COMPONENTS_DATA: Component[] = [
link: `/docs/components/tooltip`,
classes: 'w-24',
},
{
id: '29',
name: 'Datepicker',
image: '/images/components/datepicker.svg',
imageDark: '/images/components/datepicker-dark.svg',
link: `/docs/plugins/datepicker`,
classes: 'w-28',
},
// {
// id: '30',
// name: 'Input Field',
Expand Down Expand Up @@ -456,14 +448,14 @@ export const COMPONENTS_DATA: Component[] = [
// link: `/docs/components/bottom-navigation`,
// classes: 'w-64'
// },
// {
// id: '57',
// name: 'Sticky Banner',
// image: '/images/components/banner.svg',
// imageDark: '/images/components/banner-dark.svg',
// link: `/docs/components/banner`,
// classes: 'w-64'
// },
{
id: '57',
name: 'Sticky Banner',
image: '/images/components/banner.svg',
imageDark: '/images/components/banner-dark.svg',
link: `/docs/components/banner`,
classes: 'w-64',
},
// {
// id: '58',
// name: 'Gallery (Masonry)',
Expand Down
18 changes: 16 additions & 2 deletions app/docs/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,13 +254,27 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
<SidebarLink href="/docs/components/alert">Alert</SidebarLink>
<SidebarLink href="/docs/components/avatar">Avatar</SidebarLink>
<SidebarLink href="/docs/components/badge">Badge</SidebarLink>
<SidebarLink href="/docs/components/banner">Banner</SidebarLink>
<SidebarLink href="/docs/components/banner">
<span className="flex items-center gap-2">
Banner{' '}
<Badge color="cyan" className="px-2">
New
</Badge>
</span>
</SidebarLink>
<SidebarLink href="/docs/components/breadcrumb">Breadcrumb</SidebarLink>
<SidebarLink href="/docs/components/button">Button</SidebarLink>
<SidebarLink href="/docs/components/button-group">Button group</SidebarLink>
<SidebarLink href="/docs/components/card">Card</SidebarLink>
<SidebarLink href="/docs/components/carousel">Carousel</SidebarLink>
<SidebarLink href="/docs/components/datepicker">Datepicker</SidebarLink>
<SidebarLink href="/docs/components/datepicker">
<span className="flex items-center gap-2">
Datepicker{' '}
<Badge color="cyan" className="px-2">
New
</Badge>
</span>
</SidebarLink>
<SidebarLink href="/docs/components/dropdown">Dropdown</SidebarLink>
<SidebarLink href="/docs/components/footer">Footer</SidebarLink>
<SidebarLink href="/docs/components/forms">Forms</SidebarLink>
Expand Down
4 changes: 2 additions & 2 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1222,7 +1222,7 @@ const MainFooter: FC = () => {
title="Help & Support"
className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
/>
<Footer.LinkGroup col>
<Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
<Footer.Link href="https://discord.gg/4eeurUVvTy" className="text-base">
Discord
</Footer.Link>
Expand All @@ -1236,7 +1236,7 @@ const MainFooter: FC = () => {
title="Legal"
className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
/>
<Footer.LinkGroup col>
<Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
<Footer.Link href="https://flowbite.com/license/" className="text-base">
License
</Footer.Link>
Expand Down
Loading
Loading