From ae75b6b9b8a1eeb5cece26be1f1cc8c03efd48b8 Mon Sep 17 00:00:00 2001 From: John Doe Date: Tue, 12 Sep 2023 17:31:15 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Implemented=20new=20fea?= =?UTF-8?q?tures=20=F0=9F=93=A6=20Updated=20dependencies=20=F0=9F=90=9B=20?= =?UTF-8?q?Fixed=20a=20bug=20in=20the=20code=20=F0=9F=93=9D=20Improved=20d?= =?UTF-8?q?ocumentation=20=F0=9F=9A=80=20Ready=20for=20the=20next=20releas?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/blog/[...slug]/layout.tsx | 7 + src/app/blog/[...slug]/page.tsx | 319 ++++++++++++++++++++++++++++++ 2 files changed, 326 insertions(+) create mode 100644 src/app/blog/[...slug]/layout.tsx create mode 100644 src/app/blog/[...slug]/page.tsx diff --git a/src/app/blog/[...slug]/layout.tsx b/src/app/blog/[...slug]/layout.tsx new file mode 100644 index 0000000..f628112 --- /dev/null +++ b/src/app/blog/[...slug]/layout.tsx @@ -0,0 +1,7 @@ +export default function DashboardLayout({ + children, // will be a page or nested layout +}: { + children: React.ReactNode; +}) { + return
{children}
; +} diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx new file mode 100644 index 0000000..2a8b0ad --- /dev/null +++ b/src/app/blog/[...slug]/page.tsx @@ -0,0 +1,319 @@ +import React from "react"; +import { DEMO_POSTS } from "@/data/posts"; +import { PostDataType } from "@/data/types"; +import Avatar from "@/shared/Avatar"; +import Badge from "@/shared/Badge"; +import ButtonPrimary from "@/shared/ButtonPrimary"; +import ButtonSecondary from "@/shared/ButtonSecondary"; +import Comment from "@/shared/Comment"; +import SocialsList from "@/shared/SocialsList"; +import Textarea from "@/shared/Textarea"; +import Image from "next/image"; +import travelhero2Image from "@/images/travelhero2.png"; +import Link from "next/link"; +import { Route } from "@/routers/types"; + +const Page = ({ + params, + searchParams, +}: { + params: { stepIndex: string }; + searchParams?: { [key: string]: string | string[] | undefined }; +}) => { + const renderHeader = () => { + return ( +
+
+ +

+ Keep up the spirit of the desire to travel around the world +

+ + We’re an online magazine dedicated to covering the best in + international product design. We started as a little blog back in + 2002 covering student work and over time + + +
+
+
+ +
+ +
+ + May 20, 2021 + + · + + 6 min read + +
+
+
+
+ +
+
+
+
+ ); + }; + + const renderContent = () => { + return ( +
+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel + officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor + distinctio veritatis sapiente, minima corrupti dolores necessitatibus + suscipit accusantium dignissimos culpa cumque. +

+

+ It is a long established fact that a reader will be + distracted by the readable content of a page when looking at its{" "} + layout. The point of using Lorem Ipsum is that it has + a more-or-less normal{" "} + + distribution of letters. + {" "} +

+
    +
  1. We want everything to look good out of the box.
    2. +
  2. + {` Really just the first reason, that's the whole point of the plugin.`} +
    3. +
  3. + {` Here's a third pretend reason though a list with three items looks + more realistic than a list with two items.`} +
    4. +
+

Typography should be easy

+

+ {`So that's a header for you — with any luck if we've done our job + correctly that will look pretty reasonable.`} +

+

Something a wise person once told me about typography is:

+
+

+ {` Typography is pretty important if you don't want your stuff to look + like trash. Make it good then it won't be bad.`} +

+
+

+ {` It's probably important that images look okay here by default as well:`} +

+
+ blog +
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel + officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor + distinctio veritatis sapiente +
+
+

+ {` Now I'm going to show you an example of an unordered list to make sure + that looks good, too:`} +

+ +

{`And that's the end of this section.`}

+

Code should look okay by default.

+

+ I think most people are going to use{" "} + highlight.js or{" "} + Prism{" "} + {`or something if they want to + style their code blocks but it wouldn't hurt to make them look`}{" "} + okay out of the box, even with no syntax highlighting. +

+

+ {` What I've written here is probably long enough, but adding this final + sentence can't hurt.`} +

+ +

Hopefully that looks good enough to you.

+

We still need to think about stacked headings though.

+ +

+ Phew, with any luck we have styled the headings above this text and + they look pretty good. +

+
+ ); + }; + + const renderTags = () => { + return ( +
+ + Garden + + + Jewelry + + + Tools + +
+ ); + }; + + const renderAuthor = () => { + return ( +
+
+ +
+ + WRITEN BY + +

+ Fones Mimi +

+ + There’s no stopping the tech giant. Apple now opens its 100th + store in China.There’s no stopping the tech giant. + + Readmore + + +
+
+
+ ); + }; + + const renderCommentForm = () => { + return ( +
+

+ Responses (14) +

+
+