blogbaster2.2/src/app/page.tsx

"use client";

import React, { useState, useEffect} from 'react';
import {
  Container,
  Grid,
  Header,
  List,
  Segment
} from 'semantic-ui-react';
import Link from 'next/link';
import Image from 'next/image'
import { Item } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';
import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

type Props = {
  id: number;
  audio: string;
  description: string;
  urlImg: string;
  link_plafthorm_ya: string;
  link_plafthorm_go: string;
  link_plafthorm_ap: string;
  link_plafthorm_yu: string;
  title_items: string;
  children: Node;
  datePub: string;
}


const Views = async (e : number) =>{
  console.log('id:',e)
    await fetch('/api/podcasts/views', {method: 'POST', body: e as any})
    .then((data) => {
      console.log(data)
  })
}


const PodcastBlocks: React.FC<Props> = ({id, audio, description, urlImg, title_items, datePub, link_plafthorm_ya, link_plafthorm_go, link_plafthorm_ap, link_plafthorm_yu}) => (
  <>
  <div className="m-3 card lg:card-side bg-base-100 shadow-xl">
    <div className="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row ">
      <div className="mb-3 object-cover rounded-t-lg md:w-auto md:min-w-64 md:max-w-64 md:rounded-s-lg md:m-3">
        <Image
          src={'/img/'+urlImg}
          alt={title_items}
          width="0"
          height="0"
          sizes="100vh"
          className="w-full"
        />
      </div>
      <div className="width_99 flex flex-col justify-between p-4 leading-normal flex-auto">
        <h2 className="card-title">{title_items}</h2>
        <p>{description}</p>
        <div className="card-actions justify-end">
          <AudioPlayer
            src={"audio/"+audio}
            onPlay={e => Views(id)}
          />
        </div>
        <p className="mt-3"> Дата публикации: {datePub} | Прослушали: {100} </p> 
        <div className="flex flex-row">
          <div className="basis-1/4">
            <a href={link_plafthorm_ya}>
              <Image
                src={'/img/badge_white.png'}
                alt={title_items}
                width="0"
                height="0"
                sizes="200vw"
                className="w-auto row-span-2"
              />
            </a>
          </div>
          <div className="basis-1/4">
            <a href={link_plafthorm_go}>
              <Image
                src={'/img/RU_Google_Podcasts_Badge_2x.png'}
                alt={title_items}
                width="0"
                height="0"
                sizes="200vw"
                className="w-auto row-span-2"
              />
            </a>
          </div>
          <div className="basis-1/4">
            <a href={link_plafthorm_ap}>
              <Image
                src={'/img/Apple_podcast.png'}
                alt={title_items}
                width="0"
                height="0"
                sizes="200vw"
                className="w-auto row-span-2"
              />
            </a>
          </div>
          <div className="basis-1/4">
            <a href={link_plafthorm_yu}>
              <Image
                src={'/img/youtube.png'}
                alt={title_items}
                width="0"
                height="0"
                sizes="200vw"
                className="w-auto row-span-2"
              />
            </a>
          </div>
        </div>
        
      </div>

    </div>
  </div>
  </>
)


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);
        console.log(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 textAlign='center'>
        <Grid.Row>
          <Grid.Column width={12} textAlign='center'>
            <span className='text-4xl'>Подкаст-студия</span>
            <Header as='h3'  style={{ fontSize: '4em' }}>
              <span className='text-orange-600'>Blog</span>
               Baster
            </Header>
            <Header as='h3' style={{ fontSize: '2em' }}>
            Увлечены. Качественно.
            За новое звучание.
            </Header>
            <p style={{ fontSize: '1.33em' }}>
              Если вы хотите стать нашим партнером или рекламодателем — пишите на podcast@blogbaster.xyz
            </p>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Segment>
    <Segment vertical>
      <Container>
        <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>
                <Link className='mb-3 block text-base font-medium font-bold mb-2' 
                      href='https://vk.com/blogbaster_xyz'>
                      Вконтакте
                </Link>
                <Link className='mb-3 block text-base font-medium font-bold mb-2' 
                      href='https://t.me/medishik'>
                      Telegram
                </Link>
              </List>
            </Grid.Column>
            <Grid.Column width={3}>
              <Header inverted as='h4' content='Платформы' />
              <List link inverted>
                <Link className='mb-3 block text-base font-medium font-bold mb-2' 
                      href='https://music.yandex.ru/search?text=нравится%20слушать'>
                      Яндекс музыка
                </Link>
                <Link className='mb-3 block text-base font-medium font-bold mb-2' 
                      href='https://podcasts.google.com/feed/aHR0cHM6Ly9ibG9nYmFzdGVyLnh5ei9hcGkvcG9kY2FzdHMvaG9iYml0cy9yc3M?sa=X&ved=2ahUKEwiu-_yViMKDAxUIefEDHSfWA_MQ9sEGegQIARAE'>
                      Google подкасты
                </Link>
                <Link className='mb-3 block text-base font-medium font-bold mb-2' 
                      href='https://www.apple.com/apple-podcasts/'>
                      Apple подкасты
                </Link>
              </List>
            </Grid.Column>
            <Grid.Column width={7}>
              <Header as='' inverted>
                <Link className='mb-3 block text-base font-medium font-bold mb-2' 
                      href='https://vk.com/blogbaster_xyz'>
                      О нас
                </Link>
              </Header>
              <p>
                BlogBaster 2024
              </p>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    </Segment>
  </>
  )
}