<div
  style={{
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
    gap: 12,
    paddingLeft: 12,
    paddingRight: 12,
    paddingTop: 11,
    paddingBottom: 11,
    borderRadius: 20,
    background: "#252020",
    borderWidth: 1,
    borderColor: "rgba(255,255,255,0.15)",
  }}
>
  <div
    style={{
      display: "flex",
      justifyContent: "flex-start",
      alignItems: "center",
      flexGrow: 0,
      flexShrink: 0,
      height: 44,
      position: "relative",
      gap: 8,
      padding: 12,
      borderRadius: 12,
    }}
  >
    <svg
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ flexGrow: 0, flexShrink: 0, width: 24, height: 24 }}
      preserveAspectRatio="none"
    >
      <circle cx={12} cy={12} r={12} fill="#363030" />
      <path
        d="M12 12.9333L8.73337 16.2C8.61114 16.3222 8.45559 16.3833 8.2667 16.3833C8.07781 16.3833 7.92225 16.3222 7.80003 16.2C7.67781 16.0778 7.6167 15.9222 7.6167 15.7333C7.6167 15.5444 7.67781 15.3889 7.80003 15.2667L11.0667 12L7.80003 8.73334C7.67781 8.61111 7.6167 8.45556 7.6167 8.26667C7.6167 8.07778 7.67781 7.92222 7.80003 7.8C7.92225 7.67778 8.07781 7.61667 8.2667 7.61667C8.45559 7.61667 8.61114 7.67778 8.73337 7.8L12 11.0667L15.2667 7.8C15.3889 7.67778 15.5445 7.61667 15.7334 7.61667C15.9223 7.61667 16.0778 7.67778 16.2 7.8C16.3223 7.92222 16.3834 8.07778 16.3834 8.26667C16.3834 8.45556 16.3223 8.61111 16.2 8.73334L12.9334 12L16.2 15.2667C16.3223 15.3889 16.3834 15.5444 16.3834 15.7333C16.3834 15.9222 16.3223 16.0778 16.2 16.2C16.0778 16.3222 15.9223 16.3833 15.7334 16.3833C15.5445 16.3833 15.3889 16.3222 15.2667 16.2L12 12.9333Z"
        fill="#FAF7F5"
      />
    </svg>
    <p
      style={{
        flexGrow: 0,
        flexShrink: 0,
        fontSize: 14,
        fontWeight: 500,
        textAlign: "left",
        color: "#fff",
      }}
    >
      1 Selected
    </p>
  </div>
  <div
    style={{
      display: "flex",
      justifyContent: "flex-start",
      alignItems: "center",
      flexGrow: 0,
      flexShrink: 0,
      gap: 8,
    }}
  >
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-start",
        alignItems: "flex-start",
        flexGrow: 0,
        flexShrink: 0,
        position: "relative",
        gap: 10,
        paddingLeft: 16,
        paddingRight: 16,
        paddingTop: 12,
        paddingBottom: 12,
        borderRadius: 12,
        background: "#363030",
      }}
    >
      <p
        style={{
          flexGrow: 0,
          flexShrink: 0,
          fontSize: 14,
          fontWeight: 500,
          textAlign: "left",
          color: "#fff",
        }}
      >
        Download
      </p>
    </div>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-start",
        alignItems: "flex-start",
        flexGrow: 0,
        flexShrink: 0,
        position: "relative",
        gap: 10,
        paddingLeft: 16,
        paddingRight: 16,
        paddingTop: 12,
        paddingBottom: 12,
        borderRadius: 12,
        background: "#363030",
      }}
    >
      <p
        style={{
          flexGrow: 0,
          flexShrink: 0,
          fontSize: 14,
          fontWeight: 500,
          textAlign: "left",
          color: "#fff",
        }}
      >
        New Workspace
      </p>
    </div>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-start",
        alignItems: "flex-start",
        flexGrow: 0,
        flexShrink: 0,
        position: "relative",
        gap: 10,
        paddingLeft: 16,
        paddingRight: 16,
        paddingTop: 12,
        paddingBottom: 12,
        borderRadius: 12,
        background: "#363030",
      }}
    >
      <p
        style={{
          flexGrow: 0,
          flexShrink: 0,
          fontSize: 14,
          fontWeight: 500,
          textAlign: "left",
          color: "#fff",
        }}
      >
        Add to Playlist
      </p>
    </div>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        flexGrow: 0,
        flexShrink: 0,
        height: 44,
        position: "relative",
        gap: 10,
        paddingLeft: 16,
        paddingRight: 16,
        paddingTop: 12,
        paddingBottom: 12,
        borderRadius: 12,
        background: "#901e04",
      }}
    >
      <svg
        width={20}
        height={20}
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        style={{ flexGrow: 0, flexShrink: 0, width: 20, height: 20, position: "relative" }}
        preserveAspectRatio="xMidYMid meet"
      >
        <path
          d="M6.08979 17.0834C5.67549 17.0834 5.32083 16.9359 5.02583 16.6409C4.73083 16.3459 4.58333 15.9912 4.58333 15.5769V5.00002H4.375C4.19792 5.00002 4.04951 4.94009 3.92979 4.82023C3.80993 4.70037 3.75 4.5519 3.75 4.37481C3.75 4.19759 3.80993 4.04919 3.92979 3.92961C4.04951 3.80988 4.19792 3.75002 4.375 3.75002H7.5C7.5 3.546 7.57188 3.37211 7.71563 3.22836C7.85924 3.08475 8.03306 3.01294 8.23708 3.01294H11.7629C11.9669 3.01294 12.1408 3.08475 12.2844 3.22836C12.4281 3.37211 12.5 3.546 12.5 3.75002H15.625C15.8021 3.75002 15.9505 3.80995 16.0702 3.92981C16.1901 4.04968 16.25 4.19815 16.25 4.37523C16.25 4.55245 16.1901 4.70086 16.0702 4.82044C15.9505 4.94016 15.8021 5.00002 15.625 5.00002H15.4167V15.5769C15.4167 15.9912 15.2692 16.3459 14.9742 16.6409C14.6792 16.9359 14.3245 17.0834 13.9102 17.0834H6.08979ZM8.46188 14.1667C8.63896 14.1667 8.78736 14.1068 8.90708 13.9871C9.02667 13.8672 9.08646 13.7188 9.08646 13.5417V7.29169C9.08646 7.11461 9.02653 6.96613 8.90667 6.84627C8.78694 6.72655 8.63847 6.66669 8.46125 6.66669C8.28417 6.66669 8.13576 6.72655 8.01604 6.84627C7.89646 6.96613 7.83667 7.11461 7.83667 7.29169V13.5417C7.83667 13.7188 7.89653 13.8672 8.01625 13.9871C8.13611 14.1068 8.28465 14.1667 8.46188 14.1667ZM11.5387 14.1667C11.7158 14.1667 11.8642 14.1068 11.984 13.9871C12.1035 13.8672 12.1633 13.7188 12.1633 13.5417V7.29169C12.1633 7.11461 12.1035 6.96613 11.9837 6.84627C11.8639 6.72655 11.7153 6.66669 11.5381 6.66669C11.361 6.66669 11.2126 6.72655 11.0929 6.84627C10.9733 6.96613 10.9135 7.11461 10.9135 7.29169V13.5417C10.9135 13.7188 10.9735 13.8672 11.0933 13.9871C11.2131 14.1068 11.3615 14.1667 11.5387 14.1667Z"
          fill="#FAF7F5"
        />
      </svg>
    </div>
  </div>
</div>;