React tab for code snippets

src/docs/src/components/Component.svelte

@@ -14,6 +14,7 @@
   let wrapper
   let showContent = "preview"
   let htmlSlot
+  let reactSlot
 
   let isClipboardButtonPressed = false
   const copyText = (text) => {
@@ -58,6 +59,7 @@
     <div class="tabs z-10 -mb-px">
       <button on:click={() => (showContent = "preview")} class={`tab tab-lifted ${showContent == "preview" ? "tab-active [--tab-bg:hsl(var(--b2))]" : "[--tab-border-color:transparent]"}`}><Translate text="Preview" /></button>
       <button on:click={() => (showContent = "html")} class={`tab tab-lifted ${showContent == "html" ? "tab-active [--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]" : ""}`}>HTML</button>
+      <button on:click={() => (showContent = "react")} class={`tab tab-lifted ${showContent == "react" ? "tab-active [--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]" : ""}`}>React</button>
       <div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]" />
     </div>
 
@@ -92,6 +94,29 @@
         </div>
       </div>
     {/if}
+    {#if onMount && showContent == "react"}
+      <div class="grid">
+        <div class="hidden" bind:this={reactSlot}>
+          <slot name="react" />
+        </div>
+        <div class="code-wrapper col-start-1 row-start-1">
+          <svelte:component this={Prism} language="svelte">
+            <slot name="react" />
+          </svelte:component>
+        </div>
+        <div class="col-start-1 row-start-1 flex items-start justify-end p-2">
+          <div data-tip={isClipboardButtonPressed ? "copied" : "copy"} class="tooltip tooltip-left tooltip-accent">
+            <button class="btn btn-square btn-sm" on:click={() => copyText(decodeHtml(reactSlot.firstChild.innerHTML))}>
+              {#if isClipboardButtonPressed}
+                <svg class="h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 16 2 C 14.742188 2 13.847656 2.890625 13.40625 4 L 5 4 L 5 29 L 27 29 L 27 4 L 18.59375 4 C 18.152344 2.890625 17.257813 2 16 2 Z M 16 4 C 16.554688 4 17 4.445313 17 5 L 17 6 L 20 6 L 20 8 L 12 8 L 12 6 L 15 6 L 15 5 C 15 4.445313 15.445313 4 16 4 Z M 7 6 L 10 6 L 10 10 L 22 10 L 22 6 L 25 6 L 25 27 L 7 27 Z M 21.28125 13.28125 L 15 19.5625 L 11.71875 16.28125 L 10.28125 17.71875 L 14.28125 21.71875 L 15 22.40625 L 15.71875 21.71875 L 22.71875 14.71875 Z" /></svg>
+              {:else}
+                <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 16 3 C 14.742188 3 13.847656 3.890625 13.40625 5 L 6 5 L 6 28 L 26 28 L 26 5 L 18.59375 5 C 18.152344 3.890625 17.257813 3 16 3 Z M 16 5 C 16.554688 5 17 5.445313 17 6 L 17 7 L 20 7 L 20 9 L 12 9 L 12 7 L 15 7 L 15 6 C 15 5.445313 15.445313 5 16 5 Z M 8 7 L 10 7 L 10 11 L 22 11 L 22 7 L 24 7 L 24 26 L 8 26 Z" /></svg>
+              {/if}
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
   </div>
 </div>
 

src/docs/src/routes/components/alert.svelte.md

@@ -36,6 +36,14 @@ data="{[
   </div>
 </div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$alert shadow-lg">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    <span>12 unread messages. Tap to see.</span>
+  </div>
+</div>`
+}</pre>
 </Component>
 
 <Component title="Info color">
@@ -53,6 +61,14 @@ data="{[
   </div>
 </div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$alert $$alert-info shadow-lg">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    <span>New software update available.</span>
+  </div>
+</div>`
+}</pre>
 </Component>
 
 <Component title="Success color">
@@ -70,6 +86,14 @@ data="{[
   </div>
 </div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$alert $$alert-success shadow-lg">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+    <span>Your purchase has been confirmed!</span>
+  </div>
+</div>`
+}</pre>
 </Component>
 
 <Component title="Warning color">
@@ -87,6 +111,14 @@ data="{[
   </div>
 </div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$alert $$alert-warning shadow-lg">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+    <span>Warning: Invalid email address!</span>
+  </div>
+</div>`
+}</pre>
 </Component>
 
 <Component title="Error color">
@@ -104,6 +136,14 @@ data="{[
   </div>
 </div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$alert $$alert-error shadow-lg">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+    <span>Error! Task failed successfully.</span>
+  </div>
+</div>`
+}</pre>
 </Component>
 
 <Component title="Alert with buttons">
@@ -129,6 +169,18 @@ data="{[
   </div>
 </div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$alert shadow-lg">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    <span>we use cookies for no reason.</span>
+  </div>
+  <div className="flex-none">
+    <button className="$$btn $$btn-sm $$btn-ghost">Deny</button>
+    <button className="$$btn $$btn-sm $$btn-primary">Accept</button>
+  </div>
+</div>`
+}</pre>
 </Component>
 
 <Component title="Alert with title and description">
@@ -158,4 +210,18 @@ data="{[
   </div>
 </div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$alert shadow-lg">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    <div>
+      <h3 className="font-bold">New message!</h3>
+      <div className="text-xs">You have 1 unread message</div>
+    </div>
+  </div>
+  <div className="flex-none">
+    <button className="$$btn $$btn-sm">See</button>
+  </div>
+</div>`
+}</pre>
 </Component>

src/docs/src/routes/components/artboard.svelte.md

@@ -30,81 +30,117 @@ data="{[
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$phone-1">320×568</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$phone-1">320×568</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard size 2">
 <div class="artboard phone-2 artboard-demo">375×667</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$phone-2">375×667</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$phone-2">375×667</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard size 3">
 <div class="artboard phone-3 artboard-demo">414×736</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$phone-3">414×736</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$phone-3">414×736</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard size 4">
 <div class="artboard phone-4 artboard-demo">375×812</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$phone-4">375×812</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$phone-4">375×812</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard size 5">
 <div class="artboard phone-5 artboard-demo">414×896</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$phone-5">414×896</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$phone-5">414×896</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard size 6">
 <div class="artboard phone-6 artboard-demo">320×1024</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$phone-6">320×1024</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$phone-6">320×1024</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard horizontal size 1 (568×320)">
 <div class="artboard artboard-horizontal phone-1 artboard-demo">568×320</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$artboard-horizontal $$phone-1">568×320</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$artboard-horizontal $$phone-1">568×320</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard horizontal size 2 (667×375)">
 <div class="artboard artboard-horizontal phone-2 artboard-demo">667×375</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$artboard-horizontal $$phone-2">667×375</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$artboard-horizontal $$phone-2">667×375</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard horizontal size 3 (736×414)">
 <div class="artboard artboard-horizontal phone-3 artboard-demo">736×414</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$artboard-horizontal $$phone-3">736×414</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$artboard-horizontal $$phone-3">736×414</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard horizontal size 4 (812×375)">
 <div class="artboard artboard-horizontal phone-4 artboard-demo">812×375</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$artboard-horizontal $$phone-4">812×375</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$artboard-horizontal $$phone-4">812×375</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard horizontal size 5 (896×414)">
 <div class="artboard artboard-horizontal phone-5 artboard-demo">896×414</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$artboard-horizontal $$phone-5">896×414</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$artboard-horizontal $$phone-5">896×414</div>`
+}</pre>
 </Component>
 
 <Component title="Artboard horizontal size 6 (1024×320)">
 <div class="artboard artboard-horizontal phone-6 artboard-demo">1024×320</div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$artboard $$artboard-horizontal $$phone-6">1024×320</div>`
 }</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$artboard $$artboard-horizontal $$phone-6">1024×320</div>`
+}</pre>
 </Component>