Fix topbar

Remove dependency from topbar to add styles to links.

packages/base/src/plugin-tailwind.ts

@@ -49,14 +49,12 @@ export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions>(
 				'& [data-viewfinder="menu"] > *': {
 					'width': '100%',
 					'height': '100%',
-					'display': 'grid',
-					'place-content': 'center',
+					'position': 'relative',
 				},
 				'& [data-viewfinder="user"] > *': {
 					'width': '100%',
 					'height': '100%',
-					'display': 'grid',
-					'place-content': 'center',
+					'position': 'relative',
 				},
 				[`@media (min-width: ${baseWidth * 3}px)`]: {
 					'& ~ [data-viewfinder="main"] ~ *': {

packages/kitchen-sink/react-next/package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-		"@tesseract-design/viewfinder-base": "workspace:*",
-		"@tesseract-design/viewfinder-react": "workspace:*",
+    "@tesseract-design/viewfinder-base": "workspace:*",
+    "@tesseract-design/viewfinder-react": "workspace:*",
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.0.6",
@@ -21,6 +21,7 @@
     "postcss": "^8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
     "tailwindcss": "^3.3.3",
     "typescript": "5.1.6"
   }

packages/kitchen-sink/react-next/src/pages/layouts/basic.tsx

@@ -22,6 +22,7 @@ const BasicLayoutPage: NextPage<BaseLayoutPageProps> = ({
           span={span}
           userLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               href={{
                 query: {
                   open: 'sidebar',

packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar-with-menu.tsx

@@ -167,6 +167,7 @@ const LeftSidebarWithMenuLayoutPage: NextPage<LeftSidebarWithMenuLayoutPageProps
           }
           menuLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               href={{
                 query: {
                   open: 'sidebar',
@@ -178,6 +179,7 @@ const LeftSidebarWithMenuLayoutPage: NextPage<LeftSidebarWithMenuLayoutPageProps
           }
           userLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               href={{
                 query: {
                   open: 'sidebar',

packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar.tsx

@@ -71,6 +71,7 @@ const LeftSidebarLayoutPage: NextPage<LeftSidebarLayoutPageProps> = ({
                   open: 'sidebar',
                 },
               }}
+							className="w-full h-full flex items-center justify-center"
             >
 							Menu
             </Link>
@@ -82,6 +83,7 @@ const LeftSidebarLayoutPage: NextPage<LeftSidebarLayoutPageProps> = ({
                   open: 'sidebar',
                 },
               }}
+							className="w-full h-full flex items-center justify-center"
             >
 							User
             </Link>

packages/kitchen-sink/react-next/src/pages/layouts/left-sidebar/alternate.tsx

@@ -130,6 +130,7 @@ const LeftSidebarWithMenuLayoutPage: NextPage<LeftSidebarWithMenuLayoutPageProps
           }
           userLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               href={{
                 query: {
                   open: 'sidebar',

packages/kitchen-sink/react-next/src/pages/layouts/right-sidebar-static.tsx

@@ -55,6 +55,7 @@ const RightSidebarStaticLayoutPage: NextPage = () => {
           }
           userLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               href={{
                 query: {
                   open: 'sidebar',

packages/kitchen-sink/react-remix/app/routes/layouts.basic.tsx

@@ -20,6 +20,7 @@ const BasicLayoutPage = () => {
           userLink={
             <Link
               to="#"
+							className="w-full h-full flex items-center justify-center"
             >
               User
             </Link>

packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar-with-menu.tsx

@@ -47,6 +47,7 @@ const MoreLinkComponent: FC<LinkComponentProps> = ({
 
 const menuLink = (
 	<Link
+		className="w-full h-full flex items-center justify-center"
 		to="?open=sidebar"
 	>
 		Menu
@@ -55,6 +56,7 @@ const menuLink = (
 
 const userLink = (
 	<Link
+		className="w-full h-full flex items-center justify-center"
 		to="?open=sidebar"
 	>
 		User

packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar._index.tsx

@@ -60,6 +60,7 @@ const LeftSidebarLayoutPage = () => {
           }
           menuLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               to="?open=sidebar"
             >
               Menu
@@ -67,6 +68,7 @@ const LeftSidebarLayoutPage = () => {
           }
           userLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               to="#"
             >
               User

packages/kitchen-sink/react-remix/app/routes/layouts.left-sidebar.alternate.tsx

@@ -114,6 +114,7 @@ const LeftSidebarWithMenuLayoutPage = () => {
 					}
 					userLink={
 						<Link
+							className="w-full h-full flex items-center justify-center"
 							to="?open=sidebar"
 						>
 							User

packages/kitchen-sink/react-remix/app/routes/layouts.right-sidebar-static.tsx

@@ -54,6 +54,7 @@ const RightSidebarStaticLayoutPage = () => {
           }
           userLink={
             <Link
+							className="w-full h-full flex items-center justify-center"
               to="#"
             >
               User

pnpm-lock.yaml

@@ -75,6 +75,9 @@ importers:
       react-dom:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
+      react-markdown:
+        specifier: ^8.0.7
+        version: 8.0.7(@types/react@18.2.17)(react@18.2.0)
       tailwindcss:
         specifier: ^3.3.3
         version: 3.3.3
@@ -9155,6 +9158,33 @@ packages:
       - supports-color
     dev: false
 
+  /react-markdown@8.0.7(@types/react@18.2.17)(react@18.2.0):
+    resolution: {integrity: sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+    dependencies:
+      '@types/hast': 2.3.5
+      '@types/prop-types': 15.7.5
+      '@types/react': 18.2.17
+      '@types/unist': 2.0.7
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 2.0.1
+      prop-types: 15.8.1
+      property-information: 6.2.0
+      react: 18.2.0
+      react-is: 18.2.0
+      remark-parse: 10.0.2
+      remark-rehype: 10.1.0
+      space-separated-tokens: 2.0.2
+      style-to-object: 0.4.1
+      unified: 10.1.2
+      unist-util-visit: 4.1.2
+      vfile: 5.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}