) } `,__src__:"registry/new-york/examples/magnify-app-icons-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" MagnifyAppIcons "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/magnify-app-icons"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MagnifyAppIconsDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"MagnifyAppIcons"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" currentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"postgres"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import MagnifyAppIcons from "@/components/prodkt/magnify-app-icons" export function MagnifyAppIconsDemo() { return (

) } `,__src__:"registry/default/examples/magnify-app-icons-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" MagnifyAppIcons "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/prodkt/magnify-app-icons"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MagnifyAppIconsDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"MagnifyAppIcons"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" currentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"postgres"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h2,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(p,{defaultValue:"cli",children:[(0,l.jsxs)(E,{children:[(0,l.jsx)(t,{value:"cli",children:"CLI"}),(0,l.jsx)(t,{value:"manual",children:"Manual"})]}),(0,l.jsx)(i,{value:"cli",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx sparkstack@latest add magnify-app-icons `,__npmCommand__:`npx sparkstack@latest add magnify-app-icons `,__yarnCommand__:`npx sparkstack@latest add magnify-app-icons `,__pnpmCommand__:`pnpm dlx sparkstack@latest add magnify-app-icons `,__bunCommand__:`bunx --bun sparkstack@latest add magnify-app-icons `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" sparkstack@latest"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" magnify-app-icons"})]})})})})}),(0,l.jsx)(i,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(r,{children:"Install the following dependencies:"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install react-use `,__npmCommand__:`npm install react-use `,__yarnCommand__:`yarn add react-use `,__pnpmCommand__:`pnpm add react-use `,__bunCommand__:`bun add react-use `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" react-use"})]})})})}),(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(o,{name:"magnify-app-icons",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useRef } from "react" import { products as PRODUCTS, PRODUCT_NAMES, PRODUCT_SHORTNAMES, } from "@/shared-data/products" import { motion, useInView, useMotionValue, useSpring, useTransform, type MotionValue, } from "framer-motion" import { DEFAULT_TRANSITION } from "@/lib/animations" import { cn } from "@/lib/utils" import { useBreakpoint } from "@/hooks/use-breakpoint" import type { Products } from "./app-icons-section" function MagnifyAppIcons({ currentProduct, }: { currentProduct: Products | string }) { const mouseX = useMotionValue(Number.POSITIVE_INFINITY) return ( mouseX.set(e.pageX)} onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)} className="relative mx-auto w-full max-w-md grid grid-cols-3 md:flex items-center justify-center gap-y-8 md:gap-2 px-4" > {Object.entries(products).map(([key, product], i) => ( ))} ) } function Product({ mouseX, product, index, isCurrentProduct, }: { mouseX: MotionValue product: any index: number isCurrentProduct: boolean }) { let ref = useRef(null) const isInView = useInView(ref, { margin: "-25%", once: true }) const isMobile = useBreakpoint(768) let distance = useTransform(mouseX, (val) => { let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 } return val - bounds.x - bounds.width / 2 }) const initialWidth = isMobile ? 50 : 65 let widthSync = useTransform( distance, [-100, 0, 100], [initialWidth, 80, initialWidth] ) let width = useSpring(widthSync, { mass: 0.1, stiffness: 150, damping: 12 }) const xDelta = 91 const initial = { x: isMobile ? 0 : index * -xDelta + 225, } const animate = { x: 0, transition: { ...DEFAULT_TRANSITION, delay: 0.5 }, } return (

) } const products = { database: { shortname: PRODUCT_SHORTNAMES.DATABASE, name: PRODUCT_NAMES.DATABASE, icon: PRODUCTS.database.icon[24], description: "Every project is a full Postgres database, the world's most trusted relational database.", description_short: "", label: "", url: "/database", }, authentication: { shortname: PRODUCT_SHORTNAMES.AUTHENTICATION, name: PRODUCT_NAMES.AUTHENTICATION, icon: PRODUCTS.authentication.icon[24], description: "Add user sign ups and logins, securing your data with Row Level Security.", description_short: "", label: "", url: "/auth", }, storage: { shortname: PRODUCT_SHORTNAMES.STORAGE, name: PRODUCT_NAMES.STORAGE, icon: PRODUCTS.storage.icon[24], description: "Store, organize, and serve large files. Any media, including videos and images.", description_short: "", label: "", url: "/storage", }, "edge-functions": { shortname: PRODUCT_SHORTNAMES.FUNCTIONS, name: PRODUCT_NAMES.FUNCTIONS, icon: PRODUCTS.functions.icon[24], description: "Write custom code without deploying or scaling servers.", description_short: "", label: "", url: "/edge-functions", }, realtime: { shortname: PRODUCT_SHORTNAMES.REALTIME, name: PRODUCT_NAMES.REALTIME, icon: PRODUCTS.realtime.icon[24], description: "Create multiplayer experiences by sharing, broadcasting, and listening to changes from other clients or the Database.", description_short: "", label: "", url: "/realtime", }, vector: { shortname: PRODUCT_SHORTNAMES.VECTOR, name: PRODUCT_NAMES.VECTOR, icon: PRODUCTS.vector.icon[24], description: "Integrate your favorite ML-models to store, index and search vector embeddings.", description_short: "", label: "", url: "/vector", }, } export MagnifyAppIcons `,__src__:"registry/new-york/prodkt/magnify-app-icons.tsx",__style__:"new-york",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useRef } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" products "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PRODUCTS,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PRODUCT_NAMES,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PRODUCT_SHORTNAMES,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/shared-data/products"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" motion,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useInView,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useMotionValue,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useSpring,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useTransform,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" MotionValue,"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "framer-motion"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { DEFAULT_TRANSITION } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/animations"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useBreakpoint } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/hooks/use-breakpoint"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Products } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "./app-icons-section"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MagnifyAppIcons"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" currentProduct"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" currentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Products"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMotionValue"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(Number.POSITIVE_INFINITY)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onMouseMove"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"e"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mouseX."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"set"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(e.pageX)}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onMouseLeave"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mouseX."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"set"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(Number.POSITIVE_INFINITY)}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative mx-auto w-full max-w-md grid grid-cols-3 md:flex items-center justify-center gap-y-8 md:gap-2 px-4"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {Object."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"entries"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(products)."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"((["}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"key"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"product"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"], "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"i"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Product"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{mouseX}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" product"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" isCurrentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product.shortname "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" currentProduct}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{i}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{key}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Product"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" product"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" isCurrentProduct"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MotionValue"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" product"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" any"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" isCurrentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" boolean"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ref "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" isInView"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useInView"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(ref, { margin: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"-25%"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", once: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" isMobile"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useBreakpoint"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"768"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" distance "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(mouseX, ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"val"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" bounds "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ref.current?."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getBoundingClientRect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { x: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", width: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" val "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" bounds.x "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" bounds.width "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"/"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 2"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" initialWidth"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" isMobile "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 50"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 65"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" widthSync "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" distance,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [initialWidth, "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"80"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", initialWidth]"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" width "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useSpring"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(widthSync, { mass: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", stiffness: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"150"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", damping: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"12"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" xDelta"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 91"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" initial"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" x: isMobile "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" index "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"*"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" -"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"xDelta "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 225"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" x: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" transition: { "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"DEFAULT_TRANSITION"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.5"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "relative mx-auto md:w-[150px] bg-transparent group"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" isCurrentProduct "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "z-10"'}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "z-0"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" initial"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{initial}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{isInView "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" animate "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" initial}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"a"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" href"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product.url}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex w-full flex-col items-center text-center group"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{isMobile "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" any"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { width, willChange: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"width"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative w-[30px] !min-w-[30px] md:!min-w-[50px] aspect-square will-change-transform bg-background rounded-xl border p-3 text-foreground-lighter group-hover:text-foreground"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"svg"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"100%"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"100%"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" viewBox"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"0 0 24 24"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" fill"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"none"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" xmlns"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" fillRule"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"evenodd"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" clipRule"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"evenodd"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" d"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product.icon}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" stroke"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"currentColor"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeWidth"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1.5"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeLinecap"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeLinejoin"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-foreground flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {product.name}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" products"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" database: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"DATABASE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"DATABASE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".database.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:` "Every project is a full Postgres database, the world's most trusted relational database."`}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/database"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" authentication: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"AUTHENTICATION"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"AUTHENTICATION"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".authentication.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Add user sign ups and logins, securing your data with Row Level Security."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/auth"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" storage: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"STORAGE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"STORAGE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".storage.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Store, organize, and serve large files. Any media, including videos and images."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/storage"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "edge-functions"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FUNCTIONS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FUNCTIONS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".functions.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Write custom code without deploying or scaling servers."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/edge-functions"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" realtime: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"REALTIME"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"REALTIME"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".realtime.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Create multiplayer experiences by sharing, broadcasting, and listening to changes from other clients or the Database."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/realtime"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" vector: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"VECTOR"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"VECTOR"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".vector.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Integrate your favorite ML-models to store, index and search vector embeddings."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/vector"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" MagnifyAppIcons"})]})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useRef } from "react" import { products as PRODUCTS, PRODUCT_NAMES, PRODUCT_SHORTNAMES, } from "@/shared-data/products" import { motion, useInView, useMotionValue, useSpring, useTransform, type MotionValue, } from "framer-motion" import { DEFAULT_TRANSITION } from "@/lib/animations" import { cn } from "@/lib/utils" import { useBreakpoint } from "@/hooks/use-breakpoint" import type { Products } from "./app-icons-section" function MagnifyAppIcons({ currentProduct, }: { currentProduct: Products | string }) { const mouseX = useMotionValue(Number.POSITIVE_INFINITY) return ( mouseX.set(e.pageX)} onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)} className="relative mx-auto w-full max-w-md grid grid-cols-3 md:flex items-center justify-center gap-y-8 md:gap-8 px-4" > {Object.entries(products).map(([key, product], i) => ( ))} ) } function Product({ mouseX, product, index, isCurrentProduct, }: { mouseX: MotionValue product: any index: number isCurrentProduct: boolean }) { let ref = useRef(null) const isInView = useInView(ref, { margin: "-25%", once: true }) const isMobile = useBreakpoint(768) let distance = useTransform(mouseX, (val) => { let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 } return val - bounds.x - bounds.width / 2 }) const initialWidth = isMobile ? 50 : 65 let widthSync = useTransform( distance, [-100, 0, 100], [initialWidth, 80, initialWidth] ) let width = useSpring(widthSync, { mass: 0.1, stiffness: 150, damping: 20 }) const xDelta = 91 const initial = { x: isMobile ? 0 : index * -xDelta + 225, } const animate = { x: 0, transition: { ...DEFAULT_TRANSITION, delay: 0.5 }, } return (

{product.name}

) } const products = { database: { shortname: PRODUCT_SHORTNAMES.DATABASE, name: PRODUCT_NAMES.DATABASE, icon: PRODUCTS.database.icon[24], description: "Every project is a full Postgres database, the world's most trusted relational database.", description_short: "", label: "", url: "/database", }, authentication: { shortname: PRODUCT_SHORTNAMES.AUTHENTICATION, name: PRODUCT_NAMES.AUTHENTICATION, icon: PRODUCTS.authentication.icon[24], description: "Add user sign ups and logins, securing your data with Row Level Security.", description_short: "", label: "", url: "/auth", }, storage: { shortname: PRODUCT_SHORTNAMES.STORAGE, name: PRODUCT_NAMES.STORAGE, icon: PRODUCTS.storage.icon[24], description: "Store, organize, and serve large files. Any media, including videos and images.", description_short: "", label: "", url: "/storage", }, "edge-functions": { shortname: PRODUCT_SHORTNAMES.FUNCTIONS, name: PRODUCT_NAMES.FUNCTIONS, icon: PRODUCTS.functions.icon[24], description: "Write custom code without deploying or scaling servers.", description_short: "", label: "", url: "/edge-functions", }, realtime: { shortname: PRODUCT_SHORTNAMES.REALTIME, name: PRODUCT_NAMES.REALTIME, icon: PRODUCTS.realtime.icon[24], description: "Create multiplayer experiences by sharing, broadcasting, and listening to changes from other clients or the Database.", description_short: "", label: "", url: "/realtime", }, vector: { shortname: PRODUCT_SHORTNAMES.VECTOR, name: PRODUCT_NAMES.VECTOR, icon: PRODUCTS.vector.icon[24], description: "Integrate your favorite ML-models to store, index and search vector embeddings.", description_short: "", label: "", url: "/vector", }, } export MagnifyAppIcons `,__src__:"registry/default/prodkt/magnify-app-icons.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useRef } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" products "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PRODUCTS,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PRODUCT_NAMES,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PRODUCT_SHORTNAMES,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/shared-data/products"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" motion,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useInView,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useMotionValue,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useSpring,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" useTransform,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" MotionValue,"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "framer-motion"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { DEFAULT_TRANSITION } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/animations"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useBreakpoint } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/hooks/use-breakpoint"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Products } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "./app-icons-section"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MagnifyAppIcons"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" currentProduct"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" currentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Products"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMotionValue"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(Number.POSITIVE_INFINITY)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onMouseMove"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"e"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mouseX."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"set"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(e.pageX)}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onMouseLeave"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" mouseX."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"set"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(Number.POSITIVE_INFINITY)}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative mx-auto w-full max-w-md grid grid-cols-3 md:flex items-center justify-center gap-y-8 md:gap-8 px-4"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {Object."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"entries"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(products)."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"((["}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"key"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"product"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"], "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"i"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Product"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{mouseX}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" product"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" isCurrentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product.shortname "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" currentProduct}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{i}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{key}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Product"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" product"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" isCurrentProduct"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" mouseX"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MotionValue"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" product"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" any"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" isCurrentProduct"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" boolean"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ref "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" isInView"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useInView"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(ref, { margin: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"-25%"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", once: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" isMobile"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useBreakpoint"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"768"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" distance "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(mouseX, ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"val"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" bounds "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ref.current?."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getBoundingClientRect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { x: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", width: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" val "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" bounds.x "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" bounds.width "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"/"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 2"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" initialWidth"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" isMobile "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 50"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 65"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" widthSync "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" distance,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [initialWidth, "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"80"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", initialWidth]"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" width "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useSpring"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(widthSync, { mass: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", stiffness: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"150"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", damping: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"20"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" xDelta"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 91"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" initial"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" x: isMobile "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" index "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"*"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" -"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"xDelta "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 225"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" x: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" transition: { "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"DEFAULT_TRANSITION"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", delay: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0.5"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "relative mx-auto md:w-[150px] bg-transparent group"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" isCurrentProduct "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "z-10"'}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "z-0"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" initial"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{initial}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{isInView "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" animate "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" initial}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"a"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" href"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product.url}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex w-full flex-col items-center text-center group"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{isMobile "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" any"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { width, willChange: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"width"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"relative w-[30px] !min-w-[30px] md:!min-w-[50px] aspect-square will-change-transform bg-background rounded-xl p-4 text-foreground group-hover:text-foreground outline outline-1 outline-ring-disabled -outline-offset-2 border border-border-disabled ring-2 ring-offset-1 ring-offset-ring-disabled ring-inset ring-ring-disabled"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"svg"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"100%"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"100%"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" viewBox"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"0 0 24 24"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" fill"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"none"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" xmlns"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" fillRule"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"evenodd"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" clipRule"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"evenodd"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" d"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{product.icon}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" stroke"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"currentColor"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeWidth"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1.25"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeLinecap"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeLinejoin"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-muted group-hover:text-foreground flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-80 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-[0.625rem] mt-2"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {product.name}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" products"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" database: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"DATABASE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"DATABASE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".database.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:` "Every project is a full Postgres database, the world's most trusted relational database."`}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/database"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" authentication: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"AUTHENTICATION"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"AUTHENTICATION"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".authentication.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Add user sign ups and logins, securing your data with Row Level Security."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/auth"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" storage: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"STORAGE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"STORAGE"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".storage.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Store, organize, and serve large files. Any media, including videos and images."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/storage"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "edge-functions"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FUNCTIONS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"FUNCTIONS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".functions.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Write custom code without deploying or scaling servers."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/edge-functions"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" realtime: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"REALTIME"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"REALTIME"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".realtime.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Create multiplayer experiences by sharing, broadcasting, and listening to changes from other clients or the Database."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/realtime"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" vector: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" shortname: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_SHORTNAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"VECTOR"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCT_NAMES"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"VECTOR"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" icon: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PRODUCTS"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".vector.icon["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"24"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description:"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "Integrate your favorite ML-models to store, index and search vector embeddings."'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" description_short: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" label: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" url: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"/vector"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" MagnifyAppIcons"})]})]})})})]}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."}),(0,l.jsxs)(r,{children:["Update ",(0,l.jsx)(n.code,{children:"tailwind.config.js"})]}),(0,l.jsxs)(n.p,{children:["Add the following animations to your ",(0,l.jsx)(n.code,{children:"tailwind.config.js"})," file:"]}),(0,l.jsxs)(n.div,{"data-rehype-pretty-code-fragment":"",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"tailwind.config.js"}),(0,l.jsx)(n.pre,{"data-language":"js","data-theme":"default",__withMeta__:!0,__rawString__:`/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: {}, }, } `,children:(0,l.jsxs)(n.code,{"data-language":"js","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line line--highlighted",children:[(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/** "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"@type"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" {import('tailwindcss').Config}"}),(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" */"})]}),` `,(0,l.jsxs)(n.span,{className:"line line--highlighted",children:[(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"module"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"exports"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" theme: {"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" extend: {},"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"usage",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { MagnifyAppIcons } from "@/components/ui/magnify-app-icons" `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { MagnifyAppIcons } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/magnify-app-icons"'})]})})})}),` `,(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"MagnifyAppIcons"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]})})})})]})}function u(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(m,{...e})}):m(e)}function c(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return S(b);})(); ;return Component;

Magnify App Icons

Installation

Usage