Merge pull request #10 from softnetics/supakorn/fix/routing

fix: add routable main collections home page

Author: SupakornNetsuwan

packages/next/src/components/collection-sidebar/index.tsx

@@ -25,7 +25,8 @@ export async function AppSidebar({ collections }: { collections: Collection[] })
       intent="inset"
       className="flex gap-y-12 p-0 py-6 group-[:not([data-sidebar-state=collapsed])]/sidebar-container:p-6"
     >
-      <SidebarHeader className="border-border m-0 size-auto border-b pl-6">
+      {/* TODO: Make sidebar variations, so we won't need an important css flag */}
+      <SidebarHeader className="border-border m-0 size-auto! border-b pl-6 h-auto! w-full!">
         <div className="flex h-[68px] items-center gap-x-4">
           <div className="bg-primary/15 dark:bg-primary/20 border-primary dark:border-primary/40 relative flex overflow-clip rounded-md border p-4">
             <div className="bg-primary/20 absolute -inset-x-[25%] inset-y-0 m-auto h-2 -translate-x-4 -translate-y-4 -rotate-45 blur-[3px]" />

packages/next/src/config.tsx

@@ -8,6 +8,7 @@ import { createApiResourceRouter } from './resource'
 import { AuthLayout } from './views/auth/layout'
 import { SignInView } from './views/auth/sign-in'
 import { CreateView } from './views/collections/create'
+import { HomeView } from './views/collections/home'
 import { CollectionLayout } from './views/collections/layout'
 import { ListView } from './views/collections/list'
 import { OneView } from './views/collections/one'
@@ -47,6 +48,16 @@ export function wrapNextJs<
 ): NextJsServerConfig<TFullSchema, TContext, TCollections, TApiRouter> {
   const radixRouter = createRouter<{ view: (args: any) => ReactNode }>()
 
+  radixRouter.insert('/collections', {
+    view(args: { serverConfig: ServerConfig }) {
+      return (
+        <CollectionLayout serverConfig={args.serverConfig}>
+          <HomeView serverConfig={args.serverConfig} />
+        </CollectionLayout>
+      )
+    },
+  })
+
   // Collection
   radixRouter.insert(`/collections/:slug`, {
     view: (args: {

packages/next/src/pages/home.tsx …ages/next/src/views/collections/home.tsxpackages/next/src/pages/home.tsx renamed to packages/next/src/views/collections/home.tsx packages/next/src/pages/home.tsx renamed to packages/next/src/views/collections/home.tsx

@@ -5,8 +5,8 @@ import 'server-only'
  */
 import type { ServerConfig } from '@kivotos/core'
 
-import { CollectionCard } from '../components/collection-card'
-import { Typography } from '../components/primitives/typography'
+import { CollectionCard } from '../../components/collection-card'
+import { Typography } from '../../components/primitives/typography'
 
 const greeting = () => {
   const time = new Date().getHours()
@@ -26,7 +26,7 @@ type HomepageProps = {
   serverConfig: ServerConfig
 }
 
-export const HomePage = ({ serverConfig }: HomepageProps) => {
+export const HomeView = ({ serverConfig }: HomepageProps) => {
   const collections = serverConfig.collections.map((col) => col.slug)
 
   return (