sabmoďjuly

Parts/Button.js

@@ -1,11 +1,28 @@
 import React from "react"
-import tw, {styled} from "twin.macro"
+import tw, { styled } from "twin.macro"
 import "styled-components/macro"
 import { colors, colorsDisabled, colorsHover } from "./Colors"
 
+const BtnCreator = function ({ children, type, ...props }) {
+  switch(type){
+  case "submit":
+    type = "submit";
+    break;
+  case "reset":
+    type = "reset";
+    break;
+  default:
+    type = "button";
+    break;
+  }
+    
+  return   <button type={type} {...props}>
+    {children}
+  </button>
+    
+}
 
-
-const BtnBase = styled.button(({ type }) => [
+const BtnBase = styled(BtnCreator)(({ type }) => [
   tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
   colors[type], colorsHover[type], colorsDisabled[type]
 ])

Parts/Colors.js

@@ -6,6 +6,7 @@ import "styled-components/macro"
 export let colors = {
   error: tw`bg-red-600`,
   accent: tw`bg-accent`,
+  submit: tw`bg-accent`,
   accent2: tw`bg-accent2`,
   accent3: tw`bg-accent3`,
   accent4: tw`bg-accent4`,
@@ -15,6 +16,7 @@ export let colors = {
 export let colorsHover = {
   error: tw`hover:bg-red-700`,
   accent: tw`hover:bg-accent-dark`,
+  submit: tw`hover:bg-accent-dark`,
   accent2: tw`hover:bg-accent2-dark`,
   accent3: tw`hover:bg-accent3-dark`,
   accent4: tw`hover:bg-accent4-dark`,
@@ -23,6 +25,7 @@ export let colorsHover = {
 export let colorsDisabled = {
   error: tw`disabled:bg-red-700`,
   accent: tw`disabled:bg-accent-dark`,
+  submit: tw`disabled:bg-accent-dark`,
   accent2: tw`disabled:bg-accent2-dark`,
   accent3: tw`disabled:bg-accent3-dark`,
   accent4: tw`disabled:bg-accent4-dark`,
@@ -32,6 +35,7 @@ export let colorsDisabled = {
 export let textColors = {
   error: tw`text-red-600`,
   accent: tw`text-accent`,
+  submit: tw`text-accent`,
   accent2: tw`text-accent2`,
   accent3: tw`text-accent3`,
   accent4: tw`text-accent4`,
@@ -40,6 +44,7 @@ export let textColors = {
 export let textColorsHover = {
   error: tw`hover:text-red-700`,
   accent: tw`hover:text-accent-dark`,
+  submit: tw`hover:text-accent-dark`,
   accent2: tw`hover:text-accent2-dark`,
   accent3: tw`hover:text-accent3-dark`,
   accent4: tw`hover:text-accent4-dark`,

Parts/DropDown.js

@@ -104,21 +104,20 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
 });
 export default Dropdown;
 
-export function DropdownMenu({ children, fallback, notSelectedOne = true, ...props }) {
-  let [selectedItem, setSelectedItem] = useState(0);
+export function DropdownMenu({ children, fallback, notSelectedOne = true, value, onChange, ...props }) {
   let ref = useRef()
 
   let btn = fallback ?? "";
   if (children && children.length > 0)
-    btn = children[selectedItem > children.length ? 0 : selectedItem]
+    btn = children[value > children.length ? 0 : value]
 
   return <>
     <Dropdown ref={ref} button={btn} {...props}>
       {
         children && children.map((i) => {
-          if (children.indexOf(i) == selectedItem)
+          if (children.indexOf(i) == value)
             return;
-          return <DropDownItem key={children.indexOf(i)} onClick={() => setSelectedItem(children.indexOf(i))}>{i}</DropDownItem>
+          return <DropDownItem key={children.indexOf(i)} onClick={() => onChange(children.indexOf(i))}>{i}</DropDownItem>
         })
       }
       {