Bisonai · joeybisonai · May 15, 2023 · May 15, 2023
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vscode
@@ -0,0 +1 @@
+registry=https://registry.yarnpkg.com/
@@ -0,0 +1,7 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+yarn dev
@@ -0,0 +1,33 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+  swcMinify: true,
+  compiler: {
+    styledComponents: true,
+    removeConsole: process.env.NODE_ENV === "production",
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+  webpackDevMiddleware: (config) => {
+    config.watchOptions = {
+      poll: 1000,
+      aggregateTimeout: 300,
+    };
+    return config;
+  },
+  swcMinify: true,
+};
+// const withBundleAnalyzer = require("@next/bundle-analyzer")({
+//     enabled: process.env.ANALYZE === "true",
+// });
+
+// module.exports = withBundleAnalyzer(nextConfig);
+module.exports = nextConfig;
@@ -0,0 +1,36 @@
+{
+  "name": "admin",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@next/font": "^13.3.1",
+    "@types/node": "18.16.0",
+    "@types/react": "18.0.38",
+    "@types/react-dom": "18.0.11",
+    "@types/react-virtualized": "^9.21.21",
+    "@types/styled-components": "^5.1.26",
+    "axios": "^1.3.6",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
+    "next": "13.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-query": "^3.39.3",
+    "styled-components": "^6.0.0-rc.1",
+    "typescript": "5.0.4"
+  },
+  "resolutions": {
+    "styled-components": "^5"
+  }
+}
@@ -0,0 +1,5 @@
+import { cache } from "react";
+import { QueryClient } from "react-query";
+
+const getQueryClient = cache(() => new QueryClient());
+export default getQueryClient;
@@ -0,0 +1,13 @@
+export default function Head() {
+  return (
+    <>
+      <title>Orakl Network</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <meta
+        name="description"
+        content="The First Full-Featured Oracle In Klaytn Blockchain"
+      />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  );
+}
@@ -0,0 +1,29 @@
+"use client";
+
+import { ThemeProvider } from "@mui/material";
+import "../theme/globals.css";
+import { Inter } from "next/font/google";
+import { theme } from "@/theme/theme";
+import QueryClientProviders from "./provider";
+import RootStyleRegistry from "@/lib/RootStyleRegistry";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head></head>
+      <RootStyleRegistry>
+        <QueryClientProviders>
+          <ThemeProvider theme={theme}>
+            <body className={inter.className}>{children}</body>
+          </ThemeProvider>
+        </QueryClientProviders>
+      </RootStyleRegistry>
+    </html>
+  );
+}
@@ -0,0 +1,13 @@
+"use client";
+
+import Header from "@/components/Common/Header";
+import HomeTemplate from "@/components/Template/Home";
+
+export default function Home() {
+  return (
+    <>
+      <Header />
+      <HomeTemplate />
+    </>
+  );
+}
@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+export default function QueryClientProviders({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [queryClient] = React.useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from "@mui/material/AccordionSummary";
+import { Accordion } from "@mui/material";
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor: "rgba(60, 67, 74, 1)",
+  color: "white",
+  "&:hover": {
+    backgroundColor: "#fef1cc",
+    color: "black",
+  },
+
+  flexDirection: "row-reverse",
+  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+    transform: "rotate(90deg)",
+  },
+  "& .MuiAccordionSummary-content": {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+export default AccordionSummary;
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";
+
+const AccordionWrap = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  color: "#fef1cc",
+  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: "rgba(60, 67, 74, 1)",
+  "&:not(:last-child)": {
+    borderBottom: 0,
+  },
+  "&:before": {
+    display: "none",
+  },
+}));
+
+export default AccordionWrap;
@@ -0,0 +1,61 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import Typography from "@mui/material/Typography";
+import { AccordionContainer, AccordionDetails } from "./styled";
+import AccordionWrap from "./AccordionWrap";
+import AccordionSummary from "./AccordionSummary";
+import BasicButton from "../BasicButton";
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>("panel1");
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+
+  return (
+    <AccordionContainer>
+      <AccordionWrap
+        expanded={expanded === "panel1"}
+        onChange={handleChange("panel1")}
+      >
+        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
+          <Typography>First data</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <BasicButton text={"adfa"} />
+          <BasicButton text={"adfa"} />
+          <BasicButton text={"adfa"} />
+        </AccordionDetails>
+      </AccordionWrap>
+      <AccordionWrap
+        expanded={expanded === "panel2"}
+        onChange={handleChange("panel2")}
+      >
+        <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
+          <Typography>Second data</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <BasicButton text={"adfa"} />
+          <BasicButton text={"adfa"} />
+          <BasicButton text={"adfa"} />
+        </AccordionDetails>
+      </AccordionWrap>
+      <AccordionWrap
+        expanded={expanded === "panel3"}
+        onChange={handleChange("panel3")}
+      >
+        <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
+          <Typography>Third data</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <BasicButton text={"adfa"} />
+          <BasicButton text={"adfa"} />
+          <BasicButton text={"adfa"} />
+        </AccordionDetails>
+      </AccordionWrap>
+    </AccordionContainer>
+  );
+}
@@ -0,0 +1,14 @@
+import { styled } from "@mui/material/styles";
+import { theme } from "@/theme/theme";
+
+export const AccordionContainer = styled("div")({
+  width: "20%",
+  height: "100%",
+  marginTop: "100px",
+  background: theme.palette.primary.main,
+});
+export const AccordionDetails = styled("div")(({ theme }) => ({
+  borderTop: "1px solid rgba(0, 0, 0, .125)",
+  display: "flex",
+  flexDirection: "column",
+}));
@@ -0,0 +1,33 @@
+import * as React from "react";
+import Button, { ButtonProps } from "@mui/material/Button";
+
+interface BasicButtonProps extends ButtonProps {
+  text: string;
+  disabled?: boolean;
+  justifyContent?: string;
+  width?: string;
+}
+
+export default function BasicButton({
+  text,
+  onClick,
+  color = "primary",
+  variant = "contained",
+  disabled = false,
+  justifyContent = "flex-start",
+  width = "100%",
+  ...rest
+}: BasicButtonProps) {
+  return (
+    <Button
+      onClick={onClick}
+      variant={variant}
+      color={color}
+      style={{ width, justifyContent }}
+      disabled={disabled}
+      {...rest}
+    >
+      {text}
+    </Button>
+  );
+}
@@ -0,0 +1,5 @@
+import { styled } from "styled-components";
+
+export const ButtonContainer = styled.div<{ textAlign?: string }>`
+  text-align: ${({ textAlign }) => textAlign};
+`;
@@ -0,0 +1,5 @@
+import { HeaderContainer } from "./styled";
+
+export default function Header(): JSX.Element {
+  return <HeaderContainer>Orakl Admin</HeaderContainer>;
+}