Adding tailwindcss and new design

README.md

@@ -1,34 +1,101 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<div align="center" id="top"> 
+  <img src="./.github/app.gif" alt="Domínio BR" />
 
-## Getting Started
+&#xa0;
 
-First, run the development server:
+  <!-- <a href="https://fipesearch.netlify.app">Demo</a> -->
+</div>
 
-```bash
-npm run dev
-# or
-yarn dev
-```
+<h1 align="center">Domínio BR</h1>
+
+<p align="center">
+  <img alt="Github top language" src="https://img.shields.io/github/languages/top/miguelrisquelme/fipe-search?color=56BEB8">
+
+  <img alt="Github language count" src="https://img.shields.io/github/languages/count/miguelrisquelme/fipe-search?color=56BEB8">
+
+  <img alt="Repository size" src="https://img.shields.io/github/repo-size/miguelrisquelme/fipe-search?color=56BEB8">
+
+  <img alt="License" src="https://img.shields.io/github/license/miguelrisquelme/fipe-search?color=56BEB8">
+
+  <!-- <img alt="Github issues" src="https://img.shields.io/github/issues/miguelrisquelme/fipe-search?color=56BEB8" /> -->
+
+  <!-- <img alt="Github forks" src="https://img.shields.io/github/forks/miguelrisquelme/fipe-search?color=56BEB8" /> -->
+
+  <!-- <img alt="Github stars" src="https://img.shields.io/github/stars/miguelrisquelme/fipe-search?color=56BEB8" /> -->
+</p>
+
+<!-- Status -->
+
+<!-- <h4 align="center">
+	🚧  Domínio BR 🚀 Under construction...  🚧
+</h4>
+
+<hr> -->
+
+<p align="center">
+  <a href="#dart-about">About</a> &#xa0; | &#xa0; 
+  <a href="#sparkles-features">Features</a> &#xa0; | &#xa0;
+  <a href="#rocket-technologies">Technologies</a> &#xa0; | &#xa0;
+  <a href="#white_check_mark-requirements">Requirements</a> &#xa0; | &#xa0;
+  <a href="#checkered_flag-starting">Starting</a> &#xa0; | &#xa0;
+  <a href="#memo-license">License</a> &#xa0; | &#xa0;
+  <a href="https://github.com/miguelrisquelme" target="_blank">Author</a>
+</p>
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+<br>
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+## :dart: About
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+Describe your project
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+## :sparkles: Features
 
-## Learn More
+:heavy_check_mark: Feature 1;\
+:heavy_check_mark: Feature 2;\
+:heavy_check_mark: Feature 3;
+
+## :rocket: Technologies
+
+The following tools were used in this project:
+
+- [Expo](https://expo.io/)
+- [Node.js](https://nodejs.org/en/)
+- [React](https://pt-br.reactjs.org/)
+- [React Native](https://reactnative.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+## :white_check_mark: Requirements
+
+Before starting :checkered_flag:, you need to have [Git](https://git-scm.com) and [Node](https://nodejs.org/en/) installed.
+
+## :checkered_flag: Starting
+
+```bash
+# Clone this project
+$ git clone https://github.com/miguelrisquelme/fipe-search
+
+# Access
+$ cd fipe-search
+
+# Install dependencies
+$ yarn
+
+# Run the project
+$ yarn start
+
+# The server will initialize in the <http://localhost:3000>
+```
 
-To learn more about Next.js, take a look at the following resources:
+## :memo: License
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+This project is under license from MIT. For more details, see the [LICENSE](LICENSE.md) file.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+Made with :heart: by <a href="https://github.com/miguelrisquelme" target="_blank">{{YOUR_NAME}}</a>
 
-## Deploy on Vercel
+&#xa0;
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+<a href="#top">Back to top</a>
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- Quando não tem o domínio
+- Quando digitou errado e dá erro
+- Quando tem o domínio

contents/Home/index.tsx

@@ -7,29 +7,48 @@ export default function Home() {
   const { domain, domainError, domainLoading, getDomain } = useFetchDomain();
 
   return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <h1 className={styles.title}>
-          Registro <span className={styles.titleDetail}>.br</span>
+    <div className="flex justify-center items-center h-screen">
+      <div className="w-2/6">
+        <h1 className="text-5xl font-bold text-gray-600">
+          Domínio
+          <span className="text-6xl font-extrabold text-green-500">.br</span>
         </h1>
-        <h2 className={styles.subtitle}>Consulte domínios disponíveis</h2>
-        <input
-          className={styles.inputDomain}
-          type="text"
-          id="domain"
-          name="domain"
-          placeholder="Digite aqui..."
-          onChange={({ target }) => setDomainSearched(target.value)}
-        />
-        <button
-          className={styles.buttonSearch}
-          onClick={() => getDomain(domainSearched)}
-        >
-          Pesquisar
-        </button>
-
-        {!domainLoading && !domainError && <div>{JSON.stringify(domain)}</div>}
-        {domainError && <div>{JSON.stringify(domain)}</div>}
+        <h2 className="text-lg font-medium text-gray-500 my-3">
+          Consulte aqui domínios .br disponíveis
+        </h2>
+        <div className="flex flex-row">
+          <input
+            className="p-2 w-full border rounded-md mr-2"
+            type="text"
+            id="domain"
+            name="domain"
+            placeholder="Pesquise aqui..."
+            onChange={({ target }) => setDomainSearched(target.value)}
+          />
+          <button
+            className="border-2 border-green-600 text-green-600 p-3 rounded-md font-bold hover:bg-green-600 hover:text-white transition-colors"
+            onClick={() => getDomain(domainSearched)}
+          >
+            Pesquisar
+          </button>
+        </div>
+        {!domainError && !domainLoading && domain?.status === "AVAILABLE" && (
+          <div className="w-full flex flex-col p-3 my-3 border-l-8 border-green-400 bg-green-100 font-bold">
+            <span className="text-green-700">Aoba, domínio disponível! </span>
+            <span>
+              👉{" "}
+              <a
+                href={`https://registro.br/busca-dominio/?fqdn=${domainSearched}`}
+                target="_blank"
+                rel="noreferrer"
+                className="hover:underline"
+              >
+                {domain.fqdn}
+              </a>{" "}
+              👈
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );

contents/Home/useFetchDomain.ts

@@ -1,17 +1,25 @@
 import { useCallback, useState } from "react";
 import api from "../../utils/api";
 
+type Domain = {
+  status: string;
+  fqdn: string;
+};
+
 const useFetchDomain = () => {
-  const [domain, setDomain] = useState({});
+  const [domain, setDomain] = useState<Domain>();
   const [domainLoading, setDomainLoading] = useState(false);
   const [domainError, setDomainError] = useState(null);
 
   const getDomain = useCallback((domainSearched: string) => {
     setDomainLoading(true);
+    setDomainError(null);
+
     api
       .get(`/registrobr/v1/${domainSearched}`)
       .then((response) => setDomain(response.data))
-      .catch((error) => console.log(error));
+      .catch((error) => setDomainError(error));
+
     setDomainLoading(false);
   }, []);
 

package.json

@@ -18,8 +18,11 @@
     "@types/node": "18.7.11",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
+    "autoprefixer": "^10.4.8",
     "eslint": "8.22.0",
     "eslint-config-next": "12.2.5",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
     "typescript": "4.7.4"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

styles/globals.css

@@ -1,16 +1,3 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./contents/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};