diff --git a/src/assets/bell.svg b/src/assets/bell.svg new file mode 100644 index 0000000..6245733 --- /dev/null +++ b/src/assets/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/copy-plus.svg b/src/assets/copy-plus.svg new file mode 100644 index 0000000..4b9a40f --- /dev/null +++ b/src/assets/copy-plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/feed.svg b/src/assets/feed.svg new file mode 100644 index 0000000..12a7dbe --- /dev/null +++ b/src/assets/feed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/heart-handshake.svg b/src/assets/heart-handshake.svg new file mode 100644 index 0000000..c2e5188 --- /dev/null +++ b/src/assets/heart-handshake.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/message.svg b/src/assets/message.svg new file mode 100644 index 0000000..44fdf79 --- /dev/null +++ b/src/assets/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 0000000..548bc4a --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/user-circle.svg b/src/assets/user-circle.svg new file mode 100644 index 0000000..d14ca89 --- /dev/null +++ b/src/assets/user-circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/LoadingSpinner.astro b/src/components/LoadingSpinner.astro index b25de6a..8605726 100644 --- a/src/components/LoadingSpinner.astro +++ b/src/components/LoadingSpinner.astro @@ -10,6 +10,7 @@ const { size = "10px" } = Astro.props; border: calc(var(--spinner-size) / 2) solid #f3f3f375; border-radius: 50%; border-top: calc(var(--spinner-size) / 2) solid white; + box-sizing: content-box; height: var(--spinner-size); width: var(--spinner-size); } diff --git a/src/components/Post.astro b/src/components/Post.astro new file mode 100644 index 0000000..f00b0ff --- /dev/null +++ b/src/components/Post.astro @@ -0,0 +1,83 @@ +--- +import Icon from "./Icon.astro"; + +export interface Props { + title: string; + description: string; +} + +const { title, description } = Astro.props as Props; + +const randomMinutes = Math.floor(Math.random() * 60); +const randomHours = Math.floor(Math.random() * 24); +const randomDays = Math.floor(Math.random() * 7); + +const now = new Date(); +now.setMinutes(now.getMinutes() - randomMinutes); +now.setHours(now.getHours() - randomHours); +now.setDate(now.getDate() - randomDays); + +const formattedDate = now.toLocaleString(); +--- + + +
+
+ Author +
Username
+
+
+

{title}

+

{description}

+ Read more + +
+ +
+ Like + Comment + Repost + Send +
+
+ + + diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro new file mode 100644 index 0000000..5792a45 --- /dev/null +++ b/src/layouts/MainLayout.astro @@ -0,0 +1,74 @@ +--- +import Icon from "../components/Icon.astro"; +import "../styles/global.css"; + +const { title } = Astro.props; +--- + + + + + + + + + {title} + + +
+ +
+ + + + + diff --git a/src/layouts/Layout.astro b/src/layouts/MenuLayout.astro similarity index 100% rename from src/layouts/Layout.astro rename to src/layouts/MenuLayout.astro diff --git a/src/pages/feed.astro b/src/pages/feed.astro new file mode 100644 index 0000000..6235e4d --- /dev/null +++ b/src/pages/feed.astro @@ -0,0 +1,86 @@ +--- +import Icon from "../components/Icon.astro"; +import Post from "../components/Post.astro"; +import MainLayout from "../layouts/MainLayout.astro"; + +const components = [ + { + title: "This is a post", + description: "This is the prototype for the feed.", + }, + { + title: "This is another post", + description: "The feed will be like LinkedIn's feed.", + date: "2021-10-02", + }, + { + title: "This is a third post", + description: "Users will share their projects, thoughts, and more.", + date: "2021-10-03", + }, + { + title: "This is a fourth post", + description: "Users will be able to like, comment, and share posts.", + }, +]; +--- + + + +
+ { + components.map((component) => ( + + )) + } +
+ + + diff --git a/src/pages/index.astro b/src/pages/index.astro index dec3ba8..69aa400 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,13 +1,10 @@ --- -import Icon from "../components/icon.astro"; -import Layout from "../layouts/Layout.astro"; +import Icon from "../components/Icon.astro"; +import MenuLayout from "../layouts/MenuLayout.astro"; import LoadingSpinner from "../components/LoadingSpinner.astro"; - -// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build -// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh. --- - +
@@ -20,7 +17,7 @@ import LoadingSpinner from "../components/LoadingSpinner.astro"; window.location.href = "login.html"; }, 1000); - +