diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx index 3bcb426de3e..5e87d8826fd 100644 --- a/apps/www/components/Sections/TimedTabsSection.tsx +++ b/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) => ( ) interface Tab { label: string + paragraph?: string panel?: JSX.Element + colabUrl: string code?: string } @@ -143,12 +156,19 @@ const TimedTabsSection = ({ > {tabs.map((tab, i) => ( - - {tab.code} - + <> + + + {tab.code} + + ))} +
@@ -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} /> ))}
+
+ + + {tabs[activeTab]?.paragraph} + + +
) } +const OpenInColab = ({ colabUrl, className }: { colabUrl: string; className?: string }) => ( + + + Google Colaboratory logo + Open in Colab + + +) + export default TimedTabsSection diff --git a/apps/www/data/products/vector/pageData.tsx b/apps/www/data/products/vector/pageData.tsx index 901a456700f..c32769c48e6 100644 --- a/apps/www/data/products/vector/pageData.tsx +++ b/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") diff --git a/apps/www/public/images/logos/google-colaboratory.svg b/apps/www/public/images/logos/google-colaboratory.svg new file mode 100644 index 00000000000..163251b3ac8 --- /dev/null +++ b/apps/www/public/images/logos/google-colaboratory.svg @@ -0,0 +1,9 @@ + + + + + + + + +