) } `,__src__:"registry/default/example/share-button-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Image "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "next/image"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Facebook"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Link"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Link2"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Linkedin"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Twitter "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ShareButton "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "../ui/share-button"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"//"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" Example usage"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ShareButtonDemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"():"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" shareLinks "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" icon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Twitter"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://twitter.com/share"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" label"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Share on Twitter"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" icon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Facebook"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://facebook.com/share"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" label"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Share on Facebook"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" icon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Linkedin"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://linkedin.com/share"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" label"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Share on LinkedIn"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" icon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Link"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" navigator"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"clipboard"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"writeText"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"href"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" label"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Copy link"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ]"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ShareButton links"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"shareLinks"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'" text-lg font-medium "'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Link size"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={15}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Share"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsx)(l.p,{children:"Install the required dependencies."}),` `,(0,n.jsxs)(o,{defaultValue:"cli",children:[(0,n.jsxs)(r,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(t,{value:"cli",children:(0,n.jsx)(d,{children:(0,n.jsxs)(F,{children:[(0,n.jsx)(l.p,{children:"Paste the below command in your terminal"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npx shadcn@latest add "http://legacy.skiper-ui.com/registry/share-button.json" `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "http://legacy.skiper-ui.com/registry/share-button.json"'})]})})})})]})})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsxs)(F,{children:[(0,n.jsx)(l.p,{children:"Install the required dependencies."}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npm i framer-motion clsx tailwind-merge `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npm"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" i"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" tailwind-merge"})]})})})})]}),(0,n.jsxs)(F,{children:[(0,n.jsx)(l.p,{children:"Add util file"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"bash","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue,"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "clsx"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" function cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:".."}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:".inputs:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue[]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8",fontWeight:"bold"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"clsx(inputs"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),(0,n.jsxs)(F,{children:["Copy the source code to ",(0,n.jsx)(l.code,{children:"components/ui/share-button.tsx"})," "]}),(0,n.jsx)(h,{name:"share-button",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import React, { useState } from "react" import { LucideIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface ShareLink { icon: LucideIcon href?: string onClick?: () => void label?: string } interface ShareButtonProps extends React.ButtonHTMLAttributes { links: ShareLink[] children: React.ReactNode } const ShareButton = ({ className, links, children, ...props }: ShareButtonProps) => { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{links.map((link, index) => { const Icon = link.icon return ( ) })}

) } export ShareButton `,__src__:"registry/default/ui/share-button.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" LucideIcon "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ShareLink"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" icon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LucideIcon"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" href"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" void"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" label"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ShareButtonProps"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" extends"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"ButtonHTMLAttributes"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLButtonElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" links"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ShareLink"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"[]"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" children"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"ReactNode"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ShareButton"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" links"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" children"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ShareButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isHovered"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsHovered"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onMouseEnter"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsHovered"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onMouseLeave"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsHovered"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "relative min-w-40 rounded-3xl "'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-white dark:bg-black"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "hover:bg-gray-50 dark:hover:bg-gray-950"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "border border-black/10 dark:border-white/10"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "transition-all duration-300"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isHovered "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "opacity-0"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "opacity-100"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"span className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex items-center gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute left-0 top-0 flex h-10"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"links"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"link"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Icon "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" link"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"icon"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"link"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "h-10"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "w-10"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-black dark:bg-white"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-white dark:text-black"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "transition-all duration-300"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "rounded-l-3xl"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" links"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"length "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "rounded-r-3xl"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "border-r border-white/10 last:border-r-0 dark:border-black/10"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "hover:bg-gray-900 dark:hover:bg-gray-100"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' ""'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isHovered"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "translate-x-0 opacity-100"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "-translate-x-full opacity-0"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "transition-all duration-200"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "delay-[50ms] transition-all duration-200"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 2"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "transition-all delay-100 duration-200"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 3"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "transition-all delay-150 duration-200"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"size-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" })}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ShareButton"})]})]})})})}),(0,n.jsx)(F,{children:"Update the import paths to match your project setup."})]})})]})]})}function L(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(u,e)})):u(e)}var C=L;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return S(B);})(); ;return Component;

Share Button

Installation

Paste the below command in your terminal npx shadcn@latest add "http://legacy.skiper-ui.com/registry/share-button.json"Copy

Paste the below command in your terminal
`npx shadcn@latest add "http://legacy.skiper-ui.com/registry/share-button.json"`