[mod] add EventParticipantCard (#298)

view/src/components/common/Card/EventParticipantCard.stories.tsx

@@ -1,20 +1,22 @@
 import type { ComponentStory, ComponentMeta } from '@storybook/react'
 import { EventParticipantCard } from '.'
+import { EventParticipantCardProps } from './EventParticipantCard.type'
 
 export default {
   title: 'EvnetParticipantCard',
   component: EventParticipantCard,
 } as ComponentMeta<typeof EventParticipantCard>
 
-const Template: ComponentStory<typeof EventParticipantCard> = (args) => <EventParticipantCard {...args} />
+const Template: ComponentStory<typeof EventParticipantCard> = (args: EventParticipantCardProps) => (
+  <EventParticipantCard {...args} />
+)
 
 export const Default: ComponentStory<typeof EventParticipantCard> = Template.bind({})
 
-// Default.args = {
-//   // label: 'Default',
-//   onClick: () => {
-//     alert('クリック')
-//   },
-// }
+Default.args = {
+  participantCount: 130,
+  participantParsent: 10,
+  participantType: 'all',
+}
 
 Default.storyName = 'Default'

view/src/components/common/Card/EventParticipantCard.tsx

@@ -1,33 +1,70 @@
 import * as React from 'react'
+import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
-import CardActions from '@mui/material/CardActions'
+import PeopleIcon from '@mui/icons-material/People'
+import PersonIcon from '@mui/icons-material/Person'
+import PersonAddIcon from '@mui/icons-material/PersonAdd'
 import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
-import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
+import { CardActionArea } from '@mui/material'
+import { EventParticipantCardProps } from './EventParticipantCard.type'
+import { useMemo } from 'react'
 
-interface CardProps {
-  children?: React.ReactNode
-  className?: string
-}
+const EventParticipantCard = (props: EventParticipantCardProps) => {
+  const { participantType, participantParsent, participantCount } = props
+
+  const participant = useMemo(() => {
+    switch (participantType) {
+      case 'all':
+        return '技大祭 全体'
+      case 'inside':
+        return '技大祭 内部'
+      case 'outside':
+        return '技大祭 外部'
+      default:
+        return ''
+    }
+  }, [participantType])
+
+  const participantIcon = useMemo(() => {
+    switch (participantType) {
+      case 'all':
+        return <PeopleIcon />
+      case 'inside':
+        return <PersonIcon />
+      case 'outside':
+        return <PersonAddIcon />
+      default:
+        return <PeopleIcon />
+    }
+  }, [participantType])
 
-const EventParticipantCard = (props: CardProps) => {
   return (
-    <Card sx={{ maxWidth: 345 }}>
-      <CardMedia sx={{ height: 140 }} image="/static/images/cards/contemplative-reptile.jpg" title="green iguana" />
-      <CardContent>
-        <Typography gutterBottom variant="h5" component="div">
-          Lizard
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents
-          except Antarctica
-        </Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="small">Share</Button>
-        <Button size="small">Learn More</Button>
-      </CardActions>
+    <Card sx={{ maxWidth: 300 }}>
+      <CardActionArea sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}>
+        <Box>
+          <CardContent>
+            <Typography variant="body2" color="text.secondary">
+              {participant}
+            </Typography>
+
+            <Typography variant="h5">{participantCount}人</Typography>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}
+            >
+              {participantParsent < 0 ? (
+                <Typography sx={{ color: 'red' }}>{participantParsent} % </Typography>
+              ) : (
+                <Typography sx={{ color: 'green' }}>{participantParsent} % </Typography>
+              )}
+              <Typography sx={{ display: 'flex', justifyContent: 'center' }}> Sinse last hour</Typography>
+            </Typography>
+          </CardContent>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>{participantIcon}</Box>
+      </CardActionArea>
     </Card>
   )
 }

view/src/components/common/Card/EventParticipantCard.type.ts

@@ -0,0 +1,5 @@
+export interface EventParticipantCardProps {
+  participantType: 'all'|'inside'|'outside'
+  participantCount: number
+  participantParsent: number
+}

view/src/components/common/Card/index.ts

@@ -1,2 +1 @@
-export { default as Card } from './Card'
 export { default as EventParticipantCard } from './EventParticipantCard'