queenshow/src/modules/editor/components/CompUI/customUI/Cards/Card15/component.tsx

import { css, cx } from "@linaria/core";
import { string } from "vue-types";
import { useCompData } from ".";
import { Image, Text } from "../../../basicUI";
import { createUIComp } from "../../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { value } = useCompData(props.compId);

    return () => (
      <div
        class={cx(rootStyles, " pl-0.28rem")}
        style={{
          backgroundImage: `linear-gradient(#fff 1.3rem,${value.themeColor} 1.3rem, ${value.themeColor} 87%, #fff 87%)`,
        }}
      >
        <div class="h-1.3rem">
          <Text.Component compId={value.title.id} />
        </div>
        <Image.Component
          compId={value.img1.id}
          class="w-6.22rem h-6.22rem object-cover -ml-0.28rem"
        />
        <div class="absolute right-1rem top-3rem">
          <div
            class="p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
            style={{
              backgroundColor: value.themeColor,
            }}
          >
            <div class="min-w-1.25rem px-0.1rem bg-light-50">
              <Text.Component compId={value.colorText?.id} />
            </div>
          </div>
        </div>
        <div class="flex flex-row-reverse mt-0.5rem mb-0.35rem">
          <div class="w-4.75rem py-0.55rem bg-light-50 text-center border-dark-200 border-2 border-solid leading-2">
            <Text.Component compId={value.text?.id} />
          </div>
        </div>
        <Image.Component
          compId={value.img2.id}
          class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover"
        />
      </div>
    );
  },
});

const rootStyles = css`
  background-clip: content-box;
`;