Merge pull request #131 from Kyutech-C3/fix/#65-Toppage_card_layout

Fix/#65 toppage card layout
Kyutech-C3 · Jul 13, 2023 · 0c40c3c · 0c40c3c
2 parents 9185fe1 + f118bf1
commit 0c40c3c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 62 deletions.
diff --git a/src/components/Web/Artifact/Artifact.stories.tsx b/src/components/Web/Artifact/Artifact.stories.tsx
@@ -12,7 +12,7 @@ export default {
     argTypes: {},
 } as Meta<typeof Artifact>;
 
-const Template: StoryObj<typeof Artifact> = {
+export const Template: StoryObj<typeof Artifact> = {
     args: {
         id: "b949c1c7-9132-4315-8d3e-476e5066c3de",
         title: "日清のやつ",

diff --git a/src/components/Web/Artifact/Artifact.tsx b/src/components/Web/Artifact/Artifact.tsx
@@ -1,11 +1,18 @@
 import Date from "@/components/Common/Date/Date";
 import { getCategory } from "@/libs/getCategory";
 import { Work } from "@/types/common";
-import { Box, Button, Stack, Typography, useMediaQuery } from "@mui/material";
-import Image from "next/image";
+import {
+    Box,
+    Button,
+    Card,
+    CardContent,
+    CardMedia,
+    Stack,
+    Typography,
+    useMediaQuery,
+} from "@mui/material";
 import { WorkTags } from "../Tags/WorkTags";
 import { UserCard } from "../User/UserCard";
-
 export const Artifact = ({
     id,
     title,
@@ -20,70 +27,59 @@ export const Artifact = ({
     const category = getCategory(tags);
     const isSmall = useMediaQuery("(min-width:600px)");
     return (
-        <Button
-            sx={{
-                border: "2px solid",
-                height: isSmall ? "35vh" : "45vh",
-                width: isSmall ? "30vw" : "60vw",
-                borderRadius: "10px",
-            }}
-            variant="contained"
-            href={`/web/artifact/${category}/${id}`}
-            color={category}
-        >
-            <Stack direction={isSmall ? "row" : "column"} spacing={2}>
-                <Stack
-                    sx={{ width: isSmall ? "15vw" : "40vw" }}
-                    alignSelf={"center"}
+        <Button href={`/web/artifact/${category}/${id}`}>
+            <Card
+                sx={{
+                    display: isSmall ? "flex" : "",
+                    width: isSmall ? "400px" : "300px",
+                    height: isSmall ? "300px" : "400px",
+                    border: "2px solid",
+                    borderColor: `${category}.dark`,
+                }}
+            >
+                <CardMedia
+                    component="img"
+                    sx={{
+                        width: isSmall ? "200px" : "300px",
+                        height: isSmall ? "300px" : "200px",
+                    }}
+                    image={thumbnail.url}
+                    alt="Live from space album cover"
+                />
+                <CardContent
+                    sx={{
+                        width: isSmall ? "200px" : "300px",
+                        backgroundColor: `${category}.main`,
+                    }}
                 >
-                    <Box
-                        component="div"
-                        sx={{
-                            width: "100%",
-                            position: "relative",
-                            height: isSmall ? "15vh" : "15vh",
-                        }}
-                    >
-                        <Image
-                            src={thumbnail.url}
-                            layout="fill"
-                            objectFit="contain"
-                            alt={thumbnail.url}
-                        />
-                    </Box>
-                    {isSmall && <Box component="div" sx={{ p: 1, width: "200px", height: "100px", overflow: "auto" }}><WorkTags tags={tags} /></Box>}
-                </Stack>
-                <Stack spacing={1} sx={{ width: isSmall ? "10vw" : "30vw" }}>
-                    <Box component="div">
-                        <Typography variant="body2">タイトル</Typography>
-                        <Typography variant="body2" textAlign="end">
-                            {title.length > 10
-                                ? title.substring(0, 10) + "..."
-                                : title}
-                        </Typography>
-                    </Box>
-                    <Box component="div">
+                    <Stack spacing={2}>
                         <Typography
-                            variant="body2"
-                            sx={{ alignSelf: "center" }}
+                            sx={{
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                            }}
                         >
-                            製作者
+                            {title}
                         </Typography>
+                        <UserCard
+                            display_name={user.display_name}
+                            avatar_url={user.avatar_url}
+                            size="small"
+                        />
                         <Stack direction="row">
-                            <Box component="div" flexGrow={1} />
-                            <UserCard {...user} size="small" />
-                        </Stack>
-                    </Box>
-                    <Box component="div">
-                        <Typography variant="caption">投稿日</Typography>
-                        <Stack direction="row">
-                            <Box component="div" flexGrow={1} />
+                            <Typography>投稿日</Typography>:
                             <Date dateString={createdAt} size="s" />
                         </Stack>
-                    </Box>
-                    {!isSmall && <Box component="div" sx={{ p: 1, width: "100%", height: "100px", overflow: "auto" }}><WorkTags tags={tags} /></Box>}
-                </Stack>
-            </Stack>
-        </Button >
+                        <Box
+                            component="div"
+                            sx={{ overflow: "scroll", height: "200px" }}
+                        >
+                            <WorkTags tags={tags} />
+                        </Box>
+                    </Stack>
+                </CardContent>
+            </Card>
+        </Button>
     );
 };