From a36691e05db9372ed403d212bb701fb3a742902e Mon Sep 17 00:00:00 2001
From: astrit <am@astrit.co>
Date: Thu, 9 Jan 2025 11:55:37 +0100
Subject: [PATCH] Add some updates to examples

---
 apps/docs/app/component/[slug]/layout.tsx     |  9 +++++++--
 .../content/component/radiobutton/index.mdx   |  2 +-
 apps/docs/design/example/input.tsx            | 20 ++++++++++++++-----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/apps/docs/app/component/[slug]/layout.tsx b/apps/docs/app/component/[slug]/layout.tsx
index d8da389763..f2b82caa90 100644
--- a/apps/docs/app/component/[slug]/layout.tsx
+++ b/apps/docs/app/component/[slug]/layout.tsx
@@ -25,6 +25,11 @@ import { toast } from 'sonner'
 
 import * as ICONS from '@sebgroup/green-react/src/lib/icon/icons'
 
+// Dynamic component props
+type DynamicComponentProps = {
+  hero?: boolean // Define the hero prop
+}
+
 export default function ComponentLayout({
   children,
   params,
@@ -95,7 +100,7 @@ export default function ComponentLayout({
   ]
 
   const getDynamicComponent = (c: string) =>
-    dynamic(
+    dynamic<DynamicComponentProps>(
       () =>
         import(`../../../design/example/${c}`).catch(() => {
           const ExampleComponent = () => <div>Example</div>
@@ -274,7 +279,7 @@ export default function ComponentLayout({
                   justify-content="center"
                   height="360px"
                 >
-                  <Preview />
+                  <Preview hero={true} />
                 </GdsFlex>
               </GdsCard>
             </GdsFlex>
diff --git a/apps/docs/content/component/radiobutton/index.mdx b/apps/docs/content/component/radiobutton/index.mdx
index 0b34fe8b56..e91f1ef624 100644
--- a/apps/docs/content/component/radiobutton/index.mdx
+++ b/apps/docs/content/component/radiobutton/index.mdx
@@ -14,7 +14,7 @@ The benefit of using radio buttons over select is that users may easily scan the
 - **Contained:** used only in combination with other contained form components.
 - **Contained extended:** The contained version but including Label support text.
 
-<Grid columns={3} gap="s">
+<Grid columns="3" gap="s">
 <Figma node="3024-9506" caption="Default" />
 <Figma node="3024-9508" caption="Contained" />
 <Figma node="3024-9510" caption="Contained extended" />
diff --git a/apps/docs/design/example/input.tsx b/apps/docs/design/example/input.tsx
index 317e12ea76..5a7d4d8877 100644
--- a/apps/docs/design/example/input.tsx
+++ b/apps/docs/design/example/input.tsx
@@ -1,12 +1,22 @@
 'use client'
 
-import { GdsInput } from '$/import/components'
+import { GdsFlex, GdsInput } from '$/import/components'
 import { IconCreditCard } from '$/import/icons'
 
-const Input = () => (
-  <GdsInput label="Input" value=" " clearable>
-    <IconCreditCard slot="lead" />
-  </GdsInput>
+const Input = ({ hero }: { hero?: boolean }) => (
+  <>
+    {hero ? (
+      <GdsFlex>
+        <GdsInput label="Input" value=" " clearable>
+          <IconCreditCard slot="lead" />
+        </GdsInput>
+      </GdsFlex>
+    ) : (
+      <GdsInput label="Input" value=" " clearable>
+        <IconCreditCard slot="lead" />
+      </GdsInput>
+    )}
+  </>
 )
 
 export default Input