Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

README.md

@@ -1,29 +1,2 @@
-# Next.js + Tailwind CSS Example
-
-This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v2.2)](https://blog.tailwindcss.com/tailwindcss-2-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
-
-It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS.
-
-## Preview
-
-Preview the example live on [StackBlitz](http://stackblitz.com/):
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-tailwindcss with-tailwindcss-app
-# or
-yarn create next-app --example with-tailwindcss with-tailwindcss-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+# instagram
+ An Instagram Clone With Next Js and Tailwind CSS

components/Feed.js

@@ -0,0 +1,24 @@
+import MiniProfile from "./MiniProfile"
+import Suggestions from "./Suggestions"
+import Posts from "./Posts"
+import Stories from "./Stories"
+
+function Feed() {
+  return (
+    <main className="grid grid-cols-1 md:grid-cols-2 md:max-w-3xl xl:grid-cols-3 xl:max-w-6xl mx-auto">
+      <section className="col-span-2">
+        <Stories />
+        <Posts />
+      </section>
+
+      <section className="hidden xl:inline-grid md:col-span-1">
+        <div className="fixed top-20">
+          <MiniProfile />
+          <Suggestions />
+        </div>
+      </section>
+    </main>
+  )
+}
+
+export default Feed

components/Header.js

@@ -0,0 +1,62 @@
+import Image from 'next/image';
+import { SearchIcon, 
+  PlusCircleIcon, 
+  HeartIcon, 
+  MenuIcon, 
+  PaperAirplaneIcon,
+  UserGroupIcon
+} from '@heroicons/react/outline';
+import { HomeIcon } from '@heroicons/react/solid';
+
+function Header() {
+  return (
+    <div className="shadow-sm border-b-1 bg-white sticky top-0 z-50">
+      <div className="flex justify-between bg-white max-w-6xl mx-5 xl:mx-auto">
+        {/* Left */}
+        <div className="relative hidden lg:inline-grid w-24  cursor-pointer">
+          <Image src="https://links.papareact.com/ocw"
+            layout="fill" objectFit="contain" />
+        </div>
+
+        <div className="relative w-10 lg:hidden flex-shrink-0 cursor-pointer">
+          <Image src="https://links.papareact.com/jjm"
+            layout="fill" objectFit="contain" />
+        </div>
+
+        {/* Middle - search input */}
+        <div className="max-w-xs">
+          <div className="relative mt-1 p-3 rounded-md ">
+            <div className="absolute inset-y-0 pl-3 flex items-center pointer-events-none">
+              <SearchIcon className="h-5 w-5 text-gray-500" />
+            </div>
+            <input type="text" placeholder="Search" 
+              className="bg-gray-50 block w-full pl-10 sm:text-sm focus:border-black focus:ring-black border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+
+        {/* Right */}
+        <div className="flex items-center justify-end space-x-4">
+          <HomeIcon className="navBtn" />
+          <MenuIcon className="h-6 md:hidden cursor-pointer" />
+
+          <div className="relative navBtn">
+            <PaperAirplaneIcon className="navBtn rotate-45" />
+            <div className="absolute -top-1 -right-1 text-xs w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse text-white font-semibold">3</div>
+          </div>
+          <PlusCircleIcon className="navBtn" />
+          <UserGroupIcon className="navBtn" />
+          <HeartIcon className="navBtn" />
+
+          <img 
+            className="h-10 rounded-full cursor-pointer" 
+            src="https://media.istockphoto.com/photos/colored-powder-explosion-abstract-closeup-dust-on-backdrop-colorful-picture-id1072093690?k=20&m=1072093690&s=612x612&w=0&h=Ns3WeEm1VrIHhZOmhiGY_fYKvIlbJrVADLqfxyPQVPM=" 
+            alt="Profile Picture" 
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header

components/MiniProfile.js

@@ -0,0 +1,18 @@
+function MiniProfile() {
+  return (
+    <div className="flex items-center justify-between mt-14 ml-10">
+      <img 
+        src="https://media.istockphoto.com/photos/learn-to-love-yourself-first-picture-id1291208214?b=1&k=20&m=1291208214&s=170667a&w=0&h=sAq9SonSuefj3d4WKy4KzJvUiLERXge9VgZO-oqKUOo=" alt=""
+        className="rounded-full border p-[2px] w-16 h-16"
+      />
+      <div className="flex-1 mx-4">
+        <h2 className="font-bold">rickem</h2>
+        <h3 className="text-sm text-gray-400">welcome to secret</h3>
+      </div>
+
+      <button className="text-blue-400 text-sm font-semibold">Sign out</button>
+    </div>
+  )
+}
+
+export default MiniProfile

components/Post.js

@@ -0,0 +1,53 @@
+import {
+  BookmarkIcon,
+  ChatIcon,
+  DotsHorizontalIcon,
+  EmojiHappyIcon,
+  HeartIcon,
+  PaperAirplaneIcon
+} from "@heroicons/react/outline";
+
+import { HeartIcon as HeartIconFilled } from "@heroicons/react/solid";
+
+function Post({ id, username, userImg, img, caption }) {
+  return (
+    <div className="bg-white my-7 border rounded-sm">
+      <div className="flex items-center p-5">
+        <img className="rounded-full h-12 w-12 object-contain border p-1 mr-3" src={userImg} alt="" />
+        <p className="flex-1 font-bold">{ username }</p>
+        <DotsHorizontalIcon className="h-5" />
+      </div>
+
+      <img src={img} alt=""
+        className="w-full object-cover"
+      />
+      <div className="flex items-center justify-between px-4 pt-4">
+        <div className="flex items-center space-x-4">
+          <HeartIcon className="iconBtn" />
+          <ChatIcon className="iconBtn" />
+          <PaperAirplaneIcon className="iconBtn" />
+        </div>
+
+        <BookmarkIcon className="iconBtn" />
+      </div>
+      {/* caption */}
+      <p className="p-5 truncate">
+        <span className="font-bold mr-1">{ username } </span>
+        { caption }
+      </p>
+
+      {/* comments */}
+
+      {/* input box  */}
+      <form className="flex items-center p-4">
+        <EmojiHappyIcon className="h-7" />
+        <input className="border-none flex-1 focus:ring-0 outline-none" 
+          type="text" placeholder="Comment..." 
+        />
+        <button className="font-semibold text-blue-400">Post</button>
+      </form>
+    </div>
+  )
+}
+
+export default Post

components/Posts.js

@@ -0,0 +1,39 @@
+import Post from "./Post"
+
+const posts = [
+  {
+    id: '123',
+    username: 'rickem',
+    userImg: 'https://media.istockphoto.com/photos/learn-to-love-yourself-first-picture-id1291208214?b=1&k=20&m=1291208214&s=170667a&w=0&h=sAq9SonSuefj3d4WKy4KzJvUiLERXge9VgZO-oqKUOo=',
+    img: 'https://media.istockphoto.com/photos/colored-powder-explosion-abstract-closeup-dust-on-backdrop-colorful-picture-id1072093690?k=20&m=1072093690&s=612x612&w=0&h=Ns3WeEm1VrIHhZOmhiGY_fYKvIlbJrVADLqfxyPQVPM=',
+    caption: 'This is dope',
+  },
+  {
+    id: '1233',
+    username: 'rickem',
+    userImg: 'https://media.istockphoto.com/photos/learn-to-love-yourself-first-picture-id1291208214?b=1&k=20&m=1291208214&s=170667a&w=0&h=sAq9SonSuefj3d4WKy4KzJvUiLERXge9VgZO-oqKUOo=',
+    img: 'https://media.istockphoto.com/photos/colored-powder-explosion-abstract-closeup-dust-on-backdrop-colorful-picture-id1072093690?k=20&m=1072093690&s=612x612&w=0&h=Ns3WeEm1VrIHhZOmhiGY_fYKvIlbJrVADLqfxyPQVPM=',
+    caption: 'This is dope',
+  }
+];
+
+function Posts() {
+  return (
+    <div>
+      {
+        posts.map((post) => (
+          <Post 
+            key={post.id} 
+            id={post.id} 
+            username={post.username}
+            userImg={post.userImg}
+            img={post.img}
+            caption={post.caption}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default Posts

components/Stories.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import * as faker from 'faker';
+import Story from "./Story";
+
+function Stories() {
+  const [suggestions, setSuggestions] = useState([]);
+
+  useEffect(() => {
+    const suggestions = [...Array(20)].map((_, i) => ({
+        ...faker.helpers.contextualCard(),
+        id: i,
+      }));
+
+    setSuggestions(suggestions);
+
+    // console.log(suggestions);
+  }, []);
+
+  return (
+    <div className="flex space-x-2 p-6 bg-white mt-8 border 
+    border-gray-200 rounded-sm overflow-x-scroll scrollbar-thin scrollbar-thumb-black">
+      {
+        suggestions.map(profile => (
+          <Story 
+            key={profile.id} 
+            img={profile.avatar} 
+            username={profile.username}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default Stories

components/Story.js

@@ -0,0 +1,13 @@
+function Story({ img, username }) {
+  return (
+    <div className="">
+      <img className="h-14 w-14 rounded-full p-[1.5px] 
+      border-red-500 border-2 object-contain cursor-pointer 
+      hover:scale-110 transition transform duration-200 ease-out"
+        src={img} alt="" />
+      <p className="text-xs w-14 truncate text-center">{ username }</p>
+    </div>
+  )
+}
+
+export default Story

components/Suggestions.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react"
+import faker from 'faker';
+
+function Suggestions() {
+  const [suggestions, setSuggestions] = useState([]);
+
+  useEffect(() => {
+    const suggestions = [...Array(5)].map((_, i) => (
+      {
+        ...faker.helpers.contextualCard(),
+        id: i,
+      }
+    ));
+
+    setSuggestions(suggestions);
+  }, []);
+  return (
+    <div className="mt-4 ml-10">
+      <div className="flex justify-between text-sm mb-5">
+        <h3 className="text-sm font-bold text-gray-400">Suggestions for you</h3>
+        <button className="text-gray-600 font-semibold">See all</button>
+      </div>
+
+      {
+        suggestions.map((profile) => (
+          <div key={profile.id} className="flex items-center justify-between mt-3">
+            <img 
+              src={profile.avatar} alt=""
+              className="w-10 h-10 rounded-full border p-[2px]"
+            />
+            <div className="flex-1 ml-4">
+              <h2 className="font-semibold text-sm">{ profile.username }</h2>
+              <h3 className="text-xs text-gray-400">Works At { profile.company.name }</h3>
+            </div>
+            <button className="text-blue-400 text-xs font-bold">Follow</button>
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default Suggestions

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['links.papareact.com'],
+  }
+}