- >
- {name ? name : 'Anonymous'}
- </div>
- <div className="flex items-baseline justify-start">
- <button
- className={`group flex max-w-[80%] items-center justify-start whitespace-nowrap text-left font-sans text-[14px] tracking-tight text-[rgba(0,0,0,0.5)] transition duration-150 hover:text-[rgba(0,0,0,0.75)] sm:max-w-[90%] dark:text-[rgba(255,255,255,0.5)] dark:hover:text-[rgba(255,255,255,0.4)] ${!expertise && 'text-[rgba(0,0,0,0.3)] hover:text-[rgba(0,0,0,0.5)] dark:text-[rgba(255,255,255,0.3)]'}`}
- data-testid="expertise-button"
- type="button"
- onClick={editExpertise}
- >
- <span className="... overflow-hidden text-ellipsis">{expertise ? expertise : 'Add your expertise'}</span>
- {expertise && <EditIcon className="ml-1 h-[12px] w-[12px] translate-x-[-6px] stroke-[rgba(0,0,0,0.5)] opacity-0 transition-all duration-100 ease-out group-hover:translate-x-0 group-hover:stroke-[rgba(0,0,0,0.75)] group-hover:opacity-100 dark:stroke-[rgba(255,255,255,0.5)] dark:group-hover:stroke-[rgba(255,255,255,0.3)]" />}
- </button>
- </div>
- </Transition>
- );
- };
- type FormProps = {
- comment?: Comment;
- submit: (data: {html: string}) => Promise<void>;