Acrescentando novas features nos botões

web/src/components/Widget.tsx

@@ -1,6 +1,6 @@
 import {ChatTeardropDots} from 'phosphor-react';
 import {Popover} from '@headlessui/react';
-import {WidgetForm} from './WidgetForm';
+import {WidgetForm} from './WidgetForm'
 // import { useState } from 'react';
 
 //Estado 

web/src/components/WidgetForm/Steps/FeedbackContentStep.tsx

@@ -0,0 +1,48 @@
+import { CloseButton } from "../../CloseButton";
+import {FeedbackType, feedbackTypes } from ".."
+import { ArrowLeft } from "phosphor-react";
+
+
+interface FeedbackContentStepProps {
+  feedbackType: FeedbackType;
+}
+
+export function FeedbackContentStep({feedbackType}: FeedbackContentStepProps)
+
+{
+
+const feedbackTypInfo = feedbackTypes[feedbackType];
+
+  return (
+    <>
+    <header>
+
+    <button type="button" className="top-5 left-5 absolute text-primary-200 hover:text-primary-100">
+
+      <ArrowLeft weight="bold" className="w-4 h-4"/>
+
+    </button>
+
+
+
+    <span className="text-xl leading-6 flex items-center gap-2">
+
+    <img src={feedbackTypInfo.image.source} alt={feedbackTypInfo.image.alt} className="w-6 h-6"/>
+
+    {feedbackTypInfo.title}
+    </span>
+
+  <CloseButton />
+
+  </header>
+
+    <div className="flex py-8 gap-2 w-full">
+
+
+
+    </div>
+    </>
+  );
+}
+
+

web/src/components/WidgetForm/Steps/FeedbackSuccessStep.tsx

@@ -0,0 +1,10 @@
+export function FeedbackSuccessStep()
+{ 
+
+  return (
+
+    <div></div>
+
+  );
+
+}

web/src/components/WidgetForm/Steps/FeedbackTypeStep.tsx

@@ -0,0 +1,40 @@
+
+import {FeedbackType,feedbackTypes} from '..'
+import { CloseButton } from '../../CloseButton';
+
+interface FeedbackTypeStepProps{
+  onFeedbackTypeChanged: (type: FeedbackType) => void;
+}
+
+export function FeedbackTypeStep({onFeedbackTypeChanged}: FeedbackTypeStepProps)
+{
+  return (
+    <>
+    <header>
+    <span className="text-xl leading-6"> Deixe seu feedback</span>
+
+  <CloseButton />
+
+  </header>
+
+    <div className="flex py-8 gap-2 w-full">
+
+    { Object.entries(feedbackTypes).map(([key,value])=>{
+      return (
+        <button
+        key={key}
+        className="bg-zinc-800 rounded-lg py-5 w-24 flex-1 flex flex-col items-center gap-2 border-2 border-transparent hover:border-primary-200 focus:border-primary-200 focus:outline-none "
+        onClick={()=>onFeedbackTypeChanged(key as FeedbackType)}
+        type="button"
+
+        >
+          <img src={value.image.source} alt={value.image.alt}></img>
+        <span>{value.title}</span>
+        </button>
+      );
+    })}
+
+    </div>
+    </>
+  );
+}

web/src/components/WidgetForm/index.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { CloseButton } from '../CloseButton';
+import bugImageUrl from '../../assets/Figmoji/bug.svg'; 
+import ideaImageUrl from '../../assets/Figmoji/idea.svg'; 
+import toughtImageUrl from '../../assets/Figmoji/thought.svg';
+import {FeedbackTypeStep} from '../WidgetForm/Steps/FeedbackTypeStep';
+// import {FeedbackSucessStep} from '../WidgetForm/Steps/FeedbackSuccessStep';
+import {FeedbackContentStep} from '../WidgetForm/Steps/FeedbackContentStep';
+
+export const feedbackTypes ={
+  BUG: {
+    title: 'Problema',
+    image: {
+      source: bugImageUrl,
+      alt:'Imagem de um inseto'
+    }
+  },
+  SUGGESTION: {
+    title: 'Sugestão',
+    image: {
+      source: ideaImageUrl,
+      alt:'Imagem de uma lâmpada'
+    }
+  },
+  OUTRO: {
+    title: 'Outro',
+    image: {
+      source: toughtImageUrl,
+      alt:'Imagem de uma balão de pensamento'
+    }
+  }
+}
+
+export type FeedbackType = keyof typeof feedbackTypes;
+
+
+export function WidgetForm()
+{
+   const [feedbackType, setFeedbackType] = useState<FeedbackType | null>(null);
+
+
+  return (
+
+    <div className="bg-zinc-900 p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto"> 
+
+
+
+      {!feedbackType ?(
+
+        <FeedbackTypeStep onFeedbackTypeChanged={setFeedbackType}/>
+      ): (
+        <FeedbackContentStep feedbackType={feedbackType} />
+      )}
+
+
+
+      <footer className="text-xs text-neutral-400">
+      Feito com ♥︎ por <i><a  href="https://www.instagram.com/cassio_izidorio" target="_blank"rel="noopener noreferer">@cassio_izidorio</a></i>
+      </footer>
+
+    </div>
+  );
+}

web/src/global.css

@@ -2,14 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
+body {
 
   @apply bg-[#09090A] text-zinc-100;
-} 
-
-.container{
-  max-width: 1200px;
-  margin: 0 auto;
 }
-
-

web/tsconfig.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -16,6 +20,12 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src/**/*"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}