8e:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1ylgxnc55m13a.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1lok2_u6v-esh.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1ylgxnc55m13a.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1lok2_u6v-esh.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_5hFPyo9PS1ZQGbtFVNABm5U4iHM5"],"SWRDataProvider"] 90:T3457,[V0_FILE]typescriptreact:file="app-card.tsx" isEdit="true" isMerged="true" import type React from "react" import { motion } from "framer-motion" import type { LucideIcon } from "lucide-react" interface AppCardProps { Icon: LucideIcon title: string description: string onClick: () => void } export const AppCard: React.FC = ({ Icon, title, description, onClick }) => { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="carousel-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { motion } from "framer-motion" import type { LucideIcon } from "lucide-react" interface AppCardProps { Icon: LucideIcon title: string description: string onClick: () => void } export const AppCard: React.FC = ({ Icon, title, description, onClick }) => { return (

{title}

{description}

Click Me

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import { Figtree } from "next/font/google" import "./globals.css" import type React from "react" // Import React const figtree = Figtree({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Flowers & Saints Toast UI", description: "An interactive UI showcasing flowers and saints with toast notifications", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @layer base { body { font-family: "Figtree", sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Figtree", sans-serif; font-weight: 600; } .font-figtree { font-family: "Figtree", sans-serif; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import Demo from "../demo" export default function Page() { return } [V0_FILE]typescriptreact:file="demo.tsx" isEdit="true" "use client" import { ToastProvider, useToast } from "./toast-context" import { ToastContainer } from "./animated-toast" import { Carousel } from "./carousel" import { Flower, Cross, Sun, Moon, Cloud, Umbrella, Wind, Snowflake, Rainbow, Zap, Heart, Star } from "lucide-react" const FlowersAndSaintsUI = () => { const { addToast } = useToast() const items = [ { Icon: Flower, title: "Rose", description: "Symbol of love and passion", action: () => addToast("Roses symbolize love and passion", "flower"), }, { Icon: Cross, title: "St. Francis", description: "Patron saint of animals and nature", action: () => addToast("St. Francis is known for his love of nature", "saint"), }, { Icon: Sun, title: "Sunflower", description: "Symbol of adoration and loyalty", action: () => addToast("Sunflowers always face the sun", "flower"), }, { Icon: Moon, title: "St. Clare", description: "Patron saint of television", action: () => addToast("St. Clare is the patron saint of television", "saint"), }, { Icon: Cloud, title: "Lily", description: "Symbol of purity and refined beauty", action: () => addToast("Lilies represent purity and refined beauty", "flower"), }, { Icon: Umbrella, title: "St. Patrick", description: "Patron saint of Ireland", action: () => addToast("St. Patrick is famous for banishing snakes from Ireland", "saint"), }, { Icon: Wind, title: "Dandelion", description: "Symbol of wishes and dreams", action: () => addToast("Dandelions are known for granting wishes", "flower"), }, { Icon: Snowflake, title: "St. Nicholas", description: "Patron saint of children", action: () => addToast("St. Nicholas is the inspiration for Santa Claus", "saint"), }, { Icon: Rainbow, title: "Iris", description: "Symbol of hope and wisdom", action: () => addToast("Irises represent hope and wisdom", "flower"), }, { Icon: Zap, title: "St. Barbara", description: "Patron saint against lightning", action: () => addToast("St. Barbara is invoked against lightning and fire", "saint"), }, { Icon: Heart, title: "Forget-me-not", description: "Symbol of true love and memories", action: () => addToast("Forget-me-nots symbolize true love and memories", "flower"), }, { Icon: Star, title: "St. Dominic", description: "Patron saint of astronomers", action: () => addToast("St. Dominic is often depicted with a star", "saint"), }, ] return (

Flowers & Saints Toast UI

) } export default function Demo() { return ( ) } [V0_FILE]typescriptreact:file="toast-context.tsx" isEdit="true" "use client" import type React from "react" import { createContext, useContext, useState, useCallback } from "react" type ToastType = "flower" | "saint" | "warning" | "info" interface Toast { id: number message: string type: ToastType } interface ToastContextType { toasts: Toast[] addToast: (message: string, type: ToastType) => void removeToast: (id: number) => void } const ToastContext = createContext(undefined) export const useToast = () => { const context = useContext(ToastContext) if (!context) { throw new Error("useToast must be used within a ToastProvider") } return context } export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [toasts, setToasts] = useState([]) const addToast = useCallback((message: string, type: ToastType) => { setToasts((prevToasts) => [...prevToasts, { id: Date.now(), message, type }]) }, []) const removeToast = useCallback((id: number) => { setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id)) }, []) return {children} } [V0_FILE]typescriptreact:file="animated-toast.tsx" isEdit="true" "use client" import type React from "react" import { useEffect, useCallback } from "react" import { motion, AnimatePresence } from "framer-motion" import { Flower, Cross, AlertTriangle, Info } from "lucide-react" import { useToast } from "./toast-context" const icons = { flower: Flower, saint: Cross, warning: AlertTriangle, info: Info, } const colors = { flower: "text-pink-500", saint: "text-indigo-500", warning: "text-yellow-500", info: "text-blue-500", } interface ToastProps { id: number message: string type: "flower" | "saint" | "warning" | "info" } const AnimatedToast: React.FC = ({ id, message, type }) => { const { removeToast } = useToast() const Icon = icons[type] const handleRemove = useCallback(() => { removeToast(id) }, [id, removeToast]) useEffect(() => { const timer = setTimeout(handleRemove, 3000) return () => clearTimeout(timer) }, [handleRemove]) return (

{message}

) } export const ToastContainer: React.FC = () => { const { toasts } = useToast() return (

{toasts.map((toast) => ( ))}

) } [V0_FILE]typescriptreact:file="carousel.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronLeft, ChevronRight } from "lucide-react" import { AppCard } from "./carousel-card" const noScrollbarCSS = ` .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } ` interface CarouselProps { items: Array<{ Icon: React.ElementType title: string description: string action: () => void }> } export const Carousel: React.FC = ({ items }) => { const carouselRef = useRef(null) const [canScrollLeft, setCanScrollLeft] = useState(false) const [canScrollRight, setCanScrollRight] = useState(true) const updateScrollButtons = () => { if (carouselRef.current) { const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current setCanScrollLeft(scrollLeft > 0) setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10) } } useEffect(() => { const carousel = carouselRef.current if (carousel) { carousel.addEventListener("scroll", updateScrollButtons) return () => carousel.removeEventListener("scroll", updateScrollButtons) } }, [carouselRef.current]) // Added carouselRef.current as a dependency const scroll = (direction: "left" | "right") => { if (carouselRef.current) { const { scrollLeft, clientWidth } = carouselRef.current const scrollTo = direction === "left" ? scrollLeft - clientWidth / 2 : scrollLeft + clientWidth / 2 carouselRef.current.scrollTo({ left: scrollTo, behavior: "smooth" }) } } return ( <>

{items.map((item, index) => ( ))} {canScrollLeft && ( scroll("left")} className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/80 backdrop-blur-md rounded-full p-2 shadow-lg transition-colors hover:bg-white" > )} {canScrollRight && ( scroll("right")} className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/80 backdrop-blur-md rounded-full p-2 shadow-lg transition-colors hover:bg-white" > )}

) } 84:["$","$L8e",null,{"chatId":"Vjs2ppoptGl","children":["$","$L8f",null,{"data":{"@\"active-block\",\"Vjs2ppoptGl\",":{"id":"b_qqdZTM1ROMn","messageId":"HcFDB7frHLG0ZWFHsfhN0O5hYIEmcayq","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"animated-toast","type":"code-project","project":"animated-toast"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Vjs2ppoptGl\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This