queenshow/src/modules/editor/components/CompUI/customUI/Titles/Title1/component.tsx

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

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { value, children } = useCompData(props.compId);
    return () => (
      <div class={"py-10px"}>
        <Text.Component compId={children.title} />
        <div
          class={compStyle}
          style={{
            "--theme-color": value.themeColor,
          }}
        >
          <Text.Component compId={children.subTitle} />
        </div>
      </div>
    );
  },
});

const compStyle = css`
  width: 150px;
  margin: 0 auto;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--theme-color);
`;