Implementando o botão de feedbacks

web/package.json

@@ -8,13 +8,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^1.6.0",
+    "phosphor-react": "^1.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^1.3.0",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.13",
+    "tailwindcss": "^3.0.24",
     "typescript": "^4.6.4",
     "vite": "^2.9.7"
   }

web/postcss.config.js

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

web/src/App.tsx

@@ -1,35 +1,67 @@
-interface PropsButton{
-  text?: string;
-}
-interface PropsInputs{
+import {Widget} from "./components/Widget";
 
-  placeholder?: string;
+export function App(){
+  return <Widget/>
 }
 
-function Button(props: PropsButton) {
 
-  return <button>{props.text ?? 'Enviar'}</button>
-}
 
-function Inputs(props: PropsInputs) {
-  return <input type="text" placeholder={props.placeholder ??'Escreva'}/>
-}
 
-function App() {
 
- return (
 
 
-  <h1>Hello World 
 
-    <Button/>
-    <Inputs/>
 
-    </h1>
-   ) 
-
-}
 
 
 
-export default App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// interface PropsButton{
+//   text?: string;
+// }
+// interface PropsInputs{
+
+//   placeholder?: string;
+// }
+
+// function Button(props: PropsButton) {
+
+//   return <button className="bg-green-500 p-3 h-10 rounded hover:bg-green-600 transitions-colors">{props.text ?? 'Enviar'}</button>
+// }
+
+// function Inputs(props: PropsInputs) {
+//   return <input type="text" placeholder={props.placeholder ??'Escreva'}/>
+// }
+
+// function App() {
+
+//  return (
+
+
+//   <h1 className="flex gap-2">Hello World 
+
+//     <Button/>
+//     <Inputs/>
+
+//     </h1>
+//    ) 
+
+// }
+
+// export default App

web/src/components/Widget.tsx

@@ -0,0 +1,32 @@
+import {ChatTeardropDots} from 'phosphor-react';
+import {Popover} from '@headlessui/react';
+// import { useState } from 'react';
+
+//Estado 
+
+export function Widget(){
+  // const [isWidgetOpen,setIsWidgetOpen] = useState(false);
+
+  // function toggleWidgetVisibility(){
+  //   setIsWidgetOpen(!isWidgetOpen);
+  // }
+  return (  
+    <Popover className="absolute bottom-5 right-4">
+
+
+      <Popover.Panel>Hello World</Popover.Panel>
+
+      <Popover.Button className="bg-primary-200 rounded-full px-3 h-12 text-primary-100 flex items-center group">
+        <ChatTeardropDots weight="bold" className="w-6 h-6"/>
+
+        <span className="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 ease-linear">
+          <span className="pl-2">
+
+          Feedback
+
+          </span>
+        </span>
+      </Popover.Button>
+    </Popover>
+  )
+}

web/src/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

web/src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App'
-
+import {App} from './App'
+import './global.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

web/tailwind.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  content: ["./src/**/*.tsx"],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          100:"#07224B",
+          200:"#22c55e",
+        }
+      }
+
+    },
+  },
+  plugins: [],
+}