add styling
This commit is contained in:
tylen
26
frontend/src/components/CenteredConatiner.css
Normal file
26
frontend/src/components/CenteredConatiner.css
Normal file
@@ -0,0 +1,26 @@
|
||||
.centered-container {
|
||||
display: flex; /* Use Flexbox for centering */
|
||||
justify-content: center; /* Center horizontally */
|
||||
align-items: center; /* Center vertically */
|
||||
/* height: 100vh; Full height of the viewport */
|
||||
width: 100%; /* Full width of the viewport */
|
||||
overflow-x: auto; /* Enables horizontal scrolling if necessary */
|
||||
margin: 20px 0; /* Spacing above and below the container */
|
||||
background-color: rgba(0, 42, 255, 0.6);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.inner-container {
|
||||
width: 80%; /* Set inner container width to 80% */
|
||||
max-width: 1000px; /* Optional: limit maximum width */
|
||||
box-sizing: border-box; /* Include padding/borders in width calculation */
|
||||
padding: 20px; /* Padding for inner content */
|
||||
text-align: center; /* Center text inside the inner container */
|
||||
}
|
||||
|
||||
/* Media query for responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.inner-container {
|
||||
width: 100%; /* Set inner container width to 100% on mobile */
|
||||
}
|
||||
}
|
||||
18
frontend/src/components/ChildrenContainer.tsx
Normal file
18
frontend/src/components/ChildrenContainer.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import './CenteredConatiner.css'
|
||||
|
||||
interface CenteredContainerProps {
|
||||
children: React.ReactNode; // Define children prop type
|
||||
}
|
||||
|
||||
const CenteredContainer: React.FC<CenteredContainerProps> = ({ children }) => {
|
||||
return (
|
||||
<div className="centered-container">
|
||||
<div className="inner-container">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CenteredContainer;
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useCookies } from "react-cookie";
|
||||
import CenteredContainer from "./ChildrenContainer";
|
||||
|
||||
function Greeting() {
|
||||
const [cookie] = useCookies<string>(['userName'])
|
||||
@@ -6,16 +7,18 @@ function Greeting() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Приглашение на Новый год 2025-2026 🎄</h1>
|
||||
<p className="mainText">
|
||||
<h3>
|
||||
{userName ? <>{userName}</> : <>Дорогая пятка!</>}
|
||||
! 🦶
|
||||
</h3>
|
||||
Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
|
||||
<CenteredContainer>
|
||||
<h1>Приглашение на Новый год 2025-2026 🎄</h1>
|
||||
<p className="mainText">
|
||||
<h3>
|
||||
{userName ? <>{userName}</> : <>Дорогая пятка!</>}
|
||||
! 🦶
|
||||
</h3>
|
||||
Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
|
||||
|
||||
Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
|
||||
</p>
|
||||
Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
|
||||
</p>
|
||||
</CenteredContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import useFetchHosting from "../utils/fetchHosting";
|
||||
import { useNotification } from "../NotificationContext";
|
||||
import { useCookies } from "react-cookie";
|
||||
import CenteredContainer from "./ChildrenContainer";
|
||||
|
||||
|
||||
interface ReserveButtonProps {
|
||||
@@ -28,7 +29,7 @@ const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
|
||||
return (
|
||||
<>
|
||||
<button onClick={handleReserve} disabled={isReserved}>
|
||||
{isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
|
||||
{isReserved ? `${reservedBy}` : 'Занять'}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
@@ -39,19 +40,20 @@ function Hosting() {
|
||||
const { data, error, loading, update } = useFetchHosting();
|
||||
return (
|
||||
<>
|
||||
<h2>Поселение</h2>
|
||||
<p>
|
||||
Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
|
||||
вы не хотите тесниться, то рядом с нами есть
|
||||
<a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
|
||||
<a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
|
||||
(Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
|
||||
Спальные места:
|
||||
</p>
|
||||
<CenteredContainer>
|
||||
<h2>Поселение</h2>
|
||||
<p>
|
||||
Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
|
||||
вы не хотите тесниться, то рядом с нами есть
|
||||
<a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
|
||||
<a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
|
||||
(Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
|
||||
Спальные места:
|
||||
</p>
|
||||
{loading && <div>Loading...</div>}
|
||||
{error && <div>Error</div>}
|
||||
{data && (
|
||||
<div>
|
||||
<div className="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -72,6 +74,7 @@ function Hosting() {
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CenteredContainer>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,88 +1,100 @@
|
||||
import CenteredContainer from "./ChildrenContainer";
|
||||
|
||||
const Program = () => {
|
||||
return (
|
||||
<div>
|
||||
<CenteredContainer>
|
||||
<h2>Программа</h2>
|
||||
|
||||
<h3>30 декабря</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>15-18</td>
|
||||
<td>Гости приезжают и селятся</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18-19</td>
|
||||
<td>Ужин</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19-N/A</td>
|
||||
<td>Отдых и заготовки к кануну Нового Года</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>15-18</td>
|
||||
<td>Гости приезжают и селятся</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18-19</td>
|
||||
<td>Ужин</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19-N/A</td>
|
||||
<td>Отдых и заготовки к кануну Нового Года</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>31 декабря</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>07-10</td>
|
||||
<td>Утро, завтрак</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11-14</td>
|
||||
<td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14-19</td>
|
||||
<td>Готовим ужин, чиллим</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19-23:59</td>
|
||||
<td>Ужин, отдых, разговоры, игры</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="table-wrapper">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>07-10</td>
|
||||
<td>Утро, завтрак</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11-14</td>
|
||||
<td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14-19</td>
|
||||
<td>Готовим ужин, чиллим</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19-23:59</td>
|
||||
<td>Ужин, отдых, разговоры, игры</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>1 января</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>00-N/A</td>
|
||||
<td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>07-12</td>
|
||||
<td>Утро, завтрак</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12-15</td>
|
||||
<td>Сауна/Отдых</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15-N/A</td>
|
||||
<td>Кто-то остается, кто-то собирается домой</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="table-wrapper">
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Время</th>
|
||||
<th>Действие</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>00-N/A</td>
|
||||
<td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>07-12</td>
|
||||
<td>Утро, завтрак</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12-15</td>
|
||||
<td>Сауна/Отдых</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15-N/A</td>
|
||||
<td>Кто-то остается, кто-то собирается домой</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</CenteredContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user