搭建门面 | SooMooc 直播平台

import styled from '@emotion/styled'
import { Button, Layout, Menu, Row, Typography } from 'antd'
import ButtonGroup from 'antd/lib/button/button-group'
import logo from 'assets/logo.svg'
import { Search } from 'components/search'

export const Header = () => {
  return (
    <Layout.Header
      style={{
        background: 'white',
        boxSizing: 'border-box',
        boxShadow: '0 2px 8px #f0f1f2',
      }}
    >
      <Row style={{ height: '6.4rem', alignItems: 'center' }}>
        <a href={'/'} style={{ width: '20rem' }}>
          <Logo src={logo} alt="logo" />
          <Typography.Title
            level={3}
            style={{
              lineHeight: '6.4rem',
              marginBottom: 0,
              marginLeft: '6rem',
            }}
          >
            SooMooc
          </Typography.Title>
        </a>
        <Menu
          theme="light"
          mode="horizontal"
          defaultSelectedKeys={['1']}
          style={{ background: 'white', border: 'none', flex: 'auto' }}
        >
          <Menu.Item key="1">首页</Menu.Item>
          <Menu.Item key="2">课程</Menu.Item>
        </Menu>
        <Search />
        <ButtonGroup
          style={{
            alignItems: 'center',
          }}
        >
          <Button type="link">注册</Button>
          <Button type="link">登陆</Button>
        </ButtonGroup>
      </Row>
    </Layout.Header>
  )
}

const Logo = styled.img`
  height: 5rem;
  width: 5rem;
  float: left;
  margin: 0.7rem 0;
`

import { Input } from 'antd'

export const Search = () => {
  const handleSearch = () => {}
  return (
    <Input.Search
      placeholder={"搜索课程"}
      style={{ width: 300, paddingRight: '5rem' }}
      onSearch={handleSearch}
    />
  )
}

import { Layout } from 'antd'

export const Footer = () => {
  return (
    <Layout.Footer style={{ textAlign: 'center' }}>
      SooMooc ©2021 Created by EthanLoo
    </Layout.Footer>
  )
}

import styled from '@emotion/styled'
import { Row, Col } from 'antd'
import { Carousel } from 'screens/home/carousel'
import { SideMenu } from './side-menu'

export const Content = () => {
  return (
    <Container>
      <Banner>
        <Col span={6}>
          <SideMenu />
        </Col>
        <Col span={18}>
          <Carousel />
        </Col>
      </Banner>
    </Container>
  )
}

const Container = styled.div`
  padding: 3rem 10rem;
  margin: 0 auto;
  min-height: calc(100vh - 134px);
`

const Banner = styled(Row)`
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.9px 4px rgba(0, 0, 0, 0.044),
    0 4.6px 13.4px rgba(0, 0, 0, 0.066), 0 26px 60px rgba(0, 0, 0, 0.11);
`

import styled from '@emotion/styled'
import { Menu } from 'antd'
import { useEffect, useState } from 'react'
import { http } from 'utils/http'

interface MenuItemProp {
  id: number
  title: string
  subMenu?: MenuItemProp[]
}

export const SideMenu = () => {
  const { SubMenu } = Menu
  const [menuItems, setMenuItems] = useState<MenuItemProp[]>([])
  useEffect(() => {
    http('sideMenuList').then((MenuItems: MenuItemProp[]) => {
      setMenuItems(MenuItems)
    })
  }, [])

  const renderMenu = (items: MenuItemProp[]) => {
    return items.map((item) => {
      if (item.subMenu) {
        return (
          <SubMenu key={item.id} title={item.title} style={{ flex: 'auto' }}>
            {renderMenu(item.subMenu)}
          </SubMenu>
        )
      } else {
        return <Menu.Item key={item.id}>{item.title}</Menu.Item>
      }
    })
  }

  return <MenuContainer mode="vertical">{renderMenu(menuItems)}</MenuContainer>
}

const MenuContainer = styled(Menu)`
  display: flex;
  flex-direction: column;
  justify-items: space-around;
  height: 100%;
  padding: 1rem 0 0.5rem 1rem;
`

import styled from '@emotion/styled'
import { Image, Carousel as AntCarousel } from 'antd'
import { useEffect, useState } from 'react'
import { http } from 'utils/http'

interface CarouselImageProp {
  id: number
  title: string
  url: string
}

export const Carousel = () => {
  const [imageUrls, setImageUrls] = useState<CarouselImageProp[]>([])

  useEffect(() => {
    http('carousel').then((urls: CarouselImageProp[]) => {
      setImageUrls(urls)
    })
  }, [])

  return (
    <CarouselContainer autoplay>
      {console.log(imageUrls)}
      {imageUrls.map((image) => (
        <Image src={image.url} key={image.id} object-fit={'cover'} />
      ))}
    </CarouselContainer>
  )
}

const CarouselContainer = styled(AntCarousel)`
  text-align: center;
  height: 40rem;
  line-height: 40rem;
  overflow: hidden;
`

import './App.css'
import { ErrorBoundary } from 'components/error-boundary'
import { FullPageErrorFallback } from 'components/lib'
import { Header } from 'components/header'
import { Footer } from 'components/footer'
import { Content } from 'screens/home/content'

function App() {
  return (
    <div className="App">
      <ErrorBoundary fallbackRender={FullPageErrorFallback}>
        <Header />
        <Content />
        <Footer />
      </ErrorBoundary>
    </div>
  )
}

export default App