lfg

justdlabs · Oct 21, 2024 · 8d89380 · 8d89380
1 parent e59d82d
commit 8d89380
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 18 deletions.
diff --git a/app/blocks/navbar/navbar-05/app-navbar.tsx b/app/blocks/navbar/navbar-05/app-navbar.tsx
@@ -0,0 +1,115 @@
+"use client"
+
+import {
+  IconBag2,
+  IconBrandApple,
+  IconBrandGithub,
+  IconBrandJustd,
+  IconChart3,
+  IconChevronLgDown,
+  IconColors,
+  IconCommandRegular,
+  IconDashboard,
+  IconHeadphones,
+  IconLogout,
+  IconNotes,
+  IconSearch,
+  IconSettings,
+  IconSidebar
+} from "justd-icons"
+import { Avatar, Button, Menu, Navbar, Separator } from "ui"
+
+export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
+  return (
+    <Navbar {...props}>
+      <Navbar.Nav>
+        <Navbar.Logo href="/docs/components/layouts/navbar">
+          <IconBrandJustd className="size-5" />
+          <strong className="font-semibold">Justd</strong>
+        </Navbar.Logo>
+        <Navbar.Section>
+          <Navbar.Item href="/docs/components/layouts/navbar">
+            <IconNotes />
+            Documentation
+          </Navbar.Item>
+          <Navbar.Item href="https://getjustd.com/docs/components/layouts/sidebar">
+            <IconSidebar /> Sidebar
+          </Navbar.Item>
+          <Navbar.Item href="https://getjustd.com/themes">
+            <IconColors /> Themes
+          </Navbar.Item>
+          <Navbar.Item href="https://getjustd.com/charts">
+            <IconChart3 /> Charts
+          </Navbar.Item>
+          <Navbar.Item href="https://git.new/justd">
+            <IconBrandGithub /> Github
+          </Navbar.Item>
+        </Navbar.Section>
+      </Navbar.Nav>
+      <Navbar.Compact>
+        <Navbar.Flex>
+          <Navbar.Trigger className="-ml-2" />
+          <Separator orientation="vertical" className="h-6 mx-2" />
+          <Navbar.Logo href="/docs/components/layouts/navbar">
+            <IconBrandApple className="size-5" />
+          </Navbar.Logo>
+        </Navbar.Flex>
+        <Navbar.Flex>
+          <Navbar.Flex>
+            <Button appearance="plain" size="square-petite" aria-label="Search for products">
+              <IconSearch />
+            </Button>
+            <Button appearance="plain" size="square-petite" aria-label="Your Bag">
+              <IconBag2 />
+            </Button>
+          </Navbar.Flex>
+          <Separator orientation="vertical" className="h-6 ml-1 mr-3" />
+          <Menu>
+            <Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
+              <Avatar
+                alt="slash"
+                size="small"
+                shape="square"
+                src="/images/sidebar/profile-slash.jpg"
+              />
+              <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
+            </Menu.Trigger>
+            <Menu.Content placement="bottom" showArrow className="sm:min-w-56">
+              <Menu.Section>
+                <Menu.Header separator>
+                  <span className="block">Irsyad A. Panjaitan</span>
+                  <span className="font-normal text-muted-fg">@irsyadadl</span>
+                </Menu.Header>
+              </Menu.Section>
+
+              <Menu.Item href="#dashboard">
+                <IconDashboard />
+                Dashboard
+              </Menu.Item>
+              <Menu.Item href="#settings">
+                <IconSettings />
+                Settings
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item>
+                <IconCommandRegular />
+                Command Menu
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item href="#contact-s">
+                <IconHeadphones />
+                Contact Support
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item href="#logout">
+                <IconLogout />
+                Log out
+              </Menu.Item>
+            </Menu.Content>
+          </Menu>
+        </Navbar.Flex>
+      </Navbar.Compact>
+      <Navbar.Inset>{children}</Navbar.Inset>
+    </Navbar>
+  )
+}
diff --git a/app/blocks/navbar/navbar-05/layout.tsx b/app/blocks/navbar/navbar-05/layout.tsx
@@ -0,0 +1,5 @@
+import { AppNavbar } from "./app-navbar"
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return <AppNavbar>{children}</AppNavbar>
+}
diff --git a/app/blocks/navbar/navbar-05/page.tsx b/app/blocks/navbar/navbar-05/page.tsx
@@ -0,0 +1,9 @@
+import type { Metadata } from "next"
+import { Heading } from "ui"
+
+export const metadata: Metadata = {
+  title: "Navbar using Icons"
+}
+export default function Page() {
+  return <Heading>Home</Heading>
+}
diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from "react"
+import React from 'react';
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field/date-field-demo": {
@@ -779,6 +779,9 @@ export const previews: Record<string, any> = {
   "drag-and-drop/drop-zone-demo": {
     component: React.lazy(() => import("@/components/docs/drag-and-drop/drop-zone-demo")),
   },
+  "layouts/navbar/navbar-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-icon-demo")),
+  },
   "layouts/navbar/navbar-disabled-demo": {
     component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-disabled-demo")),
   },

diff --git a/components/docs/layouts/navbar/navbar-icon-demo.tsx b/components/docs/layouts/navbar/navbar-icon-demo.tsx
@@ -0,0 +1,112 @@
+import {
+  IconBag2,
+  IconBrandApple,
+  IconBrandGithub,
+  IconBrandJustd,
+  IconChart3,
+  IconChevronLgDown,
+  IconColors,
+  IconCommandRegular,
+  IconDashboard,
+  IconHeadphones,
+  IconLogout,
+  IconNotes,
+  IconSearch,
+  IconSettings,
+  IconSidebar
+} from "justd-icons"
+import { Avatar, Button, Menu, Navbar, Separator } from "ui"
+
+export default function NavbarIconDemo() {
+  return (
+    <Navbar>
+      <Navbar.Nav>
+        <Navbar.Logo href="/docs/components/layouts/navbar">
+          <IconBrandJustd className="size-5" />
+          <strong className="font-semibold">Justd</strong>
+        </Navbar.Logo>
+        <Navbar.Section>
+          <Navbar.Item href="/docs/components/layouts/navbar">
+            <IconNotes />
+            Documentation
+          </Navbar.Item>
+          <Navbar.Item href="https://getjustd.com/docs/components/layouts/sidebar">
+            <IconSidebar /> Sidebar
+          </Navbar.Item>
+          <Navbar.Item href="https://getjustd.com/themes">
+            <IconColors /> Themes
+          </Navbar.Item>
+          <Navbar.Item href="https://getjustd.com/charts">
+            <IconChart3 /> Charts
+          </Navbar.Item>
+          <Navbar.Item href="https://git.new/justd">
+            <IconBrandGithub /> Github
+          </Navbar.Item>
+        </Navbar.Section>
+      </Navbar.Nav>
+      <Navbar.Compact>
+        <Navbar.Flex>
+          <Navbar.Trigger className="-ml-2" />
+          <Separator orientation="vertical" className="h-6 mx-2" />
+          <Navbar.Logo href="/docs/components/layouts/navbar">
+            <IconBrandApple className="size-5" />
+          </Navbar.Logo>
+        </Navbar.Flex>
+        <Navbar.Flex>
+          <Navbar.Flex>
+            <Button appearance="plain" size="square-petite" aria-label="Search for products">
+              <IconSearch />
+            </Button>
+            <Button appearance="plain" size="square-petite" aria-label="Your Bag">
+              <IconBag2 />
+            </Button>
+          </Navbar.Flex>
+          <Separator orientation="vertical" className="h-6 ml-1 mr-3" />
+          <Menu>
+            <Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
+              <Avatar
+                alt="slash"
+                size="small"
+                shape="square"
+                src="/images/sidebar/profile-slash.jpg"
+              />
+              <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
+            </Menu.Trigger>
+            <Menu.Content placement="bottom" showArrow className="sm:min-w-56">
+              <Menu.Section>
+                <Menu.Header separator>
+                  <span className="block">Irsyad A. Panjaitan</span>
+                  <span className="font-normal text-muted-fg">@irsyadadl</span>
+                </Menu.Header>
+              </Menu.Section>
+
+              <Menu.Item href="#dashboard">
+                <IconDashboard />
+                Dashboard
+              </Menu.Item>
+              <Menu.Item href="#settings">
+                <IconSettings />
+                Settings
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item>
+                <IconCommandRegular />
+                Command Menu
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item href="#contact-s">
+                <IconHeadphones />
+                Contact Support
+              </Menu.Item>
+              <Menu.Separator />
+              <Menu.Item href="#logout">
+                <IconLogout />
+                Log out
+              </Menu.Item>
+            </Menu.Content>
+          </Menu>
+        </Navbar.Flex>
+      </Navbar.Compact>
+    </Navbar>
+  )
+}
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
@@ -1,17 +1,26 @@
-"use client";
-
-import * as React from "react";
-
-
-
-import type { FieldErrorProps, GroupProps, InputProps, LabelProps, TextFieldProps as TextFieldPrimitiveProps, TextProps, ValidationResult } from "react-aria-components";
-import { FieldError as FieldErrorPrimitive, Group, Input as InputPrimitive, Label as LabelPrimitive, Text } from "react-aria-components";
-import { tv } from "tailwind-variants";
-
-
-
-import { cr, ctr } from "./primitive";
-
+"use client"
+
+import * as React from "react"
+
+import type {
+  FieldErrorProps,
+  GroupProps,
+  InputProps,
+  LabelProps,
+  TextFieldProps as TextFieldPrimitiveProps,
+  TextProps,
+  ValidationResult
+} from "react-aria-components"
+import {
+  FieldError as FieldErrorPrimitive,
+  Group,
+  Input as InputPrimitive,
+  Label as LabelPrimitive,
+  Text
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
+
+import { cr, ctr } from "./primitive"
 
 // primitive styles
 

diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
@@ -200,7 +200,7 @@ const Section = ({ className, ...props }: React.ComponentProps<"div">) => {
 
 const linkStyles = tv({
   base: [
-    "relative text-sm px-2 text-muted-fg outline-none forced-colors:disabled:text-[GrayText] transition-colors",
+    "relative text-sm px-2 flex items-center gap-x-2 [&>[data-slot=icon]]:-mx-0.5 text-muted-fg outline-none forced-colors:disabled:text-[GrayText] transition-colors",
     "disabled:opacity-60 disabled:cursor-default",
     "current:text-fg hover:text-fg focus:text-fg pressed:text-fg focus-visible:outline-1 focus-visible:outline-primary"
   ],
@@ -246,7 +246,7 @@ const Logo = ({ className, ...props }: LinkProps) => {
   return (
     <Link
       className={cn(
-        "lg:mr-4 focus:outline-none focus-visible:outline-1 focus-visible:outline-primary px-2 py-4 lg:px-0 lg:py-0 hover:text-fg text-muted-fg",
+        "lg:mr-4 focus:outline-none flex items-center gap-x-2 focus-visible:outline-1 focus-visible:outline-primary px-2 py-4 lg:px-0 lg:py-0 text-fg",
         className
       )}
       {...props}

diff --git a/resources/content/docs/components/layouts/navbar.mdx b/resources/content/docs/components/layouts/navbar.mdx
@@ -138,6 +138,11 @@ If you prefer full control of your layout and don't want to use the `<Navbar.Ins
 </Navbar>
 ```
 
+## Using Icons
+If you'd like to use icons on the navbar items, that's no problem at all. The navbar is already designed and optimized to accommodate icons seamlessly. First of all, you need to install the `justd-icons` package.
+<Installation options={{ isManual: false }} items={['justd-icons']}/>
+<How className='lg:[&_header]:min-h-80 [&_header]:min-h-56' fullscreenUrl='/blocks/navbar/navbar-05' isCenter={false} toUse="layouts/navbar/navbar-icon-demo" />
+
 ## Disabled
 Disable individual navbar items when needed.
 <How className='lg:[&_header]:min-h-80 [&_header]:min-h-56' isCenter={false} toUse="layouts/navbar/navbar-disabled-demo" />
diff --git a/resources/content/docs/components/layouts/sidebar.mdx b/resources/content/docs/components/layouts/sidebar.mdx
@@ -7,7 +7,7 @@ references: ["https://react-spectrum.adobe.com/react-aria/Link.html#props", "htt
 ---
 
 ## Basic
-I can't display a live example here. Click on the image to view it in full screen, or <a href='/sidebar' target='_blank'>here</a>.
+I can't display a live example here. Click on the image to view it in full screen, or <a href='/blocks/sidebar/sidebar-01' target='_blank'>here</a>.
 <a href='/blocks/sidebar/sidebar-01' className='group' target='_blank'>
   <Image src="/images/sidebar/example-sidebar.jpg" className='aspect-video hover:grayscale-0 grayscale transition-transform' alt="Sidebar" width={1200} height={800} />
 </a>