-
- );
-
- if (isMobile) {
- return (
- <>
-
-
-
-
-
- Background Gradients
-
-
-
-
- {[...customBackgrounds, ...gradientPresets].map((gradient, index) => (
-
- ))}
-
-
-
-
-
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/editor/Canvas.tsx b/src/components/editor/Canvas.tsx
deleted file mode 100644
index 4800841..0000000
--- a/src/components/editor/Canvas.tsx
+++ /dev/null
@@ -1,536 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { toast } from 'sonner';
-import { extractDominantColor } from '@/utils/colorExtractor';
-import { ImageIcon, Clipboard } from 'lucide-react';
-import { useMockupStore } from '@/contexts/MockupContext';
-import { Button } from '@/components/ui/button';
-
-// Responsive configuration
-const getResponsiveConfig = () => {
- const viewportWidth = window.innerWidth;
- const viewportHeight = window.innerHeight;
- const isMobile = viewportWidth < 768;
- const isTablet = viewportWidth >= 768 && viewportWidth < 1024;
- const basePadding = isMobile ? 40 : isTablet ? 100 : 200;
- const scaleMultiplier = isMobile ? 0.95 : isTablet ? 0.85 : 0.8;
- const maxWidth = isMobile ? 1000 : isTablet ? 1100 : 1200;
- const maxHeight = isMobile ? 700 : isTablet ? 750 : 800;
- const availableWidth = viewportWidth - basePadding;
- const availableHeight = viewportHeight - basePadding;
- const maxContainerWidth = Math.min(availableWidth * scaleMultiplier, maxWidth);
- const maxContainerHeight = Math.min(availableHeight * scaleMultiplier, maxHeight);
- return {
- isMobile,
- isTablet,
- basePadding,
- scaleMultiplier,
- maxContainerWidth,
- maxContainerHeight,
- dropZoneWidth: isMobile ? '95%' : isTablet ? '70%' : '60%',
- dropZoneHeight: isMobile ? '60%' : '50%',
- };
-};
-
-// Smart image optimization utility - only compress if needed
-const optimizeImage = (file: File): Promise
-
- );
-};
\ No newline at end of file
diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx
deleted file mode 100644
index c8cf22e..0000000
--- a/src/components/editor/Editor.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-
-import React from 'react';
-import { Canvas } from './Canvas';
-import { Backgrounds } from './Backgrounds';
-import { Navbar } from './Navbar';
-import { FloatingBar } from './FloatingBar';
-
-export const Editor: React.FC = () => {
- return (
-
-
-
- {uploadedImage ? (
-
-
-
-
- ) : (
-
- 
e.stopPropagation()}
- />
- {isDragOver && (
-
-
-
- )}
- {showPasteHint && (
-
- {getDropZoneOverlayText().primaryText}
-
-
-
- )}
-
-
- fileInputRef.current?.click()}
- >
-
- )}
-
-
- {isDragOver && (
-
-
-
- - Drop image here or click to upload -
-- Supports JPG, PNG -
-
-
-
-
- )}
-
- Drop image here
-
-
-
- );
-};
diff --git a/src/components/editor/FloatingBar.tsx b/src/components/editor/FloatingBar.tsx
deleted file mode 100644
index b10cb54..0000000
--- a/src/components/editor/FloatingBar.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { Button } from '@/components/ui/button';
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { Separator } from '@/components/ui/separator';
-import {
- Move,
- Undo,
- SquareDashed,
- Rotate3D
-} from 'lucide-react';
-import { RotationSkewPanel } from './RotationSkewPanel';
-import { PositionScalePanel } from './PositionScalePanel';
-import { ImageBorderPanel } from './ImageBorderPanel';
-import { useMobile } from '@/hooks/use-mobile';
-import { Sheet, SheetContent } from '@/components/ui/sheet';
-import { useMockupStore } from '@/contexts/MockupContext';
-
-export const FloatingBar: React.FC = () => {
- const {
- uploadedImage,
- setUploadedImage,
- updateDevicePosition,
- set3DRotation,
- setImageBorder,
- setMargin,
- setFixedMargin
- } = useMockupStore();
-
- const [activePanel, setActivePanel] = useState
-
-
-
- Reset Transformations
3D Rotation
Position & Scale
Image Border
-
-
- );
- }
-
- return (
- <>
- {renderPanel()}
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/editor/ImageBorderPanel.tsx b/src/components/editor/ImageBorderPanel.tsx
deleted file mode 100644
index 214ed3d..0000000
--- a/src/components/editor/ImageBorderPanel.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Slider } from '@/components/ui/slider';
-import { Switch } from '@/components/ui/switch';
-import { GripVertical, Undo, RectangleHorizontal, Palette, CornerUpLeft, Wand2 } from 'lucide-react';
-import { useMockupStore } from '@/contexts/MockupContext';
-import { extractDominantColor } from '@/utils/colorExtractor';
-
-interface ImageBorderPanelProps {
- onClose: () => void;
-}
-
-export const ImageBorderPanel: React.FC
-
-
-
-
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/editor/Navbar.tsx b/src/components/editor/Navbar.tsx
deleted file mode 100644
index 658e69a..0000000
--- a/src/components/editor/Navbar.tsx
+++ /dev/null
@@ -1,471 +0,0 @@
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import {
- Dialog,
- DialogContent,
- DialogTrigger,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import upiQR from "/assets/upiQR.png";
-import {
- Download,
- ChevronDown,
- Coffee,
- ExternalLink,
- Loader2,
- Heart,
- X,
- CheckCircle,
-} from "lucide-react";
-import { Github } from "@/components/icons/Github";
-import { Bluesky } from "@/components/icons/Bluesky";
-import { X as XIcon } from "@/components/icons/X";
-
-import { toast } from "sonner";
-import { useMockupStore } from "@/contexts/MockupContext";
-import html2canvas from "html2canvas";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-
-export function Navbar() {
- const [showExportOptions, setShowExportOptions] = useState(false);
- const [exportFormat, setExportFormat] = useState("PNG");
- const [quality, setQuality] = useState([2]);
- const [isExporting, setIsExporting] = useState(false);
- const [isDialogOpen, setIsDialogOpen] = useState(false);
-
- const { uploadedImage, imageBorder, fixedMargin, margin } = useMockupStore();
-
- const isMobile = typeof window !== "undefined" ? window.innerWidth < 768 : false;
-
- const getQualityLabel = (value) => {
- switch (value) {
- case 1:
- return "Standard (1x)";
- case 2:
- return "High (2x)";
- case 3:
- return "Ultra (3x)";
- default:
- return `${value}x`;
- }
- };
-
- const exportImage = async (format: string, qualityMultiplier: number) => {
- if (!uploadedImage) return;
-
- try {
- const mockupElement = document.querySelector("[data-mockup-canvas]") as HTMLDivElement;
- if (!mockupElement) throw new Error("Mockup canvas not found");
-
- const imgElement = mockupElement.querySelector("img") as HTMLImageElement;
- if (!imgElement) throw new Error("Image element not found");
-
- // For fixed margin mode: capture the entire canvas (image + background margins)
- const canvas = await html2canvas(mockupElement, {
- scale: qualityMultiplier * 2,
- useCORS: true,
- allowTaint: true,
- backgroundColor: null,
- // Capture the entire mockup element without any cropping
- });
-
- const mimeType = `image/${format.toLowerCase()}`;
- const imageQuality = format === "JPEG" ? 1 : undefined;
-
- canvas.toBlob(
- (blob) => {
- if (blob) {
- const url = URL.createObjectURL(blob);
- const a = document.createElement("a");
- a.href = url;
- a.download = `mockup-${Date.now()}.${format.toLowerCase()}`;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- URL.revokeObjectURL(url);
- } else {
- throw new Error("Failed to create blob");
- }
- },
- mimeType,
- imageQuality,
- );
- } catch (error) {
- console.error("Export error:", error);
- throw error;
- }
- };
-
- const handleSingleExport = async () => {
- if (!uploadedImage) {
- toast.error("Please upload an image first");
- return;
- }
-
- setIsExporting(true);
- try {
- await exportImage(exportFormat, quality[0]);
- toast.success(`Successfully exported as ${exportFormat}!`, {
- icon:
-
-
-
-
-
-
- {/* Enable Border Section */}
-
-
- Enable Border
- setImageBorder({ enabled: checked })}
- />
-
-
- {imageBorder.enabled && (
- <>
- {/* Transparent Border Section */}
-
-
-
- {/* Color Section */}
-
- Transparent Border
-
- {isTransparent && (
-
-
- )}
-
- Opacity
- {Math.round(opacity * 100)}%
-
-
-
-
- {/* Width Section */}
-
-
-
- {colorOptions.map((color) => (
- color === 'magic-wand' ? (
-
- ) : (
-
-
- setImageBorder({ width: value[0] })}
- min={0}
- max={20}
- step={1}
- />
-
-
- {/* Radius (Corners) Section */}
-
-
-
-
- {imageBorder.width}px
-
- setImageBorder({ radius: value[0] })}
- min={0}
- max={50}
- step={1}
- />
-
-
- )}
-
-
-
-
- {imageBorder.radius}px
-
-
-
-
-
-
-
-
- );
-
- return (
-
-
-
-
-
-
-
-
-
-
- value && setExportFormat(value)}
- className="flex gap-1 bg-sidebar/80 rounded-full ring-2 ring-secondary p-1"
- >
- {["PNG", "JPEG", "WebP"].map((format) => (
-
- {format}
-
- ))}
-
-
-
-
-
-
-
- value && setQuality([parseInt(value)])}
- className="flex gap-1 bg-sidebar/80 rounded-full ring-2 ring-secondary p-1"
- >
-
- Standard
-
-
- High
-
-
- Ultra
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Hi, I'm
-
- Jaydip
-
- moocup is a simple offline tool. -
-- focus on your craft, we'll take care of rest. -
-- you can show your support by sponsoring my work! -
-
-
-
-
-
-
- - Say Hi! - - I'm always up for quick chat :) - -
-
-
-
-
-
-
-
- );
-}
diff --git a/src/components/editor/PositionScalePanel.tsx b/src/components/editor/PositionScalePanel.tsx
deleted file mode 100644
index 584c647..0000000
--- a/src/components/editor/PositionScalePanel.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Slider } from '@/components/ui/slider';
-import { Switch } from '@/components/ui/switch';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { GripVertical, Undo, Move, Maximize2 } from 'lucide-react';
-import { useMockupStore } from '@/contexts/MockupContext';
-
-interface PositionScalePanelProps {
- onClose: () => void;
-}
-
-export const PositionScalePanel: React.FC
-
-
-
-
-
-
-
-
-
-
-
- = ({ onClose }) => {
- // 2. Select only the state and actions this component needs from the store.
- // This is more performant than pulling the entire state.
- const rotation3D = useMockupStore((state) => state.rotation3D);
- const set3DRotation = useMockupStore((state) => state.set3DRotation);
-
- // Local component state remains the same
- const [isDragging, setIsDragging] = useState(false);
- const [windowPosition, setWindowPosition] = useState({ x: 100, y: 100 });
- const windowRef = useRef(null);
- const dragStartRef = useRef({ x: 0, y: 0 });
-
- // Window dragging logic remains unchanged
- const handleWindowDragStart = (e: React.MouseEvent) => {
- e.preventDefault();
- setIsDragging(true);
- dragStartRef.current = {
- x: e.clientX - windowPosition.x,
- y: e.clientY - windowPosition.y
- };
- };
-
- const handleWindowDrag = (e: MouseEvent) => {
- if (!isDragging) return;
- setWindowPosition({
- x: e.clientX - dragStartRef.current.x,
- y: e.clientY - dragStartRef.current.y
- });
- };
-
- const handleWindowDragEnd = () => {
- setIsDragging(false);
- };
-
- useEffect(() => {
- if (isDragging) {
- window.addEventListener('mousemove', handleWindowDrag);
- window.addEventListener('mouseup', handleWindowDragEnd);
- return () => {
- window.removeEventListener('mousemove', handleWindowDrag);
- window.removeEventListener('mouseup', handleWindowDragEnd);
- };
- }
- }, [isDragging]);
-
- // 3. Update action calls to use the new Zustand actions directly.
- const handleRotationChange = (type: 'rotateX' | 'rotateY' | 'rotateZ' | 'skew', value: number[]) => {
- // OLD: dispatch({ type: 'SET_3D_ROTATION', payload: { [type]: value[0] } });
- set3DRotation({ [type]: value[0] });
- };
-
- const resetRotation = () => {
- // OLD: dispatch({ type: 'SET_3D_ROTATION', payload: { rotateX: 0, rotateY: 0, rotateZ: 0, skew: 0 } });
- set3DRotation({ rotateX: 0, rotateY: 0, rotateZ: 0, skew: 0 });
- };
-
- const presets = [
- { rotateX: 20, rotateY: 0, rotateZ: 0, skew: 0 },
- { rotateX: 30, rotateY: -15, rotateZ: 25, skew: 0 },
- { rotateX: 0, rotateY: 0, rotateZ: 15, skew: 0 },
- { rotateX: -20, rotateY: 0, rotateZ: 0, skew: 0 },
- { rotateX: 0, rotateY: -20, rotateZ: 0, skew: 0 },
- { rotateX: 0, rotateY: 0, rotateZ: -15, skew: 0 },
- ];
-
- return (
- ) {
- return (
-
- );
-}
diff --git a/src/components/icons/Github.tsx b/src/components/icons/Github.tsx
deleted file mode 100644
index 03af7e7..0000000
--- a/src/components/icons/Github.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export function Github(props: React.SVGProps) {
- return (
-
- );
-}
diff --git a/src/components/icons/X.tsx b/src/components/icons/X.tsx
deleted file mode 100644
index 8d99e23..0000000
--- a/src/components/icons/X.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function X(props: React.SVGProps) {
- return (
-
- );
-}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
deleted file mode 100644
index e6a723d..0000000
--- a/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
- svg]:rotate-180",
- className
- )}
- {...props}
- >
- {children}
-
-
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
-))
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
deleted file mode 100644
index 5996ee6..0000000
--- a/src/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- & VariantProps
->(({ className, variant, ...props }, ref) => (
-
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
deleted file mode 100644
index c4abbf3..0000000
--- a/src/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-const AspectRatio = AspectRatioPrimitive.Root
-
-export { AspectRatio }
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
deleted file mode 100644
index 991f56e..0000000
--- a/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-const Avatar = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
- VariantProps {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
- return (
-
- )
-}
-
-export { Badge, badgeVariants }
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
deleted file mode 100644
index 71a5c32..0000000
--- a/src/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Breadcrumb = React.forwardRef<
- HTMLElement,
- React.ComponentPropsWithoutRef<"nav"> & {
- separator?: React.ReactNode
- }
->(({ ...props }, ref) => )
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
- HTMLOListElement,
- React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
- ,
- VariantProps {
- asChild?: boolean
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
- ;
-
-function Calendar({
- className,
- classNames,
- showOutsideDays = true,
- ...props
-}: CalendarProps) {
- return (
-
->(({ className, ...props }, ref) => (
-
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
deleted file mode 100644
index 9454584..0000000
--- a/src/components/ui/carousel.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import * as React from "react"
-import useEmblaCarousel, {
- type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
- opts?: CarouselOptions
- plugins?: CarouselPlugin
- orientation?: "horizontal" | "vertical"
- setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
- carouselRef: ReturnType[0]
- api: ReturnType[1]
- scrollPrev: () => void
- scrollNext: () => void
- canScrollPrev: boolean
- canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext(null)
-
-function useCarousel() {
- const context = React.useContext(CarouselContext)
-
- if (!context) {
- throw new Error("useCarousel must be used within a & CarouselProps
->(
- (
- {
- orientation = "horizontal",
- opts,
- setApi,
- plugins,
- className,
- children,
- ...props
- },
- ref
- ) => {
- const [carouselRef, api] = useEmblaCarousel(
- {
- ...opts,
- axis: orientation === "horizontal" ? "x" : "y",
- },
- plugins
- )
- const [canScrollPrev, setCanScrollPrev] = React.useState(false)
- const [canScrollNext, setCanScrollNext] = React.useState(false)
-
- const onSelect = React.useCallback((api: CarouselApi) => {
- if (!api) {
- return
- }
-
- setCanScrollPrev(api.canScrollPrev())
- setCanScrollNext(api.canScrollNext())
- }, [])
-
- const scrollPrev = React.useCallback(() => {
- api?.scrollPrev()
- }, [api])
-
- const scrollNext = React.useCallback(() => {
- api?.scrollNext()
- }, [api])
-
- const handleKeyDown = React.useCallback(
- (event: React.KeyboardEvent) => {
- if (event.key === "ArrowLeft") {
- event.preventDefault()
- scrollPrev()
- } else if (event.key === "ArrowRight") {
- event.preventDefault()
- scrollNext()
- }
- },
- [scrollPrev, scrollNext]
- )
-
- React.useEffect(() => {
- if (!api || !setApi) {
- return
- }
-
- setApi(api)
- }, [api, setApi])
-
- React.useEffect(() => {
- if (!api) {
- return
- }
-
- onSelect(api)
- api.on("reInit", onSelect)
- api.on("select", onSelect)
-
- return () => {
- api?.off("select", onSelect)
- }
- }, [api, onSelect])
-
- return (
-
-
- )
- }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
- const { carouselRef, orientation } = useCarousel()
-
- return (
-
->(({ className, ...props }, ref) => {
- const { orientation } = useCarousel()
-
- return (
-
- )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps
->(({ className, variant = "outline-solid", size = "icon", ...props }, ref) => {
- const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
- return (
-
- )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
- HTMLButtonElement,
- React.ComponentProps
->(({ className, variant = "outline-solid", size = "icon", ...props }, ref) => {
- const { orientation, scrollNext, canScrollNext } = useCarousel()
-
- return (
-
- )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
- type CarouselApi,
- Carousel,
- CarouselContent,
- CarouselItem,
- CarouselPrevious,
- CarouselNext,
-}
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
deleted file mode 100644
index 51534cc..0000000
--- a/src/components/ui/chart.tsx
+++ /dev/null
@@ -1,363 +0,0 @@
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
- [k in string]: {
- label?: React.ReactNode
- icon?: React.ComponentType
- } & (
- | { color?: string; theme?: never }
- | { color?: never; theme: Record }
- )
-}
-
-type ChartContextProps = {
- config: ChartConfig
-}
-
-const ChartContext = React.createContext(null)
-
-function useChart() {
- const context = React.useContext(ChartContext)
-
- if (!context) {
- throw new Error("useChart must be used within a
-
- )
-})
-ChartContainer.displayName = "Chart"
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
- const colorConfig = Object.entries(config).filter(
- ([_, config]) => config.theme || config.color
- )
-
- if (!colorConfig.length) {
- return null
- }
-
- return (
-
-
-
-
-
-
-
- {positionBalls.map((ball, index) => (
-
-
-
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/editor/RotationSkewPanel.tsx b/src/components/editor/RotationSkewPanel.tsx
deleted file mode 100644
index c1fb3b1..0000000
--- a/src/components/editor/RotationSkewPanel.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Slider } from '@/components/ui/slider';
-import { GripVertical, Undo, FlipHorizontal, FlipVertical, RotateCw, Move3D, ArrowUp } from 'lucide-react';
-import { useMockupStore } from '@/contexts/MockupContext';
-
-
-interface RotationSkewPanelProps {
- onClose: () => void;
-}
-
-export const RotationSkewPanel: React.FC handleBallClick(e, index)}
- />
- ))}
-
-
-
- {
- setScale(value[0]);
- updateDevicePosition({ scale: value[0] });
- }}
- min={0.1}
- max={3}
- step={0.1}
- />
-
-
-
-
- Scale
- {scale.toFixed(1)}x
-
-
-
-
- Fixed Margin
-
-
- {fixedMargin && (
-
-
-
- Small
-
-
- Medium
-
-
- Large
-
-
-
- )}
-
- {
- setMargin({ ...margin, top: value[0] });
- setMarginPreset('');
- }}
- min={0}
- max={100}
- step={1}
- />
- {
- setMargin({ ...margin, right: value[0] });
- setMarginPreset('');
- }}
- min={0}
- max={100}
- step={1}
- />
- {
- setMargin({ ...margin, bottom: value[0] });
- setMarginPreset('');
- }}
- min={0}
- max={100}
- step={1}
- />
- {
- setMargin({ ...margin, left: value[0] });
- setMarginPreset('');
- }}
- min={0}
- max={100}
- step={1}
- />
-
-
- Top Margin
- {Math.round(margin.top)}
-
-
- Right Margin
- {Math.round(margin.right)}
-
-
- Bottom Margin
- {Math.round(margin.bottom)}
-
-
- Left Margin
- {Math.round(margin.left)}
-
-
-
-
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/icons/Bluesky.tsx b/src/components/icons/Bluesky.tsx
deleted file mode 100644
index f007e45..0000000
--- a/src/components/icons/Bluesky.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export function Bluesky(props: React.SVGProps
-
-
-
-
-
-
- Rotation & Skew
-
-
-
-
- {/* 4. Update state access to use the selected state directly (no more 'state.' prefix) */}
-
-
-
-
-
-
- handleRotationChange('rotateX', value)}
- min={-45}
- max={45}
- step={1}
- />
-
- {rotation3D.rotateX}
-
-
-
-
- handleRotationChange('rotateY', value)}
- min={-45}
- max={45}
- step={1}
- />
-
- {rotation3D.rotateY}
-
-
-
-
- handleRotationChange('rotateZ', value)}
- min={-180}
- max={180}
- step={1}
- />
-
- {rotation3D.rotateZ}
-
-
-
- handleRotationChange('skew', value)}
- min={0}
- max={45}
- step={1}
- />
-
- {rotation3D.skew}
-
- {presets.map((preset, index) => (
-
- ))}
-
- {children}
-
- {children}
-
-
-
-
- )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
-
- {children}
-
-
-