@sikka/hawa 0.2.14-beta → 0.2.17-beta

package/src/elements/DropdownMenu.tsx

@@ -1,412 +0,0 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-// import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../util"
-
-const DropdownMenuRoot = DropdownMenuPrimitive.Root
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center justify-between rounded-sm px-2 py-3 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    <div className="flex flex-row items-center gap-2">{children}</div>{" "}
-    {/* <ChevronRight className="ml-auto h-4 w-4" /> */}
-    <svg
-      aria-label="Chevron Right Icon"
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 16 16"
-      height="1em"
-      width="1em"
-      className={cn(props.dir === "rtl" ? "rotate-180" : "")}
-    >
-      <path
-        fillRule="evenodd"
-        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-      ></path>
-    </svg>
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50  overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-    end?: any
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    disabled={props.disabled}
-    ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center justify-between rounded-sm text-sm outline-none transition-colors focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    <div className="flex flex-row items-center gap-2 ">{props.children}</div>
-
-    {props.end && props.end}
-  </DropdownMenuPrimitive.Item>
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        {/* <Check className="h-4 w-4" /> */}
-        <svg
-          aria-label="Check Mark"
-          stroke="currentColor"
-          fill="currentColor"
-          strokeWidth="0"
-          viewBox="0 0 512 512"
-          height="0.60em"
-          width="0.60em"
-        >
-          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-        </svg>{" "}
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        {/* <Circle className="h-2 w-2 fill-current" /> */}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          aria-label="Circle"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="h-2 w-2 fill-current"
-        >
-          <circle cx="12" cy="12" r="10"></circle>
-        </svg>
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-type ExtendedDropdownMenuContentProps = Partial<
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
-> & {
-  // Add any additional types or overrides here, for example:
-  //   side?: "left" | "right" | "top" | "bottom"
-}
-type ExtendedDropdownMenuTriggerProps = Partial<
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
-> & {
-  // Add any additional types or overrides here, for example:
-  //   side?: "left" | "right" | "top" | "bottom"
-}
-
-export type SubItem = {
-  label: string
-  value: string
-  icon?: any
-  action?: () => void
-  highlighted?: boolean
-  disabled?: boolean
-}
-export type MenuItemType = {
-  icon?: any
-  label?: string
-  value?: string
-  end?: any
-  presist?: boolean
-  type?: "separator" | "label"
-  action?: () => void
-  highlighted?: boolean
-  subitems?: SubItem[] // Note the use of the optional modifier
-  disabled?: boolean
-}
-interface DropdownMenuProps {
-  trigger?: any
-  items?: MenuItemType[]
-  direction?: "rtl" | "ltr"
-  onItemSelect?: any
-  className?: ExtendedDropdownMenuContentProps["className"]
-  triggerClassname?: ExtendedDropdownMenuTriggerProps["className"]
-  sideOffset?: ExtendedDropdownMenuContentProps["sideOffset"]
-  side?: ExtendedDropdownMenuContentProps["side"]
-  align?: ExtendedDropdownMenuContentProps["align"]
-  alignOffset?: ExtendedDropdownMenuContentProps["alignOffset"]
-  width?: "default" | "sm" | "lg" | "parent"
-  size?: "default" | "sm"
-  selectCallback?: any
-}
-
-// const dropDownMenuVariants = cva(
-//   "inline-flex items-center justify-center select-none rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-//   {
-//     variants: {
-//       width: {
-//         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-//       },
-//       size: {
-//         default: "h-10 px-4 py-2",
-//         sm: "h-9 rounded-md px-3",
-//       },
-//     },
-//     defaultVariants: {
-//       width: "default",
-//       size: "default",
-//     },
-//   }
-// )
-
-export const DropdownMenu: React.FC<DropdownMenuProps> = ({
-  trigger,
-  items,
-  direction,
-  onItemSelect,
-  sideOffset,
-  side,
-  className,
-  triggerClassname,
-  align,
-  alignOffset,
-  selectCallback,
-  size = "default",
-  width = "default",
-}) => {
-  const widthStyles = {
-    default: "min-w-[8rem]",
-    sm: "w-fit",
-    lg: "w-[200px]",
-    parent: "ddm-w-parent",
-  }
-  const sizeStyles = {
-    default: "px-2 py-3 ",
-    sm: "text-xs px-1.5 py-1.5",
-  }
-  return (
-    <DropdownMenuRoot dir={direction}>
-      <DropdownMenuTrigger asChild className={triggerClassname}>
-        {trigger}
-      </DropdownMenuTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuContent
-          side={side}
-          sideOffset={sideOffset}
-          className={cn(className, widthStyles[width], "flex flex-col gap-2")}
-          align={align}
-          alignOffset={alignOffset}
-        >
-          {items.map((item, index) => {
-            if (item.type === "separator") {
-              return <DropdownMenuSeparator key={index} />
-            } else if (item.type === "label") {
-              return (
-                <DropdownMenuLabel key={index}>{item.label}</DropdownMenuLabel>
-              )
-            } else {
-              return item.subitems ? (
-                <DropdownMenuSub key={index}>
-                  <DropdownMenuSubTrigger
-                    className={cn(sizeStyles[size])}
-                    dir={direction}
-                  >
-                    {item.icon && item.icon}
-                    {item.label && item.label}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                    <DropdownMenuSubContent>
-                      {item.subitems.map((subitem, subIndex) => (
-                        <DropdownMenuItem
-                          key={subIndex}
-                          className={cn(
-                            sizeStyles[size],
-
-                            !item.icon && !item.label
-                              ? "px-0 py-0 focus:bg-transparent"
-                              : "focus:bg-accent"
-                          )}
-                          disabled={subitem.disabled}
-                          // className="flex flex-row gap-2"
-                          onSelect={() => {
-                            subitem.action()
-                            if (selectCallback) {
-                              selectCallback(subitem.value)
-                            }
-                          }}
-                        >
-                          {subitem.icon && subitem.icon}
-                          {subitem.label && subitem.label}
-                        </DropdownMenuItem>
-                      ))}
-                    </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-                </DropdownMenuSub>
-              ) : (
-                <DropdownMenuItem
-                  key={index}
-                  disabled={item.disabled}
-                  onSelect={(e) => {
-                    if (item.presist) {
-                      e.preventDefault()
-                    }
-                    if (item.action) {
-                      item.action()
-                      if (selectCallback) {
-                        selectCallback(item.value)
-                      }
-                    } else {
-                      if (selectCallback) {
-                        selectCallback(item.value)
-                      }
-                    }
-                  }}
-                  end={item.end}
-                  className={cn(
-                    sizeStyles[size],
-                    !item.icon && !item.label
-                      ? "px-0 py-0 focus:bg-transparent "
-                      : "focus:bg-accent ",
-                    item.presist && "focus:bg-transparent"
-                  )}
-                >
-                  {item.icon && item.icon}
-                  {item.label && item.label}
-                </DropdownMenuItem>
-              )
-            }
-          })}
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </DropdownMenuRoot>
-  )
-}

package/src/elements/FeedbackByEmoji.tsx

@@ -1,220 +0,0 @@
-import React, { FC, useState } from "react"
-import { Button } from "./Button"
-import { Textarea } from "./Textarea"
-import { cn } from "../util"
-import { Popover } from "./Popover"
-
-type ComponentTypes = {
-  handleSubmit: ({}) => void
-  showSuccess?: boolean
-}
-export const FeedbackByEmoji: FC<ComponentTypes> = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState(null)
-  const [loadingSubmit, setLoadingSubmit] = useState(false)
-  const [feedbackText, setFeedbackText] = useState("")
-  const [helperText, setHelperText] = useState(false)
-
-  let emojis = [
-    { icon: <VeryGoodEmoji />, value: "very-good" },
-    { icon: <GoodEmoji />, value: "good" },
-    { icon: <BadEmoji />, value: "bad" },
-    { icon: <VeryBadEmoji />, value: "very-bad" },
-  ]
-
-  const onFeedbackSubmit = async () => {
-    console.log("submitting")
-    if (feedbackText) {
-      setLoadingSubmit(true)
-      try {
-        await props.handleSubmit({
-          choice: selectedEmoji,
-          feedback: feedbackText,
-        })
-      } catch (error) {
-        console.error("Error during submission:", error)
-        setLoadingSubmit(false)
-      }
-      await setLoadingSubmit(false)
-    } else {
-      setLoadingSubmit(false)
-      setHelperText(true)
-    }
-  }
-  return (
-    <div
-      className={cn(
-        "flex  flex-col gap-2 rounded border  p-2 transition-all",
-        selectedEmoji ? "h-[165px]  min-w-fit" : "h-[44px] "
-      )}
-    >
-      <div className="flex flex-row   items-center justify-center gap-2 ">
-        {/* <span className="whitespace-nowrap text-sm">
-          Was this helpful?
-        </span>*/}
-        <div className="flex flex-row justify-center  gap-0.5 ">
-          {emojis.map((emoji, i) => (
-            <Button
-              key={i}
-              onClick={() => {
-                if (selectedEmoji === emoji.value) {
-                  setSelectedEmoji("")
-                } else {
-                  setSelectedEmoji(emoji.value)
-                }
-              }}
-              variant="ghost"
-              size="smallIcon"
-              className={cn(
-                selectedEmoji === emoji.value
-                  ? "bg-primary/10 hover:bg-primary/10 "
-                  : "text-[#666666]"
-              )}
-            >
-              {emoji.icon}
-            </Button>
-          ))}
-        </div>
-      </div>
-      <div
-        className={cn(
-          "flex flex-col overflow-clip  transition-all duration-500 ease-in-out ",
-          selectedEmoji ? "visible opacity-100" : "invisible opacity-0 "
-        )}
-      >
-        {props.showSuccess ? (
-          <div className="flex h-full flex-col items-center justify-center gap-2  pt-4">
-            <div className="rounded bg-primary p-2 text-primary-foreground">
-              <svg
-                stroke="currentColor"
-                fill="currentColor"
-                strokeWidth="0"
-                viewBox="0 0 512 512"
-                height="0.5em"
-                width="0.5em"
-              >
-                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-              </svg>
-            </div>
-            <div className="text-sm flex flex-col text-center">
-              <span>Your feedback has been received!</span>
-              <span>Thank you for your help</span>
-            </div>
-          </div>
-        ) : (
-          <>
-            <Popover
-              className="select-none p-1 text-xs "
-              open={helperText}
-              trigger={
-                <Textarea
-                  className={cn("mb-2 h-full resize-none")}
-                  placeholder="Your feedback"
-                  onChange={(e) => {
-                    if (e.target.value) {
-                      setHelperText(false)
-                    }
-                    setFeedbackText(e.target.value)
-                    console.log("changing to", e.target.value)
-                  }}
-                />
-              }
-            >
-              <span>Please enter your feedback</span>{" "}
-            </Popover>
-            <Button
-              isLoading={loadingSubmit}
-              onClick={onFeedbackSubmit}
-              className="w-full"
-              size="sm"
-            >
-              Submit
-            </Button>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}
-
-const VeryGoodEmoji = () => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_53_166)">
-      <path
-        clipRule="evenodd"
-        d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4.5 8.97498H3.875V9.59998C3.875 11.4747 5.81046 12.8637 7.99817 12.8637C10.1879 12.8637 12.125 11.4832 12.125 9.59998V8.97498H11.5H4.5ZM7.99817 11.6137C6.59406 11.6137 5.63842 10.9482 5.28118 10.225H10.7202C10.3641 10.9504 9.40797 11.6137 7.99817 11.6137Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      ></path>
-      <path
-        clipRule="evenodd"
-        d="M6.15295 4.92093L5.375 3.5L4.59705 4.92093L3 5.21885L4.11625 6.39495L3.90717 8L5.375 7.30593L6.84283 8L6.63375 6.39495L7.75 5.21885L6.15295 4.92093ZM11.403 4.92093L10.625 3.5L9.84705 4.92093L8.25 5.21885L9.36625 6.39495L9.15717 8L10.625 7.30593L12.0928 8L11.8837 6.39495L13 5.21885L11.403 4.92093Z"
-        fill="#FF990A"
-        fillRule="evenodd"
-      ></path>
-    </g>
-  </svg>
-)
-const GoodEmoji = () => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_53_167)">
-      <path
-        clipRule="evenodd"
-        d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM11.5249 10.8478L11.8727 10.3286L10.8342 9.6329L10.4863 10.1522C9.94904 10.9543 9.0363 11.4802 8.00098 11.4802C6.96759 11.4802 6.05634 10.9563 5.51863 10.1567L5.16986 9.63804L4.13259 10.3356L4.48137 10.8542C5.2414 11.9844 6.53398 12.7302 8.00098 12.7302C9.47073 12.7302 10.7654 11.9816 11.5249 10.8478ZM6.75 6.75C6.75 7.30228 6.30228 7.75 5.75 7.75C5.19772 7.75 4.75 7.30228 4.75 6.75C4.75 6.19772 5.19772 5.75 5.75 5.75C6.30228 5.75 6.75 6.19772 6.75 6.75ZM10.25 7.75C10.8023 7.75 11.25 7.30228 11.25 6.75C11.25 6.19772 10.8023 5.75 10.25 5.75C9.69771 5.75 9.25 6.19772 9.25 6.75C9.25 7.30228 9.69771 7.75 10.25 7.75Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      ></path>
-    </g>
-  </svg>
-)
-const BadEmoji = () => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_53_152)">
-      <path
-        clipRule="evenodd"
-        d="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5.75 7.75C6.30228 7.75 6.75 7.30228 6.75 6.75C6.75 6.19772 6.30228 5.75 5.75 5.75C5.19772 5.75 4.75 6.19772 4.75 6.75C4.75 7.30228 5.19772 7.75 5.75 7.75ZM11.25 6.75C11.25 7.30228 10.8023 7.75 10.25 7.75C9.69771 7.75 9.25 7.30228 9.25 6.75C9.25 6.19772 9.69771 5.75 10.25 5.75C10.8023 5.75 11.25 6.19772 11.25 6.75ZM11.5249 11.2622L11.8727 11.7814L10.8342 12.4771L10.4863 11.9578C9.94904 11.1557 9.0363 10.6298 8.00098 10.6298C6.96759 10.6298 6.05634 11.1537 5.51863 11.9533L5.16986 12.4719L4.13259 11.7744L4.48137 11.2558C5.2414 10.1256 6.53398 9.37982 8.00098 9.37982C9.47073 9.37982 10.7654 10.1284 11.5249 11.2622Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      ></path>
-    </g>
-  </svg>
-)
-const VeryBadEmoji = () => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_53_151)">
-      <path
-        d="M11.841 12.0225C12.7197 12.9324 12.7197 14.4077 11.841 15.3176C10.9623 16.2275 9.53769 16.2275 8.65901 15.3176C7.78033 14.4077 7.78033 12.9324 8.65901 12.0225L10.25 10.375L11.841 12.0225Z"
-        fill="#0070F3"
-      ></path>
-      <path
-        clipRule="evenodd"
-        d="M8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 10.9668 3.48826 13.4711 6.20649 14.2496L5.79351 15.6916C2.44895 14.7338 0 11.6539 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 9.4652 15.6054 10.8405 14.9162 12.023L13.6203 11.2677C14.1794 10.3083 14.5 9.19272 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5ZM6.75 6.75C6.75 7.30228 6.30228 7.75 5.75 7.75C5.19772 7.75 4.75 7.30228 4.75 6.75C4.75 6.19772 5.19772 5.75 5.75 5.75C6.30228 5.75 6.75 6.19772 6.75 6.75ZM10.25 7.75C10.8023 7.75 11.25 7.30228 11.25 6.75C11.25 6.19772 10.8023 5.75 10.25 5.75C9.69771 5.75 9.25 6.19772 9.25 6.75C9.25 7.30228 9.69771 7.75 10.25 7.75Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      ></path>
-    </g>
-  </svg>
-)