38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import React, { FC } from 'react'
|
|
import { Box, Stack } from '@mui/material'
|
|
import { EXPLANATION_MODAL_KEYS, MODAL_PARAMS_KEYS } from '@/types/modal'
|
|
import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
|
|
import { AppLink } from '@/shared/AppLink/AppLink'
|
|
import { StyledInput } from '../styled'
|
|
import { useModalSearchParams } from '@/hooks/useModalSearchParams'
|
|
|
|
type UserValueSectionProps = {
|
|
title: string
|
|
value: string
|
|
explanationType: EXPLANATION_MODAL_KEYS
|
|
endAdornment?: React.ReactNode
|
|
}
|
|
|
|
const UserValueSection: FC<UserValueSectionProps> = ({ title, value, explanationType, endAdornment }) => {
|
|
const { handleOpen } = useModalSearchParams()
|
|
|
|
const handleOpenExplanationModal = (type: EXPLANATION_MODAL_KEYS) => {
|
|
handleOpen(MODAL_PARAMS_KEYS.EXPLANATION, {
|
|
search: {
|
|
type,
|
|
},
|
|
})
|
|
}
|
|
return (
|
|
<Box>
|
|
<Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'} marginBottom={'0.5rem'}>
|
|
<SectionTitle>{title}</SectionTitle>
|
|
<AppLink title="What is this?" onClick={() => handleOpenExplanationModal(explanationType)} />
|
|
</Stack>
|
|
<StyledInput value={value} readOnly endAdornment={endAdornment} />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default UserValueSection
|