limpch

Без flex только на таблицах

<style>
body {background:#aaa; margin:0;
}
#d_all {background:white;width:90%;margin-left:auto; margin-right:auto;margin-top:3px;margin-bottom:3px;}
#d_left {width:195px;float:left;background:white;text-align:left}
#d_right {margin-left:195px;background:white; width: 100%; text-align: left}
</style>

<table id="d_all">
  <tr>
    <th id="d_left">
     1<br> 1<br> 1<br> 1<br> 1<br>
    </th>
    <th id="d_right">
       12<br>
    </th>
  </tr>
</table>

Больше нужно стилилизовать, но по другому никак не сделать)

Точно никто не расскажет как это делать, тут большой скрипт. Длинный блок со sticky контентом внутри. Отслеживает точки скролла и на этих точках запускает замену изображения и меняет контент. При нажатии на кнопки, происходит скролл до точки и по достижению срабатывает скрипт изменения контента и блока. Я бы сделал с помощью Intersection Observer отслеживание скролла до точек и обычную замену по индексу точки. Дошли до третьей, вызываем скрипт смены на третьей точке. Высоту главного блока задаем где-то 200-300vh, в зависимости сколько скролить нужно будет, и создаем три блока нужной высоты, при которых будет происходить смена)

Надеюсь ты что то поймешь, из того что я написал, если ты начинающий программист, то пока не лезь в это :)

Сложный вопрос, отвечу как понял))
У тебя где-то хранится состояние когда пользователь залогинен, а когда нет? Через что ты контролируешь это?

Если как ты указал выше, mobX, то в стейте создай еще одно поле по типу logoutConfirm и меняй еще состояние. При нажатии на выход, меняй состояние logoutConfirm на pending например, и выводи этот блок с подтверждением. При нажатии меняй logoutConfirm на false например, если нажали нет и ее нужно держать в скрытом состоянии, и на true, если согласились и делай выход.

Я думаю это можно сделать только с помощью mobX, redux или useContext

Ты пытаешься тип контент присвоить к типу iTextContent. В ITextContent у тебя только value, а ты пытаешься туда поместить type и value. Сделай так:

Поменяй тип у post.content с Content на ITextContent

export interface Content {
  type: "text" | "video" | "header" | "code" | "images" | "remark" | "materials";
}
export interface ITextContent extends Content {
  value: string;
}
export interface Post {
  title: string;
  content: ITextContent[]
}
// ...


const items:Post = {
  title: "foo bar",
  content: [
    {type: "text", value: "lorem 1"},
    {type: "video", url: "lorem 2"},
    {type: "text", value: "lorem 3"}
    // ...
  ]
};

const onlyTextType:ITextContent[] = items.content.filter(({type}) => type === "text");