React tab for code snippets (saadeghi#1035)

* fix: grammatical errors

* updated keys to match en.json

* fixed: Typo

* Revert "fixed: Typo"

This reverts commit 90499cc.

* fixed: Typo

* Revert "fixed: Typo"

This reverts commit 7aa377e.

* fix typo

* React tab for Code Snippets

* Update mockup-code.svelte.md

* JSX Syntax

* JSX Syntax

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>