PeachMark.tsx

1.1 KB · raw

1export function PeachMark(props: { class?: string }) {2  return (3    <svg4      class={props.class}5      width="14"6      height="14"7      viewBox="0 0 64 64"8      fill="none"9      aria-hidden="true"10    >11      <path12        d="M32 54C16 54 8 44 8 31C8 18 17 10 27 10C28 7 30 5.5 32 5.5C34 5.5 36 7 37 10C47 10 56 18 56 31C56 44 48 54 32 54Z"13        fill="#D96830"14      />15      <path16        d="M37 8.5C40.5 3.5 48 5 46 10.5C42 11 37 8.5 37 8.5Z"17        fill="#7B9060"18      />19      <path20        d="M32 5.5Q35.5 1 39 2.5"21        stroke="#7B9060"22        stroke-width="1.5"23        stroke-linecap="round"24      />25    </svg>26  );27}2829export function PeachWordmark(props: {30  class?: string;31  showPip?: boolean;32  unlocked?: boolean;33}) {34  return (35    <span class={props.class ?? "peach-wordmark-wrap"}>36      <PeachMark class="peach-brand-mark" />37      <span38        class={`peach-status-pip ${props.showPip ? "" : "is-hidden"} ${props.unlocked ? "unlocked" : ""}`.trim()}39        aria-hidden="true"40      ></span>41      <span class="peach-wordmark">peach</span>42    </span>43  );44}