From 9a66af5ebd1d1bf468eca48750e509638e2a5e7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Vin=C3=ADcius=20Guerber=20de=20Souza?= Date: Thu, 18 Jul 2024 15:39:29 -0300 Subject: [PATCH] tailwind implemented --- .eslintrc.json | 5 +- next.config.mjs | 5 +- package-lock.json | 41 +++++--- package.json | 3 +- prettier.config.js | 3 + src/components/Header/index.tsx | 42 ++++++++ src/components/NavigationBar/NavItem.tsx | 17 ++++ src/components/NavigationBar/index.tsx | 11 +++ src/pages/_app.page.tsx | 6 ++ src/pages/_app.tsx | 6 -- src/pages/_document.page.tsx | 26 +++++ src/pages/_document.tsx | 13 --- src/pages/home/index.tsx | 11 +++ src/pages/index.page.tsx | 1 + src/pages/index.tsx | 118 ----------------------- src/styles/globals.css | 30 ------ tailwind.config.ts | 37 ++++++- 17 files changed, 186 insertions(+), 189 deletions(-) create mode 100644 prettier.config.js create mode 100644 src/components/Header/index.tsx create mode 100644 src/components/NavigationBar/NavItem.tsx create mode 100644 src/components/NavigationBar/index.tsx create mode 100644 src/pages/_app.page.tsx delete mode 100644 src/pages/_app.tsx create mode 100644 src/pages/_document.page.tsx delete mode 100644 src/pages/_document.tsx create mode 100644 src/pages/home/index.tsx create mode 100644 src/pages/index.page.tsx delete mode 100644 src/pages/index.tsx diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..19aedc4 100644 --- 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 index d5456a1..ad9d537 100644 --- 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 index 7830b92..2a3c8a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "tarerefas", "version": "0.1.0", "dependencies": { + "@phosphor-icons/react": "^2.1.7", "next": "14.2.5", "react": "^18", "react-dom": "^18" @@ -20,7 +21,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" } @@ -404,6 +405,18 @@ "node": ">= 8" } }, + "node_modules/@phosphor-icons/react": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.7.tgz", + "integrity": "sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">= 16.8", + "react-dom": ">= 16.8" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -4074,20 +4087,20 @@ } }, "node_modules/prettier-plugin-tailwindcss": { - "version": "0.6.5", - "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz", - "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz", + "integrity": "sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==", "dev": true, "engines": { - "node": ">=14.21.3" + "node": ">=12.17.0" }, "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", + "@shufo/prettier-plugin-blade": "*", "@trivago/prettier-plugin-sort-imports": "*", - "@zackad/prettier-plugin-twig-melody": "*", - "prettier": "^3.0", + "prettier": "^2.2 || ^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-import-sort": "*", @@ -4095,9 +4108,9 @@ "prettier-plugin-marko": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", - "prettier-plugin-sort-imports": "*", "prettier-plugin-style-order": "*", - "prettier-plugin-svelte": "*" + "prettier-plugin-svelte": "*", + "prettier-plugin-twig-melody": "*" }, "peerDependenciesMeta": { "@ianvs/prettier-plugin-sort-imports": { @@ -4109,10 +4122,10 @@ "@shopify/prettier-plugin-liquid": { "optional": true }, - "@trivago/prettier-plugin-sort-imports": { + "@shufo/prettier-plugin-blade": { "optional": true }, - "@zackad/prettier-plugin-twig-melody": { + "@trivago/prettier-plugin-sort-imports": { "optional": true }, "prettier-plugin-astro": { @@ -4136,14 +4149,14 @@ "prettier-plugin-organize-imports": { "optional": true }, - "prettier-plugin-sort-imports": { - "optional": true - }, "prettier-plugin-style-order": { "optional": true }, "prettier-plugin-svelte": { "optional": true + }, + "prettier-plugin-twig-melody": { + "optional": true } } }, diff --git a/package.json b/package.json index ff23317..f56a2c0 100644 --- 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 new file mode 100644 index 0000000..c16670d --- /dev/null +++ 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 new file mode 100644 index 0000000..57596e4 --- /dev/null +++ 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 ( +
+ +
+ ) + } + + return ( +
+ + +
+ ) + } + + return ( +
+
+ {renderActionBar()} +
+ {title} +
+
+
+ ) +} diff --git a/src/components/NavigationBar/NavItem.tsx b/src/components/NavigationBar/NavItem.tsx new file mode 100644 index 0000000..6463bf4 --- /dev/null +++ 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 ( + + {text} + + ) +} diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx new file mode 100644 index 0000000..b16c281 --- /dev/null +++ b/src/components/NavigationBar/index.tsx @@ -0,0 +1,11 @@ +import { NavItem } from './NavItem' + +export function NavigationBar() { + return ( + + ) +} diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx new file mode 100644 index 0000000..021681f --- /dev/null +++ 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 +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx deleted file mode 100644 index a7a790f..0000000 --- a/src/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import "@/styles/globals.css"; -import type { AppProps } from "next/app"; - -export default function App({ Component, pageProps }: AppProps) { - return ; -} diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx new file mode 100644 index 0000000..190b49a --- /dev/null +++ b/src/pages/_document.page.tsx @@ -0,0 +1,26 @@ +import { Html, Head, Main, NextScript } from 'next/document' + +export default function Document() { + return ( + + + + + + + +
+
+ +
+ + + ) +} diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx deleted file mode 100644 index b2fff8b..0000000 --- a/src/pages/_document.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Html, Head, Main, NextScript } from "next/document"; - -export default function Document() { - return ( - - - -
- - - - ); -} diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx new file mode 100644 index 0000000..2bb5a3c --- /dev/null +++ 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 ( +
+
+ +
+ ) +} diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx new file mode 100644 index 0000000..3019882 --- /dev/null +++ b/src/pages/index.page.tsx @@ -0,0 +1 @@ +export { default } from './home' diff --git a/src/pages/index.tsx b/src/pages/index.tsx deleted file mode 100644 index 35ab434..0000000 --- a/src/pages/index.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import Image from "next/image"; -import { Inter } from "next/font/google"; - -const inter = Inter({ subsets: ["latin"] }); - -export default function Home() { - return ( -
-
-

- Get started by editing  - src/pages/index.tsx -

- -
- -
- Next.js Logo -
- - -
- ); -} diff --git a/src/styles/globals.css b/src/styles/globals.css index 875c01e..b5c61c9 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,33 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } -} diff --git a/tailwind.config.ts b/tailwind.config.ts index 1c88df2..6456228 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,12 +1,41 @@ -import type { Config } from "tailwindcss"; +import type { Config } from 'tailwindcss' const config: Config = { content: ['./src/**/*.tsx'], theme: { extend: { - + fontFamily: { + sans: ['Roboto'], + }, + backgroundColor: { + white: '#fff', + 'app-bg': '#F1F5F9', + 'card-bg-1': '#99F6E4', + 'card-bg-2': '#A5F3FC', + 'card-bg-3': '#BAE6FD', + 'card-bg-4': '#BBF7D0', + 'card-bg-5': '#D9F99D', + 'card-bg-6': '#DDD6FE', + 'card-bg-7': '#FECDD3', + 'card-bg-8': '#FED7AA', + 'card-bg-9': '#FEF08A', + input: '#CBD5E1', + red: '#DC2626', + }, + colors: { + text: '#475569', + title: '#1E293B', + placeholder: '#64748B', + red: '#DC2626', + }, + maxWidth: { + app: '500px', + }, + minWidth: { + button: '6.25rem', + }, }, }, plugins: [], -}; -export default config; +} +export default config