From b1a03823fde0cb3800ff0fd31fd2e31f6a530d10 Mon Sep 17 00:00:00 2001 From: bhenique Date: Mon, 12 Aug 2024 16:14:01 +0200 Subject: [PATCH 1/6] feat: adjust figma --- .../ComponentDocPage/ComponentDocPage.tsx | 34 +++---- .../src/components/NavbarPage/NavbarPage.css | 6 +- .../src/components/NavbarPage/NavbarPage.tsx | 38 ++++---- apps/web/src/components/Preview/Preview.tsx | 4 +- .../src/components/RouterHead/RouterHead.tsx | 3 + .../ComponentSection/ComponentSection.tsx | 8 +- apps/web/src/generated-examples.ts | 16 +--- apps/web/src/global.css | 2 + apps/web/src/routes/docs/layout.tsx | 95 +++++++++---------- .../[theme-rtl]/sidebar/01-default/index.tsx | 10 +- .../sidebar/02-with-group/index.tsx | 10 +- .../[theme-rtl]/sidebar/03-with-cta/index.tsx | 8 +- .../sidebar/04-sidebar-with-navbar/index.tsx | 34 ++++++- .../05-sidebar-with-close-button/index.tsx | 42 -------- packages/lib/package.json | 2 +- .../FlowbiteProvider/FlowbiteProvider.tsx | 2 - packages/lib/src/components/Navbar/Navbar.tsx | 42 ++++---- .../lib/src/components/Navbar/NavbarLink.tsx | 8 +- .../Navbar/composables/use-navbar-context.ts | 6 +- .../lib/src/components/Sidebar/Sidebar.tsx | 71 ++++++++------ .../components/Sidebar/SidebarCollapse.tsx | 13 +-- .../lib/src/components/Sidebar/SidebarCta.tsx | 8 +- .../src/components/Sidebar/SidebarItem.tsx | 39 ++++---- .../Sidebar/composables/use-open-sidebar.tsx | 18 ---- .../composables/use-sidebar-context.tsx | 15 +++ packages/lib/src/components/Sidebar/index.ts | 2 - 26 files changed, 258 insertions(+), 278 deletions(-) delete mode 100644 apps/web/src/routes/examples/[theme-rtl]/sidebar/05-sidebar-with-close-button/index.tsx delete mode 100644 packages/lib/src/components/Sidebar/composables/use-open-sidebar.tsx create mode 100644 packages/lib/src/components/Sidebar/composables/use-sidebar-context.tsx diff --git a/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx b/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx index ee72b95ee..2e4eea22e 100644 --- a/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx +++ b/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx @@ -53,31 +53,33 @@ export const ComponentDocPage = component$(({ name }) => { <> {previewItems.value ? (
-
-
- +
+
+ Qwik {name} - Flowbite -
+
- {previewItems.value?.map((item, i) => ( - - ))} +
+ {previewItems.value?.map((item, i) => ( + + ))} +
- diff --git a/apps/web/src/components/NavbarPage/NavbarPage.css b/apps/web/src/components/NavbarPage/NavbarPage.css index 19d43c21e..4737de827 100644 --- a/apps/web/src/components/NavbarPage/NavbarPage.css +++ b/apps/web/src/components/NavbarPage/NavbarPage.css @@ -11,7 +11,7 @@ } .DocSearch.DocSearch-Button { - @apply m-0 ml-0 flex h-[34px] w-[34px] !border !border-gray-300 border-solid dark:text-white items-center justify-center rounded-lg bg-white shadow-none hover:bg-gray-100 hover:shadow-none focus:shadow-none focus:outline-none focus:ring-4 focus:ring-gray-200 md:mr-0 md:w-52 md:justify-between md:border-solid md:border-gray-300 md:bg-gray-50 xl:w-64 xl:pl-4; + @apply m-0 ml-0 flex h-[34px] w-[34px] !border !border-gray-300 border-solid dark:text-white items-center justify-center rounded-lg bg-white shadow-none hover:bg-gray-100 hover:shadow-none focus:shadow-none focus:outline-none focus:ring-4 focus:ring-gray-200 md:mr-8 md:w-40 md:justify-between md:border-solid md:border-gray-300 md:bg-gray-50 xl:w-64 xl:pl-4 max-sm:border-none; } .DocSearch .DocSearch-Button-Placeholder { @@ -48,11 +48,11 @@ } .DocSearch .DocSearch-Hits mark { - @apply text-cyan-600 decoration-cyan-600 decoration-2 underline-offset-2; + @apply text-purple-600 decoration-purple-600 decoration-2 underline-offset-2; } .DocSearch .DocSearch-Hit[aria-selected='true'] a { - @apply bg-cyan-700; + @apply bg-purple-700; } .DocSearch .DocSearch-Hit-source { diff --git a/apps/web/src/components/NavbarPage/NavbarPage.tsx b/apps/web/src/components/NavbarPage/NavbarPage.tsx index 231be4ba5..5a3f6ef35 100644 --- a/apps/web/src/components/NavbarPage/NavbarPage.tsx +++ b/apps/web/src/components/NavbarPage/NavbarPage.tsx @@ -1,18 +1,16 @@ -import { component$, useVisibleTask$ } from '@builder.io/qwik' +import { component$, Slot, useVisibleTask$ } from '@builder.io/qwik' import { Link, useLocation } from '@builder.io/qwik-city' import { Badge, Navbar, Tooltip, useDarkMode } from 'flowbite-qwik' -import { IconDiscordSolid, IconGithubSolid, IconMoonSolid, IconSearchOutline, IconSunSolid } from 'flowbite-qwik-icons' +import { IconDiscordSolid, IconGithubSolid, IconMoonSolid, IconSunSolid } from 'flowbite-qwik-icons' import pkg from 'flowbite-qwik/package.json' import './NavbarPage.css' import docsearch from '@docsearch/js' type NavbarPageProps = { - fullWidth?: boolean - withSidebar?: boolean withCollapse?: boolean } -export const NavbarPage = component$(({ fullWidth = false, withCollapse = false, withSidebar = false }) => { +export const NavbarPage = component$(({ withCollapse = false }) => { const { isDark, setDarkModeValue } = useDarkMode() const location = useLocation() @@ -26,27 +24,29 @@ export const NavbarPage = component$(({ fullWidth = false, with }) return ( - + + +
{withCollapse && } Flowbite qwik small logo - - Flowbite - + Flowbite Qwik
-
- diff --git a/apps/web/src/components/DocumentPage/DocumentPages.tsx b/apps/web/src/components/DocumentPage/DocumentPages.tsx index 7c59ab100..b11ee56d9 100644 --- a/apps/web/src/components/DocumentPage/DocumentPages.tsx +++ b/apps/web/src/components/DocumentPage/DocumentPages.tsx @@ -64,13 +64,13 @@ export const DocumentPage = component$(() => { return (
-
+
- diff --git a/apps/web/src/components/NavbarPage/NavbarPage.tsx b/apps/web/src/components/NavbarPage/NavbarPage.tsx index 10efab1d3..16598d203 100644 --- a/apps/web/src/components/NavbarPage/NavbarPage.tsx +++ b/apps/web/src/components/NavbarPage/NavbarPage.tsx @@ -1,4 +1,4 @@ -import { component$, Slot, useVisibleTask$ } from '@builder.io/qwik' +import { component$, Slot, useComputed$, useVisibleTask$ } from '@builder.io/qwik' import { Link, useLocation } from '@builder.io/qwik-city' import { Badge, Navbar, Tooltip, useDarkMode } from 'flowbite-qwik' import { IconDiscordSolid, IconGithubSolid, IconMoonSolid, IconSunSolid } from 'flowbite-qwik-icons' @@ -10,6 +10,8 @@ export const NavbarPage = component$(() => { const { isDark, setDarkModeValue } = useDarkMode() const location = useLocation() + const isHomePage = useComputed$(() => location.url.pathname === '/') + useVisibleTask$(() => { docsearch({ appId: 'KGN2EXYVMH', @@ -29,7 +31,7 @@ export const NavbarPage = component$(() => { link: { main: 'text-sm font-medium', }, - toggle: 'hidden', + toggle: !isHomePage.value && 'hidden', }} >
diff --git a/apps/web/src/components/Preview/Preview.tsx b/apps/web/src/components/Preview/Preview.tsx index b2ade3618..a209ab521 100644 --- a/apps/web/src/components/Preview/Preview.tsx +++ b/apps/web/src/components/Preview/Preview.tsx @@ -53,31 +53,49 @@ export const Preview = component$(({ url, class: classNames, heigh
  • -