Merge branch 'main' of https://github.com/WebmasterCamp/ywc19-hackath…

…on-i into main
WebmasterCamp · Jul 16, 2023 · 334eb00 · 334eb00
2 parents c6b60cd + 2a3303c
commit 334eb00
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 18 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Metadata } from "next";
 import { Layout } from "$components/Layout";
 import { AppProvider } from "@/core/contexts/appProvider";
 
+
 export const metadata: Metadata = {
     title: "ShareKan",
     description: "ShareKan",
@@ -12,6 +13,7 @@ interface RootLayoutProps {
     children: React.ReactNode;
 }
 
+
 export default function RootLayout({ children }: RootLayoutProps) {
     return (
         <html lang="en">
@@ -21,6 +23,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
                     overflowX: "hidden",
                 }}
             >
+
                 <AppProvider>
                     <Layout>{children}</Layout>
                 </AppProvider>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,20 @@
 import { NextPage } from 'next';
 import { HomePage } from '../components/Home';
+import { ThemeProvider } from '@mui/material';
+import { theme } from '@/core/contexts/theme';
+import { IBM_Plex_Sans_Thai } from 'next/font/google';
+
+const iBMPlexSansThai = IBM_Plex_Sans_Thai({
+    weight: "400",
+    subsets:['thai'],
+});
 
 const IndexPage: NextPage = () => {
     return (
         <>
-            <HomePage />
+            <ThemeProvider theme={theme}>
+                <HomePage />
+            </ThemeProvider>
         </>
     );
 };

diff --git a/src/components/Category/AllCategory.tsx b/src/components/Category/AllCategory.tsx
@@ -1,19 +1,35 @@
 import { FC } from "react";
-import { Box, Container } from "../mui";
+import { Box, Container, Typography } from "../mui";
 import { Grid } from "@mui/material";
-// import { spacing } from '@mui/system';
 
 const Circle: FC = () => (
     <Box
+        width={50}
+        height={50}
         sx={{
             width: "60px",
             height: "60px",
             borderRadius: "50%",
             background: "#D9D9D9",
+            borderRadius: "50%",
+            background: "#D9D9D9",
         }}
     ></Box>
 );
 
+const CategoryIcon: FC = ({ name }) => (
+    <Box
+        sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+        }}
+    >
+        <Circle />
+        <Typography sx={{ fontSize: 12 }}>{name ?? "Category"}</Typography>
+    </Box>
+);
+
 export const AllCategory = () => {
     return (
         <Container
@@ -22,24 +38,36 @@ export const AllCategory = () => {
                 mt: 4,
             }}
         >
-            <Grid container rowSpacing={1} gap={4}>
-                <Circle />
-                <Circle />
-                <Circle />
-                <Circle />
+            <Grid
+                container
+                rowSpacing={1}
+                sx={{
+                    justifyContent: "center",
+                }}
+                gap={{ sm: 1.5, md: 5, lg: 7 }}
+            >
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
             </Grid>
             <Grid
                 container
                 rowSpacing={1}
-                gap={4}
+                gap={{ sm: 1.5, md: 5, lg: 7 }}
                 sx={{
                     mt: 2,
+                    justifyContent: "center",
                 }}
             >
-                <Circle />
-                <Circle />
-                <Circle />
-                <Circle />
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
+                <CategoryIcon />
             </Grid>
         </Container>
     );

diff --git a/src/components/Home/HotDeal.tsx b/src/components/Home/HotDeal.tsx
@@ -1,19 +1,54 @@
+<<<<<<< HEAD
+'use client';
+import { FC } from 'react';
+import { Box, Button, Container } from '../mui';
+import { LinearProgress, Typography } from '@mui/material';
+
+function LinearProgressWithLabel(props: {} & { value: number }) {
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ width: '100%', mr: 1, mb: 2 }}>
+                <LinearProgress
+                    variant="determinate"
+                    {...props}
+                    sx={{
+                        height: 10,
+                    }}
+                />
+            </Box>
+        </Box>
+    );
+}
+
+=======
 "use client";
 import { FC } from "react";
 import { Box, Button, Container } from "../mui";
+>>>>>>> a9677f3995be44d3d3897c32a9f8578432a8eb2d
 
 export const HotDeal: FC = () => {
     return (
         <Container
             maxWidth="md"
             sx={{
+<<<<<<< HEAD
+                background: '#D9D9D9',
+                width: { xs: '90%', md: '50%' },
+                height: { xs: 250, md: 300 },
+                boxSizeing: 'border-box',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 1,
+=======
                 background: "#D9D9D9",
                 width: { xs: "90%" },
                 height: { xs: "200px", md: "300px" },
                 boxSizeing: "border-box",
                 display: "flex",
                 alignItems: "center",
                 gap: "1.75em",
+>>>>>>> a9677f3995be44d3d3897c32a9f8578432a8eb2d
             }}
         >
             <Box
@@ -25,13 +60,28 @@ export const HotDeal: FC = () => {
             ></Box>
             <Box
                 sx={{
-                    display: "flex",
-                    flexDirection: "column",
+                    display: 'flex',
+                    flexDirection: 'column',
                 }}
             >
-                <h3 id="hot-deal-text">Hot Deal!</h3>
-                <p>อีกกี่ ... คน คุณจะได้ในราคา</p>
-                <Button variant="contained">สั่งเลย</Button>
+                <Typography id="hot-deal-text" fontSize={20} fontWeight={600}>Hot Deal!</Typography>
+                <Typography>อีกกี่ ... คน คุณจะได้ในราคา</Typography>
+                <LinearProgressWithLabel value={60} />
+                <Box
+                    sx={{
+                        display: 'flex',
+                        gap: 1,
+                    }}
+                >
+                    <Button variant="outlined" fontSize={{sm: 10,lg: 16}} sx={{
+                        background:"white",
+                        borderRadius:3,
+                    }}>ดูรายละเอียด</Button>
+                    <Button variant="contained" fontSize={{sm: 10,lg: 16}} sx={{
+                        color:"white",
+                        borderRadius:3,
+                    }}>สั่งเลย</Button>
+                </Box>
             </Box>
         </Container>
     );

diff --git a/src/core/contexts/theme.ts b/src/core/contexts/theme.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { createTheme } from "@mui/material";
+import { IBM_Plex_Sans_Thai, Roboto } from 'next/font/google';
+
+const iBMPlexSansThai:{} = IBM_Plex_Sans_Thai({
+    weight:['400','500','600'],
+    subsets:["thai"]
+})
+
+const roboto = Roboto({
+    weight:'400',
+    preload: false,
+})
+
+
+export const theme = createTheme({
+    palette: {
+        primary: {
+            main: '#FF7009',
+          },
+        secondary: {
+            main: '#f50057',
+        },
+    },
+    typography: {
+        fontFamily: iBMPlexSansThai.style.fontFamily
+    }
+})