[V0_FILE]typescriptreact:file="components/image-dropzone.tsx" "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/instagram-post.tsx" "use client" import { useSortable } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { Info } from "lucide-react" import Image from "next/image" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import type { Post } from "../types" interface InstagramPostProps { post: Post index: number } export function InstagramPost({ post, index }: InstagramPostProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: post.id }) const style = { transform: CSS.Transform.toString(transform), transition, zIndex: isDragging ? 50 : undefined, } return (

{post.isDuplicate && (

Cette image est déjà présente dans votre feed

)}

) } [V0_FILE]typescriptreact:file="page.tsx" 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" export default function Page() { const handleImageDrop = (files: File[]) => { const event = new CustomEvent("addImages", { detail: files }) document.dispatchEvent(event) } return (

) } [V0_FILE]typescriptreact:file="components/top-nav.tsx" "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/bottom-nav.tsx" "use client" import { Home, Search, PlusSquare, Film, User } from "lucide-react" export function BottomNav() { return (

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "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" "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" "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]typescriptreact:file="utils/image.ts" 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") { // Simple hash function basée sur le contenu binaire 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) }) } [V0_FILE]typescriptreact:file="types.ts" 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" "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]typescriptreact:file="components/reel-post.tsx" "use client" import { useSortable } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { Info } from "lucide-react" import Image from "next/image" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import type { Post } from "../types" interface ReelPostProps { post: Post index: number } export function ReelPost({ post, index }: ReelPostProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: post.id }) const style = { transform: CSS.Transform.toString(transform), transition, zIndex: isDragging ? 50 : undefined, } return (

{post.isDuplicate && (

Cette image est déjà présente dans votre feed

)}

) } [V0_FILE]typescriptreact:file="utils/storage.ts" import type { FeedState } from "../types" export function saveFeedState(state: FeedState) { localStorage.setItem("instagram-feed-state", JSON.stringify(state)) } export function loadFeedState(): FeedState { const saved = localStorage.getItem("instagram-feed-state") return saved ? JSON.parse(saved) : { posts: [], reels: [] } } [V0_FILE]typescriptreact:file="components/instagram-feed.tsx" "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 { saveFeedState, loadFeedState } from "../utils/storage" import { calculateImageHash } from "../utils/image" import type { Post, FeedTab } from "../types" export function InstagramFeed() { const [activeTab, setActiveTab] = useState("posts") const [posts, setPosts] = useState([]) const [reels, setReels] = useState([]) useEffect(() => { const state = loadFeedState() setPosts(state.posts) setReels(state.reels) }, []) useEffect(() => { saveFeedState({ posts, reels }) }, [posts, reels]) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5, }, }), 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 checkForDuplicates = (newPosts: Post[], existingPosts: Post[]) => { return newPosts.map((post) => ({ ...post, isDuplicate: existingPosts.some((p) => p.hash === post.hash && post.hash !== undefined), })) } const handleNewImages = async (files: File[]) => { const newPosts = await Promise.all( files.map(async (file) => ({ id: Math.random().toString(), imageUrl: URL.createObjectURL(file), hash: await calculateImageHash(file), })), ) if (activeTab === "posts") { setPosts((currentPosts) => { const updatedPosts = [...currentPosts, ...checkForDuplicates(newPosts, [...currentPosts, ...reels])] return updatedPosts }) } else if (activeTab === "reels") { setReels((currentReels) => { const updatedReels = [...currentReels, ...checkForDuplicates(newPosts, [...posts, ...currentReels])] return updatedReels }) } } useEffect(() => { const handleAddImages = async (e: CustomEvent) => { await handleNewImages(e.detail) } document.addEventListener("addImages", handleAddImages as EventListener) return () => { document.removeEventListener("addImages", handleAddImages as EventListener) } }, [activeTab]) // Ajout de activeTab comme dépendance const currentItems = activeTab === "posts" ? posts : reels const PostComponent = activeTab === "posts" ? InstagramPost : ReelPost return (

handleNewImages(Array.from(files))} />

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

) }