80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { Accessor, Component, createSignal, JSXElement } from "solid-js";
|
|
|
|
import { AnimeConditional } from "../../src/ts/components/common/anime/AnimeConditional";
|
|
|
|
type AnimeConditionalProps = {
|
|
if: boolean;
|
|
then: JSXElement | ((value: Accessor<NonNullable<boolean>>) => JSXElement);
|
|
else?: JSXElement;
|
|
exitBeforeEnter?: boolean;
|
|
};
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/Anime/AnimeConditional",
|
|
component: AnimeConditional as Component<AnimeConditionalProps>,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
if: { control: "boolean" },
|
|
exitBeforeEnter: { control: "boolean" },
|
|
},
|
|
});
|
|
|
|
export const Default = meta.story({
|
|
args: {
|
|
if: true,
|
|
exitBeforeEnter: true,
|
|
then: (
|
|
<div style={{ color: "var(--text-color)", padding: "16px" }}>
|
|
Condition is true
|
|
</div>
|
|
),
|
|
else: (
|
|
<div style={{ color: "var(--error-color)", padding: "16px" }}>
|
|
Condition is false
|
|
</div>
|
|
),
|
|
},
|
|
});
|
|
|
|
export const InteractiveToggle = meta.story({
|
|
render: () => {
|
|
const [show, setShow] = createSignal(true);
|
|
return (
|
|
<div>
|
|
<button
|
|
style={{
|
|
padding: "8px 16px",
|
|
cursor: "pointer",
|
|
"background-color": "var(--sub-alt-color)",
|
|
color: "var(--text-color)",
|
|
border: "none",
|
|
"border-radius": "8px",
|
|
"margin-bottom": "16px",
|
|
}}
|
|
onClick={() => setShow((prev) => !prev)}
|
|
>
|
|
Toggle ({show() ? "showing true" : "showing false"})
|
|
</button>
|
|
<AnimeConditional
|
|
if={show()}
|
|
exitBeforeEnter
|
|
then={
|
|
<div style={{ color: "var(--text-color)", padding: "16px" }}>
|
|
Condition is true
|
|
</div>
|
|
}
|
|
else={
|
|
<div style={{ color: "var(--error-color)", padding: "16px" }}>
|
|
Condition is false
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
},
|
|
});
|