84:I[903690,["/chat-static/_next/static/immutable/chunks/1qi6shb-t5wtt.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/15m08g0r1sz7n.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/18b4wo94ces2k.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3-rpxpeg4t4b-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/2-uv90qpo53a-.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/10-4zakcw-uv1.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/0gt8okoh2nixy.js","/chat-static/_next/static/immutable/chunks/1p6oka4hjrcyn.js","/chat-static/_next/static/immutable/chunks/2f-ssp-khch03.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3u6ndbp3pwyc-.js"],"ExplicitChatIdProvider"] 85:I[838238,["/chat-static/_next/static/immutable/chunks/1qi6shb-t5wtt.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/15m08g0r1sz7n.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/18b4wo94ces2k.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3-rpxpeg4t4b-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/2-uv90qpo53a-.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/10-4zakcw-uv1.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/0gt8okoh2nixy.js","/chat-static/_next/static/immutable/chunks/1p6oka4hjrcyn.js","/chat-static/_next/static/immutable/chunks/2f-ssp-khch03.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3u6ndbp3pwyc-.js"],"SWRDataProvider"] 86:T1e72,[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { CustomToolbar } from "@/components/custom-toolbar" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/custom-toolbar.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Crop, MagicWand, SelectionBackground, Rainbow, Check } from "@phosphor-icons/react" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" import { Toggle } from "@/components/ui/toggle" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" const reframeOptions = ["16:9", "4:3", "1:1", "3:4", "9:16"] const restyleOptions = Array(9) .fill(null) .map((_, i) => `Style ${i + 1}`) export function CustomToolbar() { const [backgroundRemoval, setBackgroundRemoval] = useState(false) const [reframeOpen, setReframeOpen] = useState(false) const [restyleOpen, setRestyleOpen] = useState(false) const [activeReframe, setActiveReframe] = useState(null) const [activeRestyle, setActiveRestyle] = useState(null) const handleReframeSelect = (option: string) => { setActiveReframe((prevOption) => (prevOption === option ? null : option)) } const handleRestyleSelect = (option: string) => { setActiveRestyle((prevOption) => (prevOption === option ? null : option)) } return (

Open tools menu

Tools Reframe Duotone Remove background Video Beta Styles Beta Filters Number of people Lighting Admin Open admin tools Outpainter Focal Point Styles

Reframe your image

{reframeOptions.map((option) => ( ))}

Restyle your image

{restyleOptions.map((option) => ( ))}

{backgroundRemoval ? "Disable" : "Enable"} background removal

) } 7c:["$","$L84",null,{"chatId":"XzMyJvmpm3m","children":["$","$L85",null,{"data":{"@\"active-block\",\"XzMyJvmpm3m\",":{"id":"b_F3BQuZOAVQi","messageId":"rxDQx1TrwZvjuqyPVZUeYoLtWy5TMtUn","source":"$86","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"custom-toolbar","type":"code-project","project":"custom-toolbar"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"XzMyJvmpm3m\",":false,"":null},"children":"$L87"}]}]

About

Tags

Share

About

Tags

Share

More from pablostanley

More Templates Like This