🌰🤼‍♂️ ↝ Adding new post UI, from prev commit

Also fixed profile styling issue on my Lens profile (#7 #8 #9 #10 #11 #12): https://www.notion.so/skinetics/Threaded-Comments-2nd-iteration-flow-475d8a2328be4be8a1403256f094790e#61f363eddac74572b243ebb0c9c6513a Signal-K/sytizen#16
Signal-K · Jan 28, 2023 · a33b7f0 · a33b7f0
1 parent b3899eb
commit a33b7f0
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 29 deletions.
diff --git a/components/Posts/Card.tsx b/components/Posts/Card.tsx
@@ -0,0 +1,7 @@
+import styles from '../../styles/social-graph/Home.module.css';
+
+export default function Card ({ children }) {
+    return (
+        <div className={styles.card}>{children}</div>
+    );
+}
diff --git a/components/Posts/MessageBoard.tsx b/components/Posts/MessageBoard.tsx
@@ -0,0 +1,21 @@
+
+import React, { useContext } from "react";
+import { Link, Outlet } from "react-router-dom";
+import { UserContextProvider } from "@supabase/auth-ui-react/dist/esm/src/components/Auth/UserContext";
+
+export default function MessageBoard() {
+    //const userProfile = useContext(UserContext);
+    return (
+        <div className="message-board-container">
+            <Link to='/1'>
+                <h2 className="message-board-header-link">Message Board</h2>
+            </Link>
+            {/*{userProfile.session ? (
+                <></>
+            ) : (
+                <h2 className="message-board-login-message" data-e2e='message-board-login'>You'll need to <Login /> to join the discussions</h2>
+            )}
+            <Outlet />*/}
+        </div>
+    )
+}
diff --git a/components/Posts/PostFormCard.tsx b/components/Posts/PostFormCard.tsx
@@ -0,0 +1,47 @@
+import NavigationCard from "../Sidebar"
+import Card from "./Card"
+import styles from '../../styles/social-graph/PostForm.module.css';
+import { HiUserGroup, HiOutlineMap, HiOutlinePuzzle, HiOutlineTag, HiOutlineTerminal } from 'react-icons/hi';
+
+export default function PostFormCard () {
+    return (
+        <Card>
+            <div className={styles.postFormWrapper}>
+                <div>
+                    <div className={styles.avatarWrapper}><img src="https://media.licdn.com/dms/image/D5603AQGuBaGYxDFueQ/profile-displayphoto-shrink_200_200/0/1674356082766?e=1680134400&v=beta&t=gXTx1iMfVws7De8w7QormN7K3GSmYDsj1fOV1-Jl2Vg" /></div>
+                </div>
+                <textarea className={styles.textAreaWrapper} placeholder={"What's on your mind? "} />
+            </div>
+            <div className={styles.postAdditions}>
+                <div>
+                    <button className={styles.postAdditionButton}>
+                        <HiUserGroup className={styles.postAdditionButtonIcons}/>
+                        People</button>
+                </div>
+                <div>
+                    <button className={styles.postAdditionButton}>
+                        <HiOutlineMap className={styles.postAdditionButtonIcons}/>
+                        Checkin</button>
+                </div>
+                <div>
+                    <button className={styles.postAdditionButton}>
+                        <HiOutlinePuzzle className={styles.postAdditionButtonIcons}/>
+                        Emotion</button>
+                </div>
+                <div>
+                    <button className={styles.postAdditionButton}>
+                        <HiOutlineTag className={styles.postAdditionButtonIcons}/>
+                        Tag NFT</button>
+                </div>
+                <div>
+                    <button className={styles.postAdditionButton}>
+                        <HiOutlineTerminal className={styles.postAdditionButtonIcons}/>
+                        Upload metadata</button>
+                </div>
+                <div className={styles.submitButtonWrapper}>
+                    <button className={styles.submitButton}>Publish</button>
+                </div>
+            </div>
+        </Card>
+    )
+}
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -0,0 +1,36 @@
+import Card from "./Posts/Card";
+import styles from '../styles/social-graph/Home.module.css';
+
+export default function NavigationCard () {
+    return (
+        <Card>
+            <div className={styles.paddingThing}>
+            <h2>Navigation</h2>
+                <a href='/' className={styles.sidebarNavItems}>
+                    <div className={styles.navIcon}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" /></svg></div>
+                    Home
+                </a>
+                <a href='/' className={styles.sidebarNavItems}>
+                    <div className={styles.navIcon}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" /></svg></div>
+                    Feed
+                </a>
+                <a href='/' className={styles.sidebarNavItems}>
+                    <div className={styles.navIcon}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /></svg></div>
+                    Bookmarks
+                </a>
+                <a href='/' className={styles.sidebarNavItems}>
+                    <div className={styles.navIcon}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" /></svg></div>
+                    My stuff
+                </a>
+                <a href='/' className={styles.sidebarNavItems}>
+                    <div className={styles.navIcon}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" /></svg></div>
+                    Notifications
+                </a>
+                <a href='/' className={styles.sidebarNavItems}>
+                    <div className={styles.navIcon}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg></div>
+                    Logout
+                </a>
+            </div>
+        </Card>
+    );
+};
diff --git a/pages/posts/index.tsx b/pages/posts/index.tsx
@@ -1,9 +1,22 @@
 import Head from "next/head";
 import Image from "next/image";
+import Card from "../../components/Posts/Card";
+import PostFormCard from "../../components/Posts/PostFormCard";
+import NavigationCard from "../../components/Sidebar";
 import styles from '../../styles/social-graph/Home.module.css';
 
 export default function SocialIndex () {
     return (
-        <div className='flex max-w-3xl mx-auto border-5 border-emerald-500'>Test</div>
+        <div className={styles.background}>
+            <div className={styles.header}>
+                <div className={styles.thing1}> {/* Sidebar */}
+                    <NavigationCard />
+                </div>
+                <div className={styles.thing2}>
+                    <PostFormCard />
+                    <Card>First Post</Card>
+                </div>
+            </div>
+        </div>
     )
 }
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,5 +1,7 @@
-@import "tailwindcss/base";
+@tailwind base;
+@tailwind utilities;
+@tailwind components;
 
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+body {
+    background-color: #F5F5FB;
+}
diff --git a/styles/social-graph/Home.module.css b/styles/social-graph/Home.module.css
@@ -1,6 +1,56 @@
-.container {
-  border-color: aqua;
-  border-radius: 5;
-  flex: auto;
-  max-width: 3xl;
+.background {
+  background-color: #F5F3FA;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.header {
+  display: flex; 
+  margin-top: auto; 
+  margin-top: 0rem; 
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 95%;
+  gap: 1.5rem; 
+}
+
+.paddingThing {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem; 
+  padding-left: 1rem;
+  padding-right: 1rem; 
+}
+
+.navIcon {
+  width: 8%;
+  color: gray;
+}
+
+.sidebarNavItems {
+  display: flex;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: gray;
+  margin-bottom: 0.75rem; 
+}
+
+.thing1 {
+  width: 33.333333%;
+}
+
+.thing2 {
+  width: 100%;
+}
+
+.card {
+  padding: 1rem; 
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 0.775rem; 
+  box-shadow: 0 10px 15px -3px rgba(120, 112, 112, 0.141), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
 }
diff --git a/styles/social-graph/PostForm.module.css b/styles/social-graph/PostForm.module.css
@@ -0,0 +1,54 @@
+.postFormWrapper {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.avatarWrapper {
+    overflow: hidden; 
+    width: 4rem; 
+    border-radius: 24px; 
+}
+
+.textAreaWrapper {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    width: 100%;
+}
+
+.postAdditions {
+    display: flex;
+    padding-left: 0.25rem;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.postAdditionButton {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.postAdditionButtonIcons {
+    display: flex;
+    margin-top: 0px;
+    color: #387282;
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.submitButton {
+    padding-top: 0.15rem;
+    padding-bottom: 0.15rem; 
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;  
+    background-color: #387282;
+    border-radius: 0.375rem;
+    color: aliceblue;
+    align-items: flex-end;
+}
+
+.submitButtonWrapper {
+    text-align: right;
+    width: 40%;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,13 +1,9 @@
-/** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: ["./pages/**/*.js", "./components/**/*.js"],
-  theme: {
-    extend: {
-      colors: {
-        socialBg:'#F5F7FB',
-        socialBlue: '#218DFA',
-      },
-    },
-  },
-  plugins: [],
-}
+  content: [
+     "./pages/**/*.{js,ts,jsx,tsx}",
+     "./components/**/*.{js,ts,jsx,tsx}",
+   ],
+   theme: {
+   extend: {},
+  }
+ }