bluenote/src/components/DigitalCard/DigitalCardBasic.tsx

import { View, Text } from "@tarojs/components";
import IconCertificateColor from "@/components/icon/icon-certificate-color";
export interface DigitalCardBasicProps {
  certificated?: boolean;
  name: string;
  position: string;
  entName?: string|null;
}

const DigitalCardBasic = ({
  name,
  position,
  entName,
  certificated,
}: DigitalCardBasicProps) => {
  const hasEntName = !!entName?.length
  const hasPosition = !!position?.length
  const renderPosition = ()=> {
    return <>
        {(hasPosition && hasEntName) && <>&nbsp;|&nbsp;</>}
        {hasPosition && <>{position}</>}
    </>
  }
  return (
    <View className="flex items-start">
      <View className="flex flex-col flex-1 justify-center min-h-40 gap-4">
        <View className="flex">
          <View className="text-16 max-w-120 font-medium leading-24 font-pingfangSCMedium">{name}</View>
        </View>
        {/* inline-flex flex-nowrap break-normal items-center */}
        {(hasPosition || hasEntName) && <View className="text-12 leading-20 text-gray-45 gap-4">
          {entName || ''}{renderPosition()}{!!certificated && <View className="inline-block transform translate-y-2">&nbsp;<IconCertificateColor /></View>}
        </View>}
      </View>
    </View>
  );
};

export default DigitalCardBasic;