Merge pull request #1 from tobiadiks/beta

Beta

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+#purged
+/purged

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+    "cSpell.words": [
+        "Kage",
+        "cstory",
+        "apos",
+        "dateofbirth",
+        "describedby",
+        "extralight",
+        "fullname",
+        "formify",
+        "imagepic",
+        "labelledby",
+
+        "linkdin",
+        "multiselect",
+        "profilepic",
+        "upsert",
+        "useravatar"
+    ]
+}

components/ActionAuth.js

@@ -0,0 +1,19 @@
+import Link from 'next/link';
+
+
+export default function LoginActionCard(props){
+    return(
+
+        <div className=" w-full md:w-44 bg-white p-2 border rounded shadow-md mb-5">
+        <div className="font-semibold text-gray-900 text-lg">Personalize yours by signing in to your account.</div>
+        <div className="flex mt-2">
+        <Link href="/auth" passHref={true}>
+          <div className="bg-purple-700 w-full font-semibold text-white p-2 text-center rounded-md hover:bg-purple-500 z-40">
+            Start
+          </div>
+        </Link>
+        </div>
+        </div>
+
+    )
+}

components/Announcement.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Announcement(){
+    return(
+        <div className='w-full md:hidden block shadow border-2 rounded border-purple-600 mt-5 px-1'>
+              <div className="flex justify-between py-3 border-b mb-2">
+              <div className="font-semibold text-purple-600 p-2">Join Big Events 🎊</div>
+              <div className=" text-sm cursor-pointer bg-purple-600 hover:bg-purple-400 text-white p-2 rounded-sm font-semibold">Browse</div>
+            </div>
+
+
+
+            <div className="flex p-2 flex-wrap">
+            <span className="font-medium text-gray-800">
+            Be part of events & hackathons, building careers and leveraging your skill by taking internships & browsing job openings from top companies.
+            </span>
+            </div>
+            </div>
+    ) 
+}

components/ContentCard.js

@@ -0,0 +1,134 @@
+import {
+  Button,
+  IconHeart,
+  IconSave,
+  IconShare2,
+  IconActivity,
+  IconLock,
+} from "@supabase/ui";
+import UserAvatar from "./UserAvatar";
+import Link from "next/link";
+import moment from "moment";
+import supabase from '../utils/initSupabase';
+import { useRouter } from "next/router";
+
+export default function ContentCard(props) {
+
+  const router =useRouter();
+
+
+  async function NewLike(id){
+    if(!supabase.auth.user()){
+      alert('Please Log In To Perform This Action')
+    }
+    else{
+    const {data}= await supabase.from('likes').select('post_id,user_id').filter('post_id','eq',id).filter('user_id','eq',supabase.auth.user().id);
+
+    if (!data.length){
+  await supabase.from('likes').insert([{user_id:supabase.auth.user().id,post_id:id}])
+  alert('liked ❤️')
+}
+else{
+  await supabase.from('likes').delete().filter('post_id','eq',id).filter('user_id','eq',supabase.auth.user().id)
+  alert('disliked 👎')
+}
+    }
+  }   
+
+  function Like(id){
+    NewLike(id)
+          }
+
+          async function NewSave(id){
+            if(!supabase.auth.user()){
+              alert('Please Log In To Perform This Action')
+            }
+            else{
+            const {data}= await supabase.from('saved').select('post_id,user_id').filter('post_id','eq',id).filter('user_id','eq',supabase.auth.user().id);
+
+            if (!data.length){
+          await supabase.from('saved').insert([{user_id:supabase.auth.user().id,post_id:id}])
+          alert('saved 💾')
+        }
+        else{
+          await supabase.from('saved').delete().filter('post_id','eq',id).filter('user_id','eq',supabase.auth.user().id)
+          alert('removed 😲')
+        }
+            }
+          }   
+
+          function Save(id){
+            NewSave(id)
+                  }
+
+
+
+
+
+  return (
+    <div className=" w-full h-auto p-2 rounded shadow-md border cursor-pointer hover:shadow-lg mb-5">
+      <div className="flex justify-between">
+        <div className="flex">
+          <UserAvatar src={props.useravatar} />{" "}
+          <div className="flex flex-col ml-2">
+          <Link href={`/${props.username}`} passHref={true}>
+            <span className="text-xs font-semibold text-gray-500 hover:text-gray-900">
+              {props.name}&nbsp;&nbsp;<span className='font-thin'>@{props.username}</span>
+            </span>
+            </Link>
+            <span className="text-xs font-thin text-gray-500 hover:text-gray-900">
+              {moment(props.timestamp).fromNow()}
+            </span>
+          </div>
+        </div>
+
+
+      </div>
+
+      <div className="mt-2">
+        <span className="text-xs text-white rounded-md p-1 font-medium bg-gray-900 hover:bg-gray-700">
+          {props.category}
+        </span>
+        {props.featured ? (
+          <span className="text-xs ml-1 text-white rounded-md p-1 font-medium bg-purple-700 hover:bg-purple-600">
+            #featured
+          </span>
+        ) : null}
+      </div>
+
+      <Link href={props.route} passHref={true}>
+        <h3 className="md:text-xl mt-2 text-sm font-semibold text-gray-900 hover:text-purple-600">
+          {props.title}
+        </h3>
+      </Link>
+
+      <div className="mt-4 flex justify-between">
+        <div className="flex">
+          <div onClick={()=>Like(props.id)} className={`mr-4 flex align-middle hover:text-red-600 ${props.liked?'text-red-700':''}`}>
+            <IconHeart />
+          </div>
+          {/* <div className="mr-4 hover:text-purple-600">
+            <IconActivity />
+          </div> */}
+          <div onClick={()=>Save(props.id)} className="mr-4 hover:text-purple-600">
+            <IconSave />
+          </div>
+
+          <div onClick={()=>null} className={`mr-4 hover:text-green-600 ${props.isPrivate?'':'hidden'}`}>
+            <IconLock />
+          </div>
+        </div>
+
+        <div className="flex">
+          <div
+            className="mr-4 flex align-middle justify-center
+             hover:text-purple-600"
+          >
+            <IconShare2 />
+            &nbsp;<div className="text-xs">Share</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/Footer.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import {Modal} from '@supabase/ui'
+import {useState, useEffect, useRef} from 'react'
+import supabase from '../utils/initSupabase'
+import Link from 'next/link'
+
+export default function Footer(){
+    const [user, setUser]=useState(null);
+    // early access mail 
+    const [email, setEmail]= useState('');
+    let buttonStatus= useRef();
+    let inputStatus=useRef();
+
+    const [visibleFail, setVisibleFail] = useState(false);
+    const [visibleSuccess, setVisibleSuccess] = useState(false);
+
+
+    function toggleFail() {
+      setVisibleFail(!visibleFail);
+    }
+
+    function toggleSuccess() {
+      setVisibleSuccess(!visibleSuccess);
+    }
+
+    useEffect(()=>{
+      const {data: authListener}= supabase.auth.onAuthStateChange(
+        async ()=> checkUser()
+      )
+
+
+
+      checkUser()
+      return ()=> {
+        authListener?.unsubscribe()
+      };
+    }, [])
+
+    async function checkUser(){
+      const user= supabase.auth.user()
+      setUser(user)
+    }
+
+    // Early access
+    async function sendEmailAddress(){
+
+      const re = /^[^\s@]+@[^\s@]+\.[^\s@]/
+      if(!email.match(re) )
+      {
+      await toggleFail()
+       }
+
+     else {
+      const {data, error} = await supabase.from("early-access-email").select('email').filter('email','eq', email);
+      if (data.length>0){
+  buttonStatus.current.innerHTML="Requested Earlier";
+  buttonStatus.current.style.background="#9ca3af";
+      }
+  else{
+     await supabase.from("early-access-email").insert([{email}])
+     toggleSuccess
+     }
+     }
+    }
+
+
+
+
+    return(
+        <>
+    <div className="flex  flex-row flex-wrap justify-between font-mono text-xs text-gray-500 py-10 px-7 w-full mt-10 mb-5 border-t border-gray-200">
+
+    <div className="flex mt-5 flex-col flex-nowrap w-28 ">
+      <h5 className="text-gray-700 text-sm font-bold mb-3 ">Explore</h5>
+      <Link href='/' passHref><span className="mt-1 hover:text-purple-600 cursor-pointer">Home</span></Link>
+      <Link href='/explore' passHref><span className="mt-1 hover:text-purple-600 cursor-pointer">Feeds</span></Link>
+      <span className="mt-1 border-b-2 border-purple-400 w-16 hover:text-purple-600 cursor-pointer">Pricing</span>
+    </div>
+
+    <div className="flex mt-5 flex-col flex-nowrap w-28">
+      <h5 className="text-gray-700 text-sm font-bold mb-3">Company</h5>
+      <span className="mt-1 hover:text-purple-600 cursor-pointer">About</span>
+      <a className="mt-1 hover:text-purple-600 cursor-pointer" href='https://twitter.com/cstory_hq'><span className="mt-1 hover:text-purple-600 cursor-pointer">Twitter</span></a>
+      <a className="mt-1 hover:text-purple-600 cursor-pointer" href='https://instagram.com/cstory_hq'><span className="mt-1 hover:text-purple-600 cursor-pointer">Instagram</span></a>
+    </div>
+
+    <div className="flex mt-5 flex-col flex-nowrap w-28">
+      <h5 className="text-gray-700 text-sm font-bold mb-3">Support</h5>
+      <span className="mt-1 hover:text-purple-600 cursor-pointer">Documentation</span>
+      <span className="mt-1 hover:text-purple-600 cursor-pointer">Contact</span>
+      <span className="mt-1 hover:text-purple-600 cursor-pointer">Request Feature</span>
+    </div>
+
+  </div>
+
+
+  <Modal
+      title={<span className="text-red-500">Failed</span>}
+      description="Try a valid email address"
+      visible={visibleFail}
+      onCancel={toggleFail}
+      onConfirm={toggleFail}
+      hideFooter
+        >
+        </Modal>
+
+
+        <Modal
+      title={<span className="text-purple-500">Success</span>}
+      description={<h3 className="text-gray-900">Thanks for subscribing to our <span className="font-bold text-purple-900">Newsletter</span></h3>}
+      visible={visibleSuccess}
+      onCancel={toggleSuccess}
+      onConfirm={toggleSuccess}
+      hideFooter
+        >
+        </Modal>
+<div id="formify" className=" px-7 py-10 w-screen mt-5 mb-5 flex flex-wrap sm:justify-center sm:align-middle border-t border-b border-gray-200 flex-col">
+
+<input ref={inputStatus} value={email} onChange={e=> setEmail(e.target.value)}  placeholder="Email" required type="email" className="pl-2 outline-none border-2 bg-gray-50 border-gray-200 placeholder-gray-500 rounded-md mt-2 mx-auto py-2  w-full md:w-1/3 p-1 text-sm font-normal"/>
+
+<button ref={buttonStatus} onClick={sendEmailAddress} type="button"  className="p-2 outline-none rounded-md text-sm font-normal bg-purple-700 text-white mx-auto mt-2">Subscribe</button>
+
+<div className="font-mono text-gray-500 text-xs font-medium tracking-wide mt-4 mb-4 text-center block">
+Receive exclusive updates and tips to make you the best creator...
+</div>
+</div>
+
+<div className="flex  flex-row flex-wrap justify-between font-mono text-xs text-gray-500 py-5 px-7 w-screen mb-2">
+<span className="hover:text-purple-600 cursor-pointer">© Cstory Inc.</span>
+<div>
+  <span className="hover:text-purple-600 cursor-pointer">Privacy Policy </span>
+  &nbsp;
+  <span className="hover:text-purple-600 cursor-pointer">Terms</span>
+</div>
+</div>
+</>
+)
+}