docs(toast): show other values in Toast.useToastTime example

kobaltedev · Mar 21, 2024 · b21625e · b21625e
1 parent 7054621
commit b21625e
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 15 deletions.
diff --git a/apps/docs/src/examples/toast.tsx b/apps/docs/src/examples/toast.tsx
@@ -1,4 +1,5 @@
 import { Toast, toaster } from "@kobalte/core";
+import { Accessor } from "solid-js";
 
 import { CrossIcon } from "../components";
 import style from "./toast.module.css";
@@ -115,16 +116,39 @@ export function MultipleRegionsExample() {
 	);
 }
 
-function CustomProgress() {
-	const { remainingFraction } = Toast.useToastTime();
-	return <progress value={remainingFraction()} max={1} />;
+function ToastTimeExampleToastBody() {
+	const { remainingTime, remainingFraction, elapsedTime, elapsedFraction } =
+		Toast.useToastTime();
+	const format = (time: Accessor<number>, fraction: Accessor<number>) => (
+		<>
+			{(time() / 1000).toFixed(1)}s ({Math.round(fraction() * 100)}%)
+		</>
+	);
+	return (
+		<>
+			<div class={style.toast__content}>
+				<div>
+					<Toast.Title class={style.toast__title}>
+						Remaining time: {format(remainingTime, remainingFraction)}
+					</Toast.Title>
+					<Toast.Description class={style.toast__description}>
+						Elapsed time: {format(elapsedTime, elapsedFraction)}
+					</Toast.Description>
+				</div>
+				<Toast.CloseButton class={style["toast__close-button"]}>
+					<CrossIcon />
+				</Toast.CloseButton>
+			</div>
+			<progress value={remainingFraction()} max={1} />
+		</>
+	);
 }
 
-export function CustomProgressExample() {
+export function ToastTimeExample() {
 	const showToast = () => {
 		toaster.show((props) => (
 			<Toast.Root toastId={props.toastId} class={style.toast}>
-				<CustomProgress />
+				<ToastTimeExampleToastBody />
 			</Toast.Root>
 		));
 	};

diff --git a/apps/docs/src/routes/docs/core/components/toast.mdx b/apps/docs/src/routes/docs/core/components/toast.mdx
@@ -1,9 +1,5 @@
 import { Preview, TabsSnippets, Callout, Kbd } from "../../../../components";
-import {
-	BasicExample,
-	CustomProgressExample,
-	MultipleRegionsExample,
-} from "../../../../examples/toast";
+import { BasicExample, MultipleRegionsExample, ToastTimeExample } from "../../../../examples/toast";
 
 # Toast
 
@@ -566,20 +562,42 @@ It should be used within `Toast.Root`, e. g. in a component that replaces `Toast
 ```tsx
 import { Toast, toaster } from "@kobalte/core";
 
-function CustomProgress() {
-	const { remainingFraction } = Toast.useToastTime();
-	return <progress value={remainingFraction()} max={1} />;
+function ToastBody() {
+	const { remainingTime, remainingFraction, elapsedTime, elapsedFraction } = Toast.useToastTime();
+	const format = (time: Accessor<number>, fraction: Accessor<number>) => (
+		<>
+			{(time() / 1000).toFixed(1)}s ({Math.round(fraction() * 100)}%)
+		</>
+	);
+	return (
+		<>
+			<div class="toast__content">
+				<div>
+					<Toast.Title class="toast__title">
+						Remaining time: {format(remainingTime, remainingFraction)}
+					</Toast.Title>
+					<Toast.Description class="toast__description">
+						Elapsed time: {format(elapsedTime, elapsedFraction)}
+					</Toast.Description>
+				</div>
+				<Toast.CloseButton class="toast__close-button">
+					<CrossIcon />
+				</Toast.CloseButton>
+			</div>
+			<progress value={remainingFraction()} max={1} />
+		</>
+	);
 }
 
 toaster.show(props => (
 	<Toast.Root toastId={props.toastId}>
-		<CustomProgress />
+		<ToastBody />
 	</Toast.Root>
 ));
 ```
 
 <Preview isRounded>
-	<CustomProgressExample />
+	<ToastTimeExample />
 </Preview>
 
 ## API reference