image-beautifier 1.0.1 → 1.0.3

package/src/components/editor/layers/FrameBox.jsx

@@ -1,51 +0,0 @@
-import { Children, cloneElement, useEffect, useMemo } from 'react';
-import { Frame, Image } from 'leafer-ui';
-import blurSvg from '@assets/blur.svg';
-
-const childrenInjectProps = (params, children) => {
-    if (children instanceof Array) {
-        return children.map((child) => {
-            return Children.toArray(child).map((element) =>
-                cloneElement(element, { ...params })
-            );
-        });
-    } else {
-        const dom = Children.toArray(children).map((element) =>
-            cloneElement(element, { ...params })
-        );
-        return dom;
-    }
-};
-
-export default ({ width, height, background, parent, children, cursor }) => {
-    const frame = useMemo(() => {
-        const fra = new Frame({
-            width,
-            height,
-            overflow: 'hide',
-            fill: background,
-            cursor: 'auto'
-        });
-        fra.name = 'frame';
-        return fra;
-    }, []);
-
-    useEffect(() => {
-        frame.width = width;
-        frame.height = height;
-        frame.fill = background;
-    }, [width, height, background]);
-
-    useEffect(() => {
-        frame.cursor = cursor || 'auto';
-    }, [cursor]);
-
-    useEffect(() => {
-        parent.add(frame);
-        return () => {
-            frame.remove();
-        };
-    }, [parent]);
-
-    return <>{childrenInjectProps({ parent: frame }, children)}</>;
-};

package/src/components/editor/layers/Screenshot.jsx

@@ -1,89 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { observer } from 'mobx-react-lite';
-import { Image, Box } from 'leafer-ui';
-import stores from '@stores';
-import { computedSize, getPosition } from '@utils/utils';
-
-export default observer(({ parent }) => {
-    const [image, box] = useMemo(() => {
-        const image = new Image({
-            url: stores.editor.img.src,
-            origin: 'center'
-        });
-        const box = new Box({
-            overflow: 'hide',
-            scale: 1,
-            children: [image]
-        });
-        return [image, box];
-    }, [parent]);
-
-    useEffect(() => {
-        if (stores.option.padding === 0) {
-            box.fill = '#ffffff00'
-        } else {
-            box.fill = stores.option.paddingBg;
-        }
-    }, [stores.option.paddingBg, stores.option.padding]);
-
-    useEffect(() => {
-        box.cornerRadius = stores.option.round;
-        image.cornerRadius = stores.option.round - 2;
-    }, [stores.option.round]);
-
-    useEffect(() => {
-        const { shadow } = stores.option;
-        if (shadow === 0) {
-            box.shadow = null;
-        } else {
-            box.shadow = {
-                x: shadow * 4,
-                y: shadow * 4,
-                blur: shadow * 3,
-                color: '#00000045',
-                box: true
-            };
-        }
-    }, [stores.option.shadow]);
-
-    useEffect(() => {
-        box.scale = stores.option.scale;
-    }, [stores.option.scale]);
-
-    useEffect(() => {
-        image.url = stores.editor.img.src;
-    }, [stores.editor.img.src]);
-
-    useEffect(() => {
-        image.scaleX = stores.option.scaleX ? -1 : 1;
-    }, [stores.option.scaleX]);
-
-    useEffect(() => {
-        image.scaleY = stores.option.scaleY ? -1 : 1;
-    }, [stores.option.scaleY]);
-
-    useEffect(() => {
-        const margin = Math.round(stores.option.frameConf.width * 0.2);
-        const { width, height } = computedSize(stores.editor.img.width, stores.editor.img.height, stores.option.frameConf.width - margin, stores.option.frameConf.height - margin);
-        image.width = width - stores.option.padding;
-        image.height = height - stores.option.padding;
-        box.width = width;
-        box.height = height;
-        box.origin = stores.option.align;
-        const { x, y } = getPosition(stores.option.align, stores.option.frameConf.width - width, stores.option.frameConf.height - height);
-        box.x = x;
-        box.y = y;
-        if (stores.option.padding > 0) {
-            image.x = stores.option.padding / 2;
-            image.y = stores.option.padding / 2;
-        }
-    }, [stores.option.frameConf.width, stores.option.frameConf.height, stores.option.padding, stores.option.align]);
-
-    useEffect(() => {
-        parent.add(box);
-        return (() => {
-            box.remove();
-        })
-    }, [parent]);
-    return null;
-});

package/src/components/editor/layers/ShapeLine.jsx

@@ -1,97 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { Rect, Ellipse, Line, Text } from 'leafer-ui';
-import { Arrow } from '@leafer-in/arrow';
-
-export default ({ parent, type, id, width, height, x, y, fill, strokeWidth, zIndex, points, editable, text }) => {
-    const shape = useMemo(() => {
-        const defaultOption = { id, x, y, zIndex }
-        if (type === 'SquareFill') {
-            return new Rect({
-                cornerRadius: 8,
-                width,
-                height,
-                fill,
-                ...defaultOption
-            });
-        }
-        if (type === 'Circle') {
-            return new Ellipse({
-                stroke: fill,
-                strokeWidth,
-                width,
-                height,
-                ...defaultOption
-            });
-        }
-        if (type === 'Slash') {
-            return new Line({
-                id,
-                points,
-                zIndex,
-                stroke: fill,
-                strokeWidth
-            });
-        }
-        if (type === 'MoveDownLeft') {
-            return new Arrow({
-                id,
-                points,
-                zIndex,
-                strokeCap: 'round',
-                strokeJoin: 'round',
-                stroke: fill,
-                strokeWidth
-            });
-        }
-        if (type === 'Pencil') {
-            return new Line({
-                id,
-                points,
-                zIndex,
-                curve: true,
-                stroke: fill,
-                strokeWidth
-            });
-        }
-        if (type === 'emoji') {
-            return new Text({
-                id,
-                zIndex,
-                text,
-                resizeFontSize: true,
-                fontSize: 48
-            });
-        }
-        return new Rect({
-            cornerRadius: 8,
-            stroke: fill,
-            strokeWidth,
-            width,
-            height,
-            ...defaultOption
-        });
-    }, [parent]);
-
-    useEffect(() => {
-        if (['Slash', 'MoveDownLeft', 'Pencil'].includes(type)) {
-            shape.points = points;
-        } else {
-            shape.x = x;
-            shape.y = y;
-            shape.width = width;
-            shape.height = height;
-        }
-    }, [x, y, width, height]);
-
-    useEffect(() => {
-        shape.editable = !!editable;
-    }, [editable]);
-
-    useEffect(() => {
-        parent.add(shape);
-        return (() => {
-            shape.remove();
-        })
-    }, [parent]);
-    return null;
-}

package/src/components/editor/layers/Watermark.jsx

@@ -1,41 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { observer } from 'mobx-react-lite';
-import { Rect } from 'leafer-ui';
-import stores from '@stores';
-
-export default observer(({ parent }) => {
-    const rect = useMemo(() => {
-        const rect = new Rect({
-            x: 0,
-            y: 0,
-        });
-        return rect;
-    }, [parent]);
-
-    useEffect(() => {
-        rect.width = stores.option.frameConf.width;
-        rect.height = stores.option.frameConf.height;
-    }, [stores.option.frameConf.width, stores.option.frameConf.height]);
-
-    useEffect(() => {
-        rect.zIndex = stores.option.waterIndex;
-    }, [stores.option.waterIndex]);
-
-    useEffect(() => {
-        rect.fill = {
-            type: 'image',
-            url: stores.option.waterSvg,
-            mode: 'repeat',
-            format: 'svg',
-            size: Math.round(stores.option.frameConf.width / 6)
-        };
-    }, [stores.option.waterSvg, stores.option.frameConf.width]);
-
-    useEffect(() => {
-        parent.add(rect);
-        return (() => {
-            rect.remove();
-        });
-    }, []);
-    return null;
-});

package/src/components/header/EmojiSelect.jsx

@@ -1,35 +0,0 @@
-import { useState } from 'react';
-import { Button, Popover } from 'antd';
-import Icon from '@components/Icon';
-import data from '@emoji-mart/data'
-import Picker from '@emoji-mart/react'
-
-export default ({disabled = false, toSelect, locale='en'}) => {
-    const [open, setOpen] = useState(false);
-    const hide = () => {
-        setOpen(false);
-    };
-    const handleOpenChange = (newOpen) => {
-        setOpen(newOpen);
-    };
-    const onEmojiSelect = (e) => {
-        toSelect(e.native);
-        hide();
-    }
-    return (
-        <Popover
-        content={<Picker data={data} locale={locale} onEmojiSelect={onEmojiSelect} previewPosition='none' />}
-        title=""
-        trigger="click"
-        open={open}
-        onOpenChange={handleOpenChange}
-        >
-            <Button
-                type="text"
-                shape="circle"
-                disabled={disabled}
-                icon={<Icon.Smile size={16} />}
-            ></Button>
-        </Popover>
-    )
-}

package/src/components/header/Header.jsx

@@ -1,134 +0,0 @@
-import { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import { Button, Divider, Tooltip } from 'antd';
-import { icons } from 'lucide-react';
-import Icon from '@components/Icon';
-import ColorPicker from '@components/ColorPicker';
-import { WidthDropdown } from '@components/header/WidthDropdown'
-import { nanoid } from '@utils/utils';
-import stores from '@stores';
-import EmojiSelect from './EmojiSelect';
-import Logo from './Logo';
-import MediaLogo from './MediaLogo';
-
-const toolList = ['Square', 'SquareFill', 'Circle', 'Slash', 'MoveDownLeft', 'Pencil', 'Smile'];
-
-export default observer(() => {
-    const [isMove, setIsMove] = useState(false);
-    // const handleUndo = () => {
-    //     console.log(JSON.stringify(stores.editor.app.toJSON()))
-    // };
-    const selectTool = (type) => {
-        if (!stores.editor.isEditing) return;
-        const { useTool } = stores.editor;
-        stores.editor.setUseTool(useTool === type ? null : type);
-        setIsMove(false);
-    }
-    const handleSelectEmoji = (emoji) => {
-        if (!stores.editor.isEditing) return;
-        const x = stores.option.frameConf.width / 2 - 24;
-        const y = stores.option.frameConf.height / 2 - 24;
-        stores.editor.setUseTool(null);
-        setIsMove(false);
-        stores.editor.addShape({
-            id: nanoid(),
-            type: 'emoji',
-            text: emoji,
-            zIndex: stores.editor.shapes.size + 1,
-            x,
-            y,
-            editable: true
-        });
-    }
-    const toggleMove = () => {
-        if (!stores.editor.isEditing) return;
-        const is = !isMove;
-        stores.editor.setUseTool(null);
-        setIsMove(is);
-        stores.editor.app.config.move.drag = is;
-    }
-    return (
-        <div className='flex items-center justify-center shrink-0 gap-3 bg-white py-2 px-5 border-b border-b-gray-50 shadow-sm relative z-[11] select-none'>
-            <div className="flex-1">
-                <Logo />
-            </div>
-            {/* Todo */}
-            {/* <div className='flex gap-1 justify-center items-center'>
-                <Tooltip placement='bottom' arrow={false} title='Undo'>
-                    <Button
-                        type='text'
-                        shape='circle'
-                        icon={<Icon.Undo size={16} />}
-                        onClick={handleUndo}
-                    ></Button>
-                </Tooltip>
-                <Tooltip placement='bottom' arrow={false} title='Redo'>
-                    <Button
-                        type='text'
-                        shape='circle'
-                        icon={<Icon.Redo size={16} />}
-                    ></Button>
-                </Tooltip>
-            </div>
-            <Divider type='vertical' /> */}
-            <div className='flex gap-1 justify-center items-center'>
-                {toolList.map(item => {
-                    if (item === 'Smile') return (<EmojiSelect key={item} disabled={false} toSelect={handleSelectEmoji} />)
-                    let icon;
-                    if (item.includes('Fill')) {
-                        const type = item.replace('Fill', '');
-                        const Icons = icons[type];
-                        icon = <Icons size={16} fill='currentColor' />;
-                    } else {
-                        const Icons = icons[item];
-                        icon = <Icons name={item} size={16} />;
-                    }
-                    return (
-                        <Button
-                            key={item}
-                            type='text'
-                            shape='circle'
-                            icon={icon}
-                            className={stores.editor.useTool === item && 'text-[#1677ff] bg-sky-100/50 hover:bg-sky-100 hover:text-[#1677ff]'}
-                            onClick={() => selectTool(item)}
-                        />
-                    )
-                })}
-            </div>
-            <Divider type='vertical' />
-            <div className='flex gap-1 justify-center items-center'>
-                <ColorPicker
-                    size='small'
-                    presets={[
-                        {
-                            label: 'Recommended',
-                            colors: [
-                                '#ffffff',
-                                '#444444',
-                                '#df4b26',
-                                '#1677ff',
-                                '#52C41A',
-                                '#FA8C16',
-                                '#FADB14',
-                                '#EB2F96',
-                                '#722ED1',
-                            ],
-                        },
-                    ]}
-                    value={stores.editor.annotateColor}
-                    onChange={(e) => stores.editor.setAnnotateColor(e.toHexString())}
-                />
-                <WidthDropdown defaultValue={stores.editor.strokeWidth} onChange={(e) => stores.editor.setStrokeWidth(e)} />
-                <Button
-                    type="text"
-                    shape='circle'
-                    className={isMove && 'text-[#1677ff] bg-sky-100/50 hover:bg-sky-100 hover:text-[#1677ff]'}
-                    icon={<Icon.Hand size={16} />}
-                    onClick={toggleMove}
-                />
-            </div>
-            {/* <Divider type='vertical' /> */}
-            <MediaLogo />
-        </div>
-    );
-});

package/src/components/header/Logo.jsx

@@ -1,29 +0,0 @@
-export default () => {
-    return (
-        <h1>
-            <a href="https://shoteasy.fun" target="_blank" aria-label="ShotEasy" className="flex gap-1 text-gray-700 items-center text-xs font-semibold">
-                <svg width="20" height="20" viewBox="0 0 510 510" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g filter="url(#filter0_i_40_60)">
-                        <path d="M60.1774 83.172C64.1232 61.4358 84.9426 47.0139 106.679 50.9598L271.777 80.9308C293.513 84.8767 307.935 105.696 303.989 127.432L247.462 438.817C243.516 460.553 222.696 474.975 200.96 471.029L35.8623 441.058C14.1261 437.112 -0.295702 416.293 3.65017 394.557L60.1774 83.172Z" fill="#812BED" />
-                        <path d="M179.201 136.846C173.053 115.627 185.269 93.4418 206.488 87.2932L367.654 40.5909C388.872 34.4423 411.058 46.6588 417.206 67.8773L505.29 371.846C511.438 393.065 499.222 415.25 478.003 421.399L316.837 468.101C295.619 474.25 273.433 462.033 267.285 440.815L179.201 136.846Z" fill="#0DB7FF" />
-                        <path d="M206.488 87.2932C185.269 93.4418 173.053 115.627 179.201 136.846L254.874 397.986L303.989 127.432C307.935 105.696 293.513 84.8767 271.777 80.9308L245.134 76.0943L206.488 87.2932Z" fill="#EC83FD" />
-                        <path d="M401 404C401 416.703 390.703 427 378 427C365.297 427 355 416.703 355 404C355 391.297 365.297 381 378 381C390.703 381 401 391.297 401 404Z" fill="#0D97D3" />
-                        <path d="M144 404C144 416.703 133.703 427 121 427C108.297 427 98 416.703 98 404C98 391.297 108.297 381 121 381C133.703 381 144 391.297 144 404Z" fill="#6616CB" />
-                    </g>
-                    <defs>
-                        <filter id="filter0_i_40_60" x="3" y="39" width="503.881" height="432.679" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-                            <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                            <feOffset dx="-2" />
-                            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-                            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0" />
-                            <feBlend mode="normal" in2="shape" result="effect1_innerShadow_40_60" />
-                        </filter>
-                    </defs>
-                </svg>
-                <span>ShotEasy</span>
-            </a>
-        </h1>
-    )
-};

package/src/components/header/MediaLogo.jsx

@@ -1,10 +0,0 @@
-export default () => (
-    <div className="flex-1 flex justify-end items-end gap-2">
-        <a href="https://github.com/CH563/image-beautifier" target="_blank" aria-label="GitHub" className="block rounded-full p-1.5 hover:bg-slate-100">
-            <svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg>
-        </a>
-        <a href="https://twitter.com/LiWen563" target="_blank" aria-label="twitter:@LiWen563" className="block rounded-full p-1.5 hover:bg-slate-100">
-            <svg fill="currentColor" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>
-        </a>
-    </div>
-)

package/src/components/header/WidthDropdown.jsx

@@ -1,74 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Dropdown, Button } from 'antd';
-import Icon from '@components/Icon';
-
-const items = [
-    {
-        label: (
-            <div className='w-4 h-3 mt-1.5 items-center cursor-pointer'>
-                <i className='block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[1px]'></i>
-            </div>
-        ),
-        key: 1,
-    },
-    {
-        label: (
-            <div className='w-4 h-3 mt-1.5 items-center cursor-pointer'>
-                <i className='block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[2px]'></i>
-            </div>
-        ),
-        key: 2,
-    },
-    {
-        label: (
-            <div className='w-4 h-3 mt-1.5 items-center cursor-pointer'>
-                <i className='block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[4px]'></i>
-            </div>
-        ),
-        key: 4,
-    },
-    {
-        label: (
-            <div className='w-4 h-3 mt-1.5 items-center cursor-pointer'>
-                <i className='block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[6px]'></i>
-            </div>
-        ),
-        key: 6,
-    },
-    {
-        label: (
-            <div className='w-4 h-3 mt-1.5 items-center cursor-pointer'>
-                <i className='block w-full origin-center rounded-lg bg-slate-600 -rotate-45 h-[8px]'></i>
-            </div>
-        ),
-        key: 8,
-    },
-];
-
-export const WidthDropdown = ({ defaultValue, onChange }) => {
-    const handleClick = ({ key }) => {
-        onChange(key);
-    };
-    return (
-        <Dropdown
-            menu={{ items, onClick: handleClick, selectedKeys: [defaultValue] }}
-            trigger={['click']}
-            placement='bottom'
-        >
-            <Button
-                type='text'
-                shape='circle'
-                className='px-1.5 py-0 flex items-center justify-center'
-            >
-                <div className='w-4 h-4 flex items-center cursor-pointer'>
-                    <i
-                        className='block w-full origin-center rounded-lg bg-slate-600 -rotate-45'
-                        style={{
-                            height: defaultValue + 'px',
-                        }}
-                    ></i>
-                </div>
-            </Button>
-        </Dropdown>
-    );
-};

package/src/components/init/Init.jsx

@@ -1,77 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Upload, Button, Tooltip } from 'antd';
-import { supportImg, getImage, cn } from '@utils/utils';
-import stores from '@stores';
-import usePaste from '@hooks/usePaste';
-import { captureScreen } from '@utils/captureScreen';
-
-const { Dragger } = Upload;
-
-export default observer(() => {
-    const getFile = async (file, type = 'blob') => {
-        const DOMURL = window.URL || window.webkitURL || window;
-        const imgUrl = type === 'blob' ? DOMURL.createObjectURL(file) : file;
-        const image = await getImage(imgUrl);
-        const width = Math.round(image.width);
-        const height = Math.round(image.height);
-        stores.editor.setImg({
-            src: imgUrl,
-            width,
-            height,
-            type: type === 'blob' ? file.type : 'image/png',
-            name: type === 'blob' ? file.name : 'ShotEasy.png'
-        });
-        if (stores.option.size.type === 'auto') {
-            const margin = Math.round(width * 0.2);
-            stores.option.setFrameSize(width + margin, height + margin);
-        }
-    }
-    const beforeUpload = async (file) => {
-        await getFile(file);
-        return Promise.reject();
-    }
-    const onCapture = async () => {
-        const dataURL = await captureScreen();
-        if (!dataURL) return;
-        getFile(dataURL, 'dataURL');
-    }
-    const comingSoon = () => {
-        stores.editor.message.info('Developing, Coming soon!');
-    }
-    usePaste((file) => {
-        getFile(file);
-    });
-    return (
-        <div className='md:w-0 md:flex-1 flex flex-col justify-center items-center overflow-hidden select-none relative'>
-            <div className={cn('max-w-[600px]', stores.editor.invalid && 'invalid')}>
-                <Dragger
-                    accept={supportImg.join(',')}
-                    name="file"
-                    showUploadList={false}
-                    beforeUpload={beforeUpload}
-                    rootClassName="p-4 rounded-md bg-white block shadow-sm"
-                >
-                    <div className="text-center p-10">
-                        <p className="text-2xl my-2 opacity-60"><Icon.ImagePlus className="mx-auto" size={36} /></p>
-                        <p className="text-sm px-4">Click or Drag image to this area<br/>or Paste image</p>
-                    </div>
-                </Dragger>
-                <div className="flex justify-between mt-4 py-4 px-6 rounded-md bg-white shadow-sm">
-                    <Tooltip placement='top' arrow={false} title='Take a screenshot of desktop windows'>
-                        <Button shape="round" type="default" size="large" icon={<Icon.Camera size={20} />} onClick={onCapture} />
-                    </Tooltip>
-                    <Tooltip placement='top' arrow={false} title='Beautify text'>
-                        <Button shape="round" type="default" size="large" icon={<Icon.Type size={20} />} onClick={comingSoon} />
-                    </Tooltip>
-                    <Tooltip placement='top' arrow={false} title='Beautify Code'>
-                        <Button shape="round" type="default" size="large" icon={<Icon.CodeXml size={20} onClick={comingSoon} />} />
-                    </Tooltip>
-                    <Tooltip placement='top' arrow={false} title='Create gif animate'>
-                        <Button shape="round" type="default" size="large" icon={<Icon.ImagePlay size={20} onClick={comingSoon} />} />
-                    </Tooltip>
-                </div>
-            </div>
-        </div>
-    )
-});