tailwind implemented

JVGS1111 · Jul 18, 2024 · 9a66af5 · 9a66af5
1 parent f46aa5c
commit 9a66af5
Show file tree

Hide file tree

Showing 17 changed files with 186 additions and 189 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends":[
+     "next/core-web-vitals",
+     "@rocketseat/eslint-config/next"
+  ]
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-};
+  pageExtensions: ['page.tsx', 'api.ts', 'api.tsx'],
+}
 
-export default nextConfig;
+export default nextConfig
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.7",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18"
@@ -21,7 +22,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('prettier-plugin-tailwindcss')],
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -0,0 +1,42 @@
+import { ArrowLeft, GithubLogo } from '@phosphor-icons/react'
+
+interface HeaderProps {
+  title: string
+  variante: 'home' | 'create'
+}
+
+export function Header({ title, variante = 'home' }: HeaderProps) {
+  function renderActionBar() {
+    if (variante === 'home') {
+      return (
+        <div className="flex w-full">
+          <button className="ml-auto">
+            <GithubLogo className="text-title" size={32} />
+          </button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex w-full justify-between ">
+        <button>
+          <ArrowLeft className="text-title" size={32} />
+        </button>
+        <button className="font-medium text-title disabled:text-text">
+          done
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <header className="flex h-52 w-full justify-center bg-white">
+      <div className="flex w-full max-w-app flex-col justify-between pb-9 pl-6 pr-6 pt-6">
+        {renderActionBar()}
+        <div className="mt-auto max-w-80 text-2xl font-medium text-title">
+          {title}
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/src/components/NavigationBar/NavItem.tsx b/src/components/NavigationBar/NavItem.tsx
@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+interface NavItemProps {
+  text: string
+}
+
+export function NavItem({ text }: NavItemProps) {
+  return (
+    <Link
+      href="#"
+      className="min-w-button rounded-md bg-white px-3 py-2.5 text-center shadow-sm"
+      data-active={true}
+    >
+      <span className="text-xs font-medium text-text">{text}</span>
+    </Link>
+  )
+}
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
@@ -0,0 +1,11 @@
+import { NavItem } from './NavItem'
+
+export function NavigationBar() {
+  return (
+    <nav className="flex w-full justify-center gap-2.5 px-6 py-3">
+      <NavItem text="In progress" />
+      <NavItem text="Completed" />
+      <NavItem text="add list" />
+    </nav>
+  )
+}
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
@@ -0,0 +1,6 @@
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx
@@ -0,0 +1,26 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <main className="h-screen bg-app-bg">
+          <Main />
+          <NextScript />
+        </main>
+      </body>
+    </Html>
+  )
+}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -0,0 +1,11 @@
+import { Header } from '@/components/Header'
+import { NavigationBar } from '@/components/NavigationBar'
+
+export default function Home() {
+  return (
+    <div>
+      <Header title="What do we have to do for today?" variante="home" />
+      <NavigationBar />
+    </div>
+  )
+}
diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
@@ -0,0 +1 @@
+export { default } from './home'