Stylizacja i poprawki w układzie
This commit is contained in:
dm
@@ -6,39 +6,41 @@ export default function OffersExtraServices({
|
||||
extraServices,
|
||||
openId,
|
||||
toggle,
|
||||
services
|
||||
}) {
|
||||
if (!extraServices.length) return null;
|
||||
|
||||
return (
|
||||
<div class="fuz-extra-services">
|
||||
<h1 class="fuz-title-small">Usługi dodatkowe</h1>
|
||||
<div class="f-extra-services">
|
||||
<h1 class="f-services-title">{services.title}</h1>
|
||||
<p class="f-services-body">{services.description}</p>
|
||||
|
||||
<div class="fuz-table-wrapper">
|
||||
<table class="fuz-table">
|
||||
<thead class="fuz-table-head">
|
||||
<div class="f-table-wrapper">
|
||||
<table class="f-table">
|
||||
<thead class="f-table-head">
|
||||
<tr>
|
||||
<th class="fuz-table-heading">Usługa</th>
|
||||
<th class="fuz-table-heading center">Cena</th>
|
||||
<th class="fuz-table-heading center w-32">Więcej</th>
|
||||
<th class="f-table-heading">{services.items[0]}</th>
|
||||
<th class="f-table-heading center">{services.items[1]}</th>
|
||||
<th class="f-table-heading center w-32">{services.items[2]}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{extraServices.map((srv, i) => (
|
||||
<>
|
||||
<tr class={i % 2 === 0 ? "fuz-row-even" : "fuz-row-odd"}>
|
||||
<td class="fuz-feature-name">{srv.nazwa}</td>
|
||||
<td class="fuz-feature-cell center">{srv.cena}</td>
|
||||
<td class="fuz-feature-cell-btn center">
|
||||
<button class="btn-link" onClick={() => toggle(srv.id)} title={openId === srv.id ? "Zwiń opis usługi" : "Rozwiń opis usługi"}>
|
||||
{openId === srv.id ? "Zwiń" : "Więcej"}
|
||||
<tr class={i % 2 === 0 ? "f-row-even" : "f-row-odd"}>
|
||||
<td class="f-feature-name">{srv.nazwa}</td>
|
||||
<td class="f-feature-cell center">{srv.cena}</td>
|
||||
<td class="f-feature-cell-btn center">
|
||||
<button class="f-feature-link" onClick={() => toggle(srv.id)} title={openId === srv.id ? "Zwiń opis usługi" : "Rozwiń opis usługi"}>
|
||||
{openId === srv.id ? "Zwiń" : "Przeczytaj ..."}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{openId === srv.id && (
|
||||
<tr>
|
||||
<td colSpan={3} class="fuz-expand-details">
|
||||
<td colSpan={3} class="f-expand-details">
|
||||
<FuzMarkdown text={srv.opis} ctx={{ kanaly: srv.kanaly }} />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import "../../styles/offers/offers-switches.css";
|
||||
// import "../../styles/offers/offers-switches.css";
|
||||
|
||||
export default function OffersSwitches({ switches, selected, onSwitch }) {
|
||||
if (!switches.length) return null;
|
||||
|
||||
return (
|
||||
<div class="fuz-switches-wrapper">
|
||||
<div class="f-switches-wrapper">
|
||||
{switches.map((sw) => (
|
||||
<div class="fuz-switch-block">
|
||||
<div class="fuz-switch-group">
|
||||
<div class="f-switch-box">
|
||||
<div class="f-switch-group">
|
||||
{sw.opcje.map((op) => (
|
||||
<button
|
||||
type="button"
|
||||
class={`fuz-switch ${selected[sw.id] === op.id ? "active" : ""
|
||||
class={`f-switch ${selected[sw.id] === op.id ? "active" : ""
|
||||
}`}
|
||||
onClick={() => onSwitch(sw.id, op.id)}
|
||||
title={sw.title}
|
||||
|
||||
@@ -3,25 +3,24 @@ import { getActiveLabel } from "../../helpers/getActiveLabel";
|
||||
import "../../styles/offers/offers-table.css";
|
||||
|
||||
|
||||
export default function OffersTable({ switches, selected, plans, features }) {
|
||||
export default function OffersTable({ switches, selected, plans, features, plan_title }) {
|
||||
return (
|
||||
<div class="fuz-table-wrapper">
|
||||
<table class="fuz-table">
|
||||
<thead class="fuz-table-head">
|
||||
<div class="f-table-wrapper">
|
||||
<table class="f-table">
|
||||
<thead class="f-table-head">
|
||||
<tr>
|
||||
<th class="fuz-table-heading">Parametr</th>
|
||||
|
||||
<th class="f-table-heading">{plan_title}</th>
|
||||
{plans.map((plan) => (
|
||||
<th
|
||||
class={`fuz-plan-heading ${
|
||||
plan.popularny ? "is-popular fuz-popular-top" : ""
|
||||
}`}
|
||||
class={`f-plan-heading ${plan.popularny ? "is-popular f-popular-top" : ""
|
||||
}`}
|
||||
>
|
||||
<div class="fuz-plan-title">{plan.nazwa}</div>
|
||||
<div class="fuz-plan-price">
|
||||
{/* {plan.popularny && (<div class="f-popular-badge">Popularny</div>)} */}
|
||||
<div class="f-plan-title">{plan.nazwa}</div>
|
||||
<div class="f-plan-price">
|
||||
{getPrice(plan, switches, selected)}
|
||||
</div>
|
||||
<div class="fuz-plan-speed">{plan.predkosc}</div>
|
||||
{/* <div class="f-plan-speed">{plan.predkosc}</div> */}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
@@ -29,8 +28,8 @@ export default function OffersTable({ switches, selected, plans, features }) {
|
||||
|
||||
<tbody>
|
||||
{features.map((f, rowIndex) => (
|
||||
<tr class={rowIndex % 2 === 0 ? "fuz-row-even" : "fuz-row-odd"}>
|
||||
<td class="fuz-feature-name">{f.etykieta}</td>
|
||||
<tr class={rowIndex % 2 === 0 ? "f-row-even" : "f-row-odd"}>
|
||||
<td class="f-feature-name">{f.etykieta}</td>
|
||||
|
||||
{plans.map((plan) => {
|
||||
const isPopular = plan.popularny;
|
||||
@@ -39,13 +38,11 @@ export default function OffersTable({ switches, selected, plans, features }) {
|
||||
if (f.id === "umowa_info") {
|
||||
return (
|
||||
<td
|
||||
class={`fuz-feature-cell ${
|
||||
isPopular
|
||||
? `is-popular ${
|
||||
isLastRow ? "fuz-popular-bottom" : ""
|
||||
}`
|
||||
class={`f-feature-cell ${isPopular
|
||||
? `is-popular ${isLastRow ? "f-popular-bottom" : ""
|
||||
}`
|
||||
: ""
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{getActiveLabel(switches, selected, "umowa")}
|
||||
</td>
|
||||
@@ -56,26 +53,24 @@ export default function OffersTable({ switches, selected, plans, features }) {
|
||||
|
||||
const baseClass =
|
||||
val === true
|
||||
? "fuz-feature-yes"
|
||||
? "f-feature-yes"
|
||||
: val === false || val == null
|
||||
? "fuz-feature-no"
|
||||
: "fuz-feature-cell";
|
||||
? "f-feature-no"
|
||||
: "f-feature-cell";
|
||||
|
||||
return (
|
||||
<td
|
||||
class={`${baseClass} ${
|
||||
isPopular
|
||||
? `is-popular ${
|
||||
isLastRow ? "fuz-popular-bottom" : ""
|
||||
}`
|
||||
class={`${baseClass} ${isPopular
|
||||
? `is-popular ${isLastRow ? "f-popular-bottom" : ""
|
||||
}`
|
||||
: ""
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{val === true
|
||||
? "✓"
|
||||
: val === false || val == null
|
||||
? "✕"
|
||||
: val}
|
||||
? "✕"
|
||||
: val}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -4,13 +4,15 @@ import FuzMarkdown from "./Markdown.jsx";
|
||||
import OffersSwitches from "./Offers/OffersSwitches.jsx";
|
||||
import OffersTable from "./Offers/OffersTable.jsx";
|
||||
import OffersExtraServices from "./Offers/OffersExtraServices.jsx";
|
||||
import "../styles/offers/offers-main.css";
|
||||
// import "../styles/offers/offers-main.css";
|
||||
|
||||
export default function InternetOffersIsland({ data }) {
|
||||
const switches = data.przelaczniki ?? [];
|
||||
const features = data.funkcje ?? [];
|
||||
const plans = data.plany ?? [];
|
||||
const plan_title = data.plany_title ?? "";
|
||||
const extraServices = data.uslugi_dodatkowe ?? [];
|
||||
const services = data.uslugi ?? [];
|
||||
|
||||
const initialSelected = {};
|
||||
switches.forEach((sw) => {
|
||||
@@ -27,10 +29,10 @@ export default function InternetOffersIsland({ data }) {
|
||||
setSelected((prev) => ({ ...prev, [switchId]: optionId }));
|
||||
|
||||
return (
|
||||
<section class="fuz-offers-section">
|
||||
<div class="fuz-offers-container">
|
||||
<section class="f-offers-section">
|
||||
<div class="f-offers-container">
|
||||
{data.opis_gorny && (
|
||||
<div class="fuz-offers-description">
|
||||
<div class="f-offers-description">
|
||||
<FuzMarkdown text={data.opis_gorny} />
|
||||
</div>
|
||||
)}
|
||||
@@ -46,12 +48,14 @@ export default function InternetOffersIsland({ data }) {
|
||||
selected={selected}
|
||||
plans={plans}
|
||||
features={features}
|
||||
plan_title={plan_title}
|
||||
/>
|
||||
|
||||
<OffersExtraServices
|
||||
extraServices={extraServices}
|
||||
openId={openServiceId}
|
||||
toggle={toggleService}
|
||||
services={services}
|
||||
/>
|
||||
|
||||
{data.opis_dolny && (
|
||||
|
||||
Reference in New Issue
Block a user