ts_component.tsx

import.tsx

// Libs

// Styles
import styles from './styles.module.sass'
import commonStyles from '@Styles/common.module.sass'
import cn from 'classnames'

// Utils

// Components
import AuthInput from '@Components/Common/Inputs/AuthInput/AuthInput'

// Icons
import { ReactComponent as CommentIcon } from 'Images/comment-black.svg'

// Constants
import { AUTH_PATH } from '@Constants/patch'

// Types and Models
import { SettingsType } from '@Types/settings.d'

orderImport.tsx

// Libs
// Styles
// Utils
// Components
// Icons
// Constants
// Types and Models

short.ts

const foo = useMemo(() => {
    return bar
}, [baz])

const handleFoo = useCallback((value) => {
	onChange(value)
}, [onChange])

const [foo, setFoo] = useState<Boolean>(true)

ts_component.tsx

import React, { useCallback } from 'react'

import commonStyles from '@Styles/common.module.sass'
import styles from './styles.module.sass'
import cn from 'classnames'

export type Props = {
    id: number
    onClick: (id: number) => void
    title: string
}

export default function ButtonAsLink(props: Props): JSX.Element {
    const { id, onClick, title } = props
    const handleClick = useCallback(() => {
        onClick(id)
    }, [id, onClick])

    return (
        <div className={styles.link} onClick={handleClick} title={title}>
            {title}
        </div>
    )
}