Method render

packages/omi-templates/src/components/customize.tsx:75–206

()

  }

  render() {
    return (
      <div
        role="dialog"
        class="border text-popover-foreground shadow-md outline-none 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 w-[340px] rounded-2xl bg-white p-6 dark:bg-zinc-950"
        tabindex="-1"
      >
        <div class="theme-zinc w-full flex flex-col space-y-4 md:space-y-6" style="--radius: 0.5rem;">
          <div class="flex items-start pt-4 md:pt-0">
            <div class="space-y-1 pr-2">
              <div class="font-semibold leading-none tracking-tight text-lg dark:text-foreground">自定义</div>
              <div class="text-muted-foreground text-zinc-600 dark:text-foreground">为你的模板选择一个颜色和样式。</div>
            </div>
          </div>
          <div class="flex flex-1 flex-col space-y-4 md:space-y-6">
            <div class="space-y-1.5">
              <label class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-foreground">
                颜色
              </label>
              <div class="grid grid-cols-3 gap-2">
                {this.colors.map((item) => {
                  return (
                    <button
                      onClick={this.onColorClick}
                      class="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs justify-start dark:text-foreground"
                      data-color={item.color}
                      style={`--theme-primary: ${item.color};`}
                    >
                      <span class="mr-0.5 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]">
                        {this.state.selectedColor === item.color && (
                          <svg
                            width="15"
                            height="15"
                            viewBox="0 0 15 15"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-4 w-4 text-white"
                          >
                            <path
                              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                              clip-rule="evenodd"
                            ></path>
                          </svg>
                        )}
                      </span>
                      {item.name}
                    </button>
                  )
                })}
              </div>
            </div>
            {/* <div class="space-y-1.5">
              <label class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">圆角</label>
              <div class="grid grid-cols-5 gap-2">
                <button class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs">
                  0