DST-450: refactoring, add DemoLink component

src/components/DemoLink.tsx

@@ -0,0 +1,13 @@
+import {Link} from '@tanstack/react-router';
+
+const DemoLink = ({ destination, text = 'View demo'}: {destination: string, text?: string}) => {
+ return (
+ <div className="pb-2">
+ <Link target="_blank" to={destination} search="">
+ {text}
+ </Link>
+ </div>
+ );
+}
+
+export default DemoLink;

src/components/Preview.tsx

@@ -2,7 +2,6 @@ import BreadcrumbsExample from './compoundComponents/Breadcrumbs/BreadcrumbsExam
 import TabsExample from './compoundComponents/Tabs/TabsExample';
 import ServerStateExample from './state-management/ServerState/ServerStateExample';
 import {Route} from '../routes/$component.preview.$example';
-import BackButton from './BackButton';
 
 const components = {
  BreadcrumbsExample,
@@ -16,7 +15,6 @@ const Preview = () => {
 
  return (
  <article className="article-content">
- <BackButton />
  <PreviewComponent/>
  </article>
  )

src/components/compoundComponents/Breadcrumbs/breadcrumbs.mdx

@@ -1,5 +1,3 @@
-import BreadcrumbsExample from './BreadcrumbsExample';
-
 <CH.Scrollycoding>
 
  ```tsx BreadcrumbsExample.tsx
@@ -61,8 +59,6 @@ import BreadcrumbsExample from './BreadcrumbsExample';
 
  ---
 
- ## Connect the components
-
  As final step we need to connect these components.
 
  ```tsx Breadcrumbs.tsx focus=34
@@ -74,12 +70,8 @@ import BreadcrumbsExample from './BreadcrumbsExample';
 
  ---
 
- ## Update BreadcrumbsExample.tsx
-
  Finally we can use this compound component in our BreadcrumbsExample.tsx.
 
-
-
  ```tsx BreadcrumbsExample.tsx
  // from ./BreadcrumbsExample.tsx
  ```
@@ -101,5 +93,3 @@ import BreadcrumbsExample from './BreadcrumbsExample';
  ```
 
 </CH.Scrollycoding>
-
-<div style={{ height: 150 }} />

src/components/compoundComponents/Tabs/tabs.mdx

@@ -1,5 +1,3 @@
-import TabsExample from './TabsExample';
-
 <CH.Scrollycoding>
 
  ```tsx Tabs.tsx focus=5
@@ -51,5 +49,3 @@ import TabsExample from './TabsExample';
  Note: You can add any other elements you want like the `div`. You can also use a completely different arrangement of the elements.
 
 </CH.Scrollycoding>
-
-<div style={{ height: 300 }} />

src/components/compoundComponents/index.mdx

@@ -1,6 +1,6 @@
 import BreadcrumbDoc from './Breadcrumbs/breadcrumbs.mdx';
 import TabsDoc from './Tabs/tabs.mdx';
-import { Link } from '@tanstack/react-router';
+import DemoLink from '../DemoLink';
 
 # Compound components in React
 
@@ -18,6 +18,8 @@ This design approach leads to the following benefits:
 
 - A well-designed React compound component should have very little state management required.
 
+<div className="h-5" />
+
 ## HTML example
 
 A similiar example in HTML are the `<select>` and `<option>` tags:
@@ -32,9 +34,11 @@ A similiar example in HTML are the `<select>` and `<option>` tags:
 
 The select tag works together with the option tag which is used for a drop-down menu to select items in HTML. Here the `<select>` manages the state of the UI, then the `<option>` elements are configured on how the `<select>` should work.
 
+<div className="h-5" />
+
 ## Example 1: Building a compound component
 
-<Link to="/compoundComponent/preview/BreadcrumbsExample">view demo</Link>
+<DemoLink destination="/compoundComponent/preview/BreadcrumbsExample" />
 
 E-commerce websites often have “breadcrumbs” to help the user navigate to parent/grand-parent pages. For example:
 
@@ -43,11 +47,13 @@ E-commerce websites often have “breadcrumbs” to help the user navigate to pa
 ---
 
 <BreadcrumbDoc />
+<div style={{ height: 100 }} />
 
 ## Example 2: Compound component with Context
 
-<Link to="/compoundComponent/preview/TabsExample">view demo</Link>
+<DemoLink destination="/compoundComponent/preview/TabsExample" />
 
 By leveraging React context, we can provide the necessary states and functions to child components without exposing them through props, resulting in a cleaner and more maintainable codebase.
 
 <TabsDoc />
+<div style={{ height: 300 }} />

src/index.css

@@ -5,7 +5,7 @@
  --page-header-height: 56px;
  --xx: 4px;
 
- --page-side-nav-absolute-width: 240px;
+ --page-side-nav-absolute-width: 280px;
 
  --page-side-nav-width: calc(
  var(--page-side-nav-absolute-width) + var(--page-padding)
@@ -139,8 +139,6 @@ h4 {
  hyphens: auto;
 }
 
-
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;