All files / src/components/forms UIAssetPreviewButton.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useState } from "react";
import styled from "styled-components";
import { useAppSelector } from "store/hooks";
 
interface UIAssetPreviewProps {
  path: string;
  onClick?: () => void;
}
 
const UIAssetPreviewButton = styled.button`
  position: relative;
  width: 128px;
  height: 112px;
  background-size: cover;
  background-color: #ccc;
  border-radius: 4px;
  border: 0px;
  display: block;
  padding: 0;
 
  &:hover:after {
    content: "";
    display: block;
    width: 128px;
    height: 112px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
  }
 
  img {
    display: block;
    width: 128px;
    height: 112px;
    border-radius: 4px;
    image-rendering: pixelated;
  }
`;
 
const UIAssetError = styled.div`
  font-size: 12px;
`;
 
export const UIAssetPreview = ({ path, onClick }: UIAssetPreviewProps) => {
  const [error, setError] = useState(false);
  const uiVersion = useAppSelector((state) => state.editor.uiVersion);
 
  Iif (error) {
    return <UIAssetError>Image will be created after next build.</UIAssetError>;
  }
 
  return (
    <UIAssetPreviewButton onError={() => setError(true)} onClick={onClick}>
      <img
        onError={() => console.log("IMG ERROR")}
        src={`gbs://project/assets/${path}?_v=${uiVersion}`}
        alt=""
      />
    </UIAssetPreviewButton>
  );
};