feat(FilePreview): add file preview to landing (#524)

* feat(FilePreview): add file preview to landing

* feat(FilePreview): add file preview to landing

Author: KrotovPetr

src/content/components/uikit/FilePreview/FilePreviewComponent.tsx

@@ -0,0 +1,41 @@
+import {Link, Xmark} from '@gravity-ui/icons';
+import {FilePreview} from '@gravity-ui/uikit';
+import type {FilePreviewProps} from '@gravity-ui/uikit';
+
+type FilePreviewComponentProps = Omit<FilePreviewProps, 'className'>;
+
+export const FilePreviewComponent = (props: FilePreviewComponentProps) => {
+    const {selected, imageSrc, description, view = 'default'} = props;
+
+    const file = {name: 'my-file.docs', type: 'text/docs'} as File;
+
+    if (view === 'default') {
+        const actions = [
+            {icon: <Link width={14} height={14} />, title: 'Link', onClick: () => {}},
+            {icon: <Xmark width={14} height={14} />, title: 'Close', onClick: () => {}},
+        ];
+
+        return (
+            <FilePreview
+                file={file}
+                onClick={() => {}}
+                selected={selected}
+                imageSrc={imageSrc}
+                description={description}
+                view="default"
+                actions={actions}
+            />
+        );
+    }
+
+    return (
+        <FilePreview
+            file={file}
+            onClick={() => {}}
+            selected={selected}
+            imageSrc={imageSrc}
+            description={description}
+            view="compact"
+        />
+    );
+};

src/content/components/uikit/FilePreview/index.ts

@@ -0,0 +1,38 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'FilePreview'};
+
+export const filePreviewConfig = {
+    id: 'file-preview',
+    title: 'FilePreview',
+    githubUrl: getGithubUrl(getterOptions),
+    isSupportRTL: true,
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('./FilePreviewComponent').then((mod) => mod.FilePreviewComponent),
+        ),
+        props: {
+            view: {
+                type: 'radioButton',
+                values: mappingOptions(['default', 'compact']),
+                defaultValue: 'default',
+            },
+            selected: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            imageSrc: {
+                type: 'input',
+            },
+            description: {
+                type: 'input',
+            },
+        },
+    },
+};

src/content/components/uikit/index.ts

@@ -15,6 +15,7 @@ import {checkboxConfig} from './Checkbox';
 import {disclosureConfig} from './Disclosure';
 import {dividerConfig} from './Divider';
 import {dropdownMenuConfig} from './DropdownMenu';
+import {filePreviewConfig} from './FilePreview';
 import {helpMarkConfig} from './HelpMark';
 import {hotkeyConfig} from './Hotkey';
 import {iconConfig} from './Icon';
@@ -105,6 +106,7 @@ const uikitComponents: Component[] = [
     stepperConfig,
     helpMarkConfig,
     hotkeyConfig,
+    filePreviewConfig,
 ];
 
 export const uikit: Lib = {