Skip to content

Commit 8da49d2

Browse files
author
furkan.portakal
committed
feat: create layout && pages
1 parent c1b6e37 commit 8da49d2

File tree

7 files changed

+245
-13
lines changed

7 files changed

+245
-13
lines changed

‎components/bookmarks/index.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
export default function Bookmarks() {
2+
return (
3+
<section className="w-full border border-y-0 border-gray-800" style={{ maxWidth: '600px' }}>
4+
{/*Content (Center)*/}
5+
<aside>
6+
<div className="flex">
7+
<div className="flex-1 mx-2">
8+
<h2 className="px-4 py-2 text-xl font-semibold text-white">Home</h2>
9+
</div>
10+
</div>
11+
</aside>
12+
<ul className="list-none">
13+
<li>
14+
{/*second tweet*/}
15+
<article className="hover:bg-gray-800 transition duration-350 ease-in-out">
16+
<div className="flex flex-shrink-0 p-4 pb-0">
17+
<a className="flex-shrink-0 group block">
18+
<div className="flex items-center">
19+
<div>
20+
<img className="inline-block h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1121328878142853120/e-rpjoJi_bigger.png" alt="" />
21+
</div>
22+
<div className="ml-3">
23+
<p className="text-base leading-6 font-medium text-white">
24+
Sonali Hirave
25+
<span className="text-sm leading-5 font-medium text-gray-400 group-hover:text-gray-300 transition ease-in-out duration-150">
26+
@ShonaDesign . 16 April
27+
</span>
28+
</p>
29+
</div>
30+
</div>
31+
</a>
32+
</div>
33+
<div className="pl-16">
34+
<p className="text-base width-auto font-medium text-white flex-shrink">
35+
Day 07 of the challenge <a className="text-blue-400">#100DaysOfCode</a>
36+
I was wondering what I can do with <a className="text-blue-400">#tailwindcss</a>, so just started building
37+
Twitter UI using Tailwind and so far it looks so promising. I will post my code after completion.
38+
[07/100]
39+
<a className="text-blue-400"> #WomenWhoCode #CodeNewbie</a>
40+
</p>
41+
<div className="md:flex-shrink pr-6 pt-3">
42+
<div className="bg-cover bg-no-repeat bg-center rounded-lg w-full h-64" style={{ height: '200px', backgroundImage: 'url(https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80)' }}>
43+
<img className="opacity-0 w-full h-full" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="" />
44+
</div>
45+
</div>
46+
<div className="flex items-center py-4">
47+
<div className="flex-1 flex items-center text-white text-xs text-gray-400 hover:text-blue-400 transition duration-350 ease-in-out">
48+
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 mr-2">
49+
<g>
50+
<path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z" />
51+
</g>
52+
</svg>
53+
12.3 k
54+
</div>
55+
<div className="flex-1 flex items-center text-white text-xs text-gray-400 hover:text-green-400 transition duration-350 ease-in-out">
56+
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 mr-2">
57+
<g>
58+
<path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z" />
59+
</g>
60+
</svg>
61+
14 k
62+
</div>
63+
<div className="flex-1 flex items-center text-white text-xs text-gray-400 hover:text-red-600 transition duration-350 ease-in-out">
64+
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 mr-2">
65+
<g>
66+
<path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z" />
67+
</g>
68+
</svg>
69+
14 k
70+
</div>
71+
<div className="flex-1 flex items-center text-white text-xs text-gray-400 hover:text-blue-400 transition duration-350 ease-in-out">
72+
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 mr-2">
73+
<g>
74+
<path d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z" />
75+
<path d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z" />
76+
</g>
77+
</svg>
78+
</div>
79+
</div>
80+
</div>
81+
<hr className="border-gray-800" />
82+
</article>
83+
</li>
84+
<li>
85+
</li>
86+
</ul>
87+
</section>
88+
)
89+
}

‎components/layout/index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Navbar from '../navbar'
2+
3+
export default function Layout({ children }) {
4+
return (
5+
<div className="p-relative min-h-screen h-full" style={{ backgroundColor: '#222831' }}>
6+
<div className="flex justify-center">
7+
<div className="p-relative min-h-screen h-full" style={{ backgroundColor: '#222831' }}>
8+
<div className="flex justify-center">
9+
<Navbar />
10+
<main role="main">
11+
<div className="flex" style={{ width: '990px' }}>
12+
<section className="w-3/5 border border-y-0 border-gray-800" style={{ maxWidth: '600px' }}>
13+
{children}
14+
</section>
15+
</div>
16+
</main>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
)
22+
}

‎components/navbar/index.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Link from 'next/link'
2+
3+
export default function Navbar() {
4+
return (
5+
<header className="text-white h-12 py-4 h-auto">
6+
<div style={{ width: '275px' }}>
7+
8+
<div className="overflow-y-auto fixed h-screen pr-3" style={{ width: '275px' }}>
9+
{/*Logo*/}
10+
<Link href='/'>
11+
<svg width="150" height="50" className="text-white ml-3 pt8 cursor-pointer" viewBox="0 0 445 158" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<path d="M14.4721 52.3197C16.8802 27.7404 37.5464 9 62.2433 9H153.848C197.146 9 205.105 70.6642 163.226 81.6582V81.6582L123.802 87.9072C118.446 88.7562 113.272 90.5066 108.501 93.0842L84.3842 106.113C50.5591 124.387 10.0491 97.4643 13.7978 59.2017L14.4721 52.3197Z" fill="#FFD365" />
13+
<path d="M46.6 68H20.84V64H45.16L49.96 59.92V55.52L45.08 51.04H27.32L20.2 44.64V36.24L27.32 29.92H52.04V33.92H28.84L24.28 37.92V42.96L28.84 47.04H46.68L54.04 53.68V61.84L46.6 68ZM94.2744 67.92V64.64L89.7944 68H68.1144L60.4344 61.6V36.08L68.1144 29.84H89.8744L94.2744 34.32V29.84H98.4344V67.92H94.2744ZM94.2744 40.32L88.4344 34H69.6344L64.7544 38.08V59.68L69.6344 63.68H88.6744L94.2744 59.36V40.32ZM127.029 68H120.869L105.669 50.8V29.76H109.989V49.12L122.709 63.68H125.029L136.869 49.36V29.76H141.109V50.88L127.029 68ZM151.864 49.92V59.52L157.384 63.68H176.504L181.544 59.44L184.424 62.8L177.944 68H156.024L147.544 61.76V36L155.944 29.84H177.944L185.624 36.08V49.92H151.864ZM181.304 38.08L176.504 34H157.384L151.864 38.24V45.84H181.304V38.08Z" fill="#393E46" />
14+
<path d="M243.917 68V41.36L238.477 34.08H226.797L222.237 57.04H217.997L213.357 34.08H201.757L196.317 41.36V68H191.997V40L199.677 29.76H216.557L220.077 47.52L223.597 29.76H240.557L248.157 40V68H243.917ZM288.415 67.92V64.64L283.935 68H262.255L254.575 61.6V36.08L262.255 29.84H284.015L288.415 34.32V29.84H292.575V67.92H288.415ZM288.415 40.32L282.575 34H263.775L258.895 38.08V59.68L263.775 63.68H282.815L288.415 59.36V40.32ZM325.329 36.32L322.289 34.08H310.449L304.929 38.16V68H300.609V29.76H304.929V33.52L309.649 29.76H323.729L327.889 32.88L325.329 36.32ZM335.063 68V12.16H339.303V47.6L360.903 33.44V29.6H365.063V35.68L345.063 48.8L365.063 62.24V68H360.903V64.48L341.223 51.44L339.303 52.88V68H335.063Z" fill="white" fillOpacity="0.87" />
15+
</svg>
16+
</Link>
17+
18+
{/* Nav*/}
19+
<nav className="mt-5 px-2">
20+
<Link href='/'>
21+
<a className="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-semibold rounded-full hover:bg-gray-800 hover:bg-warning">
22+
<svg className="mr-4 h-6 w-6 " stroke="currentColor" fill="none" viewBox="0 0 24 24">
23+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6" />
24+
</svg>
25+
Home
26+
</a>
27+
</Link>
28+
<Link href='/explore'>
29+
<a className="mt-1 group flex items-center px-2 py-2 text-base leading-6 font-semibold rounded-full hover:bg-gray-800 hover:bg-warning">
30+
<svg className="mr-4 h-6 w-6" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} stroke="currentColor" viewBox="0 0 24 24">
31+
<path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
32+
</svg>
33+
Explore
34+
35+
</a>
36+
</Link>
37+
</nav>
38+
{/* User Menu */}
39+
<div className="absolute" style={{ bottom: '2rem' }}>
40+
<div className="flex-shrink-0 flex hover:bg-warning rounded-full px-4 py-3 mt-12 mr-2">
41+
<div className="flex-shrink-0 group block">
42+
<div className="dropdown dropdown-top">
43+
<label tabIndex="0" className="btn m-1 bg-accent">
44+
<div className="flex items-center">
45+
<div>
46+
<img className="inline-block h-10 w-10 rounded-full" src="https://pbs.twimg.com/profile_images/1254779846615420930/7I4kP65u_400x400.jpg" alt="" />
47+
</div>
48+
<div className="ml-3">
49+
<p className="text-sm text-white leading-5 font-medium group-hover:text-gray-300 transition ease-in-out duration-150">
50+
@OsmanAbi
51+
</p>
52+
</div>
53+
</div>
54+
</label>
55+
<ul tabIndex="0" className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
56+
<li><Link href='/profile/1232-4124-4123'><a>Profile</a></Link></li>
57+
<li><Link href='/auth/login'><a>Log out</a></Link></li>
58+
</ul>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</header>
66+
)
67+
}

‎pages/auth/login.js

+40-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,53 @@
11
// import { fetcher } from '../../lib'
22
import useSWR from "swr";
3+
import { useRouter } from 'next/router'
34
const fetcher = (...args) => fetch(...args).then(res => res.json())
45

56
export default function Login({ users }) {
7+
const router = useRouter()
68
const { user, isLoading, isError } = getData()
7-
console.log(user);
89
if (isError) return <div>Error fetching data</div>
910
if (isLoading) return <div>Loading...</div>
1011

12+
const redirect = (e) => {
13+
e.preventDefault()
14+
router.push('/')
15+
}
16+
1117
return (
12-
<div>
13-
asd
18+
<div className="font-sans">
19+
<div className="relative min-h-screen flex flex-col sm:justify-center items-center">
20+
<div className="relative sm:max-w-sm w-full">
21+
<div className="card bg-secondary-content shadow-lg w-full h-full rounded-3xl absolute transform -rotate-6" />
22+
<div className="card bg-secondary shadow-lg w-full h-full rounded-3xl absolute transform rotate-6" />
23+
<div className="relative w-full rounded-3xl px-6 py-4 bg-gray-100 shadow-md">
24+
<label className="block mt-3 text-sm text-gray-700 text-center font-semibold">
25+
Log In
26+
</label>
27+
<form onSubmit={(e) => redirect(e)} className="mt-10">
28+
<div>
29+
<input type="email" placeholder="Email" className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0" />
30+
</div>
31+
<div className="mt-7">
32+
<input type="password" placeholder="Password" className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0" />
33+
</div>
34+
<div className="mt-7">
35+
<button className="bg-secondary-content w-full py-3 rounded-xl text-white shadow-xl hover:shadow-inner focus:outline-none transition duration-500 ease-in-out transform hover:-translate-x hover:scale-105">
36+
Login
37+
</button>
38+
</div>
39+
<div className="mt-7">
40+
<div className="flex justify-center items-center">
41+
<label className="mr-2">Do not you have an account yet?</label>
42+
<a className=" text-blue-500 transition duration-500 ease-in-out transform hover:-translate-x hover:scale-105">
43+
Sign Up
44+
</a>
45+
</div>
46+
</div>
47+
</form>
48+
</div>
49+
</div>
50+
</div>
1451
</div>
1552
)
1653
}

‎pages/explore.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Layout from "../components/layout"
2+
3+
export default function Explore() {
4+
return (
5+
<Layout>
6+
<div>Coming soon...</div>
7+
</Layout>
8+
)
9+
}

‎pages/index.js

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1+
import Bookmarks from "../components/bookmarks"
2+
import Layout from "../components/layout"
3+
14
export default function Home() {
25
return (
3-
<h1 className="text-3xl font-bold text-primary">
4-
<div>
5-
<button className="btn btn-active">Button</button>
6-
<button className="btn btn-active btn-primary">Button</button>
7-
<button className="btn btn-active btn-secondary">Button</button>
8-
<button className="btn btn-active btn-accent">Button</button>
9-
<button className="btn btn-active btn-ghost">Button</button>
10-
<button className="btn btn-active btn-link">Button</button>
11-
</div>
12-
</h1>
6+
<Layout>
7+
<Bookmarks />
8+
</Layout>
139
)
1410
}

‎pages/profile/[...id].js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Layout from "../../components/layout"
2+
3+
4+
export default function Profile() {
5+
return (
6+
<Layout>
7+
<span>
8+
Osman
9+
</span>
10+
</Layout>
11+
)
12+
}

0 commit comments

Comments
 (0)