update tabs

Author: amirhhashemi

package.json

@@ -26,6 +26,7 @@
 		"@solid-primitives/marker": "^0.1.0",
 		"@solid-primitives/media": "^2.2.9",
 		"@solid-primitives/platform": "^0.2.0",
+		"@solid-primitives/storage": "^4.3.1",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.3",
 		"@solidjs/start": "^1.1.1",

pnpm-lock.yaml

@@ -21,16 +21,13 @@ This offers a way to access state across an application without passing props th
 Context is created using the [`createContext`](/reference/component-apis/create-context) function.
 This function has a `Provider` property that wraps the component tree you want to provide context to.
 
-<TabsCodeBlocks>
-<div id="/context/create.js">
-```jsx
+```jsx tab title="/context/create.js"
 import { createContext } from "solid-js";
 
 const MyContext = createContext();
 ```
-</div>
-<div id="/context/component.jsx">
-```jsx
+
+```jsx tab title="/context/component.jsx"
 import { MyContext } from "./create";
 
 export function Provider (props) {
@@ -41,8 +38,6 @@ export function Provider (props) {
 	)
 };
 ```
-</div>
-</TabsCodeBlocks>
 
 ## Providing context to children
 
@@ -161,9 +156,7 @@ export function CounterProvider(props) {
 [Signals](/concepts/signals) offer a way to synchronize and manage data shared across your components using context.
 You can pass a signal directly to the `value` prop of the `Provider` component, and any changes to the signal will be reflected in all components that consume the context.
 
-<TabsCodeBlocks>
-<div id="App.jsx">
-```jsx
+```jsx tab title="App.jsx"
 import { CounterProvider } from "./Context";
 import { Child } from "./Child";
 
@@ -176,9 +169,8 @@ export function App() {
 	)
 }
 ```
-</div>
-<div id="Context.jsx">
-```jsx
+
+```jsx tab title="Context.jsx"
 import { createSignal, useContext } from "solid-js";
 
 export function CounterProvider(props) {
@@ -204,9 +196,9 @@ export function CounterProvider(props) {
 
 export function useCounter() { return useContext(CounterContext); }
 ```
-</div>
-<div id="Child.jsx">
-```tsx title="/context/counter-component.tsx"
+
+```tsx tab title="Child.jsx"
+// /context/counter-component.tsx
 import { useCounter } from "./Context";
 
 export function Child(props) {
@@ -221,8 +213,6 @@ export function Child(props) {
 	);
 };
 ```
-</div>
-</TabsCodeBlocks>
 
 This offers a way to manage state across your components without having to pass props through intermediate elements.
 

src/routes/concepts/context.mdx

@@ -52,59 +52,16 @@ Transitioning from JavaScript to TypeScript in a Solid project offers the benefi
 
 1. Install TypeScript into your project.
 
-<TabsCodeBlocks>
-<div id="npm">
-```bash frame="none"
-npm i --save-dev typescript
+```package-install-dev
+typescript
 ```
-</div>
-
-<div id="yarn">
-```bash frame="none"
-yarn add --dev typescript
-```
-</div>
-
-<div id="pnpm">
-```bash frame="none"
-pnpm add --save-dev typescript
-```
-</div>
-
-<div id="bun">
-```bash frame="none"
-bun add --save-dev typescript
-```
-</div>
-</TabsCodeBlocks>
 
 2. Run the following command to generate a `tsconfig.json` file.
 
-<TabsCodeBlocks>
-<div id="npm">
-```bash frame="none"
-npx tsc --init
-```
-</div>
 
-<div id="yarn">
-```bash frame="none"
-yarn dlx tsc --init
+```package-exec
+tsc --init
 ```
-</div>
-
-<div id="pnpm">
-```bash frame="none"
-pnpm tsc --init
-```
-</div>
-
-<div id="bun">
-```bash frame="none"
-bunx tsc --init
-```
-</div>
-</TabsCodeBlocks>
 
 3. Update the contents of the `tsconfig.json` to match Solid's configuration:
 
@@ -421,9 +378,9 @@ function MyGenericComponent<T>(props: MyProps<T>): JSX.Element {
 ```
 
 :::info
-	Each `Component` type has a corresponding `Props` type that defines the shape
-	of its properties. These `Props` types also accept the same generic types as
-	their associated `Component` types.
+Each `Component` type has a corresponding `Props` type that defines the shape
+of its properties. These `Props` types also accept the same generic types as
+their associated `Component` types.
 :::
 
 ### Event handling
@@ -523,13 +480,13 @@ return <div ref={divRef!}>...</div>
 In this case, using `divRef!` within the `ref` attribute signals to TypeScript that `divRef` will receive an assignment after this stage, which is more in line with how Solid works.
 
 :::info
-	While TypeScript does catch incorrect usage of refs that occur before their
-	JSX block definition, it currently does not identify undefined variables
-	within certain nested functions in Solid. Therefore, additional care is needed
-	when using `ref`s in functions such as
-	[`createMemo`](/reference/basic-reactivity/create-memo),
-	[`createRenderEffect`](/reference/secondary-primitives/create-render-effect),
-	and [`createComputed`](/reference/secondary-primitives/create-computed).
+While TypeScript does catch incorrect usage of refs that occur before their
+JSX block definition, it currently does not identify undefined variables
+within certain nested functions in Solid. Therefore, additional care is needed
+when using `ref`s in functions such as
+[`createMemo`](/reference/basic-reactivity/create-memo),
+[`createRenderEffect`](/reference/secondary-primitives/create-render-effect),
+and [`createComputed`](/reference/secondary-primitives/create-computed).
 :::
 
 Finally, a riskier approach involves using the definite assignment assertion right at the point of variable initialization.
@@ -584,9 +541,9 @@ return <div>{user()?.name}</div>;
 
 return (
 	<div>
-		<Show when={user()}>{(nonNullishUser) => <>
-			{nonNullishUser().name}
-		</>}</Show>
+		<Show when={user()}>
+			{(nonNullishUser) => <>{nonNullishUser().name}</>}
+		</Show>
 	</div>
 );
 ```
@@ -709,7 +666,7 @@ const handler: JSX.EventHandlerWithOptions<HTMLDivElement, Event> =  {
 
 :::info
 **Note**:
-By default, using native events like `mousemove` with the `on` prefix — for example, `<div on:mousemove={e => {}} />` —  will trigger a TypeScript error.
+By default, using native events like `mousemove` with the `on` prefix — for example, `<div on:mousemove={e => {}} />` — will trigger a TypeScript error.
 This occurs because these native events are not part of Solid's custom event type definitions.
 To solve this, the `CustomEvents` interface can be extended to include events from the `HTMLElementEventMap`:
 

src/routes/configuration/typescript.mdx

@@ -141,15 +141,13 @@ This keeps the `doubleCount` state in sync with the `count` state, and allows th
 
 View this example of [`doubleCount` in a `createEffect` in the Solid Playground example](https://playground.solidjs.com/anonymous/b05dddaa-e62a-4c56-b745-5704f3a40194).
 
-<TabsCodeBlocks>
-<div id="First render">
-	```html title="Counter.tsx" Current count: 0 Doubled count: 0 ```
-</div>
-
-<div id="After increment">
-	```html title="Counter.tsx" Current count: 1 Doubled count: 2 ```
-</div>
-</TabsCodeBlocks>
+```html tab title="First render"
+Current count: 0 Doubled count: 0
+```
+
+```html tab title="After increment"
+Current count: 1 Doubled count: 2
+```
 
 ## Derived state