@prijsvrijtechsupport/ui 0.0.29 → 0.0.30

package/dist/components/weather/Weather.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Weather>;
 export default meta;
 type Story = StoryObj<typeof Weather>;
 export declare const Default: Story;
+export declare const Vertical: Story;

package/dist/components/weather/icons/cloud_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloud01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloud02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloud03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_lightning.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudLightning: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_moon.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudMoon: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_off.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudOff: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_04.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining04: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_05.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining05: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_raining_06.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudRaining06: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_snowing_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudSnowing01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_snowing_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudSnowing02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_sun_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconCloudSun01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_sun_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconcloudsun02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/cloud_sun_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconcloudsun03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/droplets_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Icondroplets01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/droplets_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Icondroplets02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/droplets_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Icondroplets03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/hurricane_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconhurricane01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/hurricane_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconhurricane02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/hurricane_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconhurricane03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/lightning_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconlightning01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/lightning_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconlightning02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmoon01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmoon02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_eclipse.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmooneclipse: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/moon_star.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconmoonstar: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/snowflake_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsnowflake01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/snowflake_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsnowflake02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/stars_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconstars01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/stars_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconstars02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/stars_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconstars03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const IconSun: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun_setting_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunsetting01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun_setting_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunsetting02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sun_setting_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunsetting03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sunrise.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunrise: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/sunset.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconsunset: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometer01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometer02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometer03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_cold.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometercold: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/thermometer_warm.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconthermometerwarm: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/umbrella_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconumbrella01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/umbrella_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconumbrella02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/umbrella_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconumbrella03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/waves.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwaves: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/wind_01.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwind01: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/wind_02.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwind02: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/icons/wind_03.d.ts

@@ -0,0 +1,2 @@
+import { type SVGProps } from "react";
+export declare const Iconwind03: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/weather/index.d.ts

@@ -1,6 +1,15 @@
+interface WeatherItem {
+    icon: React.ReactNode;
+    temperature: string;
+    temperature_percent: number;
+    month: number;
+}
 interface WeatherProps {
     "data-testid"?: string;
     className?: string;
+    weatherItems: WeatherItem[];
+    title: string;
+    direction?: 'horizontal' | 'vertical';
 }
-export declare const Weather: ({ className, ...props }: WeatherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Weather: ({ className, weatherItems, title, direction, ...props }: WeatherProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/weather/weather.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.cjs

@@ -10885,12 +10885,71 @@ const Coupon = ({ className, title, description, code, validUntil, image, backgr
 
 //#endregion
 //#region src/components/weather/index.tsx
-const Weather = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	"data-component": "weather",
-	className: (0, clsx.default)(className),
-	...props,
-	children: "Weather"
-});
+const monthLabels = [
+	"jan",
+	"feb",
+	"mar",
+	"apr",
+	"mei",
+	"jun",
+	"jul",
+	"aug",
+	"sep",
+	"okt",
+	"nov",
+	"dec"
+];
+const Weather = ({ className, weatherItems, title, direction = "horizontal",...props }) => {
+	const isVertical = direction === "vertical";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-component": "weather",
+		className: (0, clsx.default)(className, "flex flex-col gap-2"),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "p-4 rounded-lg overflow-scroll w-fit",
+			style: { background: "linear-gradient(180deg, #0092F2 0%, #0092F2 56.18%, #7EC3F0 101.61%)" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-white text-lg font-bold mb-5",
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, clsx.default)("gap-2 flex flex-col", isVertical && "h-[310px] flex flex-row gap-2 w-fit"),
+				children: weatherItems.map((weatherItem, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, clsx.default)("flex gap-2 text-white", isVertical ? "flex-col h-full w-8 items-center justify-center" : "flex-row"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: (0, clsx.default)(isVertical ? "w-full order-5 justify-center items-center text-center" : "w-10"),
+							children: monthLabels[weatherItem.month]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: (0, clsx.default)("flex items-center justify-center", isVertical ? "w-full order-1" : "w-10"),
+							children: weatherItem.icon
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, clsx.default)("flex items-center justify-center", isVertical ? "h-full order-3" : "w-full"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: (0, clsx.default)("bg-white/50 rounded-xl flex", isVertical ? "w-2 h-full items-end" : "w-full h-2"),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "bg-amber-200 rounded-xl",
+									style: isVertical ? {
+										height: `${weatherItem.temperature_percent}%`,
+										width: "100%"
+									} : {
+										width: `${weatherItem.temperature_percent}%`,
+										height: "100%"
+									}
+								})
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: (0, clsx.default)(isVertical ? "w-full text-center order-2" : "w-14 text-right"),
+							children: [weatherItem.temperature, isVertical ? "°" : "°C"]
+						})
+					]
+				}, index))
+			})]
+		})
+	});
+};
 
 //#endregion
 //#region src/components/collection/index.tsx