Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8945f11

Browse files
homepage design, author and category card has been done.
1 parent 7a5916d commit 8945f11

File tree

21 files changed

+497
-24
lines changed

21 files changed

+497
-24
lines changed
1.5 MB
Loading[フレーム]
2.63 MB
Loading[フレーム]
4.06 MB
Loading[フレーム]
1.95 MB
Loading[フレーム]

‎day-15/bs-store/src/App.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import UpdateCategory from "./adminpages/categories/UpdateCategory";
2121
import AddBook from "./adminpages/books/AddBook";
2222
import Login from "./pages/login/Login";
2323
import BookList from "./pages/book/BookList";
24+
import CategoryList from "./pages/category/CategoryList";
25+
import AuthorList from "./pages/author/AuthorList";
2426

2527

2628
function App() {
@@ -60,6 +62,8 @@ function App() {
6062
<Route path="/auth/login" element={<Login />} />
6163

6264
<Route path="/books" element={<BookList />} />
65+
<Route path="/categories" element={<CategoryList />} />
66+
<Route path="/authors" element={<AuthorList />} />
6367

6468
<Route path='/' element={<Home />} />
6569
</Routes>
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import Card from '@mui/material/Card';
3+
import CardContent from '@mui/material/CardContent';
4+
import CardMedia from '@mui/material/CardMedia';
5+
import Typography from '@mui/material/Typography';
6+
import { CardActionArea } from '@mui/material';
7+
8+
export default function AuthorCard({ author }) {
9+
10+
return (
11+
<Card sx={{ maxWidth: 200 }}>
12+
<CardActionArea>
13+
<CardMedia
14+
component="img"
15+
height="200"
16+
image={`/authors/${author.id % 120}.jpg`}
17+
alt="green iguana"
18+
/>
19+
<CardContent>
20+
<Typography gutterBottom variant="h5" component="div">
21+
{author.firstName} {author.lastName}
22+
</Typography>
23+
<Typography variant="body2" color="text.secondary">
24+
{author.email}
25+
</Typography>
26+
</CardContent>
27+
</CardActionArea>
28+
</Card>
29+
);
30+
}
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Grid from "@mui/material/Grid";
2+
import React, { useEffect } from "react";
3+
import { useDispatch, useSelector } from "react-redux";
4+
import { getAllAuthors } from "../../store/actions/authorActions";
5+
import AuthorCard from "./AuthorCard";
6+
7+
8+
export default function AuthorCardList() {
9+
const { authors } = useSelector((state) => state.author);
10+
const authorDispatch = useDispatch();
11+
12+
useEffect(() => {
13+
authorDispatch(getAllAuthors());
14+
}, []);
15+
16+
return (
17+
<div>
18+
<Grid sx={{ mt: 1, padding: 1 }} container spacing={1}>
19+
{authors?.map((author) => (
20+
<Grid spacing={1} item xs={5} md={3} lg={2}>
21+
<AuthorCard key={author.id} author={author}></AuthorCard>
22+
</Grid>
23+
))}
24+
</Grid>
25+
</div>
26+
);
27+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Typography } from "@mui/material";
2+
import { useTheme } from "@mui/material/styles";
3+
import { BannerContainer, BannerContent, BannerDescription, BannerImage, BannerTitle } from "./styles";
4+
5+
6+
export default function Banner() {
7+
// const theme = useTheme();
8+
9+
return(
10+
<BannerContainer>
11+
<BannerImage src="/banner/banner.jpg"></BannerImage>
12+
<BannerContent>
13+
<Typography variant='h6'>HUGE COLLECTION</Typography>
14+
<BannerTitle variant='h2'>NEW BOOKS</BannerTitle>
15+
16+
<BannerDescription variant='subtitle'>
17+
Lorem ipsum dolor sit amet. Eum enim atque a laudantium nobis non
18+
dolores porro et libero corporis ea quia numquam.
19+
</BannerDescription>
20+
</BannerContent>
21+
</BannerContainer>
22+
)
23+
}
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Typography } from "@mui/material";
2+
import { styled } from "@mui/material/styles";
3+
import { Box } from "@mui/system";
4+
5+
export const BannerContainer = styled(Box)(() => ({
6+
display: 'flex',
7+
justifyContent: 'center',
8+
width: '100%',
9+
height: '100%',
10+
padding: '0px 0px',
11+
backgroundColor: '#efebe9'
12+
13+
}));
14+
15+
export const BannerImage = styled('img')(({src}) => ({
16+
src: `url(${src})`,
17+
width: '500px'
18+
}))
19+
20+
export const BannerContent = styled(Box)(() => ({
21+
display: 'flex',
22+
flexDirection: 'column',
23+
justifyContent: 'center',
24+
maxwidth: 420,
25+
padding: '30px'
26+
}));
27+
28+
export const BannerTitle = styled(Typography)(() => ({
29+
lineHeight: 1.5,
30+
fontSize: '72px',
31+
marginBottom: '20px'
32+
}));
33+
34+
export const BannerDescription = styled(Typography)(() => ({
35+
lineHeight: 1.25,
36+
letterSpacing: 1.25,
37+
marginBottom: '3em'
38+
}))

‎day-15/bs-store/src/components/book/BookCard.js‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,7 @@ export default function BookCard({book}) {
3636
return (
3737
<Card sx={{ maxWidth: 345 }}>
3838
<CardHeader
39-
action={
40-
<IconButton aria-label="settings">
41-
<MoreVertIcon />
42-
</IconButton>
43-
}
39+
4440
title={book.title}
4541
subheader={book.publisher}
4642
sx={{minHeight: 80}}
@@ -49,25 +45,23 @@ export default function BookCard({book}) {
4945
component="img"
5046
height="194"
5147
image={`/books/${book.id%120}.jpg`}
52-
alt="Paella dish"
48+
alt="book image"
5349
sx={{ objectFit: "contain" }}
5450
/>
5551
<CardContent sx={{minHeight: 80}}>
5652
{book.bookAuthors.map((authors) => {
5753
return (
58-
<Typography variant="body2" color="text.secondary" align="center" justifySelf={"center"}>
59-
{authors.firstName} {authors.lastName}
60-
</Typography>
54+
<Typography align='center'>{authors.firstName} {authors.lastName}</Typography>
6155
);
6256
})}
57+
<Typography paragraph>{book.price} TL</Typography>
58+
6359
</CardContent>
6460
<CardActions disableSpacing>
6561
<IconButton aria-label="add to favorites">
6662
<FavoriteIcon />
6763
</IconButton>
68-
<IconButton aria-label="share">
69-
<ShareIcon />
70-
</IconButton>
64+
7165
<ExpandMore
7266
expand={expanded}
7367
onClick={handleExpandClick}
@@ -78,9 +72,9 @@ export default function BookCard({book}) {
7872
</ExpandMore>
7973
</CardActions>
8074
<Collapse in={expanded} timeout="auto" unmountOnExit>
81-
<CardContent>
82-
<Typography paragraph>{book.category.categoryName}</Typography>
83-
<Typography paragraph>{book.category.description}</Typography>
75+
<CardContent>
76+
<Typography paragraph>Category: {book.category.categoryName}</Typography>
77+
<Typography paragraph>Description: {book.category.description}</Typography>
8478
</CardContent>
8579
</Collapse>
8680
</Card>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /