spoko-design-system 0.2.30 → 0.2.33

package/src/pages/components/input.mdx

@@ -1,46 +1,46 @@
----
-title: Input
-layout: ../../layouts/MainLayout.astro
----
-import MainInput from '../../components/MainInput.vue'
-
-# Input text
-
-<div class="component-preview">
-    <MainInput label="Name"></MainInput>
-</div>
-
-```js
-<MainInput type="text" value="Hello world!"></MainInput>
-```
-
-
-
-<div class="component-preview">
-
-<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
-    <div class="relative">
-        <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-        <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
-    </div>
-
-    <div class="relative z-0">
-        <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-        <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
-    </div>
-</div>
-
-</div>
-
-
-```js
-<div class="relative">
-    <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-    <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
-</div>
-
-<div class="relative z-0">
-    <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-    <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
-</div>
+---
+title: Input
+layout: ../../layouts/MainLayout.astro
+---
+import MainInput from '../../components/MainInput.vue'
+
+# Input text
+
+<div class="component-preview">
+    <MainInput label="Name"></MainInput>
+</div>
+
+```js
+<MainInput type="text" value="Hello world!"></MainInput>
+```
+
+
+
+<div class="component-preview">
+
+<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
+    <div class="relative">
+        <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+    </div>
+
+    <div class="relative z-0">
+        <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+    </div>
+</div>
+
+</div>
+
+
+```js
+<div class="relative">
+    <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+</div>
+
+<div class="relative z-0">
+    <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+</div>
 ```

package/src/pages/components/jumbatron.mdx

@@ -1,95 +1,95 @@
----
-title: "Jumbatron"
-layout: "../../layouts/MainLayout.astro"
----
-import Jumbatron from '../../components/Jumbatron.vue'
-import Button from '../../components/Button.vue'
-
-# Jumbatron
-
-A jumbotron indicates a big box for calling extra attention to some special content or information.
-
-Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
-
-## Jumbatron - classic
-<div class="component-preview">
-    <Jumbatron class="w-full"  intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
-        <p slot="subtitle"
-          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-        <Button primary slot="cta" rounded
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
-        <span slot="intro" set:html= />
-        <p slot="subtitle"
-          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-          set:html="subtitle"
-        />
-        <Button primary slot="cta" rounded
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-```
-
-## Small Jumbatron
-
-<div class="component-preview">
-    <Jumbatron class="w-full" small intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron small intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
-       
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="subtitle"
-        />
-        <Button primary slot="cta"
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-```
-
-
-## Small Jumbatron - custom slot intro instead of prop
-<div class="component-preview">
-    <Jumbatron class="w-full" small >
-        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">Lorem ipsum dolor sit amet, <span class="text-lightBlue-500">consectetur</span> adipiscing elit.</h2>
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron class="w-full" small >
-        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">
-          Lorem ipsum dolor sit amet, <span class="text-lightBlue-500">consectetur</span> adipiscing elit.
-        </h2>
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-    </Jumbatron>
-```
+---
+title: "Jumbatron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbatron from '../../components/Jumbatron.vue'
+import Button from '../../components/Button.vue'
+
+# Jumbatron
+
+A jumbotron indicates a big box for calling extra attention to some special content or information.
+
+Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
+
+## Jumbatron - classic
+<div class="component-preview">
+    <Jumbatron class="w-full"  intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+        <Button primary slot="cta" rounded
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
+        <span slot="intro" set:html= />
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+          set:html="subtitle"
+        />
+        <Button primary slot="cta" rounded
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+```
+
+## Small Jumbatron
+
+<div class="component-preview">
+    <Jumbatron class="w-full" small intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron small intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
+       
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="subtitle"
+        />
+        <Button primary slot="cta"
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+```
+
+
+## Small Jumbatron - custom slot intro instead of prop
+<div class="component-preview">
+    <Jumbatron class="w-full" small >
+        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">Lorem ipsum dolor sit amet, <span class="text-lightBlue-500">consectetur</span> adipiscing elit.</h2>
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron class="w-full" small >
+        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">
+          Lorem ipsum dolor sit amet, <span class="text-lightBlue-500">consectetur</span> adipiscing elit.
+        </h2>
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+    </Jumbatron>
+```

package/src/pages/components/modal.mdx

@@ -1,64 +1,64 @@
----
-title: "Modal"
-layout: "../../layouts/MainLayout.astro"
----
-import Modal from '../../components/Modal.astro'
-import Button from '../../components/Button.vue'
-import { Icon } from 'astro-icon/components';
-
-
-# Modal
-
-Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
-#
-**Documentation:**
-
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
-- https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
-
-## Modal window
-
-
-<div class="component-preview">
-     <Modal id="dialog" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-               <hr />
-          </main>
-          <Button primary slot="close" class="mt-4">Close</Button>
-     </Modal>
-</div>
-
-```js
-<Modal id="dialog" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <hr />
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
-    <Button primary slot="close" class="mt-4">Close</Button>
-</Modal>
-```
-
-## Modal with different close button
-
-<div class="component-preview">
-     <Modal id="dialog2" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-          </main>
-     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
-     </Modal>
-</div>
-
-```js
-<Modal id="dialog2" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
-     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
-</Modal>
-```
-
-
+---
+title: "Modal"
+layout: "../../layouts/MainLayout.astro"
+---
+import Modal from '../../components/Modal.astro'
+import Button from '../../components/Button.vue'
+import { Icon } from 'astro-icon/components';
+
+
+# Modal
+
+Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
+#
+**Documentation:**
+
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+- https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
+
+## Modal window
+
+
+<div class="component-preview">
+     <Modal id="dialog" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+               <hr />
+          </main>
+          <Button primary slot="close" class="mt-4">Close</Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <hr />
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+    <Button primary slot="close" class="mt-4">Close</Button>
+</Modal>
+```
+
+## Modal with different close button
+
+<div class="component-preview">
+     <Modal id="dialog2" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+          </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog2" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+</Modal>
+```
+
+

package/src/pages/components/post-header.mdx

@@ -1,60 +1,60 @@
----
-title: "PostHeader"
-layout: "../../layouts/MainLayout.astro"
----
-import PostHeader from '../../components/PostHeader.astro'
-export const author = { firstName: 'Szymon', name: 'CNK' } 
-export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
-export const date = "2023-07-13T01:35:03"
-
-# PostHeader
-
-WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
-
-
-## PostHeader with some content for WordPress single page template
-
-<div class="component-preview">
-  <div class="relative w-full">
-    <PostHeader
-      author={author}
-      categories={categories}
-      title="Lorem Ipsum"
-      date={date}
-      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
-    />
-  </div>
-</div>
-
-```js
-  <div class="relative">
-    <PostHeader
-      author={ { firstName: 'Szymon', name: 'CNK' }  }
-      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
-            title="Lorem Ipsum"
-      date="2023-07-13T01:35:03"
-      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
-    />
-  </div>
-```
-
-
-## PostHeader - only title
-
-<div class="component-preview">
-  <div class="relative w-full">
-    <PostHeader
-      title="Lorem Ipsum"
-      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
-    />
-  </div>
-</div>
-
-```js
-  <div class="relative">
-    <PostHeader
-      title="Lorem Ipsum"
-      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
-    />
-  </div>
-```
+---
+title: "PostHeader"
+layout: "../../layouts/MainLayout.astro"
+---
+import PostHeader from '../../components/PostHeader.astro'
+export const author = { firstName: 'Szymon', name: 'CNK' } 
+export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
+export const date = "2023-07-13T01:35:03"
+
+# PostHeader
+
+WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
+
+
+## PostHeader with some content for WordPress single page template
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      author={author}
+      categories={categories}
+      title="Lorem Ipsum"
+      date={date}
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      author={ { firstName: 'Szymon', name: 'CNK' }  }
+      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
+            title="Lorem Ipsum"
+      date="2023-07-13T01:35:03"
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+```
+
+
+## PostHeader - only title
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      title="Lorem Ipsum"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      title="Lorem Ipsum"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+```