feat: Sidebar component

artabr · May 31, 2023 · 14b3d52 · 14b3d52
1 parent 267cb2a
commit 14b3d52
Show file tree

Hide file tree

Showing 16 changed files with 190 additions and 99 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import { RecentPost } from '@/components/RecentPost';
+import { BlogPosts } from '@/components/BlogPosts';
 
 const recentPosts = [
   {
@@ -37,6 +38,7 @@ export default function Home() {
           </div>
         </div>
       </section>
+      <BlogPosts />
     </div>
   );
 }
diff --git a/src/components/AboutWidget/AboutWidget.tsx b/src/components/AboutWidget/AboutWidget.tsx
@@ -0,0 +1,24 @@
+import { data } from '@/components/Sidebar/mockData';
+
+export type AboutWidgetProps = {
+  title?: string;
+};
+
+export const AboutWidget = (props: AboutWidgetProps) => {
+  return (
+    <div className="widget">
+      <h4 className="widget-title">{data.aboutPage.title}</h4>
+      {data.aboutPage.params.image && (
+        <img
+          src={data.aboutPage.params.image}
+          alt=""
+          className="img-fluid author-thumb-sm d-block mx-auto rounded-circle mb-4"
+        />
+      )}
+      <p>{data.aboutPage.params.summary}</p>
+      <a href={data.aboutPage.params.permalink} className="btn btn-outline-primary" type="button">
+        Know More
+      </a>
+    </div>
+  );
+};
diff --git a/src/components/AboutWidget/index.ts b/src/components/AboutWidget/index.ts
@@ -0,0 +1 @@
+export * from './AboutWidget';
diff --git a/src/components/AdvertisementWidget/AdvertisementWidget.tsx b/src/components/AdvertisementWidget/AdvertisementWidget.tsx
@@ -0,0 +1,13 @@
+import { data } from '@/components/Sidebar/mockData';
+
+export type AdvertisementWidgetProps = {
+  title?: string;
+};
+
+export const AdvertisementWidget = (props: AdvertisementWidgetProps) => {
+  return (
+    <div className="widget">
+      <img src={data.advertisementImage} alt="" className="img-fluid" />
+    </div>
+  );
+};
diff --git a/src/components/AdvertisementWidget/index.ts b/src/components/AdvertisementWidget/index.ts
@@ -0,0 +1 @@
+export * from './AdvertisementWidget';
diff --git a/src/components/BlogPosts/BlogPosts.tsx b/src/components/BlogPosts/BlogPosts.tsx
@@ -1,6 +1,7 @@
 import { Paginator } from '@/components/Paginator';
 import { Pagination } from '@/components/Pagination';
-import { data } from './mockData';
+import { Sidebar } from '@/components/Sidebar';
+import { pages } from './mockData';
 
 export const BlogPosts = () => {
   return (
@@ -9,7 +10,7 @@ export const BlogPosts = () => {
         <div className="row">
           <div className="col-lg-8 mb-5 mb-lg-0">
             <div className="row">
-              <Paginator pages={data.paginator.pages} />
+              <Paginator pages={pages} />
             </div>
           </div>
           <Sidebar />

diff --git a/src/components/BlogPosts/mockData.ts b/src/components/BlogPosts/mockData.ts
@@ -1,39 +1,31 @@
-export const data = {
-  paginator: {
-    pages: [
-      {
-        params: {
-          image: 'https://example.com/image.jpg',
-          categories: ['category1', 'category2'],
-          permalink: 'https://example.com/post1',
-          title: 'Post 1',
-          summary: 'This is the summary of Post 1',
-          hideDate: false
-        },
-        site: {
-          params: {
-            author: 'John Doe'
-          }
-        },
-        publishDate: new Date()
-      },
-      {
-        params: {
-          image: null,
-          categories: ['category3'],
-          permalink: 'https://example.com/post2',
-          title: 'Post 2',
-          summary: 'This is the summary of Post 2',
-          hideDate: true
-        },
-        site: {
-          params: {
-            author: 'Jane Smith'
-          }
-        },
-        publishDate: new Date()
-      }
-      // Add more pages here if needed
-    ]
+import { Page } from '@/components/Paginator';
+
+export const pages: Page[] = [
+  {
+    title: 'Post 1',
+    publishDate: new Date(),
+    params: {
+      image: 'https://example.com/image.jpg',
+      categories: [
+        { id: '1', title: 'category1' },
+        { id: '2', title: 'category2' }
+      ],
+      permalink: 'https://example.com/post1',
+      summary: 'This is the summary of Post 1',
+      hideDate: false,
+      author: 'John Doe'
+    }
+  },
+  {
+    title: 'Post 2',
+    publishDate: new Date(),
+    params: {
+      image: 'https://example.com/image.jpg',
+      categories: [{ id: '3', title: 'category3' }],
+      permalink: 'https://example.com/post2',
+      summary: 'This is the summary of Post 2',
+      hideDate: true,
+      author: 'Jane Smith'
+    }
   }
-};
+];
diff --git a/src/components/CategoryWidget/CategoryWidget.tsx b/src/components/CategoryWidget/CategoryWidget.tsx
@@ -0,0 +1,22 @@
+import { data } from '@/components/Sidebar/mockData';
+
+export type CategoryWidgetProps = {
+  title?: string;
+};
+
+export const CategoryWidget = (props: CategoryWidgetProps) => {
+  return (
+    <div className="widget">
+      <h4 className="widget-title">Category</h4>
+      {Object.entries(data.categories).length !== 0 && (
+        <ul className="list-unstyled">
+          {Object.entries(data.categories).map(([name, items]) => (
+            <li key={`category-${name}`}>
+              <a href={`/categories/${name.toLowerCase()}/`}>{name}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/CategoryWidget/index.ts b/src/components/CategoryWidget/index.ts
@@ -0,0 +1 @@
+export * from './CategoryWidget';
diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx
@@ -8,7 +8,6 @@ export type Page = {
       id: string;
       title: string;
     }[];
-    title: string;
     author: string;
     hideDate?: boolean;
     summary: string;
@@ -37,7 +36,7 @@ export const Paginator = ({ pages }: PaginatorProps) => {
                 </a>
               ))}
               <a href={page.params.permalink} className="h5 d-block my-3">
-                {page.params.title}
+                {page.title}
               </a>
               <div className="mb-3 post-meta">
                 <span>By {page.params.author}</span>

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -1,58 +1,19 @@
-<div class="col-lg-4">
-  <div class="widgets">
-    <!-- about -->
-    <div class="widget">
-      {{ with .Site.GetPage "/about" }}
-      <h4 class="widget-title">{{ .Title | markdownify }}</h4>
-      {{ if .Params.Image }}
-      <img src="{{ .Params.Image | absURL }}" alt=""
-        class="img-fluid author-thumb-sm d-block mx-auto rounded-circle mb-4">
-      {{ end }}
-      <p>{{ .Summary }}</p>
-      <a href="{{ .Permalink }}" class="btn btn-outline-primary">Know More</a>
-      {{ end }}
+import { AdvertisementWidget } from '@/components/AdvertisementWidget';
+import { AboutWidget } from '@/components/AboutWidget';
+import { CategoryWidget } from '@/components/CategoryWidget';
+import { SocialWidget } from '@/components/SocialWidget';
+import { TagWidget } from '@/components/TagWidget';
+
+export const Sidebar = () => {
+  return (
+    <div className="col-lg-4">
+      <div className="widgets">
+        <AboutWidget />
+        <CategoryWidget />
+        <TagWidget />
+        <SocialWidget />
+        <AdvertisementWidget />
+      </div>
     </div>
-    <!-- category -->
-    <div class="widget">
-      <h4 class="widget-title">Category</h4>
-      {{- if isset .Site.Taxonomies "categories" }}
-      {{- if not (eq (len .Site.Taxonomies.categories) 0) }}
-      <ul class="list-unstyled">
-        {{- range $name, $items := .Site.Taxonomies.categories }}
-        <li><a
-            href="{{ `categories/` | relLangURL }}{{ $name | urlize | lower }}/">{{ $name | title | humanize }}</a>
-        </li>
-        {{- end }}
-      </ul>
-      {{- end }}
-      {{- end }}
-    </div>
-    <!-- Tags -->
-    <div class="widget">
-      <h4 class="widget-title">Tag</h4>
-      {{- if isset .Site.Taxonomies "tags" }}
-      {{- if not (eq (len .Site.Taxonomies.tags) 0) }}
-      <ul class="list-inline">
-        {{- range $name, $items := .Site.Taxonomies.tags }}
-        <li class="list-inline-item"><a class="d-block p-2 bg-primary text-white"
-            href="{{ `tags/` | relLangURL }}{{ $name | urlize | lower }}/">{{ $name | humanize }}</a></li>
-        {{- end }}
-      </ul>
-      {{- end }}
-      {{- end }}
-    </div>
-    <!-- social -->
-    <div class="widget">
-      <h4 class="widget-title">Social</h4>
-      <ul class="list-inline social-links">
-        {{ range .Site.Params.social }}
-        <li class="list-inline-item"><a href="{{ .link | safeURL }}"><i class="{{ .icon }}"></i></a></li>
-        {{ end }}
-      </ul>
-    </div>
-    <!-- advertisement -->
-    <div class="widget">
-      <img src="{{`images/promotion.png` | absURL}}" alt="" class="img-fluid">
-    </div>
-  </div>
-</div>
+  );
+};
diff --git a/src/components/Sidebar/mockData.ts b/src/components/Sidebar/mockData.ts
@@ -0,0 +1,26 @@
+export const data = {
+  aboutPage: {
+    title: 'About Page',
+    params: {
+      image: 'https://example.com/about-image.jpg',
+      summary: 'This is the summary of the about page',
+      permalink: 'https://example.com/about'
+    }
+  },
+  categories: {
+    category1: ['post1', 'post2'],
+    category2: ['post3']
+    // Add more categories here if needed
+  },
+  tags: {
+    tag1: ['post4', 'post5'],
+    tag2: ['post6']
+    // Add more tags here if needed
+  },
+  socialLinks: [
+    { link: 'https://example.com/social-link1', icon: 'fab fa-twitter' },
+    { link: 'https://example.com/social-link2', icon: 'fab fa-facebook' }
+    // Add more social links here if needed
+  ],
+  advertisementImage: 'https://example.com/promotion.png'
+};
diff --git a/src/components/SocialWidget/SocialWidget.tsx b/src/components/SocialWidget/SocialWidget.tsx
@@ -0,0 +1,22 @@
+import { data } from '@/components/Sidebar/mockData';
+
+export type SocialWidgetProps = {
+  title?: string;
+};
+
+export const SocialWidget = (props: SocialWidgetProps) => {
+  return (
+    <div className="widget">
+      <h4 className="widget-title">Social</h4>
+      <ul className="list-inline social-links">
+        {data.socialLinks.map((link, index) => (
+          <li key={`social-link-${index}`} className="list-inline-item">
+            <a href={link.link}>
+              <i className={link.icon} />
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/SocialWidget/index.ts b/src/components/SocialWidget/index.ts
@@ -0,0 +1 @@
+export * from './SocialWidget';
diff --git a/src/components/TagWidget/TagWidget.tsx b/src/components/TagWidget/TagWidget.tsx
@@ -0,0 +1,24 @@
+import { data } from '@/components/Sidebar/mockData';
+
+export type TagWidgetProps = {
+  title?: string;
+};
+
+export const TagWidget = (props: TagWidgetProps) => {
+  return (
+    <div className="widget">
+      <h4 className="widget-title">Tag</h4>
+      {Object.entries(data.tags).length !== 0 && (
+        <ul className="list-inline">
+          {Object.entries(data.tags).map(([name, items]) => (
+            <li key={`tag-${name}`} className="list-inline-item">
+              <a href={`/tags/${name.toLowerCase()}/`} className="d-block p-2 bg-primary text-white">
+                {name}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/TagWidget/index.ts b/src/components/TagWidget/index.ts
@@ -0,0 +1 @@
+export * from './TagWidget';