nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 07:30:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

New layout for monsterplant

Browse Source
This commit is contained in:
object 2022-08-13 19:35:15 +00:00
parent 8f6e26cf44
commit e33966cd23
1 changed files with 65 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/common/layout/LayoutCounterTimeView.tsx Normal file
View File

@ -0,0 +1,65 @@
import { FC, useMemo } from 'react';
import { Base, BaseProps, Column, Flex, Text } from '..';
import { LocalizeText } from '../../api';
interface LayoutCounterTimeViewProps extends BaseProps<HTMLDivElement>
{
day: string;
hour: string;
minutes: string;
seconds: string;
}
export const LayoutCounterTimeView: FC<LayoutCounterTimeViewProps> = props =>
{
const { day = '00', hour = '00', minutes = '00', seconds = '00', classNames = [], children = null, ...rest } = props;
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'nitro-counter-time' ];
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ classNames ]);
return (
<>
<Column gap={ 1 }>
<Flex gap={ 1 }>
<Column>
<Base classNames={ getClassNames } { ...rest }>
<div>{ day != '00' ? day : hour }</div>
{ children }
</Base>
<Text variant="white" small truncate center={ true }>{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</Text>
</Column>
<Column>
<Base style={ { marginTop: '3px' } }>
:
</Base>
</Column>
<Column>
<Base classNames={ getClassNames } { ...rest }>
<div>{ minutes }</div>
{ children }
</Base>
<Text variant="white" small truncate center={ true }>{ LocalizeText('countdown_clock_unit_minutes') }</Text>
</Column>
<Column>
<Base style={ { marginTop: '3px' } }>
:
</Base>
</Column>
<Column>
<Base classNames={ getClassNames } { ...rest }>
<div>{ seconds }</div>
{ children }
</Base>
<Text variant="white" small truncate center={ true }>{ LocalizeText('countdown_clock_unit_seconds') }</Text>
</Column>
</Flex>
</Column>
</>
);
}