feat: track card (#185)

Author: maito1201

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.19.3",
+    "@faker-js/faker": "7.6.0",
     "@storybook/addon-actions": "6.5.12",
     "@storybook/addon-essentials": "6.5.12",
     "@storybook/addon-interactions": "6.5.12",

src/components/molecules/PlenumCard/PlenumCard.stories.tsx

@@ -0,0 +1,19 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import { PlenumCard } from '.'
+import { Box } from '@mui/material'
+
+const meta: ComponentMeta<typeof PlenumCard> = {
+  component: PlenumCard
+}
+export default meta
+
+const Template: ComponentStory<typeof PlenumCard> = args => (
+  <Box width="300px">
+    <PlenumCard {...args} />
+  </Box>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  title: 'Break'
+}

src/components/molecules/PlenumCard/index.tsx

@@ -0,0 +1,22 @@
+import { Typography, Box } from '@mui/material'
+import { Colors } from 'src/styles/color'
+
+export interface PlenumCardProps {
+  title: string
+}
+
+export const PlenumCard = ({ title }: PlenumCardProps) => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: Colors.background.secondary_blue,
+        padding: '20px 16px',
+        borderRadius: '4px',
+        // TODO(@maito1201): タイムテーブルに組み込んだ時の適度な幅にする
+        width: '100vw'
+      }}
+    >
+      <Typography variant="body2">{title}</Typography>
+    </Box>
+  )
+}

src/components/molecules/TrackCard/TrackCard.stories.tsx

@@ -0,0 +1,36 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import { faker } from '@faker-js/faker'
+import { TrackCard } from '.'
+import { Box } from '@mui/material'
+import { Colors } from 'src/styles/color'
+
+const meta: ComponentMeta<typeof TrackCard> = {
+  component: TrackCard
+}
+export default meta
+
+const Template: ComponentStory<typeof TrackCard> = args => (
+  <Box width="300px">
+    <TrackCard {...args} />
+  </Box>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  id: 'A1-1',
+  title: faker.lorem.paragraph(),
+  minute: 20,
+  speaker: faker.name.fullName(),
+  speakerIcon: faker.image.avatar()
+}
+
+export const Green = Template.bind({})
+Green.args = {
+  id: 'A1-1',
+  title: faker.lorem.paragraph(),
+  minute: 20,
+  speaker: faker.name.fullName(),
+  speakerIcon: faker.image.avatar(),
+  color: Colors.background.secondary_green,
+  idColor: Colors.background.primary_green
+}

src/components/molecules/TrackCard/index.tsx

@@ -0,0 +1,63 @@
+import { Typography, Box } from '@mui/material'
+import { Colors } from 'src/styles/color'
+import Image, { StaticImageData } from 'next/image'
+
+export interface TrackCardProps {
+  id: string
+  title: string
+  minute: number
+  speaker: string
+  speakerIcon: string | StaticImageData
+  color?: string
+  idColor?: string
+}
+
+export const TrackCard = ({
+  id,
+  title,
+  minute,
+  speaker,
+  speakerIcon,
+  color = Colors.background.secondary_pink,
+  idColor = Colors.background.primary_pink
+}: TrackCardProps) => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: color,
+        padding: '16px',
+        borderRadius: '4px',
+        width: '100%'
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          backgroundColor: idColor,
+          borderRadius: '2px',
+          width: 'fit-content',
+          padding: '0 4px',
+          mb: '4px'
+        }}
+      >
+        <Typography variant="caption" color={Colors.text.white}>
+          {id}
+        </Typography>
+      </Box>
+      <Box mb="4px">
+        <Typography variant="body2">{title}</Typography>
+      </Box>
+      <Box display="flex" alignItems="center">
+        <Box width="20px" height="20px" borderRadius="50%" overflow="hidden" margin="0 4px 0 0">
+          <Image src={speakerIcon} width={20} height={20} objectFit="contain" alt={`${speaker}'s icon`} quality={100} />
+        </Box>
+        <Typography variant="caption" fontWeight="bold">
+          {speaker}
+        </Typography>
+        <Typography variant="caption" margin="0 0 0 auto">
+          ({minute}min)
+        </Typography>
+      </Box>
+    </Box>
+  )
+}

src/styles/color.ts

@@ -24,7 +24,13 @@ export const Colors = {
     secondary: '#F7F9FB',
     gopher_blue: '#00ADD8',
     gradation_blue: 'linear-gradient(180deg, #4E96E9 19.27%, rgba(77, 148, 230, 0) 88.54%)',
-    darken_1: 'rgba(0,0,0,0.125)'
+    darken_1: 'rgba(0,0,0,0.125)',
+    // NOTE(@maito1201): primary_blue is brand_color
+    primary_pink: '#EF5DA8',
+    primary_green: '#61B236',
+    secondary_pink: '#F8D9E8',
+    secondary_green: '#D9EBD4',
+    secondary_blue: '#D5E5F7'
   },
   border: {
     primary: {

yarn.lock

@@ -1465,6 +1465,11 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@faker-js/faker@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.6.0.tgz#9ea331766084288634a9247fcd8b84f16ff4ba07"
+  integrity sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"