Added video tutorial

apps/nextjs/src/components/toolbar.tsx

@@ -13,6 +13,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "./ui/tooltip";
+import { VideoTutorialPopover } from "./video-tutorial-popover";
 
 export interface ToolbarProps {
   exampleList: { example: string; content: string }[];
@@ -34,13 +35,15 @@ export const Toolbar = ({
 
   return (
     <div className="flex w-full justify-between border-b border-border p-2 md:px-4">
-      <div />
+      <div>
+        <VideoTutorialPopover />
+      </div>
       {/* <ToolbarExamples {...{ onExampleSelect, exampleList }} /> */}
 
       <div className="flex gap-2">
         <TooltipProvider>
-          <Tooltip open={!didConvertOnce}>
-            <TooltipTrigger>
+          <Tooltip defaultOpen={!didConvertOnce}>
+            <TooltipTrigger asChild>
               <Button
                 onClick={() => {
                   onConvert();
@@ -51,6 +54,7 @@ export const Toolbar = ({
                 Convert
               </Button>
             </TooltipTrigger>
+
             <TooltipContent side="left">
               {'Paste SVG below and click "Convert" to get SwiftUI code.'}
             </TooltipContent>

apps/nextjs/src/components/video-tutorial-popover.tsx

@@ -0,0 +1,32 @@
+import { IoLogoYoutube } from "react-icons/io5";
+
+import { Button } from "./ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+
+export const VideoTutorialPopover = () => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" className="flex gap-2">
+          <IoLogoYoutube size={20} />
+          {"Video Tutorial"}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="mx-4 w-[592px] p-4" alignOffset={0}>
+        <div className="min-h-[315px] min-w-[560px]">
+          <iframe
+            width="560"
+            height="315"
+            src="https://www.youtube.com/embed/jjfYmX4pmZU?si=vwVUXiB-_HdzqkWE"
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};