fix: use @giantnodes/react v1.0.0-canary.16 components

PHILLIPS71 · May 11, 2024 · fea9517 · fea9517
1 parent d5f813e
commit fea9517
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 86 deletions.
diff --git a/app/src/app/(dashboard)/layout.tsx b/app/src/app/(dashboard)/layout.tsx
@@ -2,9 +2,11 @@ import React from 'react'
 
 import DefaultLayout from '@/components/layouts/dashboard/DashboardLayout'
 
-type DashboardLayoutProps = React.PropsWithChildren
+type DashboardSegmentLayoutProps = React.PropsWithChildren
 
-const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => <DefaultLayout>{children}</DefaultLayout>
+const DashboardSegmentLayout: React.FC<DashboardSegmentLayoutProps> = ({ children }) => (
+  <DefaultLayout>{children}</DefaultLayout>
+)
 
 export const dynamic = 'force-dynamic'
-export default DashboardLayout
+export default DashboardSegmentLayout
diff --git a/app/src/app/(dashboard)/recipes/page.tsx b/app/src/app/(dashboard)/recipes/page.tsx
@@ -21,7 +21,7 @@ const RecipeListPage: React.FC = () => {
   })
 
   return (
-    <div className="mx-auto max-w-6xl">
+    <div className="max-w-6xl mx-auto">
       <div className="flex flex-col gap-6">
         <div className="flex lg:flex-row flex-col gap-2">
           <Typography.HeadingLevel>

diff --git a/app/src/app/(libraries)/library/[slug]/explore/[[...path]]/page.tsx b/app/src/app/(libraries)/library/[slug]/explore/[[...path]]/page.tsx
@@ -82,9 +82,9 @@ const LibraryExplorePage: React.FC<LibraryExplorePageProps> = ({ params }) => {
   const context = useExplore({ directory: query.file_system_directory.id })
 
   return (
-    <div className="flex lg:flex-row flex-col gap-3">
+    <div className="flex flex-col lg:flex-row gap-3">
       <ExploreContext.Provider value={context}>
-        <div className="flex flex-col flex-1 gap-3">
+        <div className="flex flex-col grow gap-3">
           <Card>
             <Card.Header>
               <Suspense fallback="LOADING...">
@@ -109,10 +109,10 @@ const LibraryExplorePage: React.FC<LibraryExplorePageProps> = ({ params }) => {
         </div>
       </ExploreContext.Provider>
 
-      <div className="flex flex-col gap-3">
-        <Card className="h-fit lg:w-80">
+      <div className="flex flex-col gap-3 w-80">
+        <Card>
           <Card.Header>
-            <Typography.Text as="strong">Resolution</Typography.Text>
+            <Typography.Text>Resolution</Typography.Text>
           </Card.Header>
 
           <Card.Body>

diff --git a/app/src/app/(libraries)/library/[slug]/explore/layout.tsx b/app/src/app/(libraries)/library/[slug]/explore/layout.tsx
@@ -1,7 +1,7 @@
 type LibrarySlugExplorePageLayoutProps = React.PropsWithChildren
 
 const LibrarySlugExplorePageLayout: React.FC<LibrarySlugExplorePageLayoutProps> = ({ children }) => (
-  <div className="mx-auto max-w-6xl">{children}</div>
+  <div className="max-w-6xl mx-auto">{children}</div>
 )
 
 export default LibrarySlugExplorePageLayout
diff --git a/app/src/app/(libraries)/library/[slug]/page.tsx b/app/src/app/(libraries)/library/[slug]/page.tsx
@@ -33,7 +33,7 @@ const LibraryDashboard = () => {
   })
 
   return (
-    <Card className="max-w-6xl">
+    <Card className="max-w-6xl mx-auto">
       <Card.Header>Tasks</Card.Header>
 
       <Suspense>

diff --git a/app/src/components/layouts/dashboard/navbar/Navbar.tsx b/app/src/components/layouts/dashboard/navbar/Navbar.tsx
@@ -4,7 +4,7 @@ import { Input, Navigation } from '@giantnodes/react'
 import { IconBell, IconSearch } from '@tabler/icons-react'
 
 const Navbar: React.FC<NavigationProps> = (props) => (
-  <Navigation orientation="horizontal" {...props}>
+  <Navigation isBordered orientation="horizontal" {...props}>
     <Navigation.Segment className="grow">
       <Navigation.Item>
         <Input.Group>

diff --git a/app/src/components/layouts/dashboard/sidebar/SettingsSidebar.tsx b/app/src/components/layouts/dashboard/sidebar/SettingsSidebar.tsx
@@ -2,7 +2,6 @@
 
 import { Navigation } from '@giantnodes/react'
 import { IconHomeCog, IconServerCog, IconUserCog } from '@tabler/icons-react'
-import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 const SettingSidebar: React.FC = () => {
@@ -11,36 +10,30 @@ const SettingSidebar: React.FC = () => {
   const route = router.split('/')[2]
 
   return (
-    <Navigation orientation="vertical" size="md">
+    <Navigation isBordered orientation="vertical" size="md">
       <Navigation.Segment>
         <Navigation.Title>Settings</Navigation.Title>
       </Navigation.Segment>
 
       <Navigation.Segment>
-        <Navigation.Item>
-          <Link legacyBehavior passHref href="/settings/general">
-            <Navigation.Link isSelected={route === 'general'}>
-              <IconHomeCog size={20} /> General
-            </Navigation.Link>
-          </Link>
+        <Navigation.Item isSelected={route === 'general'}>
+          <Navigation.Link href="/settings/general">
+            <IconHomeCog size={20} /> General
+          </Navigation.Link>
         </Navigation.Item>
 
-        <Navigation.Item>
-          <Link legacyBehavior passHref href="/settings/preferences">
-            <Navigation.Link isSelected={route === 'preferences'}>
-              <IconUserCog size={20} />
-              Preferences
-            </Navigation.Link>
-          </Link>
+        <Navigation.Item isSelected={route === 'preferences'}>
+          <Navigation.Link href="/settings/preferences">
+            <IconUserCog size={20} />
+            Preferences
+          </Navigation.Link>
         </Navigation.Item>
 
-        <Navigation.Item>
-          <Link legacyBehavior passHref href="/settings/encoder">
-            <Navigation.Link isSelected={route === 'encoder'}>
-              <IconServerCog size={20} />
-              Encoder
-            </Navigation.Link>
-          </Link>
+        <Navigation.Item isSelected={route === 'encoder'}>
+          <Navigation.Link href="/settings/encoder">
+            <IconServerCog size={20} />
+            Encoder
+          </Navigation.Link>
         </Navigation.Item>
       </Navigation.Segment>
     </Navigation>

diff --git a/app/src/components/layouts/dashboard/sidebar/Sidebar.tsx b/app/src/components/layouts/dashboard/sidebar/Sidebar.tsx
@@ -35,20 +35,20 @@ const Sidebar: React.FC<SidebarProps> = ({ $key, ...rest }) => {
   const route = router.split('/')[1]
 
   return (
-    <Navigation orientation="vertical" size="lg" {...rest}>
+    <Navigation isBordered orientation="vertical" size="lg" {...rest}>
       <Navigation.Brand>
         <Image priority alt="giantnodes logo" height={40} src="/images/giantnodes-logo.png" width={128} />
       </Navigation.Brand>
 
       <Navigation.Segment>
-        <Navigation.Item>
-          <Navigation.Link href="/" isSelected={route === ''}>
+        <Navigation.Item isSelected={route === ''}>
+          <Navigation.Link href="/">
             <IconGauge size={20} /> Dashboard
           </Navigation.Link>
         </Navigation.Item>
 
-        <Navigation.Item>
-          <Navigation.Link href="/recipes" isSelected={route === 'recipes'}>
+        <Navigation.Item isSelected={route === 'recipes'}>
+          <Navigation.Link href="/recipes">
             <IconTransform size={20} /> Recipes
           </Navigation.Link>
         </Navigation.Item>
@@ -68,8 +68,8 @@ const Sidebar: React.FC<SidebarProps> = ({ $key, ...rest }) => {
       </Navigation.Segment>
 
       <Navigation.Segment className="mt-auto">
-        <Navigation.Item>
-          <Navigation.Link href="/settings/general" isSelected={route === 'settings'}>
+        <Navigation.Item isSelected={route === 'settings'}>
+          <Navigation.Link href="/settings/general">
             <IconSettings size={20} /> Settings
           </Navigation.Link>
         </Navigation.Item>

diff --git a/app/src/components/layouts/dashboard/sidebar/SidebarLibrarySegment.tsx b/app/src/components/layouts/dashboard/sidebar/SidebarLibrarySegment.tsx
@@ -9,7 +9,6 @@ import type { AvatarProps } from '@giantnodes/react'
 
 import { Avatar, Navigation } from '@giantnodes/react'
 import { IconFolderCheck, IconFolderExclamation, IconFolderQuestion, IconFolderX } from '@tabler/icons-react'
-import Link from 'next/link'
 import { graphql, usePaginationFragment } from 'react-relay'
 
 const FRAGMENT = graphql`
@@ -78,16 +77,14 @@ const SidebarLibrarySegment: React.FC<SidebarLibrarySegmentProps> = ({ $key }) =
     <>
       {data?.libraries?.edges?.map((edge) => (
         <Navigation.Item key={edge.node.id}>
-          <Link legacyBehavior passHref href={`/library/${edge.node.slug}/explore`}>
-            <Navigation.Link>
-              <Avatar radius="md" size="sm">
-                <Avatar.Notification color={getDriveStatusColor(edge.node.status)} />
-                <Avatar.Icon icon={getDriveStatusIcon(edge.node.status)} />
-              </Avatar>
+          <Navigation.Link href={`/library/${edge.node.slug}/explore`}>
+            <Avatar radius="md" size="sm">
+              <Avatar.Notification color={getDriveStatusColor(edge.node.status)} />
+              <Avatar.Icon icon={getDriveStatusIcon(edge.node.status)} />
+            </Avatar>
 
-              {edge.node.name}
-            </Navigation.Link>
-          </Link>
+            {edge.node.name}
+          </Navigation.Link>
         </Navigation.Item>
       ))}
 

diff --git a/app/src/components/layouts/library/navbar/Navbar.tsx b/app/src/components/layouts/library/navbar/Navbar.tsx
@@ -6,7 +6,7 @@ import { Input, Navigation } from '@giantnodes/react'
 import { IconBell, IconSearch } from '@tabler/icons-react'
 
 const Navbar: React.FC<NavigationProps> = (props) => (
-  <Navigation orientation="horizontal" {...props}>
+  <Navigation isBordered orientation="horizontal" {...props}>
     <Navigation.Segment className="flex-grow">
       <Navigation.Item>
         <Input.Group>

diff --git a/app/src/components/layouts/library/sidebar/SettingSidebar.tsx b/app/src/components/layouts/library/sidebar/SettingSidebar.tsx
@@ -2,7 +2,6 @@
 
 import { Navigation } from '@giantnodes/react'
 import { IconHomeCog } from '@tabler/icons-react'
-import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 import { useLibraryContext } from '@/app/(libraries)/library/[slug]/use-library.hook'
@@ -14,19 +13,17 @@ const SettingSidebar: React.FC = () => {
   const route = router.split('/')[4]
 
   return (
-    <Navigation orientation="vertical" size="md">
+    <Navigation isBordered orientation="vertical" size="md">
       <Navigation.Segment>
         <Navigation.Title>Settings</Navigation.Title>
       </Navigation.Segment>
 
       <Navigation.Segment>
-        <Navigation.Item>
-          <Link legacyBehavior passHref href={`/library/${library.slug}/settings/general`}>
-            <Navigation.Link isSelected={route === 'general'}>
-              <IconHomeCog size={20} />
-              General
-            </Navigation.Link>
-          </Link>
+        <Navigation.Item isSelected={route === 'general'}>
+          <Navigation.Link href={`/library/${library.slug}/settings/general`}>
+            <IconHomeCog size={20} />
+            General
+          </Navigation.Link>
         </Navigation.Item>
       </Navigation.Segment>
     </Navigation>

diff --git a/app/src/components/layouts/library/sidebar/Sidebar.tsx b/app/src/components/layouts/library/sidebar/Sidebar.tsx
@@ -5,7 +5,6 @@ import type { NavigationProps } from '@giantnodes/react'
 import { Navigation } from '@giantnodes/react'
 import { IconFolders, IconGauge, IconHome, IconSettings } from '@tabler/icons-react'
 import Image from 'next/image'
-import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 import { useLibraryContext } from '@/app/(libraries)/library/[slug]/use-library.hook'
@@ -17,46 +16,38 @@ const Sidebar: React.FC<NavigationProps> = ({ ...rest }) => {
   const route = router.split('/')[3]
 
   return (
-    <Navigation orientation="vertical" size="sm" {...rest}>
+    <Navigation isBordered orientation="vertical" size="sm" {...rest}>
       <Navigation.Brand>
         <Image priority alt="giantnodes logo" height={40} src="/images/giantnodes-logo.png" width={128} />
       </Navigation.Brand>
 
       <Navigation.Segment>
         <Navigation.Item>
-          <Link legacyBehavior passHref href="/">
-            <Navigation.Link>
-              <IconHome strokeWidth={1.5} />
-            </Navigation.Link>
-          </Link>
+          <Navigation.Link href="/">
+            <IconHome href="/" strokeWidth={1.5} />
+          </Navigation.Link>
         </Navigation.Item>
 
         <Navigation.Divider />
 
-        <Navigation.Item>
-          <Link legacyBehavior passHref href={`/library/${library.slug}`}>
-            <Navigation.Link isSelected={route === undefined}>
-              <IconGauge strokeWidth={1.5} />
-            </Navigation.Link>
-          </Link>
+        <Navigation.Item isSelected={route === undefined}>
+          <Navigation.Link href={`/library/${library.slug}`}>
+            <IconGauge strokeWidth={1.5} />
+          </Navigation.Link>
         </Navigation.Item>
 
-        <Navigation.Item>
-          <Link legacyBehavior passHref href={`/library/${library.slug}/explore`}>
-            <Navigation.Link isSelected={route === 'explore'}>
-              <IconFolders strokeWidth={1.5} />
-            </Navigation.Link>
-          </Link>
+        <Navigation.Item isSelected={route === 'explore'}>
+          <Navigation.Link href={`/library/${library.slug}/explore`}>
+            <IconFolders strokeWidth={1.5} />
+          </Navigation.Link>
         </Navigation.Item>
       </Navigation.Segment>
 
       <Navigation.Segment className="mt-auto">
-        <Navigation.Item>
-          <Link legacyBehavior passHref href={`/library/${library.slug}/settings/general`}>
-            <Navigation.Link isSelected={route === 'settings'}>
-              <IconSettings strokeWidth={1.5} />
-            </Navigation.Link>
-          </Link>
+        <Navigation.Item isSelected={route === 'settings'}>
+          <Navigation.Link href={`/library/${library.slug}/settings/general`}>
+            <IconSettings strokeWidth={1.5} />
+          </Navigation.Link>
         </Navigation.Item>
       </Navigation.Segment>
     </Navigation>