blogbaster/pages/index.tsx

import React, { useState, useEffect} from 'react';
import {
  Container,
  Grid,
  Header,
  List,
  Segment,
  Label,
} from 'semantic-ui-react';
import { Item } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';
import AudioPlayer from 'react-h5-audio-player';

type Props = {
  id: number;
  audio: string;
  description: string;
  urlImg: string;
  title: string;
  children: Node;
}


const PodcastBlocks: React.FC<Props> = ({id, audio, description, urlImg, title}) => (
  <>
  <Item>
      <Item.Image size='medium' src={'img/'+urlImg} />
      <Item.Content>
        <Item.Header as='a'>{title}</Item.Header>
        <Item.Meta>
          <span className='cinema'></span>
        </Item.Meta>
        <Item.Description>
          {description}
        </Item.Description>
        <AudioPlayer
          src={"audio/"+audio}
          onPlay={e => console.log(id)}
          // other props here
        />
        <Item.Extra>
          <Label icon='globe' content='-' />
        </Item.Extra>
      </Item.Content>
    </Item>
  </>
)


export default function Home() {
  interface IUser {
    [x: string]: any;
    name: string;
  };
  const [data, setData] = useState<IUser>();
  const [isLoading, setLoading] = useState(false)


  useEffect(() => {
    setLoading(true)
    fetch('/api/podcasts/all')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
  }, [])

  if (isLoading) return <p>Загрузка...</p>
  if (!data) return <p>Нет интернета</p>

  const podcasts = data.map((obj: JSX.IntrinsicAttributes & Props, index: React.Key | null | undefined) => <PodcastBlocks key={index} {...obj}/> );

  return (
    <>
    <Segment style={{ padding: '8em 0em' }} vertical>
      <Grid container stackable verticalAlign='middle'>
        <Grid.Row>
          <Grid.Column width={8} textAlign='center'>
            <Header as='h3'  style={{ fontSize: '4em' }}>
              BlogBaster
            </Header>
            <Header as='h3' style={{ fontSize: '2em' }}>
            Увлечены. Качественно.
            За новое звучание.
            </Header>
            <p style={{ fontSize: '1.33em' }}>
            Если вы хотите стать нашим партнером или рекламодателем — пишите на podcast@blogbaster.xyz
            </p>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Segment>
    <Segment style={{ padding: '8em 0em' }} vertical>
      <Container textAlign='left'>
        <Item.Group>
          {podcasts}
        </Item.Group>
      </Container>
    </Segment>

    <Segment inverted vertical style={{ padding: '5em 0em' }}>
      <Container>
        <Grid divided inverted stackable>
          <Grid.Row>
            <Grid.Column width={3}>
              <Header inverted as='h4' content='Социальные сети' />
              <List link inverted>
                <List.Item as='a'>Вконтакте</List.Item>
                <List.Item as='a'>Telegram</List.Item>
              </List>
            </Grid.Column>
            <Grid.Column width={3}>
              <Header inverted as='h4' content='Платформы' />
              <List link inverted>
                <List.Item as='a'>Яндекс музыка</List.Item>
                <List.Item as='a'>Google подкасты</List.Item>
                <List.Item as='a'>Apple подкасты</List.Item>
              </List>
            </Grid.Column>
            <Grid.Column width={7}>
              <Header as='h4' inverted>
                О нас
              </Header>
              <p>
                BlogBaster 2022
              </p>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    </Segment>
  </>
  )
}