Merge branch 'sem2-lab7-hw7'

labs/lab6/src/App.tsx

@@ -2,7 +2,7 @@ import NavBar from './components/Navbar'
 import Gallery from "./components/Gallery";
 import Content from "./components/Content";
 import CustomFooter from "./components/CustomFooter";
-
+import Task from "./Task"
 
 import './styles/App.css'
 
@@ -13,6 +13,7 @@ function App() {
       <Gallery/>
       <Content/>
       <CustomFooter/>
+      <Task/>
     </>
   )
 }

labs/lab6/src/Task.tsx

@@ -0,0 +1,38 @@
+import { useState,useEffect } from "react"
+import type {ReactElement} from "react"
+const lines = [
+    "Ночь, улица, фонарь, аптека,",
+    "Бессмыссленный и тусклый свет.",
+    "Живи ещё хоть четверть века - ",
+    "Всё будет так. Исхода нет.",
+    "Умрёшь -  начнёшь опять сначала",
+    "И повториться всё как встарь:",
+    "Ночь, ледяная рябь канала",
+    "Аптека, Улица, фонарь."
+];
+
+interface ComponentProps {
+    Inputinterval: number
+}
+
+
+const Task = ({Inputinterval}:ComponentProps): ReactElement =>{
+    const [interval, updateInterval] = useState<number>(Inputinterval);
+    const [lineIdx, updateLineIdx] = useState<number>(0);
+    const updateLine = ():void =>{
+        updateLineIdx((lineIdx+1)%lines.length);
+    }
+    useEffect(()=>{
+        const intervalId = setInterval(updateLine,Number(interval));
+        return ()=>{ clearInterval(intervalId)}
+    })
+    return(
+        <>
+        <input type="number" value={interval} onChange={(event)=>{updateInterval(Number(event.target.value))}}></input>
+        <div className="blackDiv">
+            <h2 className="bigWhite">{lines[lineIdx]}</h2>
+        </div>
+        </>
+    )
+}
+export default Task;

labs/lab6/src/components/BuildCard.tsx

@@ -24,8 +24,10 @@ interface ComponentProps {
 
 
 function BuildCard({ building,cardNum} : ComponentProps) {
+    const reverseModifier = cardNum % 2 == 0 ? "-reverse" : "";
+
     return (
-      <Card  style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{  display: 'flex' }} >
+      <Card sx={{  display: 'flex', flexDirection:{xs:"column", sm:"row"+reverseModifier} }} >
         <CardMedia
             component="img"
             alt={ building.title }