60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import { FunctionComponent } from "react";
|
|
import { AccountInfo, WidthHeightProps } from "../../types";
|
|
import color from "../../styles/color";
|
|
import styled from "styled-components";
|
|
import { ChainItem } from "./chain-item";
|
|
|
|
interface Props {
|
|
chainList: AccountInfo[];
|
|
}
|
|
|
|
export const ChainList: FunctionComponent<Props> = (props) => {
|
|
const { chainList } = props;
|
|
return (
|
|
<ChainContainer color={color.grey["800"]}>
|
|
{chainList.map((chainInfo) => (
|
|
<ChainItem key={chainInfo.prefix} chainInfo={chainInfo} />
|
|
))}
|
|
</ChainContainer>
|
|
);
|
|
};
|
|
|
|
export const ChainContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-height: 33rem;
|
|
overflow: scroll;
|
|
|
|
background-color: ${(props) => props.color};
|
|
`;
|
|
|
|
export const ChainItemContainer = styled.div<{ isLoading: boolean }>`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
gap: 1rem;
|
|
|
|
padding: 1.5rem;
|
|
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: ${(props) => (props.isLoading ? null : color.grey["700"])};
|
|
}
|
|
`;
|
|
|
|
export const ChainImageContainer = styled.div<WidthHeightProps>`
|
|
width: ${(props) => props.width};
|
|
height: ${(props) => props.height};
|
|
|
|
position: relative;
|
|
`;
|
|
|
|
export const ChainInfoContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
`;
|