feat: implement comp Filter at the expense of SidebarLayout

src/components/layouts/primary/PrimaryLayout.tsx

@@ -2,6 +2,7 @@ import Head from 'next/head';
 import { ReactElement } from 'react';
 import styles from './PrimaryLayout.module.css';
 import { Inter } from 'next/font/google';
+import Filter from '../../sections/filter/Filter';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -37,7 +38,10 @@ const PrimaryLayout: React.FC<IPrimaryLayout> = ({
         <link rel="manifest" href="/site.webmanifest" />
         <title>{title}</title>
       </Head>
-      <main className={`${styles.main} ${inter.className}`}>{children}</main>
+      <main className={`${styles.main} ${inter.className}`}>
+        <Filter />
+        {children}
+      </main>
     </>
   );
 };

src/components/sections/filter/Filter.data.ts

@@ -0,0 +1,9 @@
+import { IFilter } from './Filter';
+
+const base: IFilter = {
+  sampleTextProp: 'Hello world!'
+};
+
+export const filterData = {
+  base
+};

src/components/sections/filter/Filter.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Filter from './Filter';
+import { filterData } from './Filter.data';
+
+const meta: Meta<typeof Filter> = {
+  title: 'sections/Filter',
+  component: Filter,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Filter>;
+
+export const Base: Story = {
+  args: {
+    ...filterData.base
+  }
+};

src/components/layouts/sidebar/SidebarLayout.tsx → src/components/sections/filter/Filter.tsx

@@ -1,7 +1,11 @@
 import Link from 'next/link';
-import styles from './SidebarLayout.module.css';
+import styles from './Filter.module.css';
 
-const SidebarLayout: React.FC = () => {
+export interface IFilter {
+  sampleTextProp: string;
+}
+
+const Filter: React.FC<IFilter> = ({ sampleTextProp }) => {
   return (
     <nav className={styles.nav}>
       <input className={styles.input} placeholder="Search..." />
@@ -12,4 +16,4 @@ const SidebarLayout: React.FC = () => {
   );
 };
 
-export default SidebarLayout;
+export default Filter;

src/pages/index.tsx

@@ -1,15 +1,12 @@
 import Gallery from '@/components/sections/gallery/Gallery';
 import PrimaryLayout from '../components/layouts/primary/PrimaryLayout';
-import SidebarLayout from '../components/layouts/sidebar/SidebarLayout';
 import styles from '../styles/Home.module.css';
 import { NextPageWithLayout } from './_app';
 
 const Home: NextPageWithLayout = () => {
   return (
     <section className={styles.main}>
-      <h1 className={styles.title}>
-        Welcome to <a href="https://nextjs.org">Next.js!</a>
-      </h1>
+      <h1 className={styles.title}>Search and Filter</h1>
       <Gallery />
     </section>
   );
@@ -18,10 +15,5 @@ const Home: NextPageWithLayout = () => {
 export default Home;
 
 Home.getLayout = page => {
-  return (
-    <PrimaryLayout title="Search and Filter">
-      <SidebarLayout />
-      {page}
-    </PrimaryLayout>
-  );
+  return <PrimaryLayout title="Search and Filter">{page}</PrimaryLayout>;
 };