From 5881ef290b248a97bfb843a130585702cf0c771d Mon Sep 17 00:00:00 2001
From: Victor Trinh <victor.trinh@gsoft.com>
Date: Wed, 13 Nov 2024 16:16:47 -0500
Subject: [PATCH] Add Stackblitz logo

---
 .storybook/components/canvas/Canvas.tsx          |  12 ++++++++++--
 .storybook/components/canvas/assets/index.tsx    |   3 +++
 .../components/canvas/assets/stackblitz.png      | Bin 0 -> 1209 bytes
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .storybook/components/canvas/assets/index.tsx
 create mode 100644 .storybook/components/canvas/assets/stackblitz.png

diff --git a/.storybook/components/canvas/Canvas.tsx b/.storybook/components/canvas/Canvas.tsx
index a973f0dcf..5e2d49528 100644
--- a/.storybook/components/canvas/Canvas.tsx
+++ b/.storybook/components/canvas/Canvas.tsx
@@ -1,5 +1,8 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { Canvas as StorybookCanvas } from "@storybook/blocks";
+import { Inline, Text } from "@components";
+import { Stackblitz } from "./assets/index.tsx";
+import { Image } from "@components/image/index.ts";
 
 interface Props extends ComponentProps<typeof StorybookCanvas> { }
 
@@ -8,7 +11,12 @@ export const Canvas = (props: Props) => (
         {...props}
         additionalActions={[
             {
-                title: "Open Orbiter Sandbox",
+                title: (
+                    <Inline gap="inline-sm">
+                        <Image src={Stackblitz} alt="Stackblitz" width="10px" height="auto" />
+                        Open Orbiter Sandbox
+                    </Inline>
+                ),
                 onClick: () => {
                     window.open(
                         "https://stackblitz.com/edit/orbiter-sandbox?file=src%2FComponent.tsx",
diff --git a/.storybook/components/canvas/assets/index.tsx b/.storybook/components/canvas/assets/index.tsx
new file mode 100644
index 000000000..f96294a79
--- /dev/null
+++ b/.storybook/components/canvas/assets/index.tsx
@@ -0,0 +1,3 @@
+import Stackblitz from "./stackblitz.png";
+
+export { Stackblitz };
diff --git a/.storybook/components/canvas/assets/stackblitz.png b/.storybook/components/canvas/assets/stackblitz.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc9d569a022b132397b6358936cb69e7d2e46921
GIT binary patch
literal 1209
zcmV;q1V;ObP)<h;3K|Lk000e1NJLTq001}u002%11^@s6b^X=C00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1WrjrK~#7F)tW(W
z)JPPD|7RyigEUfx1ZkF;8-(TTk`oM^fN%n4Hq(>Y5Ecj}EC?q^I03L?NjL%F1eiSy
zErCEJ?RwO6NR;l_?sC;D+x@LtZpZCE@44!)zYO%8>$}Hm%e(ofl}G#-9wg{7zdz(v
zgY*>`OU%3m4|*$5#GNFj5LX<?%~N>LOM&O&fYq~OInqOT&^v*v+q^VR_!%yU1JU7V
zi!yl7JAt3C@;+ngdGl;fp;rR0?bwl$`R4R--}V%GBXDJh?-9)3m%d<r;oF`<F9eD>
zhS@ItlJOh?bT07PF5j&bXZiJe8YFN59kRSLz6myal_wAmvTYh6fX*r?7R(O+`?V)=
z@&bVnI-qPKFJUwsq`x7M)+^{JPX6^l&)ylW3KW;(Bo1O;{3rK`>!2k>+?QYY)g_lw
zPG;Nl4=B*uDEj%Tu`UH}OCG`@lxU?zWg@rYHeJuxYR}?Yh)k_ZDMzh6g{T$u5U1Ln
zLNtNPJAAvbIOw)#aXmypT#DiJ4Vt6co`QM>&x0Z#l-pBK6?iEqYJ4-v6DXtBqRtkq
z8uj)RR4UlSf>pu@UOAMZBG3j!lPQ=7IVXFFK(Ig?tMA*~WE}wz(NRe5Qb&-$rWULc
zX4SdxBHjYMTuKFFlc=oy%J336D=2D0%=Rp<kA@UM5$G8-vEdRi-a{EC&Ke0UEZEQO
zEX)b1>xnXv=R_~%BjyA`{*Tj&UcsfbjvXWJ4+mHFX13_Oiu*WN+?LO^qiE?~UEg8z
z<V>7U+oG~p2hY9nP9S<d94t=kP*qm2YOk)Z5a=lXN_VD@myV)^1%vqy^Fx+@Oa2^{
zY}8z;pr!?Di7YqC#;9T!YGM?XpvYG40Q1ACxEiZ>E-)Y{>IT9n&yyRod~DI8K|xVR
z<j6N%OnMR;6m^2(JEMQE9J!pD%%ug}S~ze$-%j-WI!gXawj-3g;-Up}zm164wc~;P
ziQ7=XN1PCM`;6=|Rt0|QBd)jwL}KYNFQv!k69N$n_F<6RfG5!^n4aVsJ~kVFqYVTQ
zO&}o&efDZCnEQQ1;OE@>4*txvV6H@|;7OXV!xyn&O5%hl0`0(X7e0tMM+@ePy1?rX
zj@Q`rb&+Yt?iS1yb%ACv^{Spke8c}2)FXWT7l9b-XvkT_hX|-vaOGjKjken0PrNOd
zE2;uHHO=O}sfaHI+AZqtUP>aq7^qcnd3U_&x;(0i_+p^fqKv;B&&<Y#ZiQMfS5&N8
z18bIPx)c{wD(Gm<S{Em%2%Ncc5DP~6t+vIT{&XNN?McRLeArq%L<a;{@PthLP;Vo?
zuEYu9ElSm+XVZu;24OD()mXFG7R;3(fmPP5FXDu-7A;*l_(yy(@D_ObLeOM;iUk`E
z7B<l%{3}Q_J-7r%d@=Bv2TSI@PF#u$UKO0OX1x_BcnLhWX37y?47>!g$=}9^_+sz_
XPdpk__bEp?00000NkvXXu0mjfK+G&t

literal 0
HcmV?d00001