+
+ {label}
+
+
+ ) => {
+ setPreviousModalState((p) => {
+ const newState = (isViewer) ? ({
+ isUrlSameForRole: p?.isUrlSameForRole,
+ url: p?.url,
+ viewerUrl: e?.target?.value,
+ }) : ({
+ isUrlSameForRole: p?.isUrlSameForRole,
+ url: e?.target?.value,
+ viewerUrl: p?.viewerUrl,
+ });
+ return newState;
+ });
+ }}
+ />
+ {(isUrlAlreadyFormated || isUrlPreviewing) && (
+ {
+ if (!isUrlPreviewing) {
+ setUrlToPreview({ url, isViewer });
+ } else {
+ setUrlToPreview(null);
+ }
+ }}
+ >
+ {!isUrlPreviewing ? 'Show preview' : 'Hide preview'}
+
+ )}
+
+
+ );
+}
diff --git a/src/components/modal-to-share-link/link-form/text-input/styles.ts b/src/components/modal-to-share-link/link-form/text-input/styles.ts
new file mode 100644
index 0000000..f08f95f
--- /dev/null
+++ b/src/components/modal-to-share-link/link-form/text-input/styles.ts
@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { ButtonStyleProps } from './types';
+import { FormToSendUrlItem as FormToSendUrlItemCommon } from '../styles';
+
+const colorGray = 'var(--color-gray, #4E5A66)';
+const borderSize = '2px';
+
+export const LabelFormTextInput = styled.input`
+ width: 100%;
+
+ &::placeholder {
+ color: #555;
+ }
+`;
+
+export const ButtonStyle = styled.button