diff --git a/src/components/ui/dropDownUI.tsx b/src/components/ui/dropDownUI.tsx index bef6943d..f6c1f760 100644 --- a/src/components/ui/dropDownUI.tsx +++ b/src/components/ui/dropDownUI.tsx @@ -11,9 +11,16 @@ interface DropDownProps { list: string[]; selected: string; onSelectedChange: (selected: string) => void; + description?: string; } -export default function DropDown({ label, list, selected, onSelectedChange }: DropDownProps) { +export default function DropDown({ + label, + list, + selected, + onSelectedChange, + description, +}: DropDownProps) { const [isActive, setIsActive] = useState(false); const onActiveToggle = useCallback(() => { @@ -53,6 +60,7 @@ export default function DropDown({ label, list, selected, onSelectedChange }: Dr ))} + {description && {description}} ); } @@ -121,4 +129,14 @@ const S = { background-color: ${theme.color.gray200}; `} `, + Description: styled.div` + height: 17px; + font-size: 12px; + color: ${({ theme }) => theme.color.gray900}; + flex: none; + order: 2; + align-self: stretch; + flex-grow: 0; + margin: 8px 0px; + `, };