learnhouse/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx

import React, { useState } from 'react'
import DynamicPageActivityImage from 'public/activities_types/dynamic-page-activity.png'
import VideoPageActivityImage from 'public//activities_types/video-page-activity.png'
import DocumentPdfPageActivityImage from 'public//activities_types/documentpdf-page-activity.png'
import { styled } from '@stitches/react'
import DynamicCanvaModal from './NewActivityModal/DynamicCanva'
import VideoModal from './NewActivityModal/Video'
import Image from 'next/image'
import DocumentPdfModal from './NewActivityModal/DocumentPdf'

function NewActivityModal({
  closeModal,
  submitActivity,
  submitFileActivity,
  submitExternalVideo,
  chapterId,
  course,
}: any) {
  const [selectedView, setSelectedView] = useState('home')

  return (
    <div>
      {selectedView === 'home' && (
        <ActivityChooserWrapper>
          <ActivityOption
            onClick={() => {
              setSelectedView('dynamic')
            }}
          >
            <ActivityTypeImage>
              <Image alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
            </ActivityTypeImage>
            <ActivityTypeTitle>Dynamic Page</ActivityTypeTitle>
          </ActivityOption>
          <ActivityOption
            onClick={() => {
              setSelectedView('video')
            }}
          >
            <ActivityTypeImage>
              <Image alt="Video Page" src={VideoPageActivityImage}></Image>
            </ActivityTypeImage>
            <ActivityTypeTitle>Video Page</ActivityTypeTitle>
          </ActivityOption>
          <ActivityOption
            onClick={() => {
              setSelectedView('documentpdf')
            }}
          >
            <ActivityTypeImage>
              <Image
                alt="Document PDF Page"
                src={DocumentPdfPageActivityImage}
              ></Image>
            </ActivityTypeImage>
            <ActivityTypeTitle>PDF Document Page</ActivityTypeTitle>
          </ActivityOption>
        </ActivityChooserWrapper>
      )}

      {selectedView === 'dynamic' && (
        <DynamicCanvaModal
          submitActivity={submitActivity}
          chapterId={chapterId}
          course={course}
        />
      )}

      {selectedView === 'video' && (
        <VideoModal
          submitFileActivity={submitFileActivity}
          submitExternalVideo={submitExternalVideo}
          chapterId={chapterId}
          course={course}
        />
      )}

      {selectedView === 'documentpdf' && (
        <DocumentPdfModal
          submitFileActivity={submitFileActivity}
          chapterId={chapterId}
          course={course}
        />
      )}
    </div>
  )
}

const ActivityChooserWrapper = styled('div', {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'start',
  marginTop: 10,
})

const ActivityOption = styled('div', {
  width: '180px',
  textAlign: 'center',
  borderRadius: 10,
  background: '#F6F6F6',
  border: '4px solid #F5F5F5',
  margin: 'auto',

  // hover
  '&:hover': {
    cursor: 'pointer',
    background: '#ededed',
    border: '4px solid #ededed',

    transition: 'background 0.2s ease-in-out, border 0.2s ease-in-out',
  },
})

const ActivityTypeImage = styled('div', {
  height: 80,
  borderRadius: 8,
  margin: 2,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'end',
  textAlign: 'center',
  background: '#ffffff',

  // hover
  '&:hover': {
    cursor: 'pointer',
  },
})

const ActivityTypeTitle = styled('div', {
  display: 'flex',
  fontSize: 12,
  height: '20px',
  fontWeight: 500,
  color: 'rgba(0, 0, 0, 0.38);',

  // center text vertically
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
})

export default NewActivityModal