Gg wp
This commit is contained in:
@@ -1,206 +1,18 @@
|
||||
import CustomList from "./CustomList/CustomList";
|
||||
|
||||
function Choice() {
|
||||
|
||||
const data = {
|
||||
title: "Книги про психологию",
|
||||
id: "психология",
|
||||
listOfElements: [{ title: "etgsfdz" }, { title: "fgdsfdz" }],
|
||||
};
|
||||
return (
|
||||
<main className="container">
|
||||
<h1 className="text-center mb-5" style={{ color: "var(--accent)" }}>
|
||||
Книги по тематикам
|
||||
</h1>
|
||||
|
||||
<div id="военные" className="row g-4">
|
||||
<div className="col-12">
|
||||
<div className="category-card p-4">
|
||||
<h2 className="mb-4" style={{ color: "var(--accent)" }}>
|
||||
Военные книги
|
||||
</h2>
|
||||
<div className="list-group">
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Эрих Мария Ремарк "На Западном фронте без перемен"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Лев Толстой "Война и мир"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Василь Быков "Сотников"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="наука" className="col-12">
|
||||
<div className="category-card p-4">
|
||||
<h2 className="mb-4" style={{ color: "var(--accent)" }}>
|
||||
Книги про науку
|
||||
</h2>
|
||||
<div className="list-group">
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Стивен Хокинг "Краткая история времени"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Карл Саган "Космос"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Ричард Докинз "Эгоистичный ген"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="детские" className="col-12">
|
||||
<div className="category-card p-4">
|
||||
<h2 className="mb-4" style={{ color: "var(--accent)" }}>
|
||||
Детские книги
|
||||
</h2>
|
||||
<div className="list-group">
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Астрид Линдгрен "Пеппи Длинныйчулок"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Алан Милн "Винни-Пух"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Антуан де Сент-Экзюпери "Маленький принц"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="психология" className="col-12">
|
||||
<div className="category-card p-4">
|
||||
<h2 className="mb-4" style={{ color: "var(--accent)" }}>
|
||||
Книги про психологию
|
||||
</h2>
|
||||
<div className="list-group">
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>
|
||||
"Как завоевывать друзей и оказывать влияние на людей"
|
||||
</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Виктор Франкл "Человек в поисках смысла"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>Роберт Чалдини "Психология влияния"</span>
|
||||
<a
|
||||
href="/html/infobook.html"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
<CustomList {...data} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
19
online-library/src/Choice/CustomList/CustomList.jsx
Normal file
19
online-library/src/Choice/CustomList/CustomList.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import ElementList from "../ElementList/ElementList";
|
||||
|
||||
function CustomList({ title, listOfElements, id }) {
|
||||
return (
|
||||
<div id={id} className="col-12">
|
||||
<div className="category-card p-4">
|
||||
<h2 className="mb-4" style={{ color: "var(--accent)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{listOfElements.map((item, index) => (
|
||||
<ElementList key={index} title={item.title} />
|
||||
))}
|
||||
<div className="list-group"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomList;
|
||||
22
online-library/src/Choice/ElementList/ElementList.jsx
Normal file
22
online-library/src/Choice/ElementList/ElementList.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
function ElementList({ title }) {
|
||||
return (
|
||||
<div className="book-item list-group-item d-flex justify-content-between align-items-center mb-2">
|
||||
<span>{title}</span>
|
||||
|
||||
<NavLink
|
||||
to="/infobook"
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--bg-dark)",
|
||||
}}
|
||||
>
|
||||
Читать
|
||||
</NavLink>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ElementList;
|
||||
Reference in New Issue
Block a user