DyslexicToggle

const dyslexicToggleFixture = {
  id: "dyslexic-toggle",
  storageKey: "vs-dyslexic",
} satisfies {
  id: string;
  storageKey: string;
};
 
import { DyslexicToggle } from "@grassroot/ui-react";
 
export default function DyslexicToggleDemo() {
  return (
    <div>
      <DyslexicToggle storageKey={dyslexicToggleFixture.storageKey} />
    </div>
  );
}

<script setup lang="ts">
const dyslexicToggleFixture = {
  id: "dyslexic-toggle",
  storageKey: "vs-dyslexic",
} satisfies {
  id: string;
  storageKey: string;
};
 
import { DyslexicToggle } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <DyslexicToggle :storage-key="dyslexicToggleFixture.storageKey" />
  </div>
</template>

import { Component } from "@angular/core";
const dyslexicToggleFixture = {
  id: "dyslexic-toggle",
  storageKey: "vs-dyslexic",
} satisfies {
  id: string;
  storageKey: string;
};
 
import { GrassrootDyslexicToggle } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-dyslexic-toggle-demo",
  standalone: true,
  imports: [GrassrootDyslexicToggle],
  template: `
    <div>
      <grassroot-dyslexic-toggle [storageKey]="fixture.storageKey" />
    </div>
  `,
})
export class DyslexicToggleDemoComponent {
  protected readonly fixture = dyslexicToggleFixture;
}
 
export default DyslexicToggleDemoComponent;

<script lang="ts">
  import { DyslexicToggle } from "@grassroot/ui-svelte";
  const dyslexicToggleFixture = {
    id: "dyslexic-toggle",
    storageKey: "vs-dyslexic",
  } satisfies {
    id: string;
    storageKey: string;
  };
 
  </script>
 
<div>
  <DyslexicToggle storageKey={dyslexicToggleFixture.storageKey} />
</div>

/** @jsxImportSource solid-js */
const dyslexicToggleFixture = {
  id: "dyslexic-toggle",
  storageKey: "vs-dyslexic",
} satisfies {
  id: string;
  storageKey: string;
};
 
import { DyslexicToggle } from "@grassroot/ui-solid";
 
export default function DyslexicToggleDemo() {
  return (
    <div>
      <DyslexicToggle storageKey={dyslexicToggleFixture.storageKey} />
    </div>
  );
}