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

import { css, cx } 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 { children } = useCompData(props.compId);

    return () => (
      <div class="flex items-center justify-center py-10px px-5px">
        <div class={cx(border, "left w-25px text-12px text-right")}>
          &frasl; &frasl;
        </div>
        <Text.Component class="px-25px max-w-240px" compId={children.title} />
        <div class={cx(border, "right w-25px text-12px")}>&frasl; &frasl;</div>
      </div>
    );
  },
});

const border = css`
  position: relative;
  color: #999;
  &::after {
    content: "";
    position: absolute;
    bottom: 50%;
    width: 100%;
    height: 1px;
    background-color: currentColor;
  }
  &.left {
    &::after {
      left: 3px;
    }
  }
  &.right {
    &::after {
      left: -3px;
    }
  }
`;