Dashboard/ui/components/StickyNote/StickyNote.tsx

"use client";
/*
 * Documentation:
 * Dropdown Menu select — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu+select_99951515-459b-4286-919e-a89e7549b43b
 * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
 * Sticky Note — https://app.subframe.com/f023064a5ca0/library?component=Sticky+Note_bf633727-22a3-4c3a-9db4-a53efd508fc5
 */

import React from "react";
import { FeatherCopy } from "@subframe/core";
import { FeatherEdit2 } from "@subframe/core";
import { FeatherMoreVertical } from "@subframe/core";
import { FeatherTrash2 } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { DropdownMenuSelect } from "../DropdownMenuSelect";
import { IconButton } from "../IconButton";

export interface StickyNoteRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  text?: React.ReactNode;
  color?: "yellow" | "pink" | "blue" | "green" | "purple" | "orange";
  className?: string;
}

const StickyNoteRoot = React.forwardRef<HTMLDivElement, StickyNoteRootProps>(
  function StickyNoteRoot(
    { text, color = "yellow", className, ...otherProps }: StickyNoteRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/bf633727 flex flex-col items-start rounded-md bg-[#fff9c4] shadow-md relative group/stickyNote w-[200px] cursor-grab transition-all hover:shadow-lg active:rotate-[3deg] active:scale-105 active:cursor-grabbing",
          {
            "bg-[#fff3e0]": color === "orange",
            "bg-[#f3e5f5]": color === "purple",
            "bg-[#e8f5e9]": color === "green",
            "bg-[#e3f2fd]": color === "blue",
            "bg-[#fce4ec]": color === "pink",
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex h-8 w-full flex-none items-center justify-between rounded-t-md bg-[#ffe082] pl-3 pr-1",
            {
              "bg-[#ffb74d]": color === "orange",
              "bg-[#ce93d8]": color === "purple",
              "bg-[#a5d6a7]": color === "green",
              "bg-[#90caf9]": color === "blue",
              "bg-[#f48fb1]": color === "pink",
            }
          )}
        >
          <div className="flex grow shrink-0 basis-0 items-start" />
          <SubframeCore.DropdownMenu.Root>
            <SubframeCore.DropdownMenu.Trigger asChild={true}>
              <IconButton
                variant="ghost"
                size="extra-small"
                square={true}
                icon={<FeatherMoreVertical />}
              />
            </SubframeCore.DropdownMenu.Trigger>
            <SubframeCore.DropdownMenu.Portal>
              <SubframeCore.DropdownMenu.Content
                side="bottom"
                align="start"
                sideOffset={4}
                asChild={true}
              >
                <DropdownMenuSelect>
                  <div className="flex w-full flex-col items-start gap-2 rounded-md px-3 py-2">
                    <div className="flex w-full items-center gap-2">
                      <div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#ffe082] cursor-pointer ring-2 ring-offset-1 ring-[#424242]" />
                      <div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#f48fb1] cursor-pointer" />
                      <div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#90caf9] cursor-pointer" />
                      <div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#a5d6a7] cursor-pointer" />
                      <div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#ce93d8] cursor-pointer" />
                      <div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#ffb74d] cursor-pointer" />
                    </div>
                  </div>
                  <div className="flex w-full items-start gap-2 px-1 py-1">
                    <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
                  </div>
                  <div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary">
                    <FeatherCopy className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
                    <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary">
                      Kopieren
                    </span>
                  </div>
                  <div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary">
                    <FeatherCopy className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
                    <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary">
                      Duplizieren
                    </span>
                  </div>
                  <div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary">
                    <FeatherEdit2 className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
                    <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary">
                      Text bearbeiten
                    </span>
                  </div>
                  <div className="flex w-full items-start gap-2 px-1 py-1">
                    <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
                  </div>
                  <div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-feedback-subtle-negative">
                    <FeatherTrash2 className="text-body-small-regular-150 font-body-small-regular-150 text-icon-feedback-negative" />
                    <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-feedback-negative">
                      Löschen
                    </span>
                  </div>
                </DropdownMenuSelect>
              </SubframeCore.DropdownMenu.Content>
            </SubframeCore.DropdownMenu.Portal>
          </SubframeCore.DropdownMenu.Root>
        </div>
        <div className="flex w-full grow shrink-0 basis-0 flex-col items-start px-3 pt-2 pb-3 min-h-[168px]">
          {text ? (
            <span className="w-full text-body-small-regular-150 font-body-small-regular-150 text-[#424242]">
              {text}
            </span>
          ) : null}
        </div>
      </div>
    );
  }
);

export const StickyNote = StickyNoteRoot;