Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Merge pull request #1592 from pietervdvn/RobinLinde-patch-1

Browse source 
Add some vending options
This commit is contained in:
Pieter Vander Vennet 2023-09-28 14:48:02 +00:00 • committed by GitHub
commit 7d9192dd26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 864 additions and 631 deletions
Download patch file Download diff file Expand all files Collapse all files

121
assets/layers/bicycle_tube_vending_machine/bicycle_tube_vending_machine.json
View file

@ -32,7 +32,9 @@
"mappings": [ "mappings": [
{ {
"if": "name~*", "if": "name~*",
"then": "Bicycle tube vending machine {name}" "then": {
"en": "Bicycle tube vending machine {name}"
}
} }
] ]
}, },
@ -70,8 +72,7 @@
}, },
"tags": [ "tags": [
"amenity=vending_machine", "amenity=vending_machine",
"vending=bicycle_tube", "vending=bicycle_tube"
"vending:bicycle_tube=yes"
] ]
} }
], ],
@ -176,65 +177,62 @@
"id": "Still in use?" "id": "Still in use?"
}, },
{ {
"question": "How much does a bicycle tube cost?", "question": {
"render": "A bicycle tube costs {charge}", "en": "How much does a bicycle tube cost?"
},
"render": {
"en": "A bicycle tube costs {charge}"
},
"freeform": { "freeform": {
"key": "charge" "key": "charge"
}, },
"id": "bicycle_tube_vending_machine-charge" "id": "bicycle_tube_vending_machine-charge"
}, },
"payment-options-split",
{ {
"id": "vending-machine-payment-methods", "question": {
"question": "How can one pay at this tube vending machine?", "en": "Which brand of tubes are sold here?"
"mappings": [ },
{
"if": "payment:coins=yes",
"ifnot": "payment:coins=no",
"then": "Payment with coins is possible"
},
{
"if": "payment:notes=yes",
"ifnot": "payment:notes=no",
"then": "Payment with notes is possible"
},
{
"if": "payment:cards=yes",
"ifnot": "payment:cards=no",
"then": "Payment with cards is possible"
}
],
"multiAnswer": true
},
{
"question": "Which brand of tubes are sold here?",
"freeform": { "freeform": {
"key": "brand" "key": "brand"
}, },
"render": "{brand} tubes are sold here", "render": {
"en": "{brand} tubes are sold here"
},
"mappings": [ "mappings": [
{ {
"if": "brand=Continental", "if": "brand=Continental",
"then": "Continental tubes are sold here" "then": {
"en": "Continental tubes are sold here"
}
}, },
{ {
"if": "brand=Schwalbe", "if": "brand=Schwalbe",
"then": "Schwalbe tubes are sold here" "then": {
"en": "Schwalbe tubes are sold here"
}
} }
], ],
"multiAnswer": true, "multiAnswer": true,
"id": "bicycle_tube_vending_machine-brand" "id": "bicycle_tube_vending_machine-brand"
}, },
{ {
"question": "Who maintains this vending machine?", "question": {
"en": "Who maintains this vending machine?"
},
"render": "This vending machine is maintained by {operator}", "render": "This vending machine is maintained by {operator}",
"mappings": [ "mappings": [
{ {
"if": "operator=Schwalbe", "if": "operator=Schwalbe",
"then": "Maintained by Schwalbe" "then": {
"en": "Maintained by Schwalbe"
}
}, },
{ {
"if": "operator=Continental", "if": "operator=Continental",
"then": "Maintained by Continental" "then": {
"en": "Maintained by Continental"
}
} }
], ],
"freeform": { "freeform": {
@ -243,33 +241,52 @@
"id": "bicycle_tube_vending_machine-operator" "id": "bicycle_tube_vending_machine-operator"
}, },
{ {
"id": "bicycle_tube_vending_maching-other-items", "id": "other-items-vending",
"question": "Are other bicycle bicycle accessories sold here?", "question": {
"en": "Are other biycle accessories sold here?"
},
"mappings": [ "mappings": [
{ {
"if": "vending:bicycle_light=yes", "if": "vending=bicycle_tube",
"ifnot": "vending:bicycle_light=no", "then": {
"then": "Bicycle lights are sold here" "en": "Bicycle inner tubes are sold here",
"nl": "Fietsbinnenbanden worden hier verkocht"
}
}, },
{ {
"if": "vending:gloves=yes", "if": "vending=bicycle_light",
"ifnot": "vending:gloves=no", "then": {
"then": "Gloves are sold here" "en": "Bicycle lights are sold here",
"nl": "Fietslampjes worden hier verkocht"
}
}, },
{ {
"if": "vending:bicycle_repair_kit=yes", "if": "vending=gloves",
"ifnot": "vending:bicycle_repair_kit=no", "then": {
"then": "Bicycle repair kits are sold here" "en": "Gloves are sold here",
"nl": "Handschoenen worden hier verkocht"
}
}, },
{ {
"if": "vending:bicycle_pump=yes", "if": "vending=bicycle_repair_kit",
"ifnot": "vending:bicycle_pump=no", "then": {
"then": "Bicycle pumps are sold here" "en": "Bicycle repair kits are sold here",
"nl": "Fietsreparatiesets worden hier verkocht"
}
}, },
{ {
"if": "vending:bicycle_lock=yes", "if": "vending=bicycle_pump",
"ifnot": "vending:bicycle_lock=no", "then": {
"then": "Bicycle locks are sold here" "en": "Bicycle pumps are sold here",
"nl": "Fietspompen worden hier verkocht"
}
},
{
"if": "vending=bicycle_lock",
"then": {
"en": "Bicycle locks are sold here",
"nl": "Fietssloten worden hier verkocht"
}
} }
], ],
"multiAnswer": true "multiAnswer": true
@ -322,4 +339,4 @@
"cs": "Vrstva zobrazující automaty na cyklistické duše (buď speciální automaty na cyklistické duše, nebo klasické automaty s cyklistickými dušemi a případně dalšími předměty souvisejícími s jízdními koly, jako jsou světla, rukavice, zámky, ...)", "cs": "Vrstva zobrazující automaty na cyklistické duše (buď speciální automaty na cyklistické duše, nebo klasické automaty s cyklistickými dušemi a případně dalšími předměty souvisejícími s jízdními koly, jako jsou světla, rukavice, zámky, ...)",
"ca": "Una capa que mostra màquines expenedores per a tubs de bicicleta (ja siguin màquines expenedores de tubs de bicicleta o màquines expenedores clàssiques amb tubs de bicicleta i opcionalment objectes addicionals relacionats amb la bicicleta com ara llums, guants, panys, ...)" "ca": "Una capa que mostra màquines expenedores per a tubs de bicicleta (ja siguin màquines expenedores de tubs de bicicleta o màquines expenedores clàssiques amb tubs de bicicleta i opcionalment objectes addicionals relacionats amb la bicicleta com ara llums, guants, panys, ...)"
} }
} }

94
assets/layers/vending_machine/vending_machine.json
View file

@ -242,6 +242,14 @@
}, },
"icon": "./assets/layers/vending_machine/potato.svg" "icon": "./assets/layers/vending_machine/potato.svg"
}, },
{
"if": "vending=meat",
"then": {
"en": "Meat is sold",
"nl": "Vlees wordt verkocht"
},
"icon": "./assets/layers/id_presets/temaki-meat.svg"
},
{ {
"if": "vending=flowers", "if": "vending=flowers",
"then": { "then": {
@ -282,12 +290,39 @@
"icon": "./assets/themes/stations/public_transport_tickets.svg" "icon": "./assets/themes/stations/public_transport_tickets.svg"
}, },
{ {
"if": "vending=meat", "if": "vending=bicycle_light",
"then": { "then": {
"en": "Meat products are being sold", "en": "Bicycle lights are sold",
"nl": "Vleesproducten worden hier verkocht" "nl": "Fietslampjes worden verkocht"
}, }
"icon": "./assets/layers/id_presets/temaki-meat.svg" },
{
"if": "vending=gloves",
"then": {
"en": "Gloves are sold",
"nl": "Handschoenen worden verkocht"
}
},
{
"if": "vending=bicycle_repair_kit",
"then": {
"en": "Bicycle repair kits are sold",
"nl": "Fietsreparatiesets worden verkocht"
}
},
{
"if": "vending=bicycle_pump",
"then": {
"en": "Bicycle pumps are sold",
"nl": "Fietspompen worden verkocht"
}
},
{
"if": "vending=bicycle_lock",
"then": {
"en": "Bicycle locks are sold",
"nl": "Fietssloten worden verkocht"
}
} }
], ],
"multiAnswer": true "multiAnswer": true
@ -453,6 +488,10 @@
"if": "vending=potatoes", "if": "vending=potatoes",
"then": "circle:white;./assets/layers/vending_machine/potato.svg" "then": "circle:white;./assets/layers/vending_machine/potato.svg"
}, },
{
"if": "vending=meat",
"then": "./assets/layers/id_presets/temaki-meat.svg"
},
{ {
"if": "vending=flowers", "if": "vending=flowers",
"then": "circle:white;./assets/layers/id_presets/maki-florist.svg" "then": "circle:white;./assets/layers/id_presets/maki-florist.svg"
@ -792,6 +831,14 @@
}, },
"osmTags": "vending~i~.*potatoes.*" "osmTags": "vending~i~.*potatoes.*"
}, },
{
"question": {
"en": "Sale of meat",
"nl": "Verkoop van vlees",
"de": "Verkauf von Fleisch"
},
"osmTags": "vending~i~.*meat.*"
},
{ {
"question": { "question": {
"en": "Sale of flowers", "en": "Sale of flowers",
@ -805,7 +852,7 @@
{ {
"osmTags": "vending~i~.*parking_tickets.*", "osmTags": "vending~i~.*parking_tickets.*",
"question": { "question": {
"en": "Sale of parking" "en": "Sale of parking tickets"
} }
}, },
{ {
@ -821,9 +868,38 @@
} }
}, },
{ {
"osmTags": "vending=meat", "osmTags": "vending=bicycle_light",
"question": { "question": {
"en": "Sale of meat products" "en": "Sale of bicycle lights",
"nl": "Verkoop van fietslampjes"
}
},
{
"osmTags": "vending=gloves",
"question": {
"en": "Sale of gloves",
"nl": "Verkoop van handschoenen"
}
},
{
"osmTags": "vending=bicycle_repair_kit",
"question": {
"en": "Sale of bicycle repair kits",
"nl": "Verkoop van fietsreparatiesets"
}
},
{
"osmTags": "vending=bicycle_pump",
"question": {
"en": "Sale of bicycle pumps",
"nl": "Verkoop van fietspompen"
}
},
{
"osmTags": "vending=bicycle_lock",
"question": {
"en": "Sale of bicycle locks",
"nl": "Verkoop van fietssloten"
} }
} }
] ]
@ -834,4 +910,4 @@
"enableRelocation": true "enableRelocation": true
}, },
"deletion": true "deletion": true
} }

10
langs/layers/ca.json
View file

@ -8073,7 +8073,7 @@
"15": { "15": {
"question": "Venda de patates" "question": "Venda de patates"
}, },
"16": { "17": {
"question": "Venda de flors" "question": "Venda de flors"
} }
} }
@ -8154,16 +8154,16 @@
"14": { "14": {
"then": "Es venen papes" "then": "Es venen papes"
}, },
"15": { "16": {
"then": "Es venen flors" "then": "Es venen flors"
}, },
"16": { "17": {
"then": "Es venen tiquets d'aparcament" "then": "Es venen tiquets d'aparcament"
}, },
"17": { "18": {
"then": "Es venen cèntims premsats" "then": "Es venen cèntims premsats"
}, },
"18": { "19": {
"then": "Es venen bitllets de transport públic" "then": "Es venen bitllets de transport públic"
} }
}, },

9
langs/layers/de.json
View file

@ -9762,6 +9762,9 @@
"question": "Verkauf von Kartoffeln" "question": "Verkauf von Kartoffeln"
}, },
"16": { "16": {
"question": "Verkauf von Fleisch"
},
"17": {
"question": "Verkauf von Blumen" "question": "Verkauf von Blumen"
} }
} }
@ -9842,13 +9845,13 @@
"14": { "14": {
"then": "Kartoffeln werden verkauft" "then": "Kartoffeln werden verkauft"
}, },
"15": { "16": {
"then": "Blumen werden verkauft" "then": "Blumen werden verkauft"
}, },
"16": { "17": {
"then": "Parkscheine werden verkauft" "then": "Parkscheine werden verkauft"
}, },
"18": { "19": {
"then": "Fahrscheine werden verkauft" "then": "Fahrscheine werden verkauft"
} }
}, },

105
langs/layers/en.json
View file

@ -1034,9 +1034,64 @@
}, },
"question": "Is this vending machine still operational?", "question": "Is this vending machine still operational?",
"render": "The operational status is <i>{operational_status}</i>" "render": "The operational status is <i>{operational_status}</i>"
},
"bicycle_tube_vending_machine-brand": {
"mappings": {
"0": {
"then": "Continental tubes are sold here"
},
"1": {
"then": "Schwalbe tubes are sold here"
}
},
"question": "Which brand of tubes are sold here?",
"render": "{brand} tubes are sold here"
},
"bicycle_tube_vending_machine-charge": {
"question": "How much does a bicycle tube cost?",
"render": "A bicycle tube costs {charge}"
},
"bicycle_tube_vending_machine-operator": {
"mappings": {
"0": {
"then": "Maintained by Schwalbe"
},
"1": {
"then": "Maintained by Continental"
}
},
"question": "Who maintains this vending machine?"
},
"other-items-vending": {
"mappings": {
"0": {
"then": "Bicycle inner tubes are sold here"
},
"1": {
"then": "Bicycle lights are sold here"
},
"2": {
"then": "Gloves are sold here"
},
"3": {
"then": "Bicycle repair kits are sold here"
},
"4": {
"then": "Bicycle pumps are sold here"
},
"5": {
"then": "Bicycle locks are sold here"
}
},
"question": "Are other biycle accessories sold here?"
} }
}, },
"title": { "title": {
"mappings": {
"0": {
"then": "Bicycle tube vending machine {name}"
}
},
"render": "Bicycle tube vending machine" "render": "Bicycle tube vending machine"
} }
}, },
@ -9900,19 +9955,34 @@
"question": "Sale of potatoes" "question": "Sale of potatoes"
}, },
"16": { "16": {
"question": "Sale of flowers" "question": "Sale of meat"
}, },
"17": { "17": {
"question": "Sale of parking" "question": "Sale of flowers"
}, },
"18": { "18": {
"question": "Sale of pressed pennies" "question": "Sale of parking tickets"
}, },
"19": { "19": {
"question": "Sale of public transport tickets" "question": "Sale of pressed pennies"
}, },
"20": { "20": {
"question": "Sale of meat products" "question": "Sale of public transport tickets"
},
"21": {
"question": "Sale of bicycle lights"
},
"22": {
"question": "Sale of gloves"
},
"23": {
"question": "Sale of bicycle repair kits"
},
"24": {
"question": "Sale of bicycle pumps"
},
"25": {
"question": "Sale of bicycle locks"
} }
} }
} }
@ -9999,19 +10069,34 @@
"then": "Potatoes are sold" "then": "Potatoes are sold"
}, },
"15": { "15": {
"then": "Flowers are sold" "then": "Meat is sold"
}, },
"16": { "16": {
"then": "Parking tickets are sold" "then": "Flowers are sold"
}, },
"17": { "17": {
"then": "Pressed pennies are sold" "then": "Parking tickets are sold"
}, },
"18": { "18": {
"then": "Public transport tickets are sold" "then": "Pressed pennies are sold"
}, },
"19": { "19": {
"then": "Meat products are being sold" "then": "Public transport tickets are sold"
},
"20": {
"then": "Bicycle lights are sold"
},
"21": {
"then": "Gloves are sold"
},
"22": {
"then": "Bicycle repair kits are sold"
},
"23": {
"then": "Bicycle pumps are sold"
},
"24": {
"then": "Bicycle locks are sold"
} }
}, },
"question": "What does this vending machine sell?", "question": "What does this vending machine sell?",

4
langs/layers/fr.json
View file

@ -6576,7 +6576,7 @@
"15": { "15": {
"question": "Vente de pommes de terre" "question": "Vente de pommes de terre"
}, },
"16": { "17": {
"question": "Vente de fleurs" "question": "Vente de fleurs"
} }
} }
@ -6657,7 +6657,7 @@
"14": { "14": {
"then": "Vent des pommes de terre" "then": "Vent des pommes de terre"
}, },
"15": { "16": {
"then": "Vent des fleurs" "then": "Vent des fleurs"
} }
}, },

63
langs/layers/nl.json
View file

@ -930,6 +930,28 @@
}, },
"question": "Is deze verkoopsautomaat nog steeds werkende?", "question": "Is deze verkoopsautomaat nog steeds werkende?",
"render": "Deze verkoopsautomaat is <i>{operational_status}</i>" "render": "Deze verkoopsautomaat is <i>{operational_status}</i>"
},
"other-items-vending": {
"mappings": {
"0": {
"then": "Fietsbinnenbanden worden hier verkocht"
},
"1": {
"then": "Fietslampjes worden hier verkocht"
},
"2": {
"then": "Handschoenen worden hier verkocht"
},
"3": {
"then": "Fietsreparatiesets worden hier verkocht"
},
"4": {
"then": "Fietspompen worden hier verkocht"
},
"5": {
"then": "Fietssloten worden hier verkocht"
}
}
} }
}, },
"title": { "title": {
@ -9055,7 +9077,25 @@
"question": "Verkoop van aardappelen" "question": "Verkoop van aardappelen"
}, },
"16": { "16": {
"question": "Verkoop van vlees"
},
"17": {
"question": "Verkoop van bloemen" "question": "Verkoop van bloemen"
},
"21": {
"question": "Verkoop van fietslampjes"
},
"22": {
"question": "Verkoop van handschoenen"
},
"23": {
"question": "Verkoop van fietsreparatiesets"
},
"24": {
"question": "Verkoop van fietspompen"
},
"25": {
"question": "Verkoop van fietssloten"
} }
} }
} }
@ -9136,16 +9176,31 @@
"then": "Aardappelen worden verkocht" "then": "Aardappelen worden verkocht"
}, },
"15": { "15": {
"then": "Bloemen worden verkocht" "then": "Vlees wordt verkocht"
}, },
"16": { "16": {
"then": "Bloemen worden verkocht"
},
"17": {
"then": "Parkeerkaarten worden verkocht" "then": "Parkeerkaarten worden verkocht"
}, },
"18": { "19": {
"then": "Openbaar vervoerkaartjes worden verkocht" "then": "Openbaar vervoerkaartjes worden verkocht"
}, },
"19": { "20": {
"then": "Vleesproducten worden hier verkocht" "then": "Fietslampjes worden verkocht"
},
"21": {
"then": "Handschoenen worden verkocht"
},
"22": {
"then": "Fietsreparatiesets worden verkocht"
},
"23": {
"then": "Fietspompen worden verkocht"
},
"24": {
"then": "Fietssloten worden verkocht"
} }
}, },
"question": "Wat verkoopt deze verkoopautomaat?", "question": "Wat verkoopt deze verkoopautomaat?",

1027
src/Logic/Osm/OsmConnection.ts
View file

File diff suppressed because it is too large Load diff

62
src/UI/BigComponents/ThemeIntroPanel.svelte
View file

@ -1,44 +1,45 @@
<script lang="ts"> <script lang="ts">
import Translations from "../i18n/Translations"; import Translations from "../i18n/Translations"
import Svg from "../../Svg"; import Svg from "../../Svg"
import Tr from "../Base/Tr.svelte"; import Tr from "../Base/Tr.svelte"
import NextButton from "../Base/NextButton.svelte"; import NextButton from "../Base/NextButton.svelte"
import Geosearch from "./Geosearch.svelte"; import Geosearch from "./Geosearch.svelte"
import ToSvelte from "../Base/ToSvelte.svelte"; import ToSvelte from "../Base/ToSvelte.svelte"
import ThemeViewState from "../../Models/ThemeViewState"; import ThemeViewState from "../../Models/ThemeViewState"
import { Store, UIEventSource } from "../../Logic/UIEventSource"; import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"; import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
import { twJoin } from "tailwind-merge"; import { twJoin } from "tailwind-merge"
import { Utils } from "../../Utils"; import { Utils } from "../../Utils"
import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"; import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
/** /**
* The theme introduction panel * The theme introduction panel
*/ */
export let state: ThemeViewState; export let state: ThemeViewState
let layout = state.layout; let layout = state.layout
let selectedElement = state.selectedElement; let selectedElement = state.selectedElement
let selectedLayer = state.selectedLayer; let selectedLayer = state.selectedLayer
let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined); let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
let searchEnabled = false; let searchEnabled = false
let geopermission: Store<GeolocationPermissionState> = state.geolocation.geolocationState.permission; let geopermission: Store<GeolocationPermissionState> =
let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation; state.geolocation.geolocationState.permission
let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
geopermission.addCallback(perm => console.log(">>>> Permission", perm)); geopermission.addCallback((perm) => console.log(">>>> Permission", perm))
function jumpToCurrentLocation() { function jumpToCurrentLocation() {
const glstate = state.geolocation.geolocationState; const glstate = state.geolocation.geolocationState
if (glstate.currentGPSLocation.data !== undefined) { if (glstate.currentGPSLocation.data !== undefined) {
const c: GeolocationCoordinates = glstate.currentGPSLocation.data; const c: GeolocationCoordinates = glstate.currentGPSLocation.data
state.guistate.themeIsOpened.setData(false); state.guistate.themeIsOpened.setData(false)
const coor = { lon: c.longitude, lat: c.latitude }; const coor = { lon: c.longitude, lat: c.latitude }
state.mapProperties.location.setData(coor); state.mapProperties.location.setData(coor)
} }
if (glstate.permission.data !== "granted") { if (glstate.permission.data !== "granted") {
glstate.requestPermission(); glstate.requestPermission()
return; return
} }
} }
</script> </script>
@ -69,13 +70,13 @@
</button> </button>
<!-- No geolocation granted - we don't show the button --> <!-- No geolocation granted - we don't show the button -->
{:else if $geopermission === "requested"} {:else if $geopermission === "requested"}
<button class="flex w-full items-center gap-x-2 disabled" on:click={jumpToCurrentLocation}> <button class="disabled flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
<!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup --> <!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8").SetStyle("animation: 3s linear 0s infinite normal none running spin;")} /> <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8").SetStyle("animation: 3s linear 0s infinite normal none running spin;")} />
<Tr t={Translations.t.general.waitingForGeopermission} /> <Tr t={Translations.t.general.waitingForGeopermission} />
</button> </button>
{:else if $geopermission === "denied"} {:else if $geopermission === "denied"}
<button class="flex w-full items-center gap-x-2 disabled"> <button class="disabled flex w-full items-center gap-x-2">
<ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} /> <ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} />
<Tr t={Translations.t.general.geopermissionDenied} /> <Tr t={Translations.t.general.geopermissionDenied} />
</button> </button>
@ -84,7 +85,6 @@
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8").SetStyle("animation: 3s linear 0s infinite normal none running spin;")} /> <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8").SetStyle("animation: 3s linear 0s infinite normal none running spin;")} />
<Tr t={Translations.t.general.waitingForLocation} /> <Tr t={Translations.t.general.waitingForLocation} />
</button> </button>
{/if} {/if}
<div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2"> <div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">