add user page

.babelrc

@@ -1,4 +1,13 @@
 {
-  "presets": ["next/babel"],
-  "plugins": [["styled-components", { "ssr": true }]]
-}
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true
+      }
+    ]
+  ]
+}

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_UNSPLASH_API_KEY=_-11Cu6zCehO-IGPcUHSAdOzOezV_9k0ZukKWPneV3Q

next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  reactStrictMode: true,
+
+  images: {
+    domains: ["images.unsplash.com"],
+  },
+};

package.json

@@ -6,13 +6,20 @@
     "start": "next start"
   },
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "axios": "^0.23.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-elastic-carousel": "^0.11.5",
     "react-is": "^17.0.2",
-    "styled-components": "^5.2.3"
+    "react-toastify": "^8.0.3",
+    "styled-components": "^5.2.3",
+    "unsplash-js": "^7.0.15"
   },
   "devDependencies": {
+    "@types/axios": "^0.14.0",
     "@types/node": "15.0.0",
     "@types/react": "17.0.4",
     "@types/react-dom": "17.0.3",

src/components/CarouselPerfil/index.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Router from 'next/router'
+
+import Carousel from "react-elastic-carousel";
+
+import { CarouselPerfilStyle } from "./styles";
+import api from '@/service/api';
+import React from 'react';
+import { toast } from 'react-toastify';
+
+import { UserCarousel } from '@/interface'
+import { CardContent, Typography } from '@material-ui/core';
+import { CardUserCarousel } from '@/styles/MaterialGuide/'
+
+
+export default function CarouselPerfil() {
+  const [userCarousel, setUserCarousel] = useState<any[]>([]);
+
+  useEffect(() => {
+    function fetchApiUnsplash() {
+      api.get('search/users?', {
+        params: {
+          query: 'usa',
+          client_id: process.env.NEXT_PUBLIC_UNSPLASH_API_KEY
+        }
+      }).then((response: any) => setUserCarousel(response.data.results)
+      ).catch(error => toast.warning(error.message));
+    }
+    fetchApiUnsplash();
+  }, [])
+
+  const handleRedirectUserPerfil = (username: string) => () => {
+    Router.push(`/users/${username}`)
+  }
+
+  return (
+    <CarouselPerfilStyle>
+      <Carousel
+        showArrows={false}
+        isRTL
+        itemPadding={[0, 5]}
+        breakPoints={
+          [
+            { width: 1, itemsToShow: 5 },
+            { width: 550, itemsToShow: 6 },
+            { width: 768, itemsToShow: 8 },
+            { width: 1200, itemsToShow: 12 },
+          ]
+        }
+      >
+        {userCarousel.map((item: UserCarousel, index: number) => (
+          <CardUserCarousel
+            key={index}
+            onClick={handleRedirectUserPerfil(item.username)}
+          >
+            <div className="profile-picture">
+              <Image src={item.profile_image?.medium} alt={`Profile picture of ${item.name}`} width={56} height={56} />
+            </div>
+            <CardContent>
+              <Typography variant="h2" component="p">
+                {item.name}
+              </Typography>
+            </CardContent>
+          </CardUserCarousel>
+        ))}
+      </Carousel>
+    </CarouselPerfilStyle >
+  );
+}

src/components/CarouselPerfil/styles.ts

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const CarouselPerfilStyle = styled.div`
+  width: 100%;
+  height: 100px;
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .rec {
+    margin-top: 0;
+  }
+  .rec-dot {
+    box-shadow: none;
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+  .rec-item-wrapper {
+    width: 80px;
+  }
+  .MuiTypography-h2 {
+    color: #262626;
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

src/components/Header/index.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+import { HeaderStyled } from './styles';
+
+export default function Header() {
+  return (
+    <HeaderStyled>
+      <Link href="/">
+        <a target="_self">
+          <Image src="/image/mobile-nav.png" alt="instagram brand icon"
+            width={103} height={29} />
+        </a>
+      </Link>
+    </HeaderStyled>
+  )
+}

src/components/Header/styles.ts

@@ -0,0 +1,13 @@
+import theme from "@/styles/theme";
+import styled from "styled-components";
+
+export const HeaderStyled = styled.div`
+  width: 414px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: ${theme.palette.background.default};
+  border-bottom: 1px solid ${theme.palette.text.disabled};
+`;

src/interface/index.ts

@@ -0,0 +1,21 @@
+export interface UserInstagram {
+  instagram_username: string;
+  name: string;
+  bio: string;
+  location: string;
+  links: Array<string>;
+  profile_image: Array<string>;
+  following_count: number;
+  followers_count: number;
+  total_photos: number;
+}
+export interface UserPhotosData {
+  photos: Array<string>;
+}
+
+export interface UserCarousel {
+  username: string;
+  id: string;
+  name: string;
+  profile_image: any;
+}

src/pages/_document.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
+import { ServerStyleSheets } from '@material-ui/styles';
+import { ServerStyleSheet } from 'styled-components';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="pt">
+        <Head>
+
+          <meta charSet="UTF-8" />
+
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+            rel="stylesheet"
+          />
+          <link
+            rel="shortcut icon"
+            href="/image/shortcut-icon.jpg"
+            type="image/x-icon"
+          />
+
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
+
+  const materialSheet = new ServerStyleSheets();
+  const styledComponentSheet = new ServerStyleSheet();
+  const originalRenderPage = ctx.renderPage;
+
+  try {
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) =>
+          styledComponentSheet.collectStyles(
+            materialSheet.collect(<App {...props} />),
+          ),
+      });
+
+    const initialProps = await Document.getInitialProps(ctx);
+
+    return {
+      ...initialProps,
+      styles: [
+        ...React.Children.toArray(initialProps.styles),
+        materialSheet.getStyleElement(),
+        styledComponentSheet.getStyleElement(),
+      ],
+    };
+  } finally {
+    styledComponentSheet.seal();
+  }
+};
+
+export default MyDocument;

src/pages/index.tsx

@@ -0,0 +1,16 @@
+import { HomeStyled } from '@/styles/pages/home';
+
+import CarouselPerfil from '@/components/CarouselPerfil';
+import Header from '@/components/Header';
+
+export default function Home() {
+  return (
+    <HomeStyled>
+      <Header />
+
+      <div className="home-carousel-content">
+        <CarouselPerfil />
+      </div>
+    </HomeStyled>
+  )
+}