|
|
|
@ -1,4 +1,6 @@ |
|
|
|
import React from "react"; |
|
|
|
"use client" |
|
|
|
|
|
|
|
import React, { useEffect, useState } from "react"; |
|
|
|
import { DEMO_POSTS } from "@/data/posts"; |
|
|
|
import { PostDataType } from "@/data/types"; |
|
|
|
import Avatar from "@/shared/Avatar"; |
|
|
|
@ -14,6 +16,7 @@ import Link from "next/link"; |
|
|
|
import { Route } from "@/routers/types"; |
|
|
|
import { BiLike , BiDislike } from "react-icons/bi"; |
|
|
|
import Survey from "./Survey"; |
|
|
|
import axiosInstance from "@/components/api/axios"; |
|
|
|
|
|
|
|
const Page = ({ |
|
|
|
params, |
|
|
|
@ -22,7 +25,21 @@ const Page = ({ |
|
|
|
params: { stepIndex: string }; |
|
|
|
searchParams?: { [key: string]: string | string[] | undefined }; |
|
|
|
}) => { |
|
|
|
|
|
|
|
const [ blog , setBlog] = useState() |
|
|
|
|
|
|
|
useEffect(()=>{ |
|
|
|
|
|
|
|
axiosInstance.get(`/api/blogs/${params.slug[0]}/`) |
|
|
|
.then((response)=>{ |
|
|
|
setBlog(response.data); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
const renderHeader = () => { |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
<header className="container rounded-xl"> |
|
|
|
<div className="max-w-screen-md mx-auto space-y-5"> |
|
|
|
@ -31,13 +48,13 @@ const Page = ({ |
|
|
|
className=" text-neutral-900 font-semibold text-3xl md:text-4xl md:!leading-[120%] lg:text-4xl dark:text-neutral-100 max-w-4xl " |
|
|
|
title="Quiet ingenuity: 120,000 lunches and counting" |
|
|
|
> |
|
|
|
Keep up the spirit of the desire to travel around the world |
|
|
|
{blog?.title} |
|
|
|
</h1> |
|
|
|
<span className="block text-base text-neutral-500 md:text-lg dark:text-neutral-400 pb-1"> |
|
|
|
{/* <span className="block text-base text-neutral-500 md:text-lg dark:text-neutral-400 pb-1"> |
|
|
|
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 |
|
|
|
</span> |
|
|
|
</span> */} |
|
|
|
|
|
|
|
<div className="w-full border-b border-neutral-100 dark:border-neutral-800"></div> |
|
|
|
<div className="flex flex-col items-baseline sm:flex-row sm:justify-between"> |
|
|
|
@ -77,86 +94,7 @@ const Page = ({ |
|
|
|
<div |
|
|
|
id="single-entry-content" |
|
|
|
className="prose dark:prose-invert prose-sm !max-w-screen-md sm:prose lg:prose-lg mx-auto dark:prose-dark" |
|
|
|
> |
|
|
|
<p> |
|
|
|
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. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
It is a long established fact that a <strong>reader</strong> will be |
|
|
|
distracted by the readable content of a page when looking at its{" "} |
|
|
|
<strong>layout</strong>. The point of using Lorem Ipsum is that it has |
|
|
|
a more-or-less normal{" "} |
|
|
|
<a href="/#" target="_blank" rel="noopener noreferrer"> |
|
|
|
distribution of letters. |
|
|
|
</a>{" "} |
|
|
|
</p> |
|
|
|
<ol> |
|
|
|
<li>We want everything to look good out of the box.</li> |
|
|
|
<li> |
|
|
|
{` Really just the first reason, that's the whole point of the plugin.`} |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
{` Here's a third pretend reason though a list with three items looks
|
|
|
|
more realistic than a list with two items.`}
|
|
|
|
</li> |
|
|
|
</ol> |
|
|
|
<h3>Typography should be easy</h3> |
|
|
|
<p> |
|
|
|
{`So that's a header for you — with any luck if we've done our job
|
|
|
|
correctly that will look pretty reasonable.`}
|
|
|
|
</p> |
|
|
|
<p>Something a wise person once told me about typography is:</p> |
|
|
|
<blockquote> |
|
|
|
<p> |
|
|
|
{` Typography is pretty important if you don't want your stuff to look
|
|
|
|
like trash. Make it good then it won't be bad.`}
|
|
|
|
</p> |
|
|
|
</blockquote> |
|
|
|
<p> |
|
|
|
{` It's probably important that images look okay here by default as well:`} |
|
|
|
</p> |
|
|
|
<figure> |
|
|
|
<Image src={travelhero2Image} alt="blog" className="rounded-2xl" /> |
|
|
|
<figcaption> |
|
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel |
|
|
|
officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor |
|
|
|
distinctio veritatis sapiente |
|
|
|
</figcaption> |
|
|
|
</figure> |
|
|
|
<p> |
|
|
|
{` Now I'm going to show you an example of an unordered list to make sure
|
|
|
|
that looks good, too:`}
|
|
|
|
</p> |
|
|
|
<ul> |
|
|
|
<li>So here is the first item in this list.</li> |
|
|
|
<li>{`In this example we're keeping the items short.`}</li> |
|
|
|
<li>{`Later, we'll use longer, more complex list items.`}</li> |
|
|
|
</ul> |
|
|
|
<p>{`And that's the end of this section.`}</p> |
|
|
|
<h2>Code should look okay by default.</h2> |
|
|
|
<p> |
|
|
|
I think most people are going to use{" "} |
|
|
|
<a href="https://highlightjs.org/">highlight.js</a> or{" "} |
|
|
|
<a href="https://prismjs.com/">Prism</a>{" "} |
|
|
|
{`or something if they want to
|
|
|
|
style their code blocks but it wouldn't hurt to make them look`}{" "}
|
|
|
|
<em>okay</em> out of the box, even with no syntax highlighting. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
{` What I've written here is probably long enough, but adding this final
|
|
|
|
sentence can't hurt.`}
|
|
|
|
</p> |
|
|
|
|
|
|
|
<p>Hopefully that looks good enough to you.</p> |
|
|
|
<h3>We still need to think about stacked headings though.</h3> |
|
|
|
|
|
|
|
<p> |
|
|
|
Phew, with any luck we have styled the headings above this text and |
|
|
|
they look pretty good. |
|
|
|
</p> |
|
|
|
><div dangerouslySetInnerHTML={{ __html: blog?.content }} /> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
@ -269,7 +207,7 @@ const Page = ({ |
|
|
|
<div className="nc-PageSingle pt-8 lg:pt-16 "> |
|
|
|
{renderHeader()} |
|
|
|
<div className="container my-10 sm:my-12 "> |
|
|
|
<Image className="w-full rounded-xl" src={travelhero2Image} alt="" /> |
|
|
|
{/* <Image className="w-full rounded-xl" src={blog?.cover} fill alt="" /> */} |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="nc-SingleContent container space-y-10"> |
|
|
|
|
sina_sajjadi
2 months ago