+ )
+}
diff --git a/config/ScreenRoutes.ts b/frontend/config/ScreenRoutes.ts
similarity index 70%
rename from config/ScreenRoutes.ts
rename to frontend/config/ScreenRoutes.ts
index f716f22..3732d9a 100644
--- a/config/ScreenRoutes.ts
+++ b/frontend/config/ScreenRoutes.ts
@@ -12,3 +12,6 @@ export const BLOG_URL = '#'
export const FEATURES_URL_HASH = '/#features'
+
+export const DETAILED_POST = (post_id: string) => `/posts/${post_id}`
+
diff --git a/next.config.js b/frontend/next.config.js
similarity index 100%
rename from next.config.js
rename to frontend/next.config.js
diff --git a/package.json b/frontend/package.json
similarity index 91%
rename from package.json
rename to frontend/package.json
index 01d53ad..71480f9 100644
--- a/package.json
+++ b/frontend/package.json
@@ -10,6 +10,8 @@
},
"dependencies": {
"@headlessui/react": "^1.6.6",
+ "@heroicons/react": "^1.0.6",
+ "formik": "^2.2.9",
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0"
diff --git a/pages/_app.tsx b/frontend/pages/_app.tsx
similarity index 100%
rename from pages/_app.tsx
rename to frontend/pages/_app.tsx
diff --git a/pages/api/hello.ts b/frontend/pages/api/hello.ts
similarity index 100%
rename from pages/api/hello.ts
rename to frontend/pages/api/hello.ts
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
new file mode 100644
index 0000000..afc0f32
--- /dev/null
+++ b/frontend/pages/index.tsx
@@ -0,0 +1,17 @@
+import type { NextPage } from 'next'
+import { MainSiteNavbar } from '../components/Navbar.tsx/MainSiteNavbar'
+
+const Home: NextPage = () => {
+ return (
+ <>
+
+
+
+
+
+
+ >
+ )
+}
+
+export default Home
diff --git a/frontend/pages/posts/[id].tsx b/frontend/pages/posts/[id].tsx
new file mode 100644
index 0000000..6bec7c5
--- /dev/null
+++ b/frontend/pages/posts/[id].tsx
@@ -0,0 +1,44 @@
+import { PostsDetailedScreen } from "../../components/PostsDetailed"
+
+
+const comments = []
+
+const PostDetailed = () => (
+ {
+
+ }}
+ postCommentHandler={() => {
+
+ }}
+ post={{
+ cover_image_url: "https://unsplash.com/photos/gwE9vXSi7Xw/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8OHx8YmFubmVyfGVufDB8fHx8MTY2MDY0NjcwOA&force=true&w=1920",
+ body: "Hi, I'm an author, writing books on this awesome world. Follow me to learn more about it. We're humans, and the thing which makes us human is our a...",
+ liked_by: 120,
+ number_of_comments: 16,
+ owner_id: "10",
+ post_id: "177171",
+ published_on: "2022-08-16T10:46:26.261Z",
+ title: "How to build the best spacecraft?",
+ approx_read_time_in_minutes: 2,
+ }}
+ comments={[{
+ comment: "Hey",
+ is_deleted: false,
+ name: "haha",
+ posted_at: "2022-08-16T10:46:26.261Z",
+ user_avatar: "https://unsplash.com/photos/gwE9vXSi7Xw/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8OHx8YmFubmVyfGVufDB8fHx8MTY2MDY0NjcwOA&force=true&w=1920",
+ },
+ {
+ comment: "Hey",
+ is_deleted: false,
+ name: "haha",
+ posted_at: "2022-08-16T10:46:26.261Z",
+ user_avatar: "https://unsplash.com/photos/gwE9vXSi7Xw/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8OHx8YmFubmVyfGVufDB8fHx8MTY2MDY0NjcwOA&force=true&w=1920",
+ }]}
+ />
+)
+
+
+export default PostDetailed
diff --git a/frontend/pages/u/[id].tsx b/frontend/pages/u/[id].tsx
new file mode 100644
index 0000000..ab72184
--- /dev/null
+++ b/frontend/pages/u/[id].tsx
@@ -0,0 +1,121 @@
+import { useState } from "react"
+import { MainSiteNavbar } from "../../components/Navbar.tsx/MainSiteNavbar"
+import { UserProfileSiteLogo } from "../../components/Navbar.tsx/UserProfileSiteLogo"
+import { Posts } from "../../components/Profile/Posts"
+
+
+const mockData = {
+ profile: {
+ name: "Valdigo Neumaro", // keep it less than 16 chars
+ bio_detail: "Hi, I'm an author, writing books on this awesome world. Follow me to learn more about it." // less than 250 chars
+ },
+ posts: {
+
+ },
+
+}
+
+
+/*
+TODO:
+
+
+
Add cover banner
+
Add testimonials section maybe? Nah. lets leave it. content will move a lot
+
Have a nice animation to move the content from left to right, and the new content repalcing it.
+
Events will be w-full, and so is posts; Products and service will be grid?
+
Search functionality user wise, and global wise
+
+
For a product you can add multiple images.
+
+*/
+
+
+/*
+TODO: CASES
+1. User not logged in. -> show subscribe now, and make it as SignIn
+2. user logged in and on his/her same page -> show
+3. user logged in and on other page -> show subscribe now
+*/
+const UserProfile = () => {
+ const caseId = 1
+
+ const [currentTab, setCurrentTab] = useState(1);
+ return (
+
+ <>
+
+
+ } />
+
+
+