[add] EventCard (#297)

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

@@ -0,0 +1,65 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react'
+import { EventCard } from '.'
+import { EventCardProps } from './EventCard.type'
+//icons
+import HomeIcon from '@mui/icons-material/Home'
+import SettingsIcon from '@mui/icons-material/Settings'
+import PersonAddIcon from '@mui/icons-material/PersonAdd'
+import EventIcon from '@mui/icons-material/Event'
+import ListAltIcon from '@mui/icons-material/ListAlt'
+
+export default {
+  title: 'EvnetCard',
+  component: EventCard,
+} as ComponentMeta<typeof EventCard>
+
+const Template: ComponentStory<typeof EventCard> = (args: EventCardProps) => <EventCard {...args} />
+
+export const Default: ComponentStory<typeof EventCard> = Template.bind({})
+
+Default.args = {
+  eventList: [
+    {
+      name: 'home',
+      displayName: 'ホーム',
+      icon: <HomeIcon />,
+      url: '/',
+      openingTime: new Date(2022, 5 - 1, 5, 6, 35, 20, 333),
+      closingTime: new Date(2024, 5 - 1, 5, 6, 35, 20, 333),
+    },
+    {
+      name: 'eventList',
+      displayName: 'イベント一覧',
+      icon: <EventIcon />,
+      url: '/',
+      openingTime: new Date(2024, 5 - 1, 5, 6, 35, 20, 333),
+      closingTime: new Date(2025, 5 - 1, 5, 6, 35, 20, 333),
+    },
+    {
+      name: 'participantList',
+      displayName: '参加者一覧',
+      icon: <ListAltIcon />,
+      url: '/',
+      openingTime: new Date(2022, 5 - 1, 5, 6, 35, 20, 333),
+      closingTime: new Date(2023, 5 - 1, 5, 6, 35, 20, 333),
+    },
+    {
+      name: 'participantEventRegistration',
+      displayName: '参加者・イベント登録',
+      icon: <PersonAddIcon />,
+      url: '/',
+      openingTime: new Date(2022, 5 - 1, 5, 6, 35, 20, 333),
+      closingTime: new Date(2024, 5 - 1, 5, 6, 35, 20, 333),
+    },
+    {
+      name: 'setting',
+      displayName: '設定',
+      icon: <SettingsIcon />,
+      url: '/',
+      openingTime: new Date(),
+      closingTime: new Date(),
+    },
+  ],
+}
+
+Default.storyName = 'デフォルト'

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

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import Card from '@mui/material/Card'
+import { EventCardProps } from './EventCard.type'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+
+const EventCard = (props: EventCardProps) => {
+  const { eventList } = props
+  const nowTime = new Date()
+  const holdingEventList = eventList.filter((event) => event.openingTime <= nowTime && event.closingTime >= nowTime)
+  const scheduledEventList = eventList.filter((event) => event.openingTime > nowTime)
+  const endEventList = eventList.filter((event) => event.closingTime < nowTime)
+
+  return (
+    <Card sx={{ maxWidth: 275 }}>
+      <Typography fontWeight='bold' color='text.secondary' sx={{ mx: 5, my: 2 }}>
+        イベント
+      </Typography>
+      <Divider textAlign="left">
+        <Typography variant="inherit" color="text.secondary" sx={{ justifyContent: 'space-around' }}>
+          開催中
+        </Typography>
+      </Divider>
+      <List>
+        {holdingEventList.map((event) => (
+          <ListItem key={event.name} disablePadding>
+            <ListItemButton href={event.url}>
+              {event.icon ? <ListItemIcon>{event.icon}</ListItemIcon> : null}
+              <ListItemText primary={event.displayName} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider textAlign="left">
+        <Typography variant="inherit" color="text.secondary" sx={{ justifyContent: 'space-around' }}>
+          開催予定
+        </Typography>
+      </Divider>
+      <List>
+        {scheduledEventList.map((event) => (
+          <ListItem key={event.name} disablePadding>
+            <ListItemButton href={event.url}>
+              {event.icon ? <ListItemIcon>{event.icon}</ListItemIcon> : null}
+              <ListItemText primary={event.displayName} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider textAlign="left">
+        <Typography variant="inherit" color="text.secondary" sx={{ justifyContent: 'space-around' }}>
+          開催終了
+        </Typography>
+      </Divider>
+      <List>
+        {endEventList.map((event) => (
+          <ListItem key={event.name} disablePadding>
+            <ListItemButton href={event.url}>
+              {event.icon ? <ListItemIcon>{event.icon}</ListItemIcon> : null}
+              <ListItemText primary={event.displayName} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Card>
+  )
+}
+
+export default EventCard

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

@@ -0,0 +1,10 @@
+export interface EventCardProps {
+  eventList: {
+    name: string
+    displayName: string
+    icon?: React.ReactNode
+    url: string
+    openingTime: Date
+    closingTime: Date
+  }[]
+}

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

@@ -19,4 +19,4 @@ Default.args = {
   participantType: 'all',
 }
 
-Default.storyName = 'Default'
+Default.storyName = 'デフォルト'

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

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