[V0_FILE]typescriptreact:file="components/image-dropzone.tsx" isMerged="true" "use client" import { useCallback } from "react" import { useDropzone } from "react-dropzone" import { ImagePlus } from "lucide-react" interface ImageDropzoneProps { onImageDrop: (files: File[]) => void } export function ImageDropzone({ onImageDrop }: ImageDropzoneProps) { const onDrop = useCallback( (acceptedFiles: File[]) => { if (acceptedFiles.length > 0) { onImageDrop(acceptedFiles) } }, [onImageDrop], ) const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "image/*": [".jpeg", ".jpg", ".png", ".webp"], }, multiple: true, }) return (

Glissez plusieurs images ici ou cliquez pour en sélectionner

) } [V0_FILE]typescriptreact:file="components/bottom-nav.tsx" isMerged="true" "use client" import { Home, Search, PlusSquare, Film, User } from "lucide-react" export function BottomNav() { return (

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { createContext, useContext, useEffect, useState } from "react" type Theme = "dark" | "light" const ThemeContext = createContext<{ theme: Theme toggleTheme: () => void }>({ theme: "light", toggleTheme: () => null, }) export function ThemeProvider({ children, }: { children: React.ReactNode }) { const [theme, setTheme] = useState(() => { if (typeof window !== "undefined") { const savedTheme = localStorage.getItem("theme") as Theme return savedTheme || "light" } return "light" }) useEffect(() => { const savedTheme = localStorage.getItem("theme") as Theme if (savedTheme) { setTheme(savedTheme) document.documentElement.classList.toggle("dark", savedTheme === "dark") } }, []) const toggleTheme = () => { const newTheme = theme === "light" ? "dark" : "light" setTheme(newTheme) localStorage.setItem("theme", newTheme) document.documentElement.classList.toggle("dark", newTheme === "dark") } return {children} } export const useTheme = () => useContext(ThemeContext) [V0_FILE]typescriptreact:file="components/drag-drop-zone.tsx" isQuickEdit="true" isMerged="true" "use client" import { useCallback } from "react" import { useDropzone } from "react-dropzone" interface DragDropZoneProps { onImageDrop: (files: File[]) => void children: React.ReactNode } export function DragDropZone({ onImageDrop, children }: DragDropZoneProps) { const onDrop = useCallback( (acceptedFiles: File[]) => { if (acceptedFiles.length > 0) { onImageDrop(acceptedFiles) } }, [onImageDrop], ) const { getRootProps, isDragActive } = useDropzone({ onDrop, accept: { "image/*": [".jpeg", ".jpg", ".png", ".webp"], }, multiple: true, noClick: true, noKeyboard: true, }) return (

{isDragActive && (

Déposez vos images ici

)} {children}

) } [V0_FILE]typescriptreact:file="components/upload-zone.tsx" isMerged="true" "use client" import { ImagePlus } from "lucide-react" interface UploadZoneProps { onImageSelect: (files: FileList) => void } export function UploadZone({ onImageSelect }: UploadZoneProps) { return (

e.target.files && onImageSelect(e.target.files)} />

Cliquez pour ajouter des images

) } [V0_FILE]typescript:file="utils/image.ts" isEdit="true" isMerged="true" export async function calculateImageHash(file: File): Promise { return new Promise((resolve) => { const reader = new FileReader() reader.onload = (e) => { const binary = e.target?.result if (typeof binary === "string") { const hash = binary.split("").reduce((acc, char) => { return ((acc << 5) - acc + char.charCodeAt(0)) | 0 }, 0) resolve(Math.abs(hash).toString(16)) } } reader.readAsBinaryString(file) }) } export async function compressImage(file: File, maxWidth = 1080, maxHeight = 1350): Promise { return new Promise((resolve) => { const reader = new FileReader() reader.onload = (e) => { const img = new Image() img.onload = () => { const canvas = document.createElement("canvas") let width = img.width let height = img.height // Calculate new dimensions while maintaining aspect ratio if (width > height) { if (width > maxWidth) { height = Math.round((height * maxWidth) / width) width = maxWidth } } else { if (height > maxHeight) { width = Math.round((width * maxHeight) / height) height = maxHeight } } // Reduce dimensions further if the image is still too large const MAX_DIMENSION = 800 if (width > MAX_DIMENSION || height > MAX_DIMENSION) { const ratio = Math.min(MAX_DIMENSION / width, MAX_DIMENSION / height) width = Math.round(width * ratio) height = Math.round(height * ratio) } canvas.width = width canvas.height = height const ctx = canvas.getContext("2d") ctx?.drawImage(img, 0, 0, width, height) // Convert to base64 with reduced quality const base64 = canvas.toDataURL("image/jpeg", 0.6) // Reduced quality to 60% resolve(base64) } img.src = e.target?.result as string } reader.readAsDataURL(file) }) } [V0_FILE]typescriptreact:file="types.ts" isMerged="true" export interface Post { id: string imageUrl: string hash?: string isDuplicate?: boolean } export interface FeedState { posts: Post[] reels: Post[] } export type FeedTab = "posts" | "reels" | "tagged" [V0_FILE]typescriptreact:file="components/feed-tabs.tsx" isMerged="true" "use client" import { Grid, Film, User2 } from "lucide-react" import type { FeedTab } from "../types" interface FeedTabsProps { activeTab: FeedTab onTabChange: (tab: FeedTab) => void } export function FeedTabs({ activeTab, onTabChange }: FeedTabsProps) { return (

) } [V0_FILE]typescript:file="utils/storage.ts" isEdit="true" isMerged="true" import type { FeedState } from "../types" const MAX_IMAGES = 50 // Maximum number of images allowed const MAX_SIZE_PER_IMAGE = 500 * 1024 // 500KB in bytes export function saveFeedState(state: FeedState) { try { // Check number of images const totalImages = state.posts.length + state.reels.length if (totalImages > MAX_IMAGES) { throw new Error(`Vous ne pouvez pas sauvegarder plus de ${MAX_IMAGES} images.`) } // Check size of data const stateString = JSON.stringify(state) const sizeInBytes = new Blob([stateString]).size // Average size per image const averageSizePerImage = totalImages > 0 ? sizeInBytes / totalImages : 0 if (averageSizePerImage > MAX_SIZE_PER_IMAGE) { throw new Error("Les images sont trop volumineuses. Essayez d'en ajouter moins ou de plus petite taille.") } localStorage.setItem("instagram-feed-state", stateString) } catch (error) { if (error instanceof Error) { if (error.name === "QuotaExceededError") { throw new Error("Espace de stockage insuffisant. Veuillez supprimer quelques images.") } throw error } } } export function loadFeedState(): FeedState { const saved = localStorage.getItem("instagram-feed-state") return saved ? JSON.parse(saved) : { posts: [], reels: [] } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { TopNav } from "../components/top-nav" import { BottomNav } from "../components/bottom-nav" import { InstagramFeed } from "../components/instagram-feed" import { DragDropZone } from "../components/drag-drop-zone" import { ThemeProvider } from "../components/theme-provider" import { useEffect, useState } from "react" import { loadPosts, loadReels } from "../utils/db" export default function Page() { const [hasContent, setHasContent] = useState(false) useEffect(() => { const checkContent = async () => { try { const [posts, reels] = await Promise.all([loadPosts(), loadReels()]) setHasContent(posts.length > 0 || reels.length > 0) } catch (error) { console.error("Error checking content:", error) } } checkContent() }, []) const handleImageDrop = (files: File[]) => { setHasContent(true) const event = new CustomEvent("addImages", { detail: files }) document.dispatchEvent(event) } return (

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { background-color: black; } [V0_FILE]typescript:file="utils/db.ts" isMerged="true" import { openDB, type DBSchema, type IDBPDatabase } from "idb" import type { FeedState, Post } from "../types" interface FeedDB extends DBSchema { posts: { key: string value: Post } reels: { key: string value: Post } } const DB_NAME = "instagram-feed-db" const DB_VERSION = 1 let dbPromise: Promise> export async function initDB() { if (!dbPromise) { dbPromise = openDB(DB_NAME, DB_VERSION, { upgrade(db) { // Create stores if they don't exist if (!db.objectStoreNames.contains("posts")) { db.createObjectStore("posts", { keyPath: "id" }) } if (!db.objectStoreNames.contains("reels")) { db.createObjectStore("reels", { keyPath: "id" }) } }, }) } return dbPromise } export async function savePosts(posts: Post[]) { const db = await initDB() const tx = db.transaction("posts", "readwrite") await tx.store.clear() // Clear existing posts for (const post of posts) { await tx.store.put(post) } await tx.done } export async function saveReels(reels: Post[]) { const db = await initDB() const tx = db.transaction("reels", "readwrite") await tx.store.clear() // Clear existing reels for (const reel of reels) { await tx.store.put(reel) } await tx.done } export async function loadPosts(): Promise { const db = await initDB() return db.getAll("posts") } export async function loadReels(): Promise { const db = await initDB() return db.getAll("reels") } export async function clearAll() { const db = await initDB() await db.clear("posts") await db.clear("reels") } [V0_FILE]typescriptreact:file="components/top-nav.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { ArrowLeft, Moon, Sun } from "lucide-react" import { useTheme } from "./theme-provider" export function TopNav() { const { theme, toggleTheme } = useTheme() return (

Feed - preview

) } [V0_FILE]typescriptreact:file="components/empty-state.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { ImagePlus } from "lucide-react" interface EmptyStateProps { onImageSelect: (files: FileList) => void } export function EmptyState({ onImageSelect }: EmptyStateProps) { return (

e.target.files && onImageSelect(e.target.files)} />

Aucune image dans votre feed

Cliquez ici pour ajouter des images

) } [V0_FILE]typescriptreact:file="components/instagram-feed.tsx" isEdit="true" isQuickEdit="true" "use client" import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent, } from "@dnd-kit/core" import { arrayMove, SortableContext, sortableKeyboardCoordinates, rectSortingStrategy } from "@dnd-kit/sortable" import { useEffect, useState } from "react" import { InstagramPost } from "./instagram-post" import { ReelPost } from "./reel-post" import { FeedTabs } from "./feed-tabs" import { UploadZone } from "./upload-zone" import { EmptyState } from "./empty-state" import { calculateImageHash, compressImage } from "../utils/image" import { savePosts, saveReels, loadPosts, loadReels } from "../utils/db" import type { Post, FeedTab } from "../types" import { toast } from "@/components/ui/use-toast" export function InstagramFeed() { const [activeTab, setActiveTab] = useState("posts") const [posts, setPosts] = useState([]) const [reels, setReels] = useState([]) const [isLoading, setIsLoading] = useState(false) // Load initial data from IndexedDB useEffect(() => { const loadData = async () => { try { const [loadedPosts, loadedReels] = await Promise.all([loadPosts(), loadReels()]) setPosts(loadedPosts) setReels(loadedReels) } catch (error) { console.error("Error loading data:", error) toast({ variant: "destructive", title: "Erreur", description: "Impossible de charger les images sauvegardées.", }) } } loadData() }, []) // Save changes to IndexedDB useEffect(() => { const saveData = async () => { try { await savePosts(posts) } catch (error) { console.error("Error saving posts:", error) toast({ variant: "destructive", title: "Erreur", description: "Impossible de sauvegarder les posts.", }) } } saveData() }, [posts]) useEffect(() => { const saveData = async () => { try { await saveReels(reels) } catch (error) { console.error("Error saving reels:", error) toast({ variant: "destructive", title: "Erreur", description: "Impossible de sauvegarder les reels.", }) } } saveData() }, [reels]) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { // Require more deliberate horizontal movement distance: 10, // Increase delay to better distinguish between scroll and drag delay: 150, // Only activate drag if movement is primarily horizontal tolerance: { x: 5, y: 20, // Allow more vertical movement before canceling drag }, }, }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ) const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event if (over && active.id !== over.id) { if (activeTab === "posts") { setPosts((items) => { const oldIndex = items.findIndex((item) => item.id === active.id) const newIndex = items.findIndex((item) => item.id === over.id) return arrayMove(items, oldIndex, newIndex) }) } else if (activeTab === "reels") { setReels((items) => { const oldIndex = items.findIndex((item) => item.id === active.id) const newIndex = items.findIndex((item) => item.id === over.id) return arrayMove(items, oldIndex, newIndex) }) } } } const handleNewImages = async (files: File[]) => { const MAX_IMAGES = 100 const currentTotal = posts.length + reels.length if (currentTotal + files.length > MAX_IMAGES) { toast({ variant: "destructive", title: "Limite atteinte", description: `Vous ne pouvez pas ajouter plus de ${MAX_IMAGES} images au total.`, }) return } setIsLoading(true) try { const newPosts = await Promise.all( files.map(async (file) => ({ id: Math.random().toString(), imageUrl: await compressImage(file), hash: await calculateImageHash(file), })), ) if (activeTab === "posts") { setPosts((currentPosts) => [...currentPosts, ...newPosts]) } else if (activeTab === "reels") { setReels((currentReels) => [...currentReels, ...newPosts]) } } catch (error) { console.error("Error processing images:", error) toast({ variant: "destructive", title: "Erreur", description: "Une erreur est survenue lors du traitement des images.", }) } finally { setIsLoading(false) } } const handleDelete = (id: string) => { if (activeTab === "posts") { setPosts((current) => current.filter((post) => post.id !== id)) } else if (activeTab === "reels") { setReels((current) => current.filter((reel) => reel.id !== id)) } } useEffect(() => { const handleAddImages = async (e: CustomEvent) => { await handleNewImages(e.detail) } document.addEventListener("addImages", handleAddImages as EventListener) return () => { document.removeEventListener("addImages", handleAddImages as EventListener) } }, [activeTab]) const currentItems = activeTab === "posts" ? posts : reels const PostComponent = activeTab === "posts" ? InstagramPost : ReelPost return (

{currentItems.length === 0 ? ( handleNewImages(Array.from(files))} /> ) : ( <> handleNewImages(Array.from(files))} />

{currentItems.map((item, index) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="components/instagram-post.tsx" isEdit="true" isQuickEdit="true" "use client" import { useSortable } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { Trash2 } from "lucide-react" import Image from "next/image" import type { Post } from "../types" interface InstagramPostProps { post: Post index: number onDelete: (id: string) => void } export function InstagramPost({ post, index, onDelete }: InstagramPostProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: post.id, transition: { duration: 150, easing: "cubic-bezier(0.25, 1, 0.5, 1)", }, }) const style = { transform: CSS.Transform.toString(transform), transition, zIndex: isDragging ? 50 : undefined, touchAction: "pan-y", // Allow vertical scrolling } return (

) } [V0_FILE]typescriptreact:file="components/reel-post.tsx" isEdit="true" isQuickEdit="true" "use client" import { useSortable } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { Trash2 } from "lucide-react" import Image from "next/image" import type { Post } from "../types" interface ReelPostProps { post: Post index: number onDelete: (id: string) => void } export function ReelPost({ post, index, onDelete }: ReelPostProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: post.id, transition: { duration: 150, easing: "cubic-bezier(0.25, 1, 0.5, 1)", }, }) const style = { transform: CSS.Transform.toString(transform), transition, zIndex: isDragging ? 50 : undefined, touchAction: "pan-y", // Allow vertical scrolling } return (

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This