71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
import {
|
|
HStack,
|
|
Tooltip,
|
|
EditablePreview,
|
|
EditableInput,
|
|
Text,
|
|
Editable,
|
|
Button,
|
|
ButtonProps,
|
|
useEditableControls,
|
|
} from '@chakra-ui/react'
|
|
import { EditIcon } from 'assets/icons'
|
|
import { CopyButton } from 'components/shared/buttons/CopyButton'
|
|
import React from 'react'
|
|
|
|
type EditableUrlProps = {
|
|
publicId?: string
|
|
onPublicIdChange: (publicId: string) => void
|
|
}
|
|
|
|
export const EditableUrl = ({
|
|
publicId,
|
|
onPublicIdChange,
|
|
}: EditableUrlProps) => {
|
|
return (
|
|
<Editable
|
|
as={HStack}
|
|
spacing={3}
|
|
defaultValue={publicId}
|
|
onSubmit={onPublicIdChange}
|
|
>
|
|
<HStack spacing={1}>
|
|
<Text>{process.env.NEXT_PUBLIC_VIEWER_HOST}/</Text>
|
|
<Tooltip label="Edit">
|
|
<EditablePreview
|
|
mx={1}
|
|
bgColor="blue.500"
|
|
color="white"
|
|
px={3}
|
|
rounded="md"
|
|
cursor="pointer"
|
|
display="flex"
|
|
fontWeight="semibold"
|
|
/>
|
|
</Tooltip>
|
|
<EditableInput px={2} />
|
|
</HStack>
|
|
|
|
<HStack>
|
|
<EditButton size="xs" />
|
|
<CopyButton
|
|
size="xs"
|
|
textToCopy={`${process.env.NEXT_PUBLIC_VIEWER_HOST}/${publicId}`}
|
|
/>
|
|
</HStack>
|
|
</Editable>
|
|
)
|
|
}
|
|
|
|
const EditButton = (props: ButtonProps) => {
|
|
const { isEditing, getEditButtonProps } = useEditableControls()
|
|
|
|
return isEditing ? (
|
|
<></>
|
|
) : (
|
|
<Button leftIcon={<EditIcon />} {...props} {...getEditButtonProps()}>
|
|
Edit
|
|
</Button>
|
|
)
|
|
}
|