10 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/FaqAccordion.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { PlusCircle } from "phosphor-react";
3 | import ReactMarkdown from "react-markdown";
4 |
5 | export default function FaqAccordion({
6 | question,
7 | answer,
8 | isQuestionBigger = false,
9 | }: {
10 | question: string;
11 | answer: string[];
12 | isQuestionBigger?: boolean;
13 | }) {
14 | const [active, setActive] = useState(false);
15 |
16 | return (
17 |
11 |
16 |
38 | 12 | {progress <= 99 ? progress : 99} 13 |
14 |%
15 |
18 |
39 |
40 |
45 | {answer.map((text: any) => {
46 | return {text} ;
47 | })}
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/FileArea.tsx:
--------------------------------------------------------------------------------
1 | import { File, Folder, PlusCircle } from "phosphor-react";
2 | import {
3 | ChangeEvent,
4 | forwardRef,
5 | MouseEvent,
6 | ReactNode,
7 | useContext,
8 | useRef,
9 | useState,
10 | } from "react";
11 | import { FilesContext } from "../contexts/Files";
12 | import { format } from "bytes";
13 | import { MAX_BYTES_PER_SEND, MAX_ITEMS_PER_LINK } from "../constants";
14 | import ItemsList from "./ItemList";
15 | import Dropdown from "./Dropdown";
16 |
17 | export default function FileArea({
18 | className = "",
19 | scroll,
20 | }: {
21 | className?: string;
22 | scroll: boolean;
23 | }) {
24 | const fileInputRef = useRef
67 | {children}
68 |
69 | );
70 | }
71 | );
72 |
73 | const spaceRemaining = MAX_BYTES_PER_SEND - fileContext.totalFilesSize;
74 |
75 | return (
76 |
77 |
85 |
95 | {fileContext.itemList.length === 0 ? (
96 |
121 |
143 |
144 | )}
145 |
146 | );
147 | }
148 |
149 | function Empty({
150 | onFileExplorerOpen,
151 | onFolderExplorerOpen,
152 | }: {
153 | onFileExplorerOpen: (e: MouseEvent) => void;
154 | onFolderExplorerOpen: (e: MouseEvent) => void;
155 | }) {
156 | return (
157 | Folders
123 | , 124 | , 128 | ]} 129 | > 130 |
132 |
142 | Add more items
133 |
134 |
141 | 135 | {fileContext.totalFilesCount} / {MAX_ITEMS_PER_LINK}{" "} 136 | {fileContext.totalFilesCount > 1 ? "files" : "file"} added 137 |
138 |·
139 |{format(spaceRemaining)} remaining
140 |
161 |
183 | );
184 | }
185 |
186 | declare module "react" {
187 | interface HTMLAttributes {
164 | e.stopPropagation();
165 | }}
166 | >
167 |
182 |
174 |
181 | Upload files
175 |
176 |
180 | 177 | or select a folder 178 |
179 |
67 | onChange && onChange(e.target.value)}
77 | onFocus={() => {
78 | onFocus && onFocus();
79 | }}
80 | onBlur={() => {
81 | onBlur && onBlur();
82 | }}
83 | onPaste={onPaste}
84 | value={value}
85 | onKeyDown={onKeyDown}
86 | />
87 |
88 | );
89 |
90 | let messageColor: string;
91 | let MessageIcon: typeof WarningOctagon | undefined;
92 |
93 | switch (accent) {
94 | case "success":
95 | messageColor = "text-green";
96 | MessageIcon = CheckCircle;
97 | break;
98 | case "warning":
99 | messageColor = "text-orange";
100 | MessageIcon = Warning;
101 | break;
102 | case "error":
103 | messageColor = "text-red-std";
104 | MessageIcon = WarningOctagon;
105 | break;
106 | default:
107 | messageColor = "text-gray-80";
108 | }
109 |
110 | return (
111 |
112 | {label ? (
113 |
120 | ) : (
121 | input
122 | )}
123 | {message && (
124 |
130 | );
131 | }
132 |
--------------------------------------------------------------------------------
/src/components/ItemList.tsx:
--------------------------------------------------------------------------------
1 | import bytes from "bytes";
2 | import { X } from "phosphor-react";
3 | import { SendItemData } from "../models/SendItem";
4 |
5 | export default function ItemList({
6 | className = "",
7 | items,
8 | onRemoveItem,
9 | }: {
10 | className?: string;
11 | items: SendItemData[];
12 | onRemoveItem?: (item: SendItemData) => void;
13 | }) {
14 | return (
15 |
125 | {MessageIcon &&
128 | )}
129 | {message}
127 |
16 | {items.map((item) => (
17 |
20 | );
21 | }
22 |
23 | function Item({
24 | item,
25 | onRemove,
26 | }: {
27 | item: SendItemData;
28 | onRemove?: (item: SendItemData) => void;
29 | }) {
30 | const extension =
31 | item.type === "file" &&
32 | item.name.includes(".") &&
33 | item.name.split(".").pop();
34 |
35 | return (
36 |
37 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/NotificationToast.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from "@headlessui/react";
2 | import { CheckCircle, Info, Warning, WarningOctagon, X } from "phosphor-react";
3 | import { ToastShowProps, ToastType } from "../services/notifications.service";
4 |
5 | const NotificationToast = ({
6 | text,
7 | type,
8 | action,
9 | visible,
10 | closable,
11 | onClose,
12 | }: Omit{item.name}
38 |
39 | {item.type === "folder" && (
40 | <>
41 |
61 | {onRemove && (
62 |
68 | )}
69 | Folder
42 |·
43 | {item.countFiles && ( 44 | <> 45 |46 | {item.countFiles} {item.countFiles === 1 ? "file" : "files"} 47 |
48 |·
49 | 50 | )} 51 | 52 | )} 53 |{bytes.format(item.size)}
54 | {extension && ( 55 | <> 56 |·
57 |{extension}
58 | 59 | )} 60 |
53 | {Icon && (
54 |
72 | {text}
58 | {action && ( 59 | 65 | )} 66 | {closable && ( 67 | 70 | )} 71 |
39 | {children}
40 |
41 | );
42 | };
43 |
44 | export default RevealX;
45 |
--------------------------------------------------------------------------------
/src/components/RevealY.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 |
3 | interface RevealProps {
4 | children: React.ReactNode;
5 | className?: string;
6 | }
7 |
8 | const RevealY = ({ children, className }: RevealProps) => {
9 | useEffect(() => {
10 | function reveal() {
11 | const reveals = document.querySelectorAll('.revealY');
12 |
13 | for (let i = 0; i < reveals.length; i++) {
14 | const windowHeight = window.innerHeight;
15 | const elementTop = reveals[i].getBoundingClientRect().top;
16 | const elementVisible = 150;
17 |
18 | if (elementTop < windowHeight - elementVisible) {
19 | reveals[i].classList.add('active');
20 | }
21 | // else {
22 | // reveals[i].classList.remove('active');
23 | // }
24 | }
25 | }
26 |
27 | window.addEventListener('scroll', reveal);
28 |
29 | return () => {
30 | window.removeEventListener('scroll', reveal);
31 | };
32 | }, []);
33 | return {children}
;
34 | };
35 |
36 | export default RevealY;
37 |
--------------------------------------------------------------------------------
/src/components/RootDropzone.tsx:
--------------------------------------------------------------------------------
1 | import { format } from "bytes";
2 | import { ReactNode, useCallback, useContext } from "react";
3 | import { useDropzone } from "react-dropzone";
4 | import { MAX_BYTES_PER_SEND } from "../constants";
5 | import { FilesContext } from "../contexts/Files";
6 |
7 | export default function RootDropzone({
8 | className = "",
9 | children,
10 | }: {
11 | className?: string;
12 | children: ReactNode;
13 | }) {
14 | const filesContext = useContext(FilesContext);
15 |
16 | const onDrop = useCallback(
17 | (acceptedFiles: File[]) => {
18 | filesContext.addFiles(acceptedFiles);
19 | },
20 | [filesContext]
21 | );
22 |
23 | const { getRootProps, getInputProps, isDragActive } = useDropzone({
24 | onDrop,
25 | noClick: true,
26 | disabled: !filesContext.enabled,
27 | noKeyboard: true,
28 | });
29 |
30 | const maxBytesPerSendDisplay = format(MAX_BYTES_PER_SEND);
31 |
32 | return (
33 |
34 |
35 | {isDragActive && (
36 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/SendBanner.tsx:
--------------------------------------------------------------------------------
1 | import { X } from "phosphor-react";
2 | import React from "react";
3 | import { ReactComponent as SendIcon } from "../assets/images/share-file/visual.svg";
4 | import BackgroundImage from "../assets/images/share-file/banner-bg.png";
5 |
6 | export interface Props {
7 | sendBannerVisible: boolean;
8 | setIsSendBannerVisible: (value: boolean) => void;
9 | }
10 |
11 | const SendBanner = (props: Props) => {
12 | const onClose = () => {
13 | props.setIsSendBannerVisible(false);
14 | };
15 |
16 | return (
17 |
37 |
48 | )}
49 | {children}
50 |
38 |
47 |
39 |
46 | 40 | Drag and drop your files here 41 |
42 |43 | Maximum {maxBytesPerSendDisplay} upload limit 44 |
45 |
22 |
67 | );
68 | };
69 |
70 | export default SendBanner;
71 |
--------------------------------------------------------------------------------
/src/components/Spinner.tsx:
--------------------------------------------------------------------------------
1 | const Spinner = ({ className = "" }: { className?: string }): JSX.Element => {
2 | return (
3 |
13 |
14 | );
15 | };
16 |
17 | export default Spinner;
18 |
--------------------------------------------------------------------------------
/src/components/Switch.tsx:
--------------------------------------------------------------------------------
1 | export default function Switch
32 |
38 |
66 |
39 |
65 |
40 |
59 |
41 |
48 | 42 | Try out Internxt 43 |
44 |45 | Encrypt, save and share large files with Internxt. 46 |
47 |
49 |
57 |
58 |
60 |
64 |
61 |
63 |
19 | onClick(first)}
30 | />
31 | onClick(second)}
35 | />
36 |
37 | );
38 | }
39 |
40 | function SwitchPart({
41 | text,
42 | active,
43 | onClick,
44 | }: {
45 | text: string;
46 | active: boolean;
47 | onClick?: () => void;
48 | }): JSX.Element {
49 | return (
50 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode, useRef, useState } from "react";
2 |
3 | export default function Tooltip({
4 | children,
5 | title,
6 | subtitle,
7 | popsFrom,
8 | style = "dark",
9 | className,
10 | delayInMs,
11 | show,
12 | position,
13 | }: {
14 | children?: ReactNode;
15 | title: string;
16 | subtitle?: string;
17 | popsFrom: "right" | "left" | "top" | "bottom";
18 | style?: "light" | "dark";
19 | className?: string;
20 | delayInMs?: number;
21 | show?: boolean;
22 | position?: number;
23 | }) {
24 | let tooltipPosition = "";
25 | let trianglePosition = "";
26 | let triangle = "";
27 |
28 | switch (popsFrom) {
29 | case "right":
30 | tooltipPosition = "left-full top-1/2 -translate-y-1/2 ml-1.5";
31 | trianglePosition = "flex-row-reverse";
32 | triangle = "polygon(100% 0%, 100% 100%, 0% 50%)";
33 | break;
34 | case "left":
35 | tooltipPosition = "right-full top-1/2 -translate-y-1/2 mr-1.5";
36 | trianglePosition = "flex-row";
37 | triangle = "polygon(0% 0%, 0% 100%, 100% 50%)";
38 | break;
39 | case "top":
40 | tooltipPosition =
41 | "bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom";
42 | trianglePosition = "flex-col";
43 | triangle = "polygon(0% 0%, 100% 0%, 50% 100%)";
44 | break;
45 | case "bottom":
46 | tooltipPosition = "top-full left-1/2 -translate-x-1/2 mt-1.5";
47 | trianglePosition = "flex-col-reverse";
48 | triangle = "polygon(50% 0%, 0% 100%, 100% 100%)";
49 | break;
50 | }
51 |
52 | return (
53 |
24 |
25 |
26 |
59 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/footer/Footer.module.scss:
--------------------------------------------------------------------------------
1 | @supports not (backdrop-filter: none) {
2 | .cookiesBgFallback {
3 | --tw-bg-opacity: 1;
4 | }
5 | }
--------------------------------------------------------------------------------
/src/components/send/CtaSection.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import textContent from "../../assets/lang/en/send.json";
3 |
4 | const CtaSection = () => {
5 | return (
6 |
64 |
99 |
69 |
87 |
98 | 74 | {title} 75 | {children} 76 |
77 | {subtitle && ( 78 |83 | {subtitle} 84 |
85 | )} 86 |
8 |
27 |
9 |
16 | 10 | {textContent.CtaSection.title} 11 |
12 |13 | {textContent.CtaSection.description} 14 |
15 | {
18 | window.open("https://internxt.com/pricing", "_blank");
19 | }}
20 | className="flex max-w-[260px] cursor-pointer flex-col items-center rounded-lg bg-white text-center hover:bg-blue-10"
21 | >
22 |
26 | 23 | {textContent.CtaSection.cta} 24 |
25 |
10 |
29 | 11 | {label.FaqSection.title} 12 |
13 |
14 | {label.FaqSection.faq.map((item) => (
15 |
28 |
19 |
26 | ))}
27 |
54 |
63 | {cards.map((card) => (
64 |
76 |
77 | );
78 | };
79 |
80 | export default FeatureSection;
81 |
--------------------------------------------------------------------------------
/src/components/send/InfoSection.tsx:
--------------------------------------------------------------------------------
1 | import label from "../../assets/lang/en/send.json";
2 | import RevealX from "../RevealX";
3 |
4 | const urlPrefix = process.env.REACT_APP_BASE_URL || "";
5 |
6 | const InfoSection = () => {
7 | return (
8 |
55 |
62 | 56 | {label.FeatureSection.title} 57 |
58 |59 | {label.FeatureSection.description} 60 |
61 |
68 |
74 | ))}
75 |
70 |
73 | {card.title}
71 |{card.description}
72 |
9 |
67 | );
68 | };
69 |
70 | export default InfoSection;
71 |
--------------------------------------------------------------------------------
/src/components/utils/schema-markup-generator.js:
--------------------------------------------------------------------------------
1 | // Schema markup generation funcitons
2 |
3 | // FAQ Data Structure generator
4 | // Additional information: https://developers.google.com/search/docs/appearance/structured-data/faqpage
5 |
6 | export const sm_faq = (faq) => {
7 | let data = `{
8 | "@context": "https://schema.org",
9 | "@type": "FAQPage",
10 | "mainEntity": [`;
11 |
12 | faq.forEach((item, i, arr) => {
13 | data += `{
14 | "@type": "Question",
15 | "name": "${item.question}",
16 | "acceptedAnswer": {
17 | "@type": "Answer",
18 | "text": "`;
19 |
20 | if (item.answer.length > 1) {
21 | item.answer.forEach((answer, i, arr) => {
22 | data += `
10 |
13 | {label.InfoSection.title}
11 |{label.InfoSection.description}
12 |
14 |
18 |
39 |
40 |
44 |
65 |
66 |
19 |
32 |
33 | 20 | {label.InfoSection.card1.title} 21 |
22 |
23 |
30 |
31 | 24 | {label.InfoSection.card1.description.line1} 25 |
26 |27 | {label.InfoSection.card1.description.line2} 28 |
29 |
34 |
38 |
35 | 
36 |
37 |
36 |
45 |
58 |
59 | 46 | {label.InfoSection.card2.title} 47 |
48 |
49 |
56 |
57 | 50 | {label.InfoSection.card2.description.line1} 51 |
52 |53 | {label.InfoSection.card2.description.line2} 54 |
55 |
60 |
64 |
61 | 
62 |
63 |
62 | ${answer}
`; 23 | }); 24 | } else { 25 | data += `${item.answer[0]}`; 26 | } 27 | 28 | data += `" 29 | }}`; 30 | if (i + 1 < arr.length) data += ","; 31 | }); 32 | data += `]}`; 33 | return data; 34 | }; 35 | -------------------------------------------------------------------------------- /src/constants.ts: -------------------------------------------------------------------------------- 1 | export const MAX_BYTES_PER_SEND = 5_368_709_120; 2 | export const MAX_ITEMS_PER_LINK = 100; 3 | 4 | export const MAX_RECIPIENTS = 50; 5 | -------------------------------------------------------------------------------- /src/contexts/Files.tsx: -------------------------------------------------------------------------------- 1 | import { format } from "bytes"; 2 | import { createContext, ReactNode, useEffect, useState } from "react"; 3 | import { FileWithPath } from "react-dropzone"; 4 | import { MAX_BYTES_PER_SEND, MAX_ITEMS_PER_LINK } from "../constants"; 5 | import { SendItemData } from "../models/SendItem"; 6 | import { transformInputFilesToJSON, transformJsonFilesToItems } from "../services/items.service"; 7 | import notificationsService, { 8 | ToastType, 9 | } from "../services/notifications.service"; 10 | 11 | type FilesContextT = { 12 | enabled: boolean; 13 | setEnabled: (value: boolean) => void; 14 | itemList: SendItemData[]; 15 | totalFilesCount: number; 16 | totalFilesSize: number; 17 | addFiles: (file: FileWithPath[]) => void; 18 | removeItem: (file: SendItemData) => void; 19 | clear: () => void; 20 | }; 21 | 22 | export const FilesContext = createContext