diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..82d6f41 --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +# Created by https://www.toptal.com/developers/gitignore/api/nextjs +# Edit at https://www.toptal.com/developers/gitignore?templates=nextjs + +### NextJS ### +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# End of https://www.toptal.com/developers/gitignore/api/nextjs +node_modules diff --git a/README.md b/README.md index 04375e7..e215bc4 100644 --- a/README.md +++ b/README.md @@ -1 +1,36 @@ -# 2hour-blog +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/app/_components/Layout/Footer.tsx b/app/_components/Layout/Footer.tsx new file mode 100644 index 0000000..9052034 --- /dev/null +++ b/app/_components/Layout/Footer.tsx @@ -0,0 +1,22 @@ +import Image from "next/image"; +import logo from "@/public/images/logo-white.svg"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/app/_components/Layout/Header.tsx b/app/_components/Layout/Header.tsx new file mode 100644 index 0000000..6ce26a6 --- /dev/null +++ b/app/_components/Layout/Header.tsx @@ -0,0 +1,29 @@ +import Image from "next/image"; +import logo from "@/public/images/logo.svg"; + +const Header = () => { + return ( +
+
+
+ logo +
+
+
Menu
+
Menu
+
Menu
+
Menu
+
+
+
+
Search
+ +
+
+
+
+
+ ); +}; + +export default Header; diff --git a/app/_components/common/Button.tsx b/app/_components/common/Button.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/_components/common/PostCard.tsx b/app/_components/common/PostCard.tsx new file mode 100644 index 0000000..617cbe8 --- /dev/null +++ b/app/_components/common/PostCard.tsx @@ -0,0 +1,25 @@ +const mockPost = { + title: "Post Title", + category: "Category", + author: "Author", + content: + " Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.", +}; + +const PostCard = () => { + return ( +
+
+
+
{mockPost.title}
+

+ {mockPost.author} + a min ago +

+
{mockPost.content}
+
+
+ ); +}; + +export default PostCard; diff --git a/app/_components/common/Tag.tsx b/app/_components/common/Tag.tsx new file mode 100644 index 0000000..85ccc70 --- /dev/null +++ b/app/_components/common/Tag.tsx @@ -0,0 +1,5 @@ +const Tag = ({ text }: { text: string }) => { + return
{text}
; +}; + +export default Tag; diff --git a/app/_components/post/Comment.tsx b/app/_components/post/Comment.tsx new file mode 100644 index 0000000..a300451 --- /dev/null +++ b/app/_components/post/Comment.tsx @@ -0,0 +1,35 @@ +import CommentForm from "./CommentForm"; +import CommentItem from "./CommentItem"; + +const mockComment = [ + { + name: "user1", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula nibh, interdum non enim sit amet, iaculis aliquet nunc.", + }, + { + name: "user2", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula nibh, interdum non enim sit amet, iaculis aliquet nunc.", + }, + { + name: "user3", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula nibh, interdum non enim sit amet, iaculis aliquet nunc.", + }, +]; + +const Comment = () => { + return ( +
+

Comments

+ +
+ {mockComment.map((comment, index) => { + return ; + })} +
+
+ ); +}; +export default Comment; diff --git a/app/_components/post/CommentForm.tsx b/app/_components/post/CommentForm.tsx new file mode 100644 index 0000000..ef1adef --- /dev/null +++ b/app/_components/post/CommentForm.tsx @@ -0,0 +1,11 @@ +const CommentForm = () => { + return ( +
+ + + +
+ ); +}; + +export default CommentForm; diff --git a/app/_components/post/CommentItem.tsx b/app/_components/post/CommentItem.tsx new file mode 100644 index 0000000..e9e98b7 --- /dev/null +++ b/app/_components/post/CommentItem.tsx @@ -0,0 +1,23 @@ +import profile from "@/public/images/profile.svg"; +import Image from "next/image"; + +const CommentItem = ({ comment }: { comment: { name: string; content: string } }) => { + return ( +
+
+ profile +
{comment.name}
+
+ +
+
{comment.content}
+
+
Reply
+
a min ago
+
+
+
+ ); +}; + +export default CommentItem; diff --git a/app/_components/post/MorePosts.tsx b/app/_components/post/MorePosts.tsx new file mode 100644 index 0000000..c6b81d9 --- /dev/null +++ b/app/_components/post/MorePosts.tsx @@ -0,0 +1,18 @@ +import PostPreview from "./PostPreview"; + +const mockPost = ["Post Title 01", "Post Title 02", "Post Title 03"]; + +const MorePosts = () => { + return ( + <> +
More Posts
+
+ {mockPost.map((post, index) => { + return ; + })} +
+ + ); +}; + +export default MorePosts; diff --git a/app/_components/post/PostContent.tsx b/app/_components/post/PostContent.tsx new file mode 100644 index 0000000..4c6b508 --- /dev/null +++ b/app/_components/post/PostContent.tsx @@ -0,0 +1,43 @@ +const mockPost = { + title: "Post Title", + author: "Author", + content: [ + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula nibh, interdum non enim sit amet, iaculis aliquet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sit amet ipsum ac velit egestas ultrices. Vestibulum et neque id ex semper varius a sit amet metus. Vivamus congue dolor eget aliquam hendrerit. Etiam iaculis finibus egestas. Nam viverra urna quis odio efficitur malesuada. Maecenas rhoncus enim eu scelerisque rutrum. Pellentesque et mollis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed commodo leo. Suspendisse potenti. Maecenas gravida ipsum placerat ligula posuere, ut rhoncus velit eleifend.", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula nibh, interdum non enim sit amet, iaculis aliquet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sit amet ipsum ac velit egestas ultrices. Vestibulum et neque id ex semper varius a sit amet metus. Vivamus congue dolor eget aliquam hendrerit. Etiam iaculis finibus egestas. Nam viverra urna quis odio efficitur malesuada. Maecenas rhoncus enim eu scelerisque rutrum. Pellentesque et mollis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed commodo leo. Suspendisse potenti. Maecenas gravida ipsum placerat ligula posuere, ut rhoncus velit eleifend.", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula nibh, interdum non enim sit amet, iaculis aliquet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sit amet ipsum ac velit egestas ultrices. Vestibulum et neque id ex semper varius a sit amet metus. Vivamus congue dolor eget aliquam hendrerit. Etiam iaculis finibus egestas. Nam viverra urna quis odio efficitur malesuada. Maecenas rhoncus enim eu scelerisque rutrum. Pellentesque et mollis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed commodo leo. Suspendisse potenti. Maecenas gravida ipsum placerat ligula posuere, ut rhoncus velit eleifend.", + ], +}; + +const PostContent = () => { + return ( +
+
+
+
Home
+
/
+
{mockPost.title}
+
+

{mockPost.title}

+
+
{mockPost.author}
+
|
+
a min ago
+
+
+
+
+
+ {mockPost.content.map((content, index) => { + return ( +
+ {content} +
+ ); + })} +
+
+
+ ); +}; + +export default PostContent; diff --git a/app/_components/post/PostPreview.tsx b/app/_components/post/PostPreview.tsx new file mode 100644 index 0000000..4f35f7a --- /dev/null +++ b/app/_components/post/PostPreview.tsx @@ -0,0 +1,10 @@ +const PostPreview = ({ title }: { title: string }) => { + return ( +
+
+

{title}

+
+ ); +}; + +export default PostPreview; diff --git a/app/_components/post/Share.tsx b/app/_components/post/Share.tsx new file mode 100644 index 0000000..6f8ab90 --- /dev/null +++ b/app/_components/post/Share.tsx @@ -0,0 +1,27 @@ +import Tag from "../common/Tag"; +import Image from "next/image"; +import facebook from "@/public/images/facebook.svg"; +import twitter from "@/public/images/twitter.svg"; +import instagram from "@/public/images/instagram.svg"; + +const Share = () => { + return ( +
+
+
Share this
+ +
+ facebook + twitter + instagram +
+
+
+ + +
+
+ ); +}; + +export default Share; diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..8046bf4 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,23 @@ +import Header from "./_components/layout/Header"; +import Footer from "./_components/layout/Footer"; +import "./styles/main.scss"; +import localFont from "next/font/local"; + +export const montserrat = localFont({ + src: "../public/fonts/Montserrat-VariableFont_wght.ttf", + display: "swap", + weight: "100 900", + variable: "--font-montserrat", +}); + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + +
+
{children}
+