chore(landing/useCounter): update examples

src/hooks/useCounter/useCounter.ts

@@ -1,4 +1,4 @@
-import { type TsetValue, useState } from "../useState/useState";
+import { type TsetValue, useState } from "@/hooks";
 
 interface UseCounterOutput {
 	count: Readonly<SvelteStore<number>>;

src/routes/guide/useCounter/+page.svelte

@@ -2,7 +2,7 @@
 	import { Browser, Button, DocTpl, H2, Highlight, Link } from "@/components";
 	import { useCounter } from "@/hooks";
 
-	import code from "./code-snippet";
+	import { exampleCode, sourceCode } from "./code-snippet";
 
 	const { count, increment, decrement, reset, setCount } = useCounter(99);
 
@@ -14,11 +14,27 @@
 		<div class="space-y-2">
 			<p>A simple hook to implement a counter by actions.</p>
 
-			<h3>Related hooks</h3>
-
+			<h3 class="text-lg">Related hooks</h3>
 			<ul class="list-disc pl-6">
 				<li><Link href="/guide/useState">useState</Link></li>
 			</ul>
+
+			<h3 class="text-lg">Inspired on:</h3>
+			<ul class="list-disc pl-6">
+				<li>
+					<Link href="https://usehooks.com/usecounter">https://usehooks.com/usecounter</Link>
+				</li>
+				<li>
+					<Link href="https://usehooks-ts.com/react-hook/use-counter"
+						>https://usehooks-ts.com/react-hook/use-counter</Link
+					>
+				</li>
+				<li>
+					<Link href="https://vueuse.org/shared/useCounter/"
+						>https://vueuse.org/shared/useCounter/</Link
+					>
+				</li>
+			</ul>
 		</div>
 	</div>
 
@@ -42,8 +58,16 @@
 	</div>
 
 	<div slot="code-example">
-		<H2>Code example</H2>
+		<div>
+			<H2>Code base</H2>
 
-		<Highlight {code} />
+			<Highlight language="typescript" code={sourceCode} />
+		</div>
+
+		<div class="mt-12">
+			<H2>Code example</H2>
+
+			<Highlight code={exampleCode} />
+		</div>
 	</div>
 </DocTpl>

src/routes/guide/useCounter/code-snippet.js

@@ -1,4 +1,4 @@
-export default `
+export const exampleCode = `
 <!-- javascript -->
 <script lang="ts">
 	import { useCounter } from "@dimaslz/svelteuse";
@@ -24,3 +24,47 @@ export default `
 	</div>
 </div>
 `;
+
+export const sourceCode = `
+import { type TsetValue, useState } from "@dimaslz/svelteuse";
+
+interface UseCounterOutput {
+	count: Readonly<SvelteStore<number>>;
+	increment: (e?: MouseEvent | number) => void;
+	decrement: (e?: MouseEvent | number) => void;
+	reset: () => void;
+	setCount: TsetValue<number>;
+}
+
+export function useCounter(initialValue?: number): UseCounterOutput {
+	const [count, setCount] = useState<number>(initialValue || 0);
+
+	const increment = (n: number | MouseEvent = 1) => {
+		if (n instanceof MouseEvent) {
+			setCount((x) => x + 1);
+		} else {
+			setCount((x) => x + n);
+		}
+	};
+
+	const decrement = (n: number | MouseEvent = 1) => {
+		if (n instanceof MouseEvent) {
+			setCount((x) => x - 1);
+		} else {
+			setCount((x) => x - n);
+		}
+	};
+
+	const reset = () => {
+		setCount(initialValue || 0);
+	};
+
+	return {
+		count,
+		increment,
+		decrement,
+		reset,
+		setCount,
+	};
+}
+`;