Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import styled, { ThemeProvider } from 'styled-components';
- type Props = {
- children: React.ReactNode;
- };
- function Cell(props: Props) {
- const theme = {
- color: convertColor(props.children),
- };
- function convertColor(value: any) {
- switch (value) {
- case 1:
- return 'tomato';
- case 2:
- return 'royalblue';
- }
- }
- return (
- <ThemeProvider theme={theme}>
- <StyledCell>{props.children}</StyledCell>
- </ThemeProvider>
- );
- }
- export const StyledCell = styled.td`
- display: flex;
- justify-content: center;
- align-items: center;
- inline-size: 50px;
- block-size: 50px;
- margin: 5px;
- border: 1px solid black;
- border-radius: 50%;
- font-size: 0;
- background-color: ${(props) => props.theme.color} !important;
- user-select: none;
- `;
- export default Cell;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement