@geops/rvf-mobility-web-component 0.1.19 → 0.1.20

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/FloatingVehiclesDetails.tsx

@@ -1,6 +1,6 @@
 import { Feature } from "ol";
 
-import RvfButton from "../../../RvfButton";
+import RvfLink from "../../../RvfLink";
 import { PROVIDER_BY_FEED_ID } from "../../../utils/constants";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 
@@ -51,23 +51,20 @@ function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
   const link = getLinkByDevice(features?.[0]);
 
   return (
-    <div className="flex flex-col overflow-scroll">
-      {features.length} Fahrzeuge
-      <span className="text-lg text-grey">Fahrzeug mieten</span>
-      <ul className="h-screen list-disc overflow-scroll pl-4 underline underline-offset-2">
-        {renderedDetails}
-      </ul>
+    <div className="flex flex-1 flex-col gap-2 overflow-scroll">
+      <div className="flex flex-1 flex-col gap-2 overflow-scroll">
+        <div>{features.length} Fahrzeuge</div>
+        <div className="flex flex-1 flex-col overflow-scroll">
+          <div className="text-grey">Fahrzeug mieten</div>
+          <ul className="list-disc overflow-scroll pl-4 underline underline-offset-2">
+            {renderedDetails}
+          </ul>
+        </div>
+      </div>
       {feedId && link && (
-        <a
-          className="mx-auto  text-grey hover:text-red"
-          href={link}
-          rel="noreferrer"
-          target="_blank"
-        >
-          <RvfButton className={"border-none"}>
-            Über {PROVIDER_BY_FEED_ID[feedId]}
-          </RvfButton>
-        </a>
+        <div className="flex justify-center">
+          <RvfLink href={link}>Über {PROVIDER_BY_FEED_ID[feedId]}</RvfLink>
+        </div>
       )}
     </div>
   );

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -102,21 +102,19 @@ function RvfSharedMobilityDetails({
   };
 
   return (
-    <div className="flex flex-col overflow-scroll px-2 pt-2">
-      <div className="flex items-center text-xl text-grey">
-        <img
-          alt="logo"
-          className="max-w-24"
-          src={logos[features[0]?.get("feed_id")]}
-        />
-      </div>
+    <>
+      <img
+        alt="logo"
+        className="max-w-24"
+        src={logos[features[0]?.get("feed_id")]}
+      />
       {features.length && isStationDetails && (
         <StationDetails feature={features[0]} />
       )}
       {!!features[0]?.get("form_factor") && isFloatingVehicle && (
         <FloatingVehiclesDetails features={features} />
       )}
-    </div>
+    </>
   );
 }
 

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/StationDetails.tsx

@@ -13,11 +13,11 @@ function StationDetails({ feature }: StationDetailsProps) {
   }, [feature]);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col gap-2">
       {feature.get("num_vehicles_available")} Fahrzeuge
       {link && (
         <a
-          className={"my-12 flex items-center justify-center"}
+          className={"my-10 flex items-center justify-center"}
           href={link}
           rel="noreferrer"
           target="_blank"

package/src/RvfLink/RvfLink.tsx

@@ -0,0 +1,45 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+export type RvfLinkProps = {
+  theme?: "primary" | "secondary";
+} & JSX.AnchorHTMLAttributes<HTMLAnchorElement> &
+  PreactDOMAttributes;
+
+const baseClasses =
+  "my-1 flex gap-2 text-[14px] @sm/main:text-[16px] @md/main:text-[18px] items-center justify-left font-semibold text-button";
+
+export const themes = {
+  primary: {
+    classes:
+      "bg-red text-white disabled:bg-lightgrey  hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred ",
+    selectedClasses: "bg-darkred border-darkred",
+  },
+  secondary: {
+    classes: "bg-white text-grey hover:text-red active:text-lightred",
+    selectedClasses: "text-red",
+  },
+};
+
+function RvfLink({
+  children,
+  className,
+  theme = "secondary",
+  ...props
+}: RvfLinkProps) {
+  const classes = useMemo(() => {
+    return twMerge(
+      `${baseClasses} ${themes[theme].classes}  ${className || ""}`,
+    );
+  }, [className, theme]);
+
+  return (
+    <a className={classes} rel="noreferrer" target="_blank" {...props}>
+      {children}
+    </a>
+  );
+}
+
+export default memo(RvfLink);

package/src/RvfLink/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RvfLink";

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -554,7 +554,7 @@ function RvfMobilityMap({
                       }}
                       title={getFeatureInformationTitle(selectedFeature)}
                     ></RvfOverlayHeader>
-                    <RvfFeatureDetails className="relative flex flex-col gap-2 overflow-y-auto overflow-x-hidden  px-2 pt-2" />
+                    <RvfFeatureDetails className="relative flex h-full flex-col gap-4 overflow-y-auto overflow-x-hidden p-4" />
                   </>
                 )}
                 {hasToolbar && hasPrint && isExportMenuOpen && (