[TIL/Coin Site Project] 2023/12/05

import React from "react";
import { Box } from "@mui/material";

import PageContainer from "../components/layout/common/PageContainer";
import ComponentWrapper from "../components/layout/common/ComponentWrapper";
import Table from "../components/home/Table";

const Home = () => {
  return (
    <>
      <PageContainer>
        <ComponentWrapper>
          <Box sx={{ height: "auto" }}>
            {/* Card Area */}
            <Box sx={{ display: "flex", columnGap: "60px", padding: "60px 0" }}>
              <Box
                sx={{
                  backgroundColor: "#0e1821",
                  width: "360px",
                  border: "none",
                  height: "200px",
                  borderRadius: "15px",
                  transition: "opacity 0.3s ease",
                  "&:hover": {
                    opacity: 0.8,
                  },
                }}
              >
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  'Trending' rendering
                </p>
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  스르륵 예정
                </p>
              </Box>
              <Box
                sx={{
                  backgroundColor: "#0e1821",
                  width: "360px",
                  border: "none",
                  height: "200px",
                  borderRadius: "15px",
                  transition: "opacity 0.3s ease",
                  "&:hover": {
                    opacity: 0.8,
                  },
                }}
              >
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  'News' rendering
                </p>
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  스르륵 예정
                </p>
              </Box>
              <Box
                sx={{
                  backgroundColor: "#0e1821",
                  width: "360px",
                  border: "none",
                  height: "200px",
                  borderRadius: "15px",
                  transition: "opacity 0.3s ease",
                  "&:hover": {
                    opacity: 0.8,
                  },
                }}
              >
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  'Fear & Greed Index' rendering
                </p>
                <p
                  style={{
                    textAlign: "center",
                    color: "white",
                    fontWeight: "bolder",
                  }}
                >
                  스르륵 예정
                </p>
              </Box>
            </Box>
            {/* Table Area */}
            <Table />
          </Box>
        </ComponentWrapper>
      </PageContainer>
    </>
  );
};

export default Home;

import Appbar from "../appbar/Appbar";
import Footer from "../footer/Footer";
import { Box } from "@mui/material";

const PageContainer = ({ children }) => {
  return (
    <>
      <Appbar />
      <Box
        sx={{
          minHeight: "100vh",
          minWidth: "100vw",
          flexGrow: 1,
          backgroundColor: "#232531",
        }}
      >
        {children}
      </Box>
      <Footer />
    </>
  );
};

export default PageContainer;

import React from "react";
import { Box } from "@mui/material";

const ComponentWrapper = ({ style, children }) => {
  return (
    <Box
      style={style}
      sx={{
        maxWidth: "1200px",
        margin: "0 auto",
        height: "auto",
        width: "100%",
      }}
    >
      {children}
    </Box>
  );
};

export default ComponentWrapper;