Add colab link

apps/www/components/Sections/TimedTabsSection.tsx

@@ -1,20 +1,22 @@
 import React, { useState, useEffect, ReactNode } from 'react'
 import Link from 'next/link'
-import { motion, useAnimation } from 'framer-motion'
+import { AnimatePresence, motion, useAnimation } from 'framer-motion'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { Button, IconArrowUpRight } from 'ui'
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import { Swiper, SwiperSlide } from 'swiper/react'
+import Image from 'next/image'
 
 interface TabProps {
   label: string
+  paragraph?: string
   isActive: boolean
   onClick: VoidFunction
   progress: number | undefined
   intervalDuration?: number
 }
 
-const Tab = ({ isActive, label, onClick, progress, intervalDuration }: TabProps) => (
+const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration }: TabProps) => (
   <button
     onClick={onClick}
     className={`text-left text-lg flex flex-col group gap-1 transition-all ${
@@ -36,12 +38,23 @@ const Tab = ({ isActive, label, onClick, progress, intervalDuration }: TabProps)
       )}
     </div>
     {label}
+    {isActive && (
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1, transition: { delay: 0.2 } }}
+        className="hidden md:block text-scale-900 text-sm"
+      >
+        {paragraph}
+      </motion.p>
+    )}
   </button>
 )
 
 interface Tab {
   label: string
+  paragraph?: string
   panel?: JSX.Element
+  colabUrl: string
   code?: string
 }
 
@@ -143,12 +156,19 @@ const TimedTabsSection = ({
           >
             {tabs.map((tab, i) => (
               <SwiperSlide key={i}>
-                <CodeBlock key={i} lang="py" size="large" background="#1A1A1A">
-                  {tab.code}
-                </CodeBlock>
+                <>
+                  <OpenInColab colabUrl={tab.colabUrl} className="hidden md:flex" />
+                  <CodeBlock hideCopy key={i} lang="py" size="large" background="#1A1A1A">
+                    {tab.code}
+                  </CodeBlock>
+                </>
               </SwiperSlide>
             ))}
           </Swiper>
+          <OpenInColab
+            colabUrl={tabs[activeTab]?.colabUrl}
+            className="flex md:hidden !relative !top-0 !right-0 mt-8 w-full justify-center"
+          />
         </div>
       </div>
       <div className="w-full col-span-full flex gap-4 lg:gap-8 xl:gap-10" role="tablist">
@@ -157,14 +177,49 @@ const TimedTabsSection = ({
             key={index}
             isActive={index === activeTab}
             label={tab.label}
+            paragraph={tab.paragraph}
             onClick={() => handleTabClick(index)}
             progress={index === activeTab ? progress : undefined}
             intervalDuration={intervalDuration}
           />
         ))}
       </div>
+      <div className="block md:hidden">
+        <AnimatePresence exitBeforeEnter>
+          <motion.p
+            key={tabs[activeTab]?.paragraph}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, transition: { duration: 0.1, delay: 0.2 } }}
+            exit={{ opacity: 0, transition: { duration: 0.05 } }}
+            className="text-scale-900 text-sm"
+          >
+            {tabs[activeTab]?.paragraph}
+          </motion.p>
+        </AnimatePresence>
+      </div>
     </SectionContainer>
   )
 }
 
+const OpenInColab = ({ colabUrl, className }: { colabUrl: string; className?: string }) => (
+  <Link href={colabUrl}>
+    <a
+      target="_blank"
+      className={[
+        'absolute flex items-center top-4 right-4 z-10 h-10 bg-scale-300 hover:bg-scale-400 hover:text-scale-1000 text-sm text-scale-900 shadow-md rounded-full py-1 px-3 gap-2',
+        className,
+      ].join(' ')}
+    >
+      <Image
+        className="opacity-100 hover:opacity-80 transition-opacity"
+        src="/images/logos/google-colaboratory.svg"
+        alt="Google Colaboratory logo"
+        width={30}
+        height={30}
+      />
+      <span>Open in Colab</span>
+    </a>
+  </Link>
+)
+
 export default TimedTabsSection

apps/www/data/products/vector/pageData.tsx

@@ -173,6 +173,9 @@ export default {
     tabs: [
       {
         label: 'Store',
+        paragraph: 'Efficiently upsert millions of vectors along with important metadata.',
+        colabUrl:
+          'https://colab.research.google.com/github/supabase/supabase/blob/master/examples/ai/vector_hello_world.ipynb',
         code: `
 docs = vx.create_collection(name="docs", dimension=3)
 
@@ -195,6 +198,10 @@ docs.upsert(
       },
       {
         label: 'Index',
+        paragraph:
+          'Build indexes using Cosine distance, L2-Norm distance, or Max Inner Product for fast and efficient querying.',
+        colabUrl:
+          'https://colab.research.google.com/github/supabase/supabase/blob/master/examples/ai/vector_hello_world.ipynb',
         code: `
 # get an existing collection
 docs = vx.get_collection(name="docs")
@@ -214,6 +221,9 @@ docs.create_index()
       },
       {
         label: 'Query',
+        paragraph: 'Efficient querying and filtering of results based on vector metadata.',
+        colabUrl:
+          'https://colab.research.google.com/github/supabase/supabase/blob/master/examples/ai/vector_hello_world.ipynb',
         code: `
 # get an existing collection
 docs = vx.get_collection(name="docs")

apps/www/public/images/logos/google-colaboratory.svg

@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7591 7.2253C19.5105 7.24036 17.3585 8.14142 15.77 9.733C14.199 11.3081 13.3043 13.4339 13.2764 15.6584C13.2484 17.8828 14.0894 20.0305 15.6204 21.6445L18.5294 18.7355C17.7691 17.8927 17.3615 16.7901 17.3907 15.6553C17.42 14.5206 17.884 13.4405 18.6867 12.638C19.4895 11.8355 20.5698 11.372 21.7046 11.3431C22.8393 11.3143 23.9418 11.7223 24.7843 12.4829L27.6957 9.56915C26.094 8.05016 23.9665 7.21018 21.7591 7.2253ZM9.76907 7.2372C7.5613 7.22267 5.43365 8.0635 3.83226 9.58336L6.73653 12.4876C7.57887 11.7254 8.68208 11.3163 9.81773 11.345C10.9534 11.3738 12.0345 11.8382 12.8372 12.642L14.9435 9.0301L14.8224 8.93269C13.3619 7.84303 11.5912 7.24894 9.76907 7.2372ZM27.9996 9.87547L25.0977 12.7797C25.8632 13.6217 26.2752 14.7261 26.2482 15.8637C26.2212 17.0013 25.7572 18.0849 24.9525 18.8895C24.1479 19.6942 23.0643 20.1581 21.9267 20.1852C20.7891 20.2122 19.6847 19.8002 18.8428 19.0347L15.9195 21.958C17.5369 23.4849 19.6857 24.321 21.9097 24.2889C24.1337 24.2568 26.2575 23.359 27.8301 21.7861C29.4027 20.2132 30.3001 18.0891 30.3318 15.8652C30.3634 13.6412 29.5268 11.4925 27.9996 9.87547ZM3.52836 9.88738C2.02206 11.4743 1.18209 13.5787 1.18164 15.7666C1.18119 17.9546 2.02029 20.0593 3.52593 21.6468L6.43737 18.7354C5.6996 17.9221 5.29051 16.8636 5.28962 15.7656C5.28872 14.6676 5.69607 13.6084 6.43251 12.794L3.52836 9.88738ZM12.8372 18.9041C11.161 20.5822 8.48121 20.6179 6.7437 19.0418L3.83226 21.9508C6.83152 24.7843 11.4394 25.0788 14.7726 22.6134L14.9387 22.478L12.8372 18.9041Z" fill="url(#paint0_linear_4348_102486)"/>
+<defs>
+<linearGradient id="paint0_linear_4348_102486" x1="1.18164" y1="24.2898" x2="16.0616" y2="-1.12903" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDED" stop-opacity="0.5"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>