export default const tours: Array = [
{
id: "tour-1",
steps: [
{
id: "first-tip",
selector: "#target-element-1",
theme: "important",
content: (
<>

This is the first tip

Tip Contents

This is the second tip

Another content

$3

import type { Tour, TipsProps } from "@k8slens/lds-tips/lib/es/Tips/Tips";

import tours from "./tours";

type ActiveSteps = { [key: string]: number };

type TipStoreModel = {
skipAll: TipsProps["skipAll"];
activeSteps: ActiveSteps;
};

export class TipStore {
@observable
store: TipStoreModel = {
skipAll: false,
activeSteps: {}
};
tours: Array = tours;

constructor() {
super();

makeObservable(this);
}

@action
setSkipAll: TipsProps["setSkipAll"] = () => {
this.store.skipAll = true;
};

@action
setNextStepNumber: TipsProps["setNextStepNumber"] = (tourId: string) => {
let nextStep = 1;
if (typeof this.store.activeSteps[tourId] === "number") {
nextStep += this.store.activeSteps[tourId];
};

this.store.activeSteps = {
...this.store.activeSteps,
[tourId]: nextStep
};

return nextStep;
};

import { Tips } from "@k8slens/lds-tips";

import { TipStore } from "./TipStore";

interface Props {
tipStore: TipStore | null;
}

export const Component = observer(({ tipStore }: Props) => {

if (!tipStore) {
return null;
}