90 lines
4.9 KiB
JavaScript
90 lines
4.9 KiB
JavaScript
// Figma Design Context: Wyszukiwarka krajów (Input — stany)
|
||
// Node ID: 122:1054 (Active/Wyszukiwanie), 122:1091 (Default pusty), 123:1195 (Default wybrane)
|
||
// Pobrano: 2026-03-25
|
||
// UWAGA: Kod referencyjny React+Tailwind z Figma MCP — do adaptacji na PHP/HTML/CSS
|
||
|
||
const imgImage1 = "https://www.figma.com/api/mcp/asset/08457e8b-11f6-4194-b0a2-a5b2c900a505"; // Flaga Niemcy
|
||
const imgImage2 = "https://www.figma.com/api/mcp/asset/54e5a65c-6ca3-4749-89cf-12d9651f8a07"; // Flaga Norwegia
|
||
const imgImage3 = "https://www.figma.com/api/mcp/asset/dff6d6a5-6c45-46ef-9ed5-50ca45e0aef8"; // Flaga Czechy
|
||
const imgPlus = "https://www.figma.com/api/mcp/asset/f6b0c0c6-ab8c-4156-9e90-650bb559fa2f";
|
||
const imgVector11 = "https://www.figma.com/api/mcp/asset/a858c025-8ee0-4a0b-ad87-7a13a6a57d21";
|
||
const imgPlus1 = "https://www.figma.com/api/mcp/asset/07f69e9c-5ea5-4b67-b4e8-cc09e619e1fe"; // Plus (dodaj)
|
||
const imgPlus2 = "https://www.figma.com/api/mcp/asset/1f56ab37-6765-401c-807e-dedef33f0056"; // X (usuń)
|
||
const imgPlus3 = "https://www.figma.com/api/mcp/asset/9b64413d-57e9-4917-87d9-e158e3266e16";
|
||
|
||
/*
|
||
* STANY WYSZUKIWARKI KRAJÓW:
|
||
*
|
||
* Stan 1 (Default pusty, 122:1091):
|
||
* - Ikona "+" + "Wyszukaj i dodaj kraj na trasie"
|
||
* - Pole zwinięte, 770x48
|
||
*
|
||
* Stan 2 (Active/Wyszukiwanie, 122:1054):
|
||
* - Pole tekstowe z wpisanym tekstem (np. "N|")
|
||
* - Separator linia
|
||
* - Pod spodem: karty krajów pasujących do frazy
|
||
* - Karta: Flaga (24px, rounded-full) + Nazwa + "od 50 do 250 zł" + "+" (dodaj)
|
||
* - 2 kolumny obok siebie (363px each)
|
||
* - Drugi wariant: po wybraniu jednego (np. "C|"):
|
||
* - Wybrany kraj: bg rgba(47,36,130,0.05), border rgba(47,36,130,0.2), ikona "×"
|
||
* - Wyniki: normalne karty z "+"
|
||
*
|
||
* Stan 3 (Default wybrane, 123:1195):
|
||
* - Ikona "+" + "Wyszukaj i dodaj kraj na trasie"
|
||
* - Pod spodem: karty wybranych krajów z "×" do usunięcia
|
||
* - bg-white, border rgba(0,0,0,0.1), 770x128 total
|
||
*
|
||
* KARTY KRAJÓW:
|
||
* - Wymiar: 363x56
|
||
* - Flaga: 24px okrągła (overflow hidden, border #d3d3d3)
|
||
* - Nazwa: Albert Sans SemiBold 15px, #2F2482
|
||
* - Cena: "od 50 do 250 zł" — 10px "od"/"do", 14px wartości, #505050
|
||
* - Akcja: "+" (dodaj) lub "×" (usuń)
|
||
* - Wybrany: bg rgba(47,36,130,0.05), border rgba(47,36,130,0.2)
|
||
*/
|
||
|
||
export default function Input() {
|
||
return (
|
||
<div className="bg-white relative rounded-[8px] size-full" data-name="Input" data-node-id="122:1054">
|
||
<div className="absolute content-stretch flex gap-[8px] items-center left-[16px] top-[12px]" data-node-id="122:1055">
|
||
<div className="relative shrink-0 size-[16px]" data-name="Plus" data-node-id="122:1056">
|
||
<img alt="" className="absolute block max-w-none size-full" src={imgPlus} />
|
||
</div>
|
||
<p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[0] relative shrink-0 text-[#2f2482] text-[15px] tracking-[-0.3px] whitespace-nowrap" data-node-id="122:1060">
|
||
<span className="leading-[24px]">N</span>
|
||
<span className="leading-[24px] text-[#505050]">|</span>
|
||
</p>
|
||
</div>
|
||
<div className="absolute bottom-[80px] h-0 left-[16px] w-[738px]" data-node-id="122:1061">
|
||
<div className="absolute inset-[-0.5px_0]">
|
||
<img alt="" className="block max-w-none size-full" src={imgVector11} />
|
||
</div>
|
||
</div>
|
||
{/* Karta: Niemcy */}
|
||
<div className="absolute border border-[rgba(0,0,0,0.1)] border-solid h-[56px] left-[16px] overflow-clip rounded-[8px] top-[60px] w-[363px]" data-name="Opcja dodatkowa" data-node-id="122:1104">
|
||
<p className="absolute font-semibold left-[43.5px] text-[#2f2482] text-[15px] top-[calc(50%-10px)]">Niemcy</p>
|
||
<p className="absolute left-[310.5px] text-[#505050] text-right top-[15.5px]">
|
||
<span className="text-[10px]">od </span><span className="text-[14px]">50 </span>
|
||
<span className="text-[10px]">do </span><span className="text-[14px]">250 zł</span>
|
||
</p>
|
||
<div className="absolute left-[11.5px] overflow-clip rounded-full size-[24px] top-[15.5px]" data-name="Flag">
|
||
<img alt="Niemcy" src={imgImage1} />
|
||
</div>
|
||
<div className="absolute left-[330.5px] size-[16px] top-[19.5px]" data-name="Plus">
|
||
<img alt="Dodaj" src={imgPlus1} />
|
||
</div>
|
||
</div>
|
||
{/* Karta: Norwegia */}
|
||
<div className="absolute border border-[rgba(0,0,0,0.1)] border-solid h-[56px] left-[391px] overflow-clip rounded-[8px] top-[60px] w-[363px]" data-name="Opcja dodatkowa" data-node-id="122:1114">
|
||
<p className="absolute font-semibold left-[43.5px] text-[#2f2482] text-[15px] top-[calc(50%-10px)]">Norwegia</p>
|
||
<div className="absolute left-[11.5px] overflow-clip rounded-full size-[24px] top-[15.5px]" data-name="Flag">
|
||
<img alt="Norwegia" src={imgImage2} />
|
||
</div>
|
||
<div className="absolute left-[330.5px] size-[16px] top-[19.5px]" data-name="Plus">
|
||
<img alt="Dodaj" src={imgPlus1} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|