sina_sajjadi
/
AqilaFrontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🛠️ Implemented new features 

📦 Updated dependencies
🐛 Fixed a bug in the code
📝 Improved documentation
🚀 Ready for the next release
main
John Doe 1 year ago
parent
0b3a5e63fe
commit
ae75b6b9b8
2 changed files with 326 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/app/blog/[...slug]/layout.tsx
  2. 319
      src/app/blog/[...slug]/page.tsx

7
src/app/blog/[...slug]/layout.tsx
View File

@ -0,0 +1,7 @@
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode;
}) {
return <div>{children}</div>;
}

319
src/app/blog/[...slug]/page.tsx
View File

@ -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 (
<header className="container rounded-xl">
<div className="max-w-screen-md mx-auto space-y-5">
<Badge href="/blog" color="purple" name="Traveler" />
<h1
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
</h1>
<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>
<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">
<div className="nc-PostMeta2 flex items-center flex-wrap text-neutral-700 text-left dark:text-neutral-200 text-sm leading-none flex-shrink-0">
<Avatar
containerClassName="flex-shrink-0"
sizeClass="w-8 h-8 sm:h-11 sm:w-11 "
/>
<div className="ml-3">
<div className="flex items-center">
<a className="block font-semibold" href="/">
Fones Mimi
</a>
</div>
<div className="text-xs mt-[6px]">
<span className="text-neutral-700 dark:text-neutral-300">
May 20, 2021
</span>
<span className="mx-2 font-semibold">·</span>
<span className="text-neutral-700 dark:text-neutral-300">
6 min read
</span>
</div>
</div>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<SocialsList />
</div>
</div>
</div>
</header>
);
};
const renderContent = () => {
return (
<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>
);
};
const renderTags = () => {
return (
<div className="max-w-screen-md mx-auto flex flex-wrap">
<a
className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100 md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
href="##"
>
Garden
</a>
<a
className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100 md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
href="##"
>
Jewelry
</a>
<a
className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100 md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
href="##"
>
Tools
</a>
</div>
);
};
const renderAuthor = () => {
return (
<div className="max-w-screen-md mx-auto ">
<div className="nc-SingleAuthor flex">
<Avatar sizeClass="w-11 h-11 md:w-24 md:h-24" />
<div className="flex flex-col ml-3 max-w-lg sm:ml-5 space-y-1">
<span className="text-xs text-neutral-400 uppercase tracking-wider">
WRITEN BY
</span>
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-200">
<a href="/">Fones Mimi</a>
</h2>
<span className="text-sm text-neutral-500 sm:text-base dark:text-neutral-300">
There’s no stopping the tech giant. Apple now opens its 100th
store in China.There’s no stopping the tech giant.
<a className="text-primary-6000 font-medium ml-1" href="/">
Readmore
</a>
</span>
</div>
</div>
</div>
);
};
const renderCommentForm = () => {
return (
<div className="max-w-screen-md mx-auto pt-5">
<h3 className="text-xl font-semibold text-neutral-800 dark:text-neutral-200">
Responses (14)
</h3>
<form className="nc-SingleCommentForm mt-5">
<Textarea />
<div className="mt-2 space-x-3">
<ButtonPrimary>Submit</ButtonPrimary>
<ButtonSecondary>Cancel</ButtonSecondary>
</div>
</form>
</div>
);
};
const renderCommentLists = () => {
return (
<div className="max-w-screen-md mx-auto">
<ul className="nc-SingleCommentLists space-y-5">
<li>
<Comment />
<ul className="pl-4 mt-5 space-y-5 md:pl-11">
<li>
<Comment isSmall />
</li>
</ul>
</li>
<li>
<Comment />
<ul className="pl-4 mt-5 space-y-5 md:pl-11">
<li>
<Comment isSmall />
</li>
</ul>
</li>
</ul>
</div>
);
};
const renderPostRelated = (post: PostDataType) => {
return (
<div
key={post.id}
className="relative aspect-w-3 aspect-h-4 rounded-3xl overflow-hidden group"
>
<Link href={post.href as Route} />
<Image
className="object-cover transform group-hover:scale-105 transition-transform duration-300"
src={post.featuredImage}
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw"
alt=""
/>
<div>
<div className="absolute bottom-0 inset-x-0 h-1/2 bg-gradient-to-t from-black"></div>
</div>
<div className="flex flex-col justify-end items-start text-xs text-neutral-300 space-y-2.5 p-4">
<Badge name="Categories" />
<h2 className="block text-lg font-semibold text-white ">
<span className="line-clamp-2">{post.title}</span>
</h2>
<div className="flex">
<span className="block text-neutral-200 hover:text-white font-medium truncate">
{post.author.displayName}
</span>
<span className="mx-1.5 font-medium">·</span>
<span className="font-normal truncate">{post.date}</span>
</div>
</div>
<Link href={post.href as Route} />
</div>
);
};
return (
<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="" />
</div>
<div className="nc-SingleContent container space-y-10">
{renderContent()}
{renderTags()}
<div className="max-w-screen-md mx-auto border-b border-t border-neutral-100 dark:border-neutral-700"></div>
{renderAuthor()}
{renderCommentForm()}
{renderCommentLists()}
</div>
<div className="relative bg-neutral-100 dark:bg-neutral-800 py-16 lg:py-28 mt-16 lg:mt-24">
<div className="container ">
<h2 className="text-3xl font-semibold">Related posts</h2>
<div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
{/* */}
{DEMO_POSTS.filter((_, i) => i < 4).map(renderPostRelated)}
{/* */}
</div>
</div>
</div>
</div>
);
};
export default Page;
Write Preview
Loading…
Cancel
Save