add lesson-52

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "motion": "^11.11.17",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "sass": "^1.81.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

src/App.tsx

-import GuestList from './containers/GuestList'
-
-function App() {
-  return <GuestList/>
-}
-
-export default App

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/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.scss

+.List {
+    height: 80%;
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    border: 1px solid wheat;
+    border-radius: 15px;
+
+    & h2 {
+        color: wheat;
+        font-size: 20px;
+    }
+
+    & div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        width: 90%;
+        height: 70%;
+        overflow-y: scroll;
+        
+        & p {
+            color: whitesmoke;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 25px;
+            width: 100%;
+            border-radius: 10px;
+            border: 1px solid wheat;
+        }
+    }
+}
\ No newline at end of file

src/components/List/List.tsx

-import GuestCard from '../GuestCard/GuestCard'
-import './List.css'
+import './List.scss'
 
 type TProps = {
-    title: string
     list: string[]
+    title: string
 }
 
-const List = ({title, list}: TProps) => {
+const List = ({list, title}: TProps) => {
   return (
     <div className='List'>
         <h2>{title}</h2>
-        <div className='items'>
+
+        <div>
             {
-                list.map((item, index) => (<GuestCard key={index} guestName={item}/>))
+                list.map(item => (
+                    <p key={item}>
+                        {item}
+                    </p>
+                ))
             }
         </div>
     </div>

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 → src/containers/App.scss

-.GuestList {
-    width: 100vw;
+.App {
+    background-color: rgb(168, 75, 75);
     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%;
+    width: 100vw;
     display: flex;
     justify-content: space-evenly;
     align-items: center;

src/containers/App.tsx

+import {useState} from "react"
+import List from "../components/List/List"
+import './App.scss'
+
+function App() {
+  const [guestList, setGuestList] = useState<string[]>(['John', 'Alibek', 'Tramp', 'Jose', 'Aida'])
+  const [inComeList, setIncomeList] = useState<string[]>([])
+
+  return (
+    <div className="App">
+      <List 
+        title="Список основных гостей"
+        list={guestList}
+      />
+      <List 
+        title="Список приглашенных гостей"
+        list={inComeList}  
+      />
+    </div>
+  )
+}
+
+export default App

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/main.tsx

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