- switch to tailwind

src/components/BaseButton.vue

@@ -0,0 +1,117 @@
+<script setup="ts">
+import { computed } from "vue";
+// import { Link } from '@inertiajs/vue3';
+// import { Link } from '@inertiajs/inertia-vue3';
+import { getButtonColor } from "@/colors";
+import BaseIcon from "@/components/BaseIcon.vue";
+
+const props = defineProps({
+    label: {
+        type: [String, Number],
+        default: null,
+    },
+    icon: {
+        type: String,
+        default: null,
+    },
+    href: {
+        type: String,
+        default: null,
+    },
+    target: {
+        type: String,
+        default: null,
+    },
+    routeName: {
+        type: String,
+        default: null,
+    },
+    type: {
+        type: String,
+        default: null,
+    },
+    color: {
+        type: String,
+        default: "white",
+    },
+    as: {
+        type: String,
+        default: null,
+    },
+    small: Boolean,
+    outline: Boolean,
+    active: Boolean,
+    disabled: Boolean,
+    roundedFull: Boolean,
+});
+
+const is = computed(() => {
+    if (props.as) {
+        return props.as;
+    }
+
+    // if (props.routeName) {
+    //     return Link;
+    // }
+
+    if (props.href) {
+        return "a";
+    }
+
+    return "button";
+});
+
+const computedType = computed(() => {
+    if (is.value === "button") {
+        return props.type ?? "button";
+    }
+
+    return null;
+});
+
+const labelClass = computed(() => (props.small && props.icon ? "px-1" : "px-2"));
+
+const componentClass = computed(() => {
+    const base = [
+        "inline-flex",
+        "cursor-pointer",
+        "justify-center",
+        "items-center",
+        "whitespace-nowrap",
+        "focus:outline-none",
+        "transition-colors",
+        "focus:ring-2",
+        "duration-150",
+        "border",
+        props.roundedFull ? "rounded-full" : "rounded",
+        props.active ? "ring ring-black dark:ring-white" : "ring-blue-700",
+        getButtonColor(props.color, props.outline, !props.disabled),
+    ];
+
+    if (props.small) {
+        base.push("text-sm", props.roundedFull ? "px-3 py-1" : "p-1");
+    } else {
+        base.push("py-2", props.roundedFull ? "px-6" : "px-3");
+    }
+
+    if (props.disabled) {
+        base.push("cursor-not-allowed", props.outline ? "opacity-50" : "opacity-70");
+    }
+
+    return base;
+});
+</script>
+
+<template>
+    <component
+        v-bind:is="is"
+        v-bind:class="componentClass"
+        v-bind:href="routeName ? routeName : href"
+        v-bind:type="computedType"
+        v-bind:target="target"
+        v-bind:disabled="disabled"
+    >
+        <BaseIcon v-if="icon" v-bind:path="icon" />
+        <span v-if="label" v-bind:class="labelClass">{{ label }}</span>
+    </component>
+</template>

src/components/BaseIcon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+    path: {
+        type: String,
+        required: true,
+    },
+    w: {
+        type: String,
+        default: "w-6",
+    },
+    h: {
+        type: String,
+        default: "h-6",
+    },
+    size: {
+        type: [String, Number],
+        default: 16,
+    },
+});
+
+const spanClass = computed(() => `inline-flex justify-center items-center ${props.w} ${props.h}`);
+</script>
+
+<template>
+    <span v-bind:class="spanClass">
+        <svg viewBox="0 0 24 24" v-bind:width="size" v-bind:height="size" class="inline-block">
+            <path fill="currentColor" v-bind:d="path" />
+        </svg>
+    </span>
+</template>

src/components/SectionBanner.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { gradientBgPurplePink, gradientBgPinkRed, gradientBgGreenBlue } from "@/colors";
+
+const props = defineProps({
+    bg: {
+        type: String,
+        required: true,
+        validator: (value) => ["purplePink", "pinkRed", "greenBlue"].includes(value),
+    },
+});
+
+const colorClass = computed(() => {
+    switch (props.bg) {
+        case "purplePink":
+            return gradientBgPurplePink;
+        case "pinkRed":
+            return gradientBgPinkRed;
+        case "greenBlue":
+            return gradientBgGreenBlue;
+    }
+
+    return "";
+});
+</script>
+<template>
+    <div v-bind:class="colorClass" class="mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
+        <slot />
+    </div>
+</template>

src/components/SectionBannerStarOnGitea.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { mdiGithub } from "@mdi/js";
+import BaseButton from "@/components/BaseButton.vue";
+import SectionBanner from "@/components/SectionBanner.vue";
+</script>
+<template>
+    <SectionBanner bg="greenBlue">
+        <h1 class="text-3xl text-white mb-6">Like the project? Please star on <b>Gitea</b>!</h1>
+        <div>
+            <BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" v-bind:icon="mdiGithub" v-bind:roundedFull="true" label="Gitea" target="_blank" />
+        </div>
+    </SectionBanner>
+</template>

src/components/map/map.component.vue

@@ -12,7 +12,7 @@ export default MapComponent;
 </script>
 
 <style lang="scss" scoped>
-@import "~bulma/sass/utilities/initial-variables.sass";
+@import "~bulma/sass/utilities/initial-variables.scss";
 .mapDesktop {
     overflow: hidden;
     position: absolute;