From e33966cd2308b55d803f60fe911e3a918a6d7144 Mon Sep 17 00:00:00 2001
From: object <objectholos@gmail.com>
Date: Sat, 13 Aug 2022 19:35:15 +0000
Subject: [PATCH] New layout for monsterplant

---
 src/common/layout/LayoutCounterTimeView.tsx | 65 +++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/common/layout/LayoutCounterTimeView.tsx

diff --git a/src/common/layout/LayoutCounterTimeView.tsx b/src/common/layout/LayoutCounterTimeView.tsx
new file mode 100644
index 00000000..36150820
--- /dev/null
+++ b/src/common/layout/LayoutCounterTimeView.tsx
@@ -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>
+        </>
+    );
+}