diff --git a/client/components/LinksTable.tsx b/client/components/LinksTable.tsx index 0c8c56fa4..5a8c1c499 100644 --- a/client/components/LinksTable.tsx +++ b/client/components/LinksTable.tsx @@ -84,14 +84,14 @@ const Action = (props: React.ComponentProps) => ( ); const ogLinkFlex = { flexGrow: [1, 3, 7], flexShrink: [1, 3, 7] }; -const createdFlex = { flexGrow: [1, 1, 3], flexShrink: [1, 1, 3] }; +const createdFlex = { flexGrow: [1, 1, 2.5], flexShrink: [1, 1, 2.5] }; const shortLinkFlex = { flexGrow: [1, 1, 3], flexShrink: [1, 1, 3] }; const viewsFlex = { flexGrow: [0.5, 0.5, 1], flexShrink: [0.5, 0.5, 1], justifyContent: "flex-end" }; -const actionsFlex = { flexGrow: [1, 1, 2.5], flexShrink: [1, 1, 2.5] }; +const actionsFlex = { flexGrow: [1, 1, 3], flexShrink: [1, 1, 3] }; interface RowProps { index: number; @@ -109,6 +109,7 @@ interface BanForm { interface EditForm { target: string; address: string; + description: string; } const Row: FC = ({ index, link, setDeleteModal }) => { @@ -119,7 +120,8 @@ const Row: FC = ({ index, link, setDeleteModal }) => { const [editFormState, { text, label }] = useFormState( { target: link.target, - address: link.address + address: link.address, + description: link.description }, { withIds: true } ); @@ -175,7 +177,14 @@ const Row: FC = ({ index, link, setDeleteModal }) => { <> - {link.target} + + {link.target} + {link.description && ( + + {link.description} + + )} + {`${formatDistanceToNow( new Date(link.created_at) @@ -292,9 +301,15 @@ const Row: FC = ({ index, link, setDeleteModal }) => { {showEdit && ( - - - + + + = ({ index, link, setDeleteModal }) => { + + + + Description: + + + + + +