Portofolio

#feat
- Create porto
- Edit Porto
- Upload gambar background profile
- List user
- Search user
## No issuue

src/app_modules/component_global/header_tamplate.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function ComponentGlobal_HeaderTamplate({
+  route,
+  route2,
+  title,
+  icon,
+}: {
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Header height={50} sx={{ borderStyle: "none" }}>
+        <Group h={50} position="apart" px={"md"}>
+          <ActionIcon
+            variant="transparent"
+            onClick={() => {
+              if (route === null || route === undefined) {
+                return router.back();
+              } else {
+                return router.push(route);
+              }
+            }}
+          >
+            <IconChevronLeft />
+          </ActionIcon>
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/component_global/notif_global/notifikasi_berhasil.tsx

@@ -0,0 +1,31 @@
+import { Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle, IconChecklist, IconCircleCheck } from "@tabler/icons-react";
+
+/**
+ * 
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function ComponentGlobal_NotifikasiBerhasil(text: string) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "green",
+    radius: "md",
+    autoClose: 1000,
+    icon: <IconCircleCheck color="white" />,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.green[7],
+      },
+    }),
+  });
+}

src/app_modules/component_global/notif_global/notifikasi_gagal.tsx

@@ -0,0 +1,31 @@
+import { Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+/**
+ * 
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function ComponentGlobal_NotifikasiGagal(text: string) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "red",
+    radius: "md",
+    autoClose: 1000,
+    icon: <IconAlertTriangle color="white" />,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.red[7],
+      },
+    }),
+  });
+}

src/app_modules/component_global/notif_global/notifikasi_peringatan.tsx

@@ -0,0 +1,31 @@
+import { ActionIcon, Avatar, Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+/**
+ * 
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function ComponentGlobal_NotifikasiPeringatan(text: string) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "yellow.3",
+    radius: "md",
+    autoClose: 1000,
+    icon: <ActionIcon radius={"xl"} bg={"white"} p={3}><IconAlertTriangle color="red" /></ActionIcon>,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.yellow[7],
+      },
+    }),
+  });
+}