Feature/toast

package.json

@@ -11,8 +11,8 @@
     "lint:fix": "eslint --fix . --ext .js,.jsx,.ts,.tsx,.cjs"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-alert-dialog": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-radio-group": "^1.1.2",
     "class-variance-authority": "^0.6.0",
@@ -23,11 +23,12 @@
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "styled-components": "^5.3.8",
-    "vite-plugin-checker": "^0.5.6",
-    "zod": "^3.21.4",
     "tailwind-merge": "^1.13.2",
-    "tailwindcss-animate": "^1.0.6"
+    "tailwindcss-animate": "^1.0.6",
+    "vite-plugin-checker": "^0.5.6",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/eslint": "^8.37.0",
@@ -45,8 +46,8 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "sass": "^1.62.1",
     "postcss": "^8.4.24",
+    "sass": "^1.62.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.4",
     "vite": "^4.1.0"

src/App.tsx

@@ -1,7 +1,7 @@
-import { ModalExample2 } from "./components/Modal/example2";
+import { Example } from "./components/Toast/examples/example";
 
 function App() {
-  return <ModalExample2 />;
+  return <Example />;
 }
 
 export default App;

src/components/Toast/examples/example.tsx

@@ -0,0 +1,77 @@
+/*
+Propsta do exemplo: Mostrar Todas as opções de Cor e Posição da Toast, além de que
+  é possível adicionar TailwindCSS opcional à Toast, que é um botão.
+*/
+import Toast from "..";
+
+export function Example() {
+  return (
+    <div className="grid grid-cols-3 grid-rows-2 gap-40 p-5 justify-center">
+      <div className="rounded-lg bg-gray-400 p-2">
+        TOP
+        <Toast
+          title="Um ezemplo"
+          message="Ipsim lorem ou algo assim, n sei"
+          color="dark"
+          position="top"
+          tailwind="rounded-lg p-2 bg-gray-700 text-slate-200"
+        />
+      </div>
+
+      <div className="rounded-lg bg-gray-400 p-2">
+        BOTTOM
+        <Toast
+          title="Um ezemplo"
+          message="Ipsim lorem ou algo assim, n sei"
+          color="light"
+          position="bottom"
+          tailwind="rounded-lg p-2 bg-slate-200"
+        />
+      </div>
+
+      <div className="rounded-lg bg-gray-400 p-2">
+        TOP RIGHT
+        <Toast
+          title="Um ezemplo"
+          message="Ipsim lorem ou algo assim, n sei"
+          color="blue"
+          position="topr"
+          tailwind="rounded-lg p-2 bg-blue-500"
+        />
+      </div>
+
+      <div className="rounded-lg bg-gray-400 p-2">
+        TOP LEFT
+        <Toast
+          title="Um ezemplo"
+          message="Ipsim lorem ou algo assim, n sei"
+          color="red"
+          position="topl"
+          tailwind="rounded-lg p-2 bg-red-500"
+        />
+      </div>
+
+      <div className="rounded-lg bg-gray-400 p-2">
+        BOTTOM RIGHT
+        <Toast
+          title="Um ezemplo"
+          message="Ipsim lorem ou algo assim, n sei"
+          color="slate"
+          position="botr"
+          tailwind="rounded-lg p-2 bg-slate-500"
+        />
+      </div>
+
+      <div className="rounded-lg bg-gray-400 p-2">
+        BOTTOM LEFT
+        <Toast
+          title="Um ezemplo"
+          message="Ipsim lorem ou algo assim, n sei"
+          color="dark"
+          position="botl"
+          tailwind="rounded-lg p-2 bg-gray-700 text-slate-200"
+        />
+      </div>
+    </div>
+  );
+}

src/components/Toast/index.tsx

@@ -0,0 +1,111 @@
+/*
+Explicação:
+  Essa Toast é formada por um botão que, no clique, mostra a toast em si. A Toast dura 5
+    segundos e possui um botão X para fechá-la antes desse tempo.
+  Esse componente possui os atributos mostrados em ToastProps. Posição e Cor possuem opções
+    limitadas. O atributo 'tailwind' permite que, ao instanciar Toast, seja escrito código
+    Tailwind para customizar o botão da Toast diretamente.
+*/
+
+import { useState } from "react";
+
+type ToastProps = {
+  title: string;
+  message: string;
+  position: "top" | "bottom" | "topr" | "topl" | "botr" | "botl";
+  color: "light" | "dark" | "slate" | "red" | "blue";
+  tailwind?: string;
+};
+
+const Toast: React.FC<ToastProps> = ({
+  title,
+  message,
+  position,
+  color,
+  tailwind,
+}) => {
+  const [showToast, setShowToast] = useState(false);
+
+  const handleToastClick = () => {
+    // Ao clicar no botão, mostra Toast:
+    setShowToast(true);
+    // Após 3 segundos, fecha Toast:
+    const timer = setTimeout(() => {
+      setShowToast(false);
+    }, 5000); // Fecha após 5 segundos
+    return () => clearTimeout(timer);
+  };
+
+  const handleCloseToast = () => {
+    setShowToast(false);
+  };
+
+  // Adiciona opções para a posição da Toast:
+  const positionClass = (position: string) => {
+    switch (position) {
+      case "top":
+        return "top-1 left-1/2 transform -translate-x-1/2";
+      case "bottom":
+        return "bottom-1 left-1/2 transform origin-bottom -translate-x-1/2";
+      case "topr":
+        return "top-1 right-1";
+      case "topl":
+        return "top-1 left-1";
+      case "botr":
+        return "bottom-1 right-1";
+      case "botl":
+        return "bottom-1 left-1";
+      default:
+        return "top-1 left-1/2 transform -translate-x-1/2";
+    }
+  };
+
+  // Adiciona opções para a cor da Toast:
+  const backgroundColor = (color: string) => {
+    switch (color) {
+      case "light":
+        return "bg-slate-200";
+      case "dark":
+        return "bg-gray-700 text-slate-200";
+      case "slate":
+        return "bg-slate-500";
+      case "red":
+        return "bg-red-500";
+      case "blue":
+        return "bg-blue-500";
+      default:
+        return "bg-slate-500 text-gray-900";
+    }
+  };
+
+  return (
+    <div>
+      <button
+        onClick={handleToastClick}
+        className={`close-button ${tailwind || ""}`}
+      >
+        Show Toast
+      </button>
+      {showToast && (
+        <div
+          className={`fixed ${positionClass(position)} ${backgroundColor(
+            color
+          )} duration-200 w-60 border-2 border-slate-500 p-3 rounded-md`}
+        >
+          <div className="grid grid-cols-2 justify-items-center">
+            <strong className="mr-auto">{title}</strong>
+            <button
+              onClick={handleCloseToast}
+              className="justify-self-end px-2"
+            >
+              X
+            </button>
+          </div>
+          <div>{message}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Toast;