From 515e8dff31a4fdb536e600cc9956f799e02260f3 Mon Sep 17 00:00:00 2001
From: Timo <gasda@amazon.com>
Date: Wed, 9 Aug 2023 16:14:41 +0200
Subject: [PATCH] new approach with limited width

---
 pages/header/responsiveness-2.page.tsx | 36 ++++++++++++++++++++++++++
 pages/header/responsiveness.page.tsx   |  2 +-
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 pages/header/responsiveness-2.page.tsx

diff --git a/pages/header/responsiveness-2.page.tsx b/pages/header/responsiveness-2.page.tsx
new file mode 100644
index 0000000000..6f2ffef857
--- /dev/null
+++ b/pages/header/responsiveness-2.page.tsx
@@ -0,0 +1,36 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable react/jsx-key */
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import Box from '~components/box';
+import Input from '~components/input';
+import FormField from '~components/form-field';
+import ScreenshotArea from '../utils/screenshot-area';
+import styles from './styles.scss';
+import { Showcase } from './responsiveness.page';
+
+export default function PageHeadersDemo() {
+  const [value, setValue] = useState('75');
+  return (
+    <ScreenshotArea>
+      <Box padding="l">
+        <FormField label="Maximum number of characters" stretch={false}>
+          <div style={{ maxWidth: 150 }}>
+            <Input
+              value={value}
+              type="number"
+              onChange={e => {
+                setValue(e.detail.value);
+                document.documentElement.style.setProperty('--header-max-width', `${e.detail.value}ch`);
+              }}
+            />
+          </div>
+        </FormField>
+        <div className={clsx(styles.playground)}>
+          <Showcase approach="current" />
+        </div>
+      </Box>
+    </ScreenshotArea>
+  );
+}
diff --git a/pages/header/responsiveness.page.tsx b/pages/header/responsiveness.page.tsx
index d15ed0980a..febe2b665d 100644
--- a/pages/header/responsiveness.page.tsx
+++ b/pages/header/responsiveness.page.tsx
@@ -231,7 +231,7 @@ const approachDescription: Record<Approach, string> = {
   scott: '',
 };
 
-function Showcase({ approach }: { approach: Approach }) {
+export function Showcase({ approach }: { approach: Approach }) {
   return (
     <div className={styles.showcase}>
       <div>