vebinar 26

src/App.css

-.App {
-    width: 1100px;
-    margin: 0 auto;
-}
\ No newline at end of file

src/App.tsx

-import { Header } from './components/Header/Header'
-import { Promo } from './components/Promo/Promo'
-import './App.css'
-import { Cards } from './components/Cards/Cards'
+import GuestList from './containers/GuestList'
 
 function App() {
-  return (
-    <div className='App'>
-      <Header/>
-      <Promo/>
-      <Cards/>
-    </div>
-  )
+  return <GuestList/>
 }
 
 export default App

src/components/Cards/Card/Card.css

-.card {
-    width: 100px;
-    height: 100%;
-    border-radius: 15px;
-    border: 2px solid brown;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 40px;
-}
\ No newline at end of file

src/components/Cards/Card/Card.tsx

-import { motion } from "motion/react"
-import './Card.css'
-
-type TProps = {
-    content: number
-}
-
-export const Card = ({content}: TProps) => {
-    return (
-        <motion.div className="card" animate={{ x: [0, 100, 0] }}>
-            {content}
-        </motion.div>
-    )
-}
\ No newline at end of file

src/components/Cards/Cards.css

-.cards {
-    width: 100%;
-    height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
\ No newline at end of file

src/components/Cards/Cards.tsx

-import { Card } from './Card/Card'
-import './Cards.css'
-
-export const Cards = () => {
-    const cards = [1, 2, 3, 4, 5]
-    
-    return (
-        <div className='cards'>
-            {
-                cards.map(item => {
-                    return <Card content={item}/>
-                })
-            }
-        </div>
-    )
-}
\ No newline at end of file

src/components/GuestCard/GuestCard.css

+.GuestCard {
+    height: 40px;
+    width: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(240, 225, 197);
+    border-radius: 10px;
+    margin: 5px;
+    color: wheat;
+    text-transform: capitalize;
+}
\ No newline at end of file

src/components/GuestCard/GuestCard.tsx

+import './GuestCard.css'
+
+type TProps = {
+    guestName: string
+}
+
+const GuestCard = ({guestName}: TProps) => {
+  return (
+    <div className='GuestCard'>
+        <h2>
+            {guestName}
+        </h2>
+    </div>
+  )
+}
+
+export default GuestCard
\ No newline at end of file

src/components/Header/Header.css

-.header {
-    height: 60px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
\ No newline at end of file

src/components/Header/Header.tsx

-import { Link } from './Link/Link'
-import './Header.css'
-
-export const Header = () => {
-    const links = ['home', 'contacts', 'team', 'products', 'about me']
-    
-    return (
-        <header className='header'>
-            {
-                links.map(item => {
-                    return <Link text={item}/>
-                })
-            }
-        </header>
-    )
-}
\ No newline at end of file

src/components/Header/Link/Link.css

-.Link {
-    text-decoration: none;
-    color: rgb(107, 97, 97);
-    font-size: 20px;
-    font-weight: 600;
-    text-shadow: 0px 0px 0px 12px black;
-    margin: 0;
-    text-transform: capitalize;
-}
\ No newline at end of file

src/components/Header/Link/Link.tsx

-import './Link.css'
-
-type TProps = {
-    text: string
-}
-
-export const Link = ({text}: TProps) => {
-    return (
-        <a href='#' className='Link'>
-            {text}
-        </a>
-    )
-}
\ No newline at end of file

src/components/List/List.css

+.List {
+    width: 40%;
+    height: 90%;
+    border: 1px solid wheat;
+    border-radius: 18px;
+    padding: 15px;
+    box-shadow: 0px 0px 6px 0px white;
+    overflow-y: scroll;
+}
+
+.List > h2 {
+    text-align: center;
+    color: wheat;
+    font-size: 28px;
+}
+
+.List > .items {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
\ No newline at end of file

src/components/List/List.tsx

+import GuestCard from '../GuestCard/GuestCard'
+import './List.css'
+
+type TProps = {
+    title: string
+    list: string[]
+}
+
+const List = ({title, list}: TProps) => {
+  return (
+    <div className='List'>
+        <h2>{title}</h2>
+        <div className='items'>
+            {
+                list.map((item, index) => (<GuestCard key={index} guestName={item}/>))
+            }
+        </div>
+    </div>
+  )
+}
+
+export default List
\ No newline at end of file

src/components/Promo/Promo.css

-.promo {
-    background-color: antiquewhite;
-    height: 350px;
-    margin-bottom: 50px;
-}
\ No newline at end of file

src/components/Promo/Promo.tsx

-import './Promo.css'
-
-export const Promo = () => {
-    return (
-        <div className='promo'>
-
-        </div>
-    )
-}
\ No newline at end of file

src/components/SendButton/SendButton.css

+.SendButton {
+    width: 200px;
+    height: 50px;
+    border-radius: 15px;
+    border: none;
+    cursor: pointer;
+    background-color: wheat;
+    color: rgb(119, 53, 53);
+    font-size: 20px;
+    transition: 1s;
+}
+
+.SendButton:hover {
+    height: 60px;
+    width: 215px;
+    font-size: 22px;
+    transition: 1s;
+}
\ No newline at end of file

src/components/SendButton/SendButton.tsx

+import './SendButton.css'
+
+type TProps = {
+  onClick: VoidFunction
+}
+
+const SendButton = ({onClick}: TProps) => {
+  return (
+    <button className='SendButton' onClick={onClick}>
+        Позвать гостей
+    </button>
+  )
+}
+
+export default SendButton
\ No newline at end of file

src/containers/GuestList.css

+.GuestList {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(119, 53, 53);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.Lists {
+    height: 80%;
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
\ No newline at end of file

src/containers/GuestList.tsx

+import { useState } from 'react'
+import SendButton from '../components/SendButton/SendButton'
+import List from '../components/List/List'
+import './GuestList.css'
+
+const GuestList = () => {
+  const [guestList] = useState<string[]>(['john', 'stark', 'tramp', 'newton', 'omar', 'alya', 'beka'])
+  const [resultList, setResultList] = useState<string[]>([])
+
+  const onClickHandler = () => {
+    const copyGuestList = guestList
+    const randomList = copyGuestList.filter(item => {
+      const random = Math.floor(Math.random() * 100)
+      if(random > 50) return item
+    })
+    
+    setResultList(randomList)
+  }
+
+  return (
+    <div className='GuestList'>
+      <div className='Lists'>
+        <List title='Список всех гостей' list={guestList} />
+        <List title='Список приглашенных гостей' list={resultList} />
+      </div>
+
+      <SendButton onClick={onClickHandler}/>
+    </div>
+  )
+}
+
+export default GuestList
\ No newline at end of file

src/index.css

+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
\ No newline at end of file

src/main.tsx

 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
+import './index.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>