Components convention

index.ts

export { default } from './SuperComponent';

SuperComponent.styled.ts

import styled from 'styled-components';

export const Root = styled.div``;

export const Label = styled.div``;

export const Title = styled.span``;

SuperComponent.tsx

import React from 'react';
import { Root, Label } from './SuperComponent.styled';

type Props = {
  name: string;
  isPro?: boolean;
  onClick?: (event: MouseEvent) => void;
};

const SuperComponent: React.FC<Props> = ({ name, isPro = false, onClick }) => {
  const handleClick = (event: MouseEvent) => {
    onClick && onClick(event);
  };
  return (
    <Root onClick={handleClick} role="button">
      {isPro && <Label />}
      <Title>{name}</Title>
    </Root>
  );
};

export default SuperComponent;