Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@zintarh
zintarh committed Apr 5, 2022
1 parent 0abc295 commit 1a67e0a
Show file tree
Hide file tree
Showing 10 changed files with 920 additions and 63 deletions.
35 changes: 35 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"react-tabs": "^4.2.0",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
8 changes: 6 additions & 2 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@

import { BrowserRouter as Router, Routes, Route, } from "react-router-dom";
import SignUpAndSignUp from './pages/SignUpAndSignUp'
import UserDashboard from './pages/Dashboard'
import LoginPage from './pages/Login'
import HomePage from './pages/HomePage'


import './App.css';

Expand All @@ -10,7 +12,9 @@ function App() {
<>
<Router>
<Routes>
<Route path="/" element={<LoginPage />} />
<Route path="/" element={< HomePage/>} />

<Route path="/auth" element={< SignUpAndSignUp/>} />

<Route path="/dashboard" element={<UserDashboard />} />
</Routes>
Expand Down
94 changes: 72 additions & 22 deletions src/components/Navbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,76 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";

export default () => (
<nav className=" ">
<div className="first-nav flex justify-between w-3/4 mx-auto py-4 bg-white">
<div className="logo">
<img
class="block lg:hidden h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
alt="Workflow"
/>

const Navbar = () => {
return (
<nav class="w-3/4 mx-auto flex justify-between pt-4" >
<div class="logo">
<img src="" alt="" />
<img src="" alt="" />
<p>ogplateau</p>
<h1 className="font-extrabold uppercase text-secondary text-2xl">
open<span className="text-primary">Eye</span>
</h1>
</div>

</div>
<div class="left-side">
<div class="search-bar">
<input class="shadow appearance-none border rounded-full w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username" />
</div>
<div>
<FontAwesomeIcon icon={["far", "coffee"]} />
</div>
</div>
</nav>
)
}
<div class="hidden sm:block sm:ml-6 pt-1 pl-3">
<div class="flex space-x-4">
<a
href="#"
class=" hover:text-white px-3 py-2 rounded-md text-sm font-semibold"
aria-current="page"
>
Home
</a>

export default Navbar;
<a
href="#"
class=" hover:underline underline-offset-8 text-sm font-semibold hover:text-white px-3 py-2 rounded-md "
>
Report
</a>

<a
href="#"
class=" text-sm font-semibold hover:text-white px-3 py-2 rounded-md "
>
About
</a>

<a
href="#"
class="bg-primary text-white text-sm font-semibold hover:text-secondary px-4 py-3 rounded-one "
>
Login / Register
</a>
</div>
</div>
</div>

<div className="second-nav bg-primary py-2 mt-4 shadow-2xl">
<div className="nav-links mx-48 ">
<a
href="#"
class=" text-secondary text-sm font-semibold hover:text-white px-3 py-2 rounded-md "
>
Pages
</a>
<a
href="#"
class=" text-white pl-8 text-sm font-semibold hover:text-white px-3 py-2 rounded-md "
>
About
</a>
<a
href="#"
class=" text-white pr-8 text-sm font-semibold hover:text-white px-3 py-2 rounded-md "
>
Dashbaord
</a>
</div>
</div>
</nav>
);
172 changes: 163 additions & 9 deletions src/pages/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,169 @@

import Navbar from '../components/Navbar'
import Navbar from "../components/Navbar";

const UserDashboard = () => {
return (
return (
<div className="wrapper">
<header>
<Navbar />
</header>
<header>
<nav className=" ">
<div className="first-nav flex justify-between mx-48 py-4 bg-white">
<div className="logo">
<img
class="block lg:hidden h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
alt="Workflow"
/>

<h1 className="font-extrabold uppercase text-secondary text-2xl">
open<span className="text-primary">Eye</span>
</h1>
</div>

<div class="hidden sm:block sm:ml-6 pt-1 pl-3">
<div class="flex space-x-4">
<div className="flex justify-center">
<div className="mb-3 xl:w-48 pt-2">
<div className="input-group relative flex flex-wrap items-stretch w-full mb-4">
<input
type="search"
className="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-white bg-primary bg-clip-padding border border-solid border-primary rounded-full transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon2"
/>
</div>
</div>
</div>

<a
href="#"
class="text-white rounded-lg text-sm font-semibold hover:text-secondary px-2 py-2 rounded-one "
>
<i class="fa-solid fa-bell w-10 fa-4x text-primary text-sm w- text-center mx-auto py-2 px-3"></i>
</a>

<a
href="#"
class=" text-primary rounded-lg pt-4 text-md font-semibold hover:text-secondary "
>
<i class="fa-solid fa-plus pr-2 text-primary text-sm w- text-center mx-auto "></i>
Create Feed
</a>
</div>
</div>
</div>
</nav>

<div className="content mx-48 pt-20">
<div className="cards grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="card rounded-xl shadow-2xl bg-white ">
<div className="content">
<div className="card-img bg-primary h-40"></div>

<p className="pt-6 px-5 py-8 text-sm leading-6 font-light text-black">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eveniet cumque delectus.
<a href="" className="text-primary font-extrabold capitalize">
..read more
</a>
</p>
<div className="bottom grid grid-cols-3 bg-secondary ">
<div className="created_date pt-2">
<p className="text-white text-sm">Wed, 3:40PM</p>
</div>
<div className="create_btn">
<a href="">
<i class="fa-solid fa-message text-primary text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
</div>

<div className="create_btn">
<a href="">
<i class="fa-solid fa-thumbs-up text-white text-sm w- text-center mx-auto py-2 px-3"></i>
<span className="text-xs ">20</span>
</a>

<a href="">
<i class="fa-solid fa-thumbs-down text-white text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
</div>
</div>
</div>
</div>

<div className="card rounded-xl shadow-2xl bg-white ">
<div className="content">
<div className="card-img bg-primary h-40"></div>

<p className="pt-6 px-5 py-8 text-sm leading-6 font-light text-black">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eveniet cumque delectus...{" "}
<a href="" className="text-primary font-extrabold capitalize">
..read more
</a>
</p>
<div className="bottom grid grid-cols-3 bg-secondary ">
<div className="created_date pt-2">
<p className="text-white text-sm">Wed, 3:40PM</p>
</div>
<div className="create_btn">
<a href="">
<i class="fa-solid fa-message text-primary text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
</div>

<div className="create_btn">
<a href="">
<i class="fa-solid fa-thumbs-up text-white text-sm w- text-center mx-auto py-2 px-3"></i>
<span className="text-xs ">20</span>
</a>

<a href="">
<i class="fa-solid fa-thumbs-down text-white text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
</div>
</div>
</div>
</div>

<div className="card relative shadow-2xl bg-white rounded-lg ">
<div className="content">
<div className="card-img bg-primary h-40"></div>

<p className="pt-6 px-5 py-8 text-sm leading-6 font-light text-black">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eveniet cumque delectus...{" "}
<a href="" className="text-primary font-extrabold capitalize">
..read more
</a>
</p>
<div className="bottom grid grid-cols-3 bg-secondary px-2 ">
<div className="created_date pt-2">
<p className="text-white text-sm">Wed, 3:40PM</p>
</div>
<div className="create_btn">
<a href="">
<i class="fa-solid fa-message text-primary text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
</div>

<div className="create_btn">
<a href="">
<i class="fa-solid fa-thumbs-up text-white text-sm w- text-center mx-auto py-2 px-3"></i>
<span className="text-xs ">20</span>
</a>

<a href="">
<i class="fa-solid fa-thumbs-down text-white text-sm w- text-center mx-auto py-2 px-3"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>

);
}
);
};

export default UserDashboard;
Loading

0 comments on commit 1a67e0a

Please sign in to comment.