[RED] Implement ActivityLog Scene

src/scenes/ActivityLog/index.tsx

-import React from 'react';
+import React, { useContext, useState } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import { Box, Content, CategoryButton } from 'components';
+import ActivityList from './components/ActivityList';
+import ActivityTabel from './components/ActivityTabel';
 
-import { Box } from 'components';
-import ActivityLog from './components/ActivityLog';
+export const DEFAULT_THEME = {
+  colors: {
+    totallyWhite: 'white',
+    mediumGray: 'gray',
+  },
+};
 
-function Home() {
+function ActivityLog() {
+  const { colors } = useContext(ThemeContext) || DEFAULT_THEME;
+  const [isTable, setIsTable] = useState(false);
   return (
-    <Box width="100%" axis={Box.Axis.Vertical}>
-      <ActivityLog />
+    <Content title="Log Aktivitas">
+      <Box
+        width="100%"
+        padding="24px 24px"
+        borderRadius="3px"
+        background={colors.totallyWhite}
+        axis={Box.Axis.Vertical}
+      >
+        <Box width="70%" axis={Box.Axis.Horizontal} margin="0 0 2em">
+          <CategoryButton
+            width="30%"
+            value={isTable}
+            values={[
+              { label: 'List', value: false },
+              { label: 'Tabel', value: true }
+            ]}
+            onClick={setIsTable}
+          />
         </Box>
+        {
+          isTable ?
+            <ActivityTabel />
+            :
+            <ActivityList />
+        }
+      </Box>
+    </Content>
   );
 }
 
-export default Home;
\ No newline at end of file
+export default ActivityLog;
\ No newline at end of file