-
- - To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
-
-
+
+ Export Settings
+ Configure your output.
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/Exporter/UploadArea.tsx b/components/Exporter/UploadArea.tsx
new file mode 100644
index 0000000..00a6c9c
--- /dev/null
+++ b/components/Exporter/UploadArea.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { useRef, useState } from "react";
+
+import { UploadCloud } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { cn } from "@/lib/utils";
+
+
+interface ImageUploadAreaProps {
+ onFilesSelected: (files: FileList | null) => void;
+}
+
+
+export function UploadArea() {
+
+ const [isDraggingOver, setIsDraggingOver] = useState(false);
+ const fileInputRef = useRef(null);
+
+ const handleImageChange = (e: React.ChangeEvent) => {
+ onFilesSelected(e.target.files);
+ if (e.target) e.target.value = "";
+ };
+
+ const handleDragOver = (e: React.DragEvent) => {
+ e.preventDefault();
+ setIsDraggingOver(true);
+ };
+
+ const handleDragLeave = (e: React.DragEvent) => {
+ e.preventDefault();
+ setIsDraggingOver(false);
+ };
+
+ const handleDrop = (e: React.DragEvent) => {
+ e.preventDefault();
+ setIsDraggingOver(false);
+ onFilesSelected(e.dataTransfer.files);
+ };
+
+
+
+ return (
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
new file mode 100644
index 0000000..6165465
--- /dev/null
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,20 @@
+import { HeartIcon } from "../Icons/HeartIcon";
+import { ThemeSwitcher } from "../themeSwitcher/themeSwitcher";
+
+export function Footer() {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/components/Icons/HeartIcon.tsx b/components/Icons/HeartIcon.tsx
new file mode 100644
index 0000000..ec6ed22
--- /dev/null
+++ b/components/Icons/HeartIcon.tsx
@@ -0,0 +1,23 @@
+interface HeartIconProps {
+ className?: string;
+}
+
+export function HeartIcon({ className }: HeartIconProps) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/components/themeProvider/themeProvider.tsx b/components/themeProvider/themeProvider.tsx
new file mode 100644
index 0000000..c1a24b7
--- /dev/null
+++ b/components/themeProvider/themeProvider.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({
+ children,
+ ...props
+}: React.ComponentProps) {
+ return {children} ;
+}
\ No newline at end of file
diff --git a/components/themeSwitcher/themeSwitcher.tsx b/components/themeSwitcher/themeSwitcher.tsx
new file mode 100644
index 0000000..87a50d6
--- /dev/null
+++ b/components/themeSwitcher/themeSwitcher.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun, Monitor } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeSwitcher() {
+ const { setTheme } = useTheme()
+
+ return (
+
+
+
+
+
+ setTheme("light")}>
+
+ setTheme("dark")}>
+
+ setTheme("system")}>
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..b5ea4ab
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+ "icon-sm": "size-8",
+ "icon-lg": "size-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant = "default",
+ size = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+ ) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return & {
+ size?: "sm" | "default"
+}) {
+ return (
+
+ {children}
+
+
+
+ )
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "item-aligned",
+ align = "center",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+
+ )
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..4c24b2a
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ const _values = React.useMemo(
+ () =>
+ Array.isArray(value)
+ ? value
+ : Array.isArray(defaultValue)
+ ? defaultValue
+ : [min, max],
+ [value, defaultValue, min, max]
+ )
+
+ return (
+
+
+
+ {Array.from({ length: _values.length }, (_, index) => (
+
+ )
+}
+
+export { Slider }
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..80dd45b
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+ className,
+ size = "default",
+ ...props
+}: React.ComponentProps & {
+ size?: "sm" | "default"
+}) {
+ return (
+
+
+ )
+}
+
+export { Switch }
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..7f73dcd
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: React.ComponentProps) {
+ return (
+ &
+ VariantProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+
+
+
- );
-}
+ )
+}
\ No newline at end of file
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..f87021e
--- /dev/null
+++ b/components.json
@@ -0,0 +1,23 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "app/globals.css",
+ "baseColor": "neutral",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "iconLibrary": "lucide",
+ "rtl": false,
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ },
+ "registries": {}
+}
diff --git a/components/Exporter/PreviewArea.tsx b/components/Exporter/PreviewArea.tsx
new file mode 100644
index 0000000..2a3321c
--- /dev/null
+++ b/components/Exporter/PreviewArea.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+
+export function PreviewArea() {
+ return (
+
+
+ {/* Header Area (Optional) */}
+
+
+
+ Web Exporter
++ Convert your web assets to PDF, PNG, or JSON. +
+
+
+ {/* Left Column: Settings */}
+
+
+
+ {/* Right Column: Dynamic Content */}
+
+
+
+
+ {/* Placeholder for actual content */}
+
+ )
+}
\ No newline at end of file
diff --git a/components/Exporter/SettingsArea.tsx b/components/Exporter/SettingsArea.tsx
new file mode 100644
index 0000000..a317212
--- /dev/null
+++ b/components/Exporter/SettingsArea.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+
+interface SettingsAreaProps {
+ onExport: () => void;
+ isExporting?: boolean;
+}
+
+export function SettingsArea({ onExport, isExporting }: SettingsAreaProps) {
+ return (
+
+
+ Preview Canvas
+Result will appear here
+
+
+
+
+
+
+
+
+
+
+
+ Upload Images
+ + fileInputRef.current?.click()}
+ >
+
+
+
+ Click or drag & drop to upload
+PNG, JPG, WEBP are supported
+
+
+
+
+