You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.3 KiB
55 lines
1.3 KiB
import React from "https://esm.sh/react@17.0.2";
|
|
import styled from "https://esm.sh/styled-components";
|
|
|
|
export const BlockContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 3px;
|
|
background-color: #434343;
|
|
box-shadow: #000 3px 3px 14px;
|
|
border-radius: 6px;
|
|
margin-bottom: 30px;
|
|
`;
|
|
|
|
export const BlockStyle = styled.div<{ signals?: boolean }>`
|
|
background: ${(props) =>
|
|
props.signals
|
|
? "linear-gradient(45deg, rgba(18,209,0,1) 0%, rgba(9,89,0,1) 100%)"
|
|
: "linear-gradient(45deg, rgba(209,0,0,1) 0%, rgba(89,0,0,1) 100%)"};
|
|
border: 1px solid #434343;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 3px;
|
|
border-radius: 4px;
|
|
`;
|
|
|
|
export const EmptyBlock = styled.div`
|
|
border: 1px solid #5a5a5a;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 3px;
|
|
border-radius: 4px;
|
|
`;
|
|
|
|
export interface IBlockProps {
|
|
height: number;
|
|
signals: boolean | undefined;
|
|
miner: string | undefined;
|
|
}
|
|
|
|
export function Block({ height, signals, miner }: IBlockProps) {
|
|
if (signals === undefined) {
|
|
return <EmptyBlock title={`Coming block ${height}`} />;
|
|
}
|
|
|
|
const hover = `Height: ${height}
|
|
Miner: ${miner ?? "Unknown"}`;
|
|
|
|
return (
|
|
<a href={`https://mempool.space/block/${height}?showDetails=true`} target="_blank">
|
|
<BlockStyle title={hover} signals={signals}></BlockStyle>
|
|
</a>
|
|
);
|
|
}
|
|
|