@jjlmoya/utils-travel 1.1.0

package/src/tool/tip-calculator/component.astro

@@ -0,0 +1,683 @@
+---
+import { Icon } from "astro-icon/components";
+import type { TipCalculatorUI } from "./index";
+
+interface Props {
+  ui: TipCalculatorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tip-calculator">
+    <div class="tc-main-card">
+        <div class="tc-header">
+            <div class="tc-header-content">
+                <span class="tc-badge">{ui.badge}</span>
+                <h2>{ui.title}</h2>
+            </div>
+            <div class="tc-header-icon">
+                <Icon name="mdi:calculator-variant" />
+            </div>
+        </div>
+
+        <div class="tc-grid">
+            <div class="tc-inputs">
+                <div class="tc-input-field">
+                    <label>{ui.billLabel}</label>
+                    <div class="tc-input-control">
+                        <Icon name="mdi:currency-eur" class="tc-control-icon" />
+                        <input
+                            type="number"
+                            id="bill-amount"
+                            placeholder={ui.placeholderAmount}
+                            step="0.01"
+                        />
+                    </div>
+                </div>
+
+                <div class="tc-input-field">
+                    <label>{ui.countryLabel}</label>
+                    <div class="tc-dropdown" id="country-dropdown">
+                        <div class="tc-dropdown-toggle" id="dropdown-toggle">
+                            <Icon name="mdi:earth" class="tc-toggle-icon" />
+                            <span id="selected-country-name" class="tc-selected-name">{ui.placeholderSelect}</span>
+                            <Icon name="mdi:chevron-down" class="tc-chevron" />
+                        </div>
+                        <div class="tc-dropdown-menu" id="dropdown-menu">
+                            <div class="tc-dropdown-search">
+                                <Icon name="mdi:magnify" />
+                                <input
+                                    type="text"
+                                    id="country-search"
+                                    placeholder={ui.placeholderFilter}
+                                />
+                            </div>
+                            <div class="tc-dropdown-list" id="country-list">
+                                {
+                                    ui.countries.map((c) => (
+                                        <div class="tc-dropdown-item" data-id={c.id}>
+                                            {c.name}
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tc-input-field">
+                    <div class="tc-label-with-value">
+                        <label>{ui.tipLabel}</label>
+                        <span class="tc-value-highlight"><span id="perc-label">10</span>%</span>
+                    </div>
+                    <div class="tc-percentage-pills">
+                        <button class="tc-pill-btn" data-value="0">0%</button>
+                        <button class="tc-pill-btn" data-value="5">5%</button>
+                        <button class="tc-pill-btn active" data-value="10">10%</button>
+                        <button class="tc-pill-btn" data-value="15">15%</button>
+                        <button class="tc-pill-btn" data-value="20">20%</button>
+                    </div>
+                </div>
+
+                <div class="tc-input-field">
+                    <label>{ui.splitLabel}</label>
+                    <div class="tc-split-control">
+                        <button id="split-minus" class="tc-split-btn"
+                            ><Icon name="mdi:minus" /></button
+                        >
+                        <div class="tc-split-display">
+                            <Icon name="mdi:account-group" />
+                            <span id="split-val">4</span>
+                        </div>
+                        <button id="split-plus" class="tc-split-btn"
+                            ><Icon name="mdi:plus" /></button
+                        >
+                    </div>
+                </div>
+            </div>
+
+            <div class="tc-summary">
+                <div class="tc-summary-card">
+                    <div class="tc-summary-details">
+                        <div class="tc-summary-line">
+                            <span>{ui.summaryTip}</span>
+                            <strong id="tip-amount">0.00€</strong>
+                        </div>
+                        <div class="tc-summary-line">
+                            <span>{ui.summarySubtotal}</span>
+                            <strong id="bill-val">0.00€</strong>
+                        </div>
+                    </div>
+
+                    <div class="tc-summary-total">
+                        <span class="tc-total-label">{ui.summaryTotalPerson}</span>
+                        <div class="tc-total-amount">
+                            <span id="total-per-person">0.00</span><small>€</small>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="culture-box" class="tc-culture-info" style="display: none;">
+                    <div class="tc-culture-header">
+                        <Icon name="mdi:information-variant" />
+                        <span id="culture-title">{ui.protocolTitle}</span>
+                    </div>
+                    <p id="culture-text"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script is:inline define:vars={{ countries: ui.countries, content: ui }}>
+    const billInput = document.getElementById("bill-amount");
+    const percLabel = document.getElementById("perc-label");
+    const percBtns = document.querySelectorAll(".tc-pill-btn");
+
+    const dropdownToggle = document.getElementById("dropdown-toggle");
+    const dropdownMenu = document.getElementById("dropdown-menu");
+    const countrySearch = document.getElementById("country-search");
+    const dropdownItems = document.querySelectorAll(".tc-dropdown-item");
+    const selectedCountryName = document.getElementById("selected-country-name");
+
+    const splitMinus = document.getElementById("split-minus");
+    const splitPlus = document.getElementById("split-plus");
+    const splitDisplay = document.getElementById("split-val");
+
+    const tipAmountEl = document.getElementById("tip-amount");
+    const billValEl = document.getElementById("bill-val");
+    const totalPersonEl = document.getElementById("total-per-person");
+
+    const cultureBox = document.getElementById("culture-box");
+    const cultureTitle = document.getElementById("culture-title");
+    const cultureText = document.getElementById("culture-text");
+
+    let currentPerc = 10;
+    let currentSplit = 4;
+    let activeCountryId = null;
+
+    function saveState() {
+        const state = {
+            bill: billInput.value,
+            split: currentSplit,
+            percentage: currentPerc,
+            countryId: activeCountryId,
+        };
+        localStorage.setItem("tip_calculator_state", JSON.stringify(state));
+    }
+
+    function loadState() {
+        const saved = localStorage.getItem("tip_calculator_state");
+        if (!saved) { updateUI(); return; }
+        try {
+            const state = JSON.parse(saved);
+            billInput.value = state.bill || "";
+            currentSplit = typeof state.split === 'number' ? state.split : 4;
+            currentPerc = typeof state.percentage === 'number' ? state.percentage : 10;
+            activeCountryId = state.countryId;
+            splitDisplay.textContent = currentSplit;
+            percLabel.textContent = currentPerc;
+            percBtns.forEach((btn) => {
+                btn.classList.toggle("active", parseInt(btn.dataset.value) === currentPerc);
+            });
+            if (activeCountryId) {
+                const item = Array.from(dropdownItems).find((i) => i.dataset.id === activeCountryId);
+                if (item) updateCountry(item, false);
+            }
+        } catch {}
+        updateUI();
+    }
+
+    function updateUI() {
+        const bill = parseFloat(billInput.value) || 0;
+        const tipTotal = bill * (currentPerc / 100);
+        const grandTotal = bill + tipTotal;
+        const perPerson = grandTotal / currentSplit;
+
+        tipAmountEl.textContent = tipTotal.toFixed(2) + "€";
+        billValEl.textContent = bill.toFixed(2) + "€";
+        totalPersonEl.textContent = perPerson.toFixed(2);
+        saveState();
+    }
+
+    function updateCountry(item, updatePerc = true) {
+        if (!item) return;
+        
+        dropdownItems.forEach((i) => i.classList.remove("active"));
+        item.classList.add("active");
+        selectedCountryName.textContent = item.textContent.trim();
+
+        activeCountryId = item.dataset.id;
+        const country = countries.find((c) => c.id === activeCountryId);
+
+        if (country) {
+            if (updatePerc) {
+                currentPerc = country.default;
+                percLabel.textContent = currentPerc;
+
+                percBtns.forEach((btn) => {
+                    const btnVal = parseInt(btn.dataset.value);
+                    if (btnVal === currentPerc) {
+                        btn.classList.add("active");
+                    } else {
+                        btn.classList.remove("active");
+                    }
+                });
+            }
+
+            cultureBox.style.display = "block";
+            cultureTitle.textContent = `${content.protocolTitle} en ${country.name}`;
+            cultureText.textContent = country.culture;
+        }
+        dropdownMenu.classList.remove("show");
+        updateUI();
+    }
+
+    billInput.addEventListener("input", updateUI);
+
+    percBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+            percBtns.forEach((b) => b.classList.remove("active"));
+            btn.classList.add("active");
+            currentPerc = parseInt(btn.dataset.value);
+            percLabel.textContent = currentPerc;
+            updateUI();
+        });
+    });
+
+    dropdownToggle.addEventListener("click", (e) => {
+        e.stopPropagation();
+        dropdownMenu.classList.toggle("show");
+        if (dropdownMenu.classList.contains("show")) {
+            countrySearch.focus();
+        }
+    });
+
+    document.addEventListener("click", () => {
+        dropdownMenu.classList.remove("show");
+    });
+
+    dropdownMenu.addEventListener("click", (e) => e.stopPropagation());
+
+    dropdownItems.forEach((item) => {
+        item.addEventListener("click", () => updateCountry(item));
+    });
+
+    countrySearch.addEventListener("input", (e) => {
+        const query = e.target.value.toLowerCase();
+        dropdownItems.forEach((item) => {
+            const name = item.textContent.toLowerCase();
+            item.style.display = name.includes(query) ? "block" : "none";
+        });
+    });
+
+    splitMinus.addEventListener("click", () => {
+        if (currentSplit > 1) {
+            currentSplit--;
+            splitDisplay.textContent = currentSplit;
+            updateUI();
+        }
+    });
+
+    splitPlus.addEventListener("click", () => {
+        currentSplit++;
+        splitDisplay.textContent = currentSplit;
+        updateUI();
+    });
+
+    loadState();
+</script>
+
+<style>
+.tip-calculator {
+    --tc-primary: #10b981;
+    --tc-primary-soft: rgba(16, 185, 129, 0.1);
+    --tc-bg: #fff;
+    --tc-border: #e2e8f0;
+    --tc-text: #1e293b;
+    --tc-text-muted: #64748b;
+    --tc-card-bg: #fff;
+    --tc-input-bg: #f8fafc;
+    --tc-item-bg: #f8fafc;
+    --tc-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+:global(.theme-dark) .tip-calculator {
+    --tc-bg: #0f172a;
+    --tc-border: #334155;
+    --tc-text: #f1f5f9;
+    --tc-text-muted: #94a3b8;
+    --tc-card-bg: #1e293b;
+    --tc-input-bg: #0f172a;
+    --tc-item-bg: #0f172a;
+    --tc-primary: #34d399;
+    --tc-primary-soft: rgba(52, 211, 153, 0.1);
+    --tc-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+}
+
+.tc-main-card {
+    background: var(--tc-card-bg);
+    border: 1px solid var(--tc-border);
+    border-radius: 2rem;
+    padding: 2.5rem;
+    box-shadow: var(--tc-shadow);
+    backdrop-filter: blur(12px);
+}
+
+.tc-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 2.5rem;
+}
+
+.tc-badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: var(--tc-primary-soft);
+    color: var(--tc-primary);
+    border-radius: 2rem;
+    font-size: 0.8rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    margin-bottom: 0.75rem;
+}
+
+.tc-header h2 {
+    font-size: 2.25rem;
+    font-weight: 900;
+    margin: 0;
+    line-height: 1.1;
+}
+
+.tc-header-icon {
+    width: 64px;
+    height: 64px;
+    background: var(--tc-primary-soft);
+    color: var(--tc-primary);
+    border-radius: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tc-header-icon svg {
+    width: 32px;
+    height: 32px;
+}
+
+.tc-grid {
+    display: grid;
+    grid-template-columns: 1.2fr 1fr;
+    gap: 3rem;
+}
+
+.tc-input-field {
+    margin-bottom: 2rem;
+}
+
+.tc-input-field label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--tc-text-muted);
+    margin-bottom: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.tc-input-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.tc-control-icon {
+    position: absolute;
+    left: 1.25rem;
+    color: var(--tc-primary);
+    width: 20px;
+    height: 20px;
+}
+
+.tc-input-control input {
+    width: 100%;
+    padding: 1.25rem 1.25rem 1.25rem 3.5rem;
+    background: var(--tc-input-bg);
+    border: 2px solid var(--tc-border);
+    border-radius: 1.25rem;
+    font-size: 1.25rem;
+    font-weight: 800;
+    color: var(--tc-text);
+    transition: all 0.2s;
+    outline: none;
+}
+
+.tc-input-control input:focus {
+    border-color: var(--tc-primary);
+    box-shadow: 0 0 0 4px var(--tc-primary-soft);
+}
+
+.tc-dropdown {
+    position: relative;
+}
+
+.tc-dropdown-toggle {
+    width: 100%;
+    padding: 1.25rem 1.5rem;
+    background: var(--tc-input-bg);
+    border: 2px solid var(--tc-border);
+    border-radius: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.tc-toggle-icon {
+    color: var(--tc-primary);
+    width: 20px;
+    height: 20px;
+}
+
+.tc-selected-name {
+    flex: 1;
+    font-weight: 700;
+}
+
+.tc-chevron {
+    color: var(--tc-text-muted);
+    transition: transform 0.2s;
+    margin-left: auto;
+}
+
+.tc-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    width: 100%;
+    background: var(--tc-card-bg);
+    border: 1px solid var(--tc-border);
+    border-radius: 1.25rem;
+    box-shadow: var(--tc-shadow);
+    z-index: 100;
+    display: none;
+    overflow: hidden;
+}
+
+.tc-dropdown-menu.show {
+    display: block;
+}
+
+.tc-dropdown-search {
+    padding: 1rem;
+    border-bottom: 1px solid var(--tc-border);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: var(--tc-input-bg);
+}
+
+.tc-dropdown-search input {
+    background: transparent;
+    border: none;
+    outline: none;
+    width: 100%;
+    color: var(--tc-text);
+}
+
+.tc-dropdown-list {
+    max-height: 250px;
+    overflow-y: auto;
+    background: var(--tc-card-bg);
+}
+
+.tc-dropdown-item {
+    padding: 1rem 1.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 600;
+    color: var(--tc-text);
+}
+
+.tc-dropdown-item:hover {
+    background: var(--tc-primary-soft);
+    color: var(--tc-primary);
+}
+
+.tc-dropdown-item.active {
+    background: var(--tc-primary);
+    color: white;
+}
+
+.tc-label-with-value {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.tc-value-highlight {
+    font-weight: 900;
+    color: var(--tc-primary);
+}
+
+.tc-percentage-pills {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.tc-pill-btn {
+    flex: 1;
+    padding: 1rem;
+    background: var(--tc-input-bg);
+    border: 2px solid var(--tc-border);
+    border-radius: 1rem;
+    font-weight: 800;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: var(--tc-text);
+}
+
+.tc-pill-btn:hover {
+    border-color: var(--tc-primary);
+}
+
+.tc-pill-btn.active {
+    background: var(--tc-primary);
+    border-color: var(--tc-primary);
+    color: white;
+}
+
+.tc-split-control {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.tc-split-btn {
+    width: 54px;
+    height: 54px;
+    border-radius: 1rem;
+    border: 2px solid var(--tc-border);
+    background: var(--tc-input-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: var(--tc-text);
+}
+
+.tc-split-btn:hover {
+    border-color: var(--tc-primary);
+    color: var(--tc-primary);
+}
+
+.tc-split-display {
+    flex: 1;
+    background: var(--tc-input-bg);
+    border: 2px solid var(--tc-border);
+    border-radius: 1rem;
+    height: 54px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    font-weight: 900;
+    font-size: 1.25rem;
+}
+
+.tc-split-display svg {
+    color: var(--tc-primary);
+}
+
+.tc-summary-card {
+    background: linear-gradient(135deg, var(--tc-primary) 0%, #059669 100%);
+    border-radius: 2rem;
+    padding: 2.5rem;
+    color: #fff;
+    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.2);
+}
+
+.tc-summary-line {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+.tc-summary-line strong {
+    font-weight: 800;
+}
+
+.tc-summary-details {
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    margin-bottom: 1.5rem;
+}
+
+.tc-total-label {
+    display: block;
+    text-align: center;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.5rem;
+}
+
+.tc-total-amount {
+    text-align: center;
+    font-size: 4rem;
+    font-weight: 900;
+    line-height: 1;
+}
+
+.tc-total-amount small {
+    font-size: 1.5rem;
+    margin-left: 0.25rem;
+}
+
+.tc-culture-info {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: var(--tc-item-bg);
+    border: 1px solid var(--tc-border);
+    border-radius: 1.5rem;
+}
+
+.tc-culture-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+    font-weight: 800;
+    color: var(--tc-primary);
+}
+
+.tc-culture-info p {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin: 0;
+    color: var(--tc-text-muted);
+}
+
+@media (max-width: 768px) {
+    .tc-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .tc-main-card {
+        padding: 1.5rem;
+    }
+
+    .tc-header h2 {
+        font-size: 1.75rem;
+    }
+}
+</style>