import { css } from "@emotion/react" import styled from "@emotion/styled/macro" import { Edit3, Trash } from "react-feather" import { IconButton } from "../../" import { RowElement } from "../EditableRow" import { RowText } from "./RowText" import { Url } from "./Url" const Wrapper = styled.div` ${({ theme: { space } }) => css` height: calc(${space.medium} * 2); width: 100%; display: flex; align-items: center; gap: ${space.medium}; `} ` const Label = styled(RowText)` width: 20%; ` const Actions = styled.div` width: max-content; ` type ItemViewModeProps = RowElement & { designator: string onEditClick: () => void onRemoveClick: () => void } export const ItemViewMode = ({ label, url, designator, onRemoveClick, onEditClick, }: ItemViewModeProps) => ( <Wrapper> <Label>{label}</Label> <Url url={url} /> <Actions> <IconButton icon={Edit3} label={`Edit ${label} ${designator}`} onClick={onEditClick} /> <IconButton icon={Trash} label={`Remove ${label} ${designator}`} onClick={onRemoveClick} /> </Actions> </Wrapper> )