UI Admin Keamanan

src/app/admin/(dashboard)/keamanan/tips-keamanan/create/createTips.tsx

@@ -0,0 +1,27 @@
+import colors from '@/con/colors';
+import { Box, Stack, Text, TextInput } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+import { KeamananEditor } from '../../_com/keamananEditor';
+
+function CreateTipsKeamanan() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <TextInput
+          label={<Text fz={"sm"} fw={"bold"}>Judul Tips Keamanan</Text>}
+          placeholder="masukkan judul tips keamanan"
+        />
+        <Box>
+          <Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>
+          <IconImageInPicture size={24} color={colors['blue-button']} />
+        </Box>
+        <KeamananEditor
+          showSubmit={false}
+        />
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreateTipsKeamanan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/listData/page.tsx

@@ -0,0 +1,24 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function ListDataTipsKeamanan() {
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Data Tips Keamanan</Title>
+        <Box>
+          <Text fw={"bold"}>Judul Tips Keamanan</Text>
+          <Text></Text>
+          <Text fw={"bold"}>Gambar Tips Keamanan</Text>
+          <IconImageInPicture size={24} color={colors['blue-button']} />
+          <Text fw={"bold"}>Deskripsi Tips Keamanan</Text>
+          <Text></Text>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default ListDataTipsKeamanan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx

@@ -1,11 +1,31 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
 import React from 'react';
+import CreateTipsKeamanan from './create/createTips';
+import ListDataTipsKeamanan from './listData/page';
 
 function Page() {
   return (
-    <div>
-      tips-keamanan
-    </div>
-  );
+    <Stack gap={"xs"}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>  
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10}>
+            <Title order={3}>Tips Keamanan</Title>
+            <CreateTipsKeamanan/>
+            <Group>
+              <Button
+              mt={10}
+              bg={colors['blue-button']}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Paper>
+        </Box>
+        <ListDataTipsKeamanan/>
+      </SimpleGrid>
+    </Stack>
+  )
 }
 
 export default Page;