Skip to content
This repository has been archived by the owner on Oct 29, 2024. It is now read-only.

Commit

Permalink
upload files
Browse files Browse the repository at this point in the history
  • Loading branch information
Thinh Nguyen D committed Sep 24, 2024
1 parent 58f15df commit 0696d66
Show file tree
Hide file tree
Showing 16 changed files with 346 additions and 284 deletions.
Binary file added public/images/art2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 34 additions & 14 deletions src/components/category/CategoryCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,43 @@ import "./categoryCard.css";

import { Link } from "react-router-dom";

import { Button } from "@mui/material";
import {
Box,
Card,
CardActionArea,
CardContent,
CardMedia,
Typography,
} from "@mui/material";

function CategoryCard() {
return (
<Link to={""} className="categoryCardWrapper">
<div
className="categoryCard"
width="105%"
height="335px"
style={{ backgroundImage: `url(images/art1.png)` }}
>
<Button className="btnCategoryCard">
<i></i>
</Button>
</div>
<h3 className="categoryCardTitle">CategoryCard1</h3>
</Link>
<Box width={"240px"}>
<Card>
<CardActionArea style={{ background: "#8E9AA3" }}>
<CardMedia
component="img"
image="/images/art1.png"
alt="green iguana"
/>
<CardContent>
<Typography
variant="h6"
component="div"
style={{
lineHeight: "24px",
textAlign: "center",
fontSize: "1.2rem",
fontWeight: 700,
color: "#FFFFFF",
}}
>
ART
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Box>
);
}

Expand Down
44 changes: 39 additions & 5 deletions src/components/category/CategoryList.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,47 @@
import React from "react";
import "./categoryList.css";
import { SwiperSlide, Swiper } from "swiper/react";
import CategoryCard from "./CategoryList";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

import CategoryCard from "./CategoryCard";
import { Typography } from "@mui/material";

function CategoryList() {
return (
<div className="movieList">
<Swiper grabCursor={true} spaceBetween={10} slidesPerView={"auto"}>
<SwiperSlide key={1}>
<div className="categoryList">
<Typography
variant="h3"
noWrap
sx={{
mr: 2,
mb: 2,
fontFamily: "sans-serif",
fontWeight: 700,
fontSize: "1.4rem",
color: "#3B3B3B",
textDecoration: "none",
}}
>
Category
</Typography>
<Swiper grabCursor={true} spaceBetween={24} slidesPerView={5.5}>
<SwiperSlide>
<CategoryCard />
</SwiperSlide>
<SwiperSlide>
<CategoryCard />
</SwiperSlide>
<SwiperSlide>
<CategoryCard />
</SwiperSlide>
<SwiperSlide>
<CategoryCard />
</SwiperSlide>
<SwiperSlide>
<CategoryCard />
</SwiperSlide>
<SwiperSlide>
<CategoryCard />
</SwiperSlide>
</Swiper>
Expand Down
32 changes: 0 additions & 32 deletions src/components/category/categoryCard.css
Original file line number Diff line number Diff line change
@@ -1,33 +1 @@
.categoryCardWrapper {
color: #fff;
text-decoration: none !important;
}
.categoryCard {
position: relative;
background-color: rgba(31, 31, 31, 0.7);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 160%;
border-radius: 20px;
margin-bottom: 1rem;
}

.categoryCard:hover {
box-shadow: rgba(225, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.categoryCardWrapper:hover {
filter: brightness(150%);
}

.categoryCard .btnCategoryCard {
position: absolute;
top: 50%;
left: 50%;
}

.categoryCardTitle {
font-size: 1.2rem;
}
3 changes: 3 additions & 0 deletions src/components/category/categoryList.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.categoryList {
padding: 16px 32px 16px 32px;
}
40 changes: 40 additions & 0 deletions src/components/collection/CollectionCard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from "react";
import "./collectionCard.css";

import {
Box,
Card,
CardActionArea,
CardContent,
CardMedia,
Typography,
} from "@mui/material";

function CollectionCard() {
return (
<Box>
<Card>
<CardActionArea>
<CardMedia
component="img"
width="240px"
image="/images/art2.png"
alt="green iguana"
style={{ borderRadius: "50%" }}
/>
<CardContent>
<Typography
variant="h6"
component="div"
style={{ height: "35px", textAlign: "center", fontWeight: 700 }}
>
ART
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Box>
);
}

export default CollectionCard;
52 changes: 52 additions & 0 deletions src/components/collection/CollectionList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from "react";
import "./collectionList.css";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

import CollectionCard from "./CollectionCard";

import { Typography } from "@mui/material";

function collectionList() {
return (
<div className="collectionList">
<Typography
variant="h3"
noWrap
sx={{
mr: 2,
mb: 2,
fontFamily: "sans-serif",
fontWeight: 700,
fontSize: "1.4rem",
color: "#3B3B3B",
textDecoration: "none",
}}
>
Collection
</Typography>
<Swiper grabCursor={true} spaceBetween={24} slidesPerView={5.5}>
<SwiperSlide>
<CollectionCard />
</SwiperSlide>
<SwiperSlide>
<CollectionCard />
</SwiperSlide>
<SwiperSlide>
<CollectionCard />
</SwiperSlide>
<SwiperSlide>
<CollectionCard />
</SwiperSlide>
<SwiperSlide>
<CollectionCard />
</SwiperSlide>
<SwiperSlide>
<CollectionCard />
</SwiperSlide>
</Swiper>
</div>
);
}

export default collectionList;
7 changes: 0 additions & 7 deletions src/components/collection/collectionCard.js

This file was deleted.

3 changes: 3 additions & 0 deletions src/components/collection/collectionList.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.collectionList {
padding: 16px 32px 16px 32px;
}
7 changes: 0 additions & 7 deletions src/components/collection/collectionList.js

This file was deleted.

6 changes: 3 additions & 3 deletions src/components/heroSlice/HeroSlice.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ function HeroSlice() {
className="btnDetail"
variant="contained"
sx={{
width: "324px",
padding: "32px 64px",
width: "70%",
padding: "1.2rem 2.4rem",
borderRadius: "8px",
backgroundColor: "#984144",
fontSize: "24px",
fontSize: "1.4rem",
color: "#FFFFFF",
}}
>
Expand Down
7 changes: 4 additions & 3 deletions src/components/heroSlice/heroSlice.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.slideItemImg {
cursor: default;
position: relative;
width: 100%;
width: 100vw;
/* height: 100vh; */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
Expand All @@ -11,8 +12,8 @@
cursor: default;
position: absolute;
top: 50%;
left: 80px;
max-width: 900px;
left: 100px;
width: 40%;
padding: 8px;
display: flex;
flex-direction: column;
Expand Down
2 changes: 1 addition & 1 deletion src/components/searchTable/SearchTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function SearchTable() {
};

return (
<Box component="div">
<Box component="div" style={{ padding: "16px 32px 16px 32px" }}>
<Accordion className="searchContainer">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
Expand Down
Loading

0 comments on commit 0696d66

Please sign in to comment.