[V0_FILE]typescriptreact:file="components/app-provider.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" type App = { id: string title: string icon: string component: ReactNode } type Window = { id: string appId: string title: string isActive: boolean isMinimized: boolean isMaximized: boolean position: { x: number; y: number } size: { width: number; height: number } } type AppContextType = { apps: App[] windows: Window[] openApp: (appId: string) => void closeWindow: (windowId: string) => void minimizeWindow: (windowId: string) => void maximizeWindow: (windowId: string) => void activateWindow: (windowId: string) => void updateWindowPosition: (windowId: string, position: { x: number; y: number }) => void updateWindowSize: (windowId: string, size: { width: number; height: number }) => void } const AppContext = createContext(undefined) export function AppProvider({ children }: { children: ReactNode }) { const [apps] = useState([ { id: "explorer", title: "File Explorer", icon: "/icons/explorer.png", component:

File Explorer Content

, }, { id: "edge", title: "Microsoft Edge", icon: "/icons/edge.png", component:

Edge Browser Content

, }, { id: "store", title: "Microsoft Store", icon: "/icons/store.png", component:

Microsoft Store Content

, }, { id: "settings", title: "Settings", icon: "/icons/settings.png", component:

Settings Content

{desktopIcons.map((icon) => ( openApp(icon.id)} /> ))} {windows.map((window) => { const app = apps.find((a) => a.id === window.appId) if (!app || window.isMinimized) return null return ( {app.component} ) })}

) } [V0_FILE]typescriptreact:file="components/desktop-icon.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" interface DesktopIconProps { name: string icon: string onClick: () => void } export default function DesktopIcon({ name, icon, onClick }: DesktopIconProps) { const [isSelected, setIsSelected] = useState(false) const handleClick = (e: React.MouseEvent) => { e.stopPropagation() setIsSelected(true) } const handleDoubleClick = (e: React.MouseEvent) => { e.stopPropagation() onClick() setIsSelected(false) } return (

{ e.currentTarget.src = "/placeholder.svg?height=40&width=40" }} />

{name}

) } [V0_FILE]typescriptreact:file="components/taskbar.tsx" isMerged="true" "use client" import { useState } from "react" import { Search, Wifi, Volume2, Battery, ChevronUp } from "lucide-react" import { useAppContext } from "./app-provider" interface TaskbarProps { onStartClick: () => void } export default function Taskbar({ onStartClick }: TaskbarProps) { const { apps, windows, activateWindow } = useAppContext() const [currentTime, setCurrentTime] = useState(new Date()) // Update time every minute useState(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 60000) return () => clearInterval(timer) }) const formatTime = (date: Date) => { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } const formatDate = (date: Date) => { return date.toLocaleDateString([], { month: "numeric", day: "numeric", year: "numeric" }) } return (

{/* Start button */} {/* Search */} {/* Taskbar apps */}

{apps.map((app) => { const isOpen = windows.some((w) => w.appId === app.id && !w.isMinimized) const isActive = windows.some((w) => w.appId === app.id && w.isActive) return ( ) })}

{/* System tray */}

{formatTime(currentTime)}

{formatDate(currentTime)}

) } [V0_FILE]typescriptreact:file="components/start-menu.tsx" isMerged="true" "use client" import { Search, Pin, Power } from "lucide-react" import { useAppContext } from "./app-provider" interface StartMenuProps { onClose: () => void } export default function StartMenu({ onClose }: StartMenuProps) { const { apps, openApp } = useAppContext() const handleAppClick = (appId: string) => { openApp(appId) onClose() } // Mock user data const user = { name: "User", avatar: "/placeholder.svg?height=32&width=32", } // Mock recommended apps const recommendedApps = [ { id: "word", name: "Word", icon: "/icons/word.png" }, { id: "excel", name: "Excel", icon: "/icons/excel.png" }, { id: "powerpoint", name: "PowerPoint", icon: "/icons/powerpoint.png" }, { id: "mail", name: "Mail", icon: "/icons/mail.png" }, { id: "photos", name: "Photos", icon: "/icons/photos.png" }, { id: "calendar", name: "Calendar", icon: "/icons/calendar.png" }, ] return (

e.stopPropagation()} >

{/* Search bar */}

{/* Pinned section */}

Pinned

{apps.map((app) => ( ))}

{/* Recommended section */}

) } [V0_FILE]typescriptreact:file="components/window.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect, type ReactNode } from "react" import { X, Minus, Square, Maximize2 } from "lucide-react" import { useAppContext } from "./app-provider" interface WindowProps { id: string title: string children: ReactNode isActive: boolean isMaximized: boolean position: { x: number; y: number } size: { width: number; height: number } } export default function Window({ id, title, children, isActive, isMaximized, position, size }: WindowProps) { const { closeWindow, minimizeWindow, maximizeWindow, activateWindow, updateWindowPosition, updateWindowSize } = useAppContext() const windowRef = useRef(null) const headerRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }) const [isResizing, setIsResizing] = useState(false) const [resizeDirection, setResizeDirection] = useState(null) const [resizeStartPos, setResizeStartPos] = useState({ x: 0, y: 0 }) const [resizeStartSize, setResizeStartSize] = useState({ width: 0, height: 0 }) // Handle window activation on click const handleWindowClick = (e: React.MouseEvent) => { e.stopPropagation() if (!isActive) { activateWindow(id) } } // Handle drag start const handleDragStart = (e: React.MouseEvent) => { if (isMaximized) return e.preventDefault() setIsDragging(true) const rect = windowRef.current?.getBoundingClientRect() if (rect) { setDragOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } } // Handle resize start const handleResizeStart = (e: React.MouseEvent, direction: string) => { if (isMaximized) return e.preventDefault() e.stopPropagation() setIsResizing(true) setResizeDirection(direction) setResizeStartPos({ x: e.clientX, y: e.clientY }) setResizeStartSize({ width: size.width, height: size.height }) } // Handle mouse move for drag and resize useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDragging) { const newX = e.clientX - dragOffset.x const newY = e.clientY - dragOffset.y updateWindowPosition(id, { x: newX, y: newY }) } if (isResizing && resizeDirection) { const deltaX = e.clientX - resizeStartPos.x const deltaY = e.clientY - resizeStartPos.y let newWidth = resizeStartSize.width let newHeight = resizeStartSize.height if (resizeDirection.includes("e")) { newWidth = Math.max(300, resizeStartSize.width + deltaX) } if (resizeDirection.includes("s")) { newHeight = Math.max(200, resizeStartSize.height + deltaY) } if (resizeDirection.includes("w")) { const widthChange = resizeStartSize.width - Math.max(300, resizeStartSize.width - deltaX) newWidth = resizeStartSize.width - widthChange updateWindowPosition(id, { x: position.x + widthChange, y: position.y, }) } if (resizeDirection.includes("n")) { const heightChange = resizeStartSize.height - Math.max(200, resizeStartSize.height - deltaY) newHeight = resizeStartSize.height - heightChange updateWindowPosition(id, { x: position.x, y: position.y + heightChange, }) } updateWindowSize(id, { width: newWidth, height: newHeight }) } } const handleMouseUp = () => { setIsDragging(false) setIsResizing(false) } if (isDragging || isResizing) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [ id, isDragging, isResizing, dragOffset, resizeDirection, resizeStartPos, resizeStartSize, position, updateWindowPosition, updateWindowSize, ]) // Window style based on state const windowStyle = isMaximized ? { top: 0, left: 0, width: "100%", height: "calc(100vh - 48px)", transform: "none", borderRadius: 0, } : { top: `${position.y}px`, left: `${position.x}px`, width: `${size.width}px`, height: `${size.height}px`, borderRadius: "8px", } return (

{/* Window header */}

{title}

{/* Window content */}

{children}

{/* Resize handles */} {!isMaximized && ( <>

handleResizeStart(e, "nw")} />

handleResizeStart(e, "ne")} />

handleResizeStart(e, "sw")} />

handleResizeStart(e, "se")} />

handleResizeStart(e, "n")} />

handleResizeStart(e, "s")} />

handleResizeStart(e, "w")} />

handleResizeStart(e, "e")} /> )}

) } [V0_FILE]typescriptreact:file="components/context-menu.tsx" isMerged="true" "use client" import { RefreshCw, View, FileText, FolderOpen, Settings } from "lucide-react" interface ContextMenuProps { x: number y: number onClose: () => void } export default function ContextMenu({ x, y, onClose }: ContextMenuProps) { // Adjust position to ensure menu stays within viewport const adjustedPosition = { x: Math.min(x, window.innerWidth - 200), y: Math.min(y, window.innerHeight - 250), } const menuItems = [ { icon: View, label: "View" }, { icon: RefreshCw, label: "Refresh" }, { icon: FileText, label: "New Text Document" }, { icon: FolderOpen, label: "New Folder" }, { icon: Settings, label: "Personalize" }, ] return (

e.stopPropagation()} >

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

) } [V0_FILE]plaintext:file="public/icons/windows.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/explorer.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/edge.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/store.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/settings.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/recycle-bin.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]typescriptreact:file="src/index.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { user-select: none; } [V0_FILE]typescriptreact:file="src/components/app-provider.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" type App = { id: string title: string icon: string component: ReactNode } type Window = { id: string appId: string title: string isActive: boolean isMinimized: boolean isMaximized: boolean position: { x: number; y: number } size: { width: number; height: number } } type AppContextType = { apps: App[] windows: Window[] openApp: (appId: string) => void closeWindow: (windowId: string) => void minimizeWindow: (windowId: string) => void maximizeWindow: (windowId: string) => void activateWindow: (windowId: string) => void updateWindowPosition: (windowId: string, position: { x: number; y: number }) => void updateWindowSize: (windowId: string, size: { width: number; height: number }) => void } const AppContext = createContext(undefined) export function AppProvider({ children }: { children: ReactNode }) { const [apps] = useState([ { id: "explorer", title: "File Explorer", icon: "/icons/explorer.png", component:

File Explorer Content

, }, { id: "edge", title: "Microsoft Edge", icon: "/icons/edge.png", component:

Edge Browser Content

, }, { id: "store", title: "Microsoft Store", icon: "/icons/store.png", component:

Microsoft Store Content

, }, { id: "settings", title: "Settings", icon: "/icons/settings.png", component:

Settings Content

, }, ]) const [windows, setWindows] = useState([]) const openApp = (appId: string) => { const app = apps.find((app) => app.id === appId) if (!app) return const windowId = `${appId}-${Date.now()}` // Deactivate all other windows const updatedWindows = windows.map((w) => ({ ...w, isActive: false, })) // Add new window setWindows([ ...updatedWindows, { id: windowId, appId, title: app.title, isActive: true, isMinimized: false, isMaximized: false, position: { x: 100 + windows.length * 20, y: 100 + windows.length * 20 }, size: { width: 800, height: 600 }, }, ]) } const closeWindow = (windowId: string) => { setWindows(windows.filter((w) => w.id !== windowId)) } const minimizeWindow = (windowId: string) => { setWindows(windows.map((w) => (w.id === windowId ? { ...w, isMinimized: true, isActive: false } : w))) } const maximizeWindow = (windowId: string) => { setWindows(windows.map((w) => (w.id === windowId ? { ...w, isMaximized: !w.isMaximized } : w))) } const activateWindow = (windowId: string) => { setWindows( windows.map((w) => w.id === windowId ? { ...w, isActive: true, isMinimized: false } : { ...w, isActive: false }, ), ) } const updateWindowPosition = (windowId: string, position: { x: number; y: number }) => { setWindows(windows.map((w) => (w.id === windowId ? { ...w, position } : w))) } const updateWindowSize = (windowId: string, size: { width: number; height: number }) => { setWindows(windows.map((w) => (w.id === windowId ? { ...w, size } : w))) } return ( {children} ) } export function useAppContext() { const context = useContext(AppContext) if (context === undefined) { throw new Error("useAppContext must be used within an AppProvider") } return context } [V0_FILE]typescriptreact:file="vite.config.js" isMerged="true" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { VitePWA } from "vite-plugin-pwa" const config = ({ mode }) => { return defineConfig({ plugins: [ react(), VitePWA({ registerType: "autoUpdate", manifest: { name: "Windows 11 React", short_name: "Win11React", description: "Windows 11 desktop experience on the web", theme_color: "#0078D7", icons: [ { src: "favicon.png", sizes: "192x192", type: "image/png", }, { src: "favicon.png", sizes: "512x512", type: "image/png", }, ], }, workbox: { globPatterns: ["**/*.{js,css,html,ico,png,svg,jpg}"], }, }), ], base: "", define: { "process.env.NODE_ENV": `"${mode}"`, }, build: { outDir: "build", rollupOptions: { output: { manualChunks: (id) => { return "vendor" }, }, }, }, }) } export default config [V0_FILE]typescriptreact:file="package.json" isEdit="true" isMerged="true" { "name": "win11react", "description": "Win11 made in React", "version": "0.1.1", "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/free-regular-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/react-fontawesome": "^0.2.2", "axios": "^0.27.2", "i18next": "^21.10.0", "i18next-browser-languagedetector": "^6.1.8", "i18next-http-backend": "^1.4.5", "lucide-react": "^0.363.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-error-boundary": "^3.1.4", "react-i18next": "^11.18.6", "react-lazy-load-image-component": "^1.6.2", "react-redux": "^8.1.3", "redux": "^4.2.1", "sass": "^1.77.8" }, "scripts": { "dev": "vite", "start": "vite", "build": "vite build", "ghbuild": "CI=false vite build", "prettier": "prettier --write ." }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] }, "browserslist": { "production": [">0.2%", "not dead", "not op_mini all"], "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"] }, "devDependencies": { "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.20", "postcss": "^8.4.41", "prettier": "^2.8.8", "tailwindcss": "^3.4.9", "vite": "^5.2.6", "vite-plugin-pwa": "^0.19.7" } } [V0_FILE]typescriptreact:file="src/main.tsx" isEdit="true" isMerged="true" import React from "react" import ReactDOM from "react-dom/client" import App from "./App" import "./index.scss" import { Provider } from "react-redux" import { store } from "./store" ReactDOM.createRoot(document.getElementById("root")!).render( , ) [V0_FILE]scss:file="src/index.scss" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient( to bottom, transparent, rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb)); margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { user-select: none; } #brightoverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 9999; } .win11-scrollbar { &::-webkit-scrollbar { width: 8px; height: 8px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } &::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } } [V0_FILE]typescriptreact:file="src/store/actions.ts" isMerged="true" // UI Actions export const TOGGLE_START_MENU = "TOGGLE_START_MENU" export const TOGGLE_CONTEXT_MENU = "TOGGLE_CONTEXT_MENU" // System Actions export const TOGGLE_LOCK_SCREEN = "TOGGLE_LOCK_SCREEN" export const SET_VOLUME = "SET_VOLUME" export const SET_BRIGHTNESS = "SET_BRIGHTNESS" export const SET_BATTERY = "SET_BATTERY" export const SET_WIFI_STATUS = "SET_WIFI_STATUS" // Apps Actions export const OPEN_APP = "OPEN_APP" export const CLOSE_APP = "CLOSE_APP" export const MINIMIZE_APP = "MINIMIZE_APP" export const MAXIMIZE_APP = "MAXIMIZE_APP" export const FOCUS_APP = "FOCUS_APP" export const UPDATE_APP_POSITION = "UPDATE_APP_POSITION" export const UPDATE_APP_SIZE = "UPDATE_APP_SIZE" // Action Creators export const toggleStartMenu = (isOpen?: boolean) => ({ type: TOGGLE_START_MENU, payload: isOpen, }) export const toggleLockScreen = (isLocked: boolean) => ({ type: TOGGLE_LOCK_SCREEN, payload: isLocked, }) export const openApp = (appId: string) => ({ type: OPEN_APP, payload: appId, }) export const closeApp = (windowId: string) => ({ type: CLOSE_APP, payload: windowId, }) export const minimizeApp = (windowId: string) => ({ type: MINIMIZE_APP, payload: windowId, }) export const maximizeApp = (windowId: string) => ({ type: MAXIMIZE_APP, payload: windowId, }) export const focusApp = (windowId: string) => ({ type: FOCUS_APP, payload: windowId, }) export const updateAppPosition = (windowId: string, position: { x: number; y: number }) => ({ type: UPDATE_APP_POSITION, payload: { windowId, position }, }) export const updateAppSize = (windowId: string, size: { width: number; height: number }) => ({ type: UPDATE_APP_SIZE, payload: { windowId, size }, }) [V0_FILE]typescriptreact:file="src/store/reducers/uiReducer.ts" isMerged="true" import { TOGGLE_START_MENU } from "../actions" interface UiState { isStartMenuOpen: boolean } const initialState: UiState = { isStartMenuOpen: false, } export const uiReducer = (state = initialState, action: any) => { switch (action.type) { case TOGGLE_START_MENU: return { ...state, isStartMenuOpen: action.payload !== undefined ? action.payload : !state.isStartMenuOpen, } default: return state } } [V0_FILE]typescriptreact:file="src/store/reducers/appsReducer.ts" isMerged="true" import { OPEN_APP, CLOSE_APP, MINIMIZE_APP, MAXIMIZE_APP, FOCUS_APP, UPDATE_APP_POSITION, UPDATE_APP_SIZE, } from "../actions" interface App { id: string title: string icon: string } interface Window { id: string appId: string title: string isActive: boolean isMinimized: boolean isMaximized: boolean position: { x: number; y: number } size: { width: number; height: number } } interface AppsState { apps: App[] windows: Window[] pinnedApps: string[] recentApps: string[] } const initialState: AppsState = { apps: [ { id: "explorer", title: "File Explorer", icon: "/img/icons/explorer.png" }, { id: "edge", title: "Microsoft Edge", icon: "/img/icons/edge.png" }, { id: "store", title: "Microsoft Store", icon: "/img/icons/store.png" }, { id: "settings", title: "Settings", icon: "/img/icons/settings.png" }, { id: "notepad", title: "Notepad", icon: "/img/icons/notepad.png" }, { id: "calculator", title: "Calculator", icon: "/img/icons/calculator.png" }, { id: "terminal", title: "Terminal", icon: "/img/icons/terminal.png" }, { id: "paint", title: "Paint", icon: "/img/icons/paint.png" }, ], windows: [], pinnedApps: ["explorer", "edge", "store", "settings"], recentApps: [], } export const appsReducer = (state = initialState, action: any) => { switch (action.type) { case OPEN_APP: { const appId = action.payload const app = state.apps.find((app) => app.id === appId) if (!app) return state const windowId = `${appId}-${Date.now()}` // Update recent apps const recentApps = [appId, ...state.recentApps.filter((id) => id !== appId)].slice(0, 6) // Deactivate all other windows const updatedWindows = state.windows.map((w) => ({ ...w, isActive: false, })) return { ...state, windows: [ ...updatedWindows, { id: windowId, appId, title: app.title, isActive: true, isMinimized: false, isMaximized: false, position: { x: 100 + state.windows.length * 20, y: 100 + state.windows.length * 20 }, size: { width: 800, height: 600 }, }, ], recentApps, } } case CLOSE_APP: return { ...state, windows: state.windows.filter((w) => w.id !== action.payload), } case MINIMIZE_APP: return { ...state, windows: state.windows.map((w) => (w.id === action.payload ? { ...w, isMinimized: true, isActive: false } : w)), } case MAXIMIZE_APP: return { ...state, windows: state.windows.map((w) => (w.id === action.payload ? { ...w, isMaximized: !w.isMaximized } : w)), } case FOCUS_APP: return { ...state, windows: state.windows.map((w) => w.id === action.payload ? { ...w, isActive: true, isMinimized: false } : { ...w, isActive: false }, ), } case UPDATE_APP_POSITION: { const { windowId, position } = action.payload return { ...state, windows: state.windows.map((w) => (w.id === windowId ? { ...w, position } : w)), } } case UPDATE_APP_SIZE: { const { windowId, size } = action.payload return { ...state, windows: state.windows.map((w) => (w.id === windowId ? { ...w, size } : w)), } } default: return state } } [V0_FILE]typescriptreact:file="src/components/start-menu.tsx" isEdit="true" isMerged="true" "use client" import { Search, Pin, Power } from "lucide-react" import { useSelector, useDispatch } from "react-redux" import { toggleStartMenu, openApp } from "../store/actions" import type { RootState } from "../store" interface StartMenuProps { onClose?: () => void } export default function StartMenu() { const dispatch = useDispatch() const apps = useSelector((state: RootState) => state.apps.apps) const pinnedApps = useSelector((state: RootState) => state.apps.pinnedApps) const recentApps = useSelector((state: RootState) => state.apps.recentApps) const handleAppClick = (appId: string) => { dispatch(openApp(appId)) dispatch(toggleStartMenu(false)) } // Mock user data const user = { name: "User", avatar: "/img/user.png", } // Mock recommended apps const recommendedApps = [ { id: "word", name: "Word", icon: "/img/icons/word.png" }, { id: "excel", name: "Excel", icon: "/img/icons/excel.png" }, { id: "powerpoint", name: "PowerPoint", icon: "/img/icons/powerpoint.png" }, { id: "mail", name: "Mail", icon: "/img/icons/mail.png" }, { id: "photos", name: "Photos", icon: "/img/icons/photos.png" }, { id: "calendar", name: "Calendar", icon: "/img/icons/calendar.png" }, ] return (

e.stopPropagation()} >

{/* Search bar */}

{/* Pinned section */}

Pinned

{pinnedApps.map((appId) => { const app = apps.find((a) => a.id === appId) if (!app) return null return ( ) })}

{/* Recommended section */}

) } [V0_FILE]typescriptreact:file="src/components/window.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect, type ReactNode } from "react" import { X, Minus, Square, Maximize2 } from "lucide-react" import { useDispatch } from "react-redux" import { closeApp, minimizeApp, maximizeApp, focusApp, updateAppPosition, updateAppSize } from "../store/actions" import AppContent from "./app-content" interface WindowProps { id: string title: string children?: ReactNode isActive: boolean isMaximized: boolean position: { x: number; y: number } size: { width: number; height: number } appId: string } export default function Window({ id, title, children, isActive, isMaximized, position, size, appId }: WindowProps) { const dispatch = useDispatch() const windowRef = useRef(null) const headerRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }) const [isResizing, setIsResizing] = useState(false) const [resizeDirection, setResizeDirection] = useState(null) const [resizeStartPos, setResizeStartPos] = useState({ x: 0, y: 0 }) const [resizeStartSize, setResizeStartSize] = useState({ width: 0, height: 0 }) // Handle window activation on click const handleWindowClick = (e: React.MouseEvent) => { e.stopPropagation() if (!isActive) { dispatch(focusApp(id)) } } // Handle drag start const handleDragStart = (e: React.MouseEvent) => { if (isMaximized) return e.preventDefault() setIsDragging(true) const rect = windowRef.current?.getBoundingClientRect() if (rect) { setDragOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } } // Handle resize start const handleResizeStart = (e: React.MouseEvent, direction: string) => { if (isMaximized) return e.preventDefault() e.stopPropagation() setIsResizing(true) setResizeDirection(direction) setResizeStartPos({ x: e.clientX, y: e.clientY }) setResizeStartSize({ width: size.width, height: size.height }) } // Handle mouse move for drag and resize useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDragging) { const newX = e.clientX - dragOffset.x const newY = e.clientY - dragOffset.y dispatch(updateAppPosition(id, { x: newX, y: newY })) } if (isResizing && resizeDirection) { const deltaX = e.clientX - resizeStartPos.x const deltaY = e.clientY - resizeStartPos.y let newWidth = resizeStartSize.width let newHeight = resizeStartSize.height if (resizeDirection.includes("e")) { newWidth = Math.max(300, resizeStartSize.width + deltaX) } if (resizeDirection.includes("s")) { newHeight = Math.max(200, resizeStartSize.height + deltaY) } if (resizeDirection.includes("w")) { const widthChange = resizeStartSize.width - Math.max(300, resizeStartSize.width - deltaX) newWidth = resizeStartSize.width - widthChange dispatch( updateAppPosition(id, { x: position.x + widthChange, y: position.y, }), ) } if (resizeDirection.includes("n")) { const heightChange = resizeStartSize.height - Math.max(200, resizeStartSize.height - deltaY) newHeight = resizeStartSize.height - heightChange dispatch( updateAppPosition(id, { x: position.x, y: position.y + heightChange, }), ) } dispatch(updateAppSize(id, { width: newWidth, height: newHeight })) } } const handleMouseUp = () => { setIsDragging(false) setIsResizing(false) } if (isDragging || isResizing) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [id, isDragging, isResizing, dragOffset, resizeDirection, resizeStartPos, resizeStartSize, position, dispatch]) // Window style based on state const windowStyle = isMaximized ? { top: 0, left: 0, width: "100%", height: "calc(100vh - 48px)", transform: "none", borderRadius: 0, } : { top: `${position.y}px`, left: `${position.x}px`, width: `${size.width}px`, height: `${size.height}px`, borderRadius: "8px", } return (

{/* Window header */}

{title}

{/* Window content */}

{children || }

{/* Resize handles */} {!isMaximized && ( <>

handleResizeStart(e, "nw")} />

handleResizeStart(e, "ne")} />

handleResizeStart(e, "sw")} />

handleResizeStart(e, "se")} />

handleResizeStart(e, "n")} />

handleResizeStart(e, "s")} />

handleResizeStart(e, "w")} />

handleResizeStart(e, "e")} /> )}

) } [V0_FILE]typescriptreact:file="src/components/lock-screen.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" interface LockScreenProps { onUnlock: () => void } export default function LockScreen({ onUnlock }: LockScreenProps) { const [currentTime, setCurrentTime] = useState(new Date()) const [password, setPassword] = useState("") const [showPasswordInput, setShowPasswordInput] = useState(false) useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) const formatTime = (date: Date) => { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } const formatDate = (date: Date) => { return date.toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" }) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real app, you would validate the password // For demo purposes, any password works onUnlock() } const handleScreenClick = () => { if (!showPasswordInput) { setShowPasswordInput(true) } } return (

{formatTime(currentTime)}

{formatDate(currentTime)}

{showPasswordInput && (

e.stopPropagation()} >

{ e.currentTarget.textContent = "U" }} />

User

)}

) } [V0_FILE]typescriptreact:file="src/components/app-content.tsx" isMerged="true" import { FileText, Terminal, Calculator, Settings, Globe, Store } from "lucide-react" interface AppContentProps { appId: string } export default function AppContent({ appId }: AppContentProps) { switch (appId) { case "explorer": return case "edge": return case "store": return case "settings": return case "notepad": return case "calculator": return case "terminal": return default: return

App content for {appId}

} } function FileExplorer() { return (

Quick access

Desktop

Downloads

Documents

Pictures

{["Documents", "Downloads", "Music", "Pictures", "Videos", "Desktop"].map((folder) => (

{folder}

))}

) } function Edge() { return (

{ e.currentTarget.src = "/placeholder.svg?height=400&width=600" }} />

Welcome to Microsoft Edge

) } function Notepad() { return (

) } function CalculatorApp() { return (

{["C", "±", "%", "÷", "7", "8", "9", "×", "4", "5", "6", "-", "1", "2", "3", "+", "0", ".", "="].map((key) => ( ))}

) } function TerminalApp() { return (

Microsoft Windows [Version 11.0.22000.795]

C:\Users\User> _

) } function SettingsApp() { return (

{[ "System", "Bluetooth & devices", "Network & internet", "Personalization", "Apps", "Accounts", "Time & language", "Gaming", "Accessibility", "Privacy & security", "Windows Update", ].map((item) => (

{item}

))}

Settings

System

Display, sound, notifications, power

Bluetooth & devices

Bluetooth, printers, mouse

Network & internet

Wi-Fi, airplane mode, VPN

Personalization

Background, colors, lock screen

) } function StoreApp() { return (

Home

Featured apps

{["Microsoft Office", "Spotify", "Adobe Photoshop"].map((app) => (

{app}

Free

))}

Top games

{["Minecraft", "Fortnite", "Roblox"].map((app) => (

{app}

$19.99

))}

) } [V0_FILE]json:file="public/manifest.json" isMerged="true" { "short_name": "Win11React", "name": "Windows 11 in React", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "favicon.png", "type": "image/png", "sizes": "192x192" }, { "src": "favicon.png", "type": "image/png", "sizes": "512x512" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "*.{js,ts,jsx,tsx,mdx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, windows: { blue: "#0078D7", accent: "#0078D7", taskbar: "rgba(0, 0, 0, 0.7)", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [], } [V0_FILE]typescriptreact:file="src/components/context-menu/act-menu.tsx" isMerged="true" "use client" import { useSelector, useDispatch } from "react-redux" import { Icon } from "../../utils/general" import "./menu.scss" import * as Actions from "../../actions" export const ActMenu = () => { const menu = useSelector((state) => state.menus) const menudata = menu.data[menu.opts] const { abpos, isLeft } = useSelector((state) => { var acount = state.menus.menus[state.menus.opts].length var tmpos = { top: state.menus.top, left: state.menus.left, }, tmpleft = false var wnwidth = window.innerWidth, wnheight = window.innerHeight var ewidth = 312, eheight = acount * 28 tmpleft = wnwidth - tmpos.left > 504 if (wnwidth - tmpos.left < ewidth) { tmpos.left = wnwidth - ewidth } if (wnheight - tmpos.top < eheight) { tmpos.bottom = wnheight - tmpos.top tmpos.top = null } return { abpos: tmpos, isLeft: tmpleft, } }) const dispatch = useDispatch() const clickDispatch = (event) => { event.stopPropagation() var action = { type: event.target.dataset.action, payload: event.target.dataset.payload, } if (action.type) { if (action.type != action.type.toUpperCase()) { Actions[action.type](action.payload, menu) } else { dispatch(action) } dispatch({ type: "MENUHIDE" }) } } const menuobj = (data) => { var mnode = [] data.map((opt, i) => { if (opt.type == "hr") { mnode.push(

) } else { mnode.push(

{menudata.ispace != false ? (

{opt.icon && opt.type == "svg" ? : null} {opt.icon && opt.type == "fa" ? : null} {opt.icon && opt.type == null ? : null}

) : null}

{opt.name}

{opt.opts ? : null} {opt.dot ? : null} {opt.check ? : null} {opt.opts ? (

{menuobj(opt.opts)}

) : null}

, ) } }) return mnode } return (

{menuobj(menu.menus[menu.opts])}

) } export default ActMenu [V0_FILE]typescriptreact:file="src/actions/index.ts" isFixed="true" isQuickEdit="true" isMerged="true" import axios from "axios" import store from "../store" import { dfApps } from "../utils/default-apps" import { gene_name } from "../utils/helpers" export const dispatchAction = (event) => { const action = { type: event.target.dataset.action, payload: event.target.dataset.payload, } if (action.type) { store.dispatch(action) } } export const refresh = (pl, menu) => { if (menu.menus.desk[0].opts[4].check) { store.dispatch({ type: "DESKHIDE" }) setTimeout(() => store.dispatch({ type: "DESKSHOW" }), 100) } } export const changeIconSize = (size, menu) => { var tmpMenu = { ...menu } tmpMenu.menus.desk[0].opts[0].dot = false tmpMenu.menus.desk[0].opts[1].dot = false tmpMenu.menus.desk[0].opts[2].dot = false var isize = 1 if (size == "large") { tmpMenu.menus.desk[0].opts[0].dot = true isize = 1.5 } else if (size == "medium") { tmpMenu.menus.desk[0].opts[1].dot = true isize = 1.2 } else { tmpMenu.menus.desk[0].opts[2].dot = true } refresh("", tmpMenu) store.dispatch({ type: "DESKSIZE", payload: isize }) store.dispatch({ type: "MENUCHNG", payload: tmpMenu }) } export const deskHide = (payload, menu) => { var tmpMenu = { ...menu } tmpMenu.menus.desk[0].opts[4].check ^= 1 store.dispatch({ type: "DESKTOGG" }) store.dispatch({ type: "MENUCHNG", payload: tmpMenu }) } export const changeSort = (sort, menu) => { var tmpMenu = { ...menu } tmpMenu.menus.desk[1].opts[0].dot = false tmpMenu.menus.desk[1].opts[1].dot = false tmpMenu.menus.desk[1].opts[2].dot = false if (sort == "name") { tmpMenu.menus.desk[1].opts[0].dot = true } else if (sort == "size") { tmpMenu.menus.desk[1].opts[1].dot = true } else { tmpMenu.menus.desk[1].opts[2].dot = true } refresh("", tmpMenu) store.dispatch({ type: "DESKSORT", payload: sort }) store.dispatch({ type: "MENUCHNG", payload: tmpMenu }) } export const changeTaskAlign = (align, menu) => { var tmpMenu = { ...menu } if (tmpMenu.menus.task[0].opts[align == "left" ? 0 : 1].dot) return tmpMenu.menus.task[0].opts[0].dot = false tmpMenu.menus.task[0].opts[1].dot = false if (align == "left") { tmpMenu.menus.task[0].opts[0].dot = true } else { tmpMenu.menus.task[0].opts[1].dot = true } store.dispatch({ type: "TASKTOG" }) store.dispatch({ type: "MENUCHNG", payload: tmpMenu }) } export const performApp = (act, menu) => { var data = { type: menu.dataset.action, payload: menu.dataset.payload, } if (act == "open") { if (data.type) store.dispatch(data) } else if (act == "delshort") { if (data.type) { var apps = store.getState().apps var app = Object.keys(apps).filter( (x) => apps[x].action == data.type || (apps[x].payload == data.payload && apps[x].payload != null), ) app = apps[app] if (app) { store.dispatch({ type: "DESKREM", payload: app.name }) } } } } export const delApp = (act, menu) => { var data = { type: menu.dataset.action, payload: menu.dataset.payload, } if (act == "delete") { if (data.type) { var apps = store.getState().apps var app = Object.keys(apps).filter((x) => apps[x].action == data.type) if (app) { app = apps[app] if (app.pwa == true || app.pwa == false) { store.dispatch({ type: app.action, payload: "close" }) store.dispatch({ type: "DELAPP", payload: app.icon }) var installed = localStorage.getItem("installed") if (!installed) installed = "[]" installed = JSON.parse(installed) installed = installed.filter((x) => x.icon != app.icon) localStorage.setItem("installed", JSON.stringify(installed)) store.dispatch({ type: "DESKREM", payload: app.name }) } } } } } export const installApp = (data) => { var app = { ...data, type: "app", pwa: true } var installed = localStorage.getItem("installed") if (!installed) installed = "[]" installed = JSON.parse(installed) installed.push(app) localStorage.setItem("installed", JSON.stringify(installed)) var desk = localStorage.getItem("desktop") if (!desk) desk = dfApps.desktop else desk = JSON.parse(desk) desk.push(app.name) localStorage.setItem("desktop", JSON.stringify(desk)) app.action = gene_name() store.dispatch({ type: "ADDAPP", payload: app }) store.dispatch({ type: "DESKADD", payload: app }) store.dispatch({ type: "WNSTORE", payload: "mnmz" }) } export const getTreeValue = (obj, path) => { if (path == null) return false var tdir = { ...obj } path = path.split(".") for (var i = 0; i < path.length; i++) { tdir = tdir[path[i]] } return tdir } export const changeTheme = () => { const currentTheme = store.getState().setting.person.theme const thm = currentTheme == "light" ? "dark" : "light" var icon = thm == "light" ? "sun" : "moon" document.body.dataset.theme = thm store.dispatch({ type: "STNGTHEME", payload: thm }) store.dispatch({ type: "PANETHEM", payload: icon }) store.dispatch({ type: "WALLSET", payload: thm == "light" ? 0 : 1 }) } const loadWidget = async () => { var tmpWdgt = { ...store.getState().widpane, }, date = new Date() // console.log('fetching ON THIS DAY'); var wikiurl = "https://en.wikipedia.org/api/rest_v1/feed/onthisday/events" await axios .get(`${wikiurl}/${date.getMonth()}/${date.getDay()}`) .then((res) => res.data) .then((data) => { var event = data.events[Math.floor(Math.random() * data.events.length)] date.setYear(event.year) tmpWdgt.data.date = date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) tmpWdgt.data.event = event }) .catch((error) => {}) // console.log('fetching NEWS'); await axios .get("https://github.win11react.com/api-cache/news.json") .then((res) => res.data) .then((data) => { var newsList = [] data["articles"].forEach((e) => { e.title = e["title"].split(`-`).slice(0, -1).join(`-`).trim() newsList.push(e) }) tmpWdgt.data.news = newsList }) .catch((error) => {}) store.dispatch({ type: "WIDGREST", payload: tmpWdgt, }) } export const loadSettings = () => { var sett = localStorage.getItem("setting") || "{}" sett = JSON.parse(sett) if (sett.person == null) { sett = JSON.parse(JSON.stringify(store.getState().setting)) if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { sett.person.theme = "dark" } } if (sett.person.theme != "light") changeTheme() store.dispatch({ type: "SETTLOAD", payload: sett }) if (import.meta.env.MODE != "development") { loadWidget() } } // mostly file explorer export const handleFileOpen = (id) => { // handle double click open const item = store.getState().files.data.getId(id) if (item != null) { if (item.type == "folder") { store.dispatch({ type: "FILEDIR", payload: item.id }) } } } export const flightMode = () => { store.dispatch({ type: "TOGGAIRPLNMD", payload: "" }) } [V0_FILE]typescriptreact:file="src/utils/general.tsx" isMerged="true" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import * as FAIcons from "@fortawesome/free-solid-svg-icons" export const Icon = ({ icon, fafa, src, width = 16, height, color, className = "", ...props }) => { if (fafa) { const iconName = fafa.replace("fa", "") const faIcon = FAIcons[`fa${iconName}`] return ( ) } else if (icon) { // SVG icon handling return (

{icon}

) } else if (src) { // Image icon return ( icon

) } return null } [V0_FILE]typescriptreact:file="src/utils/helpers.ts" isMerged="true" // Generate a unique name for app actions export const gene_name = () => { return `APP${Math.random().toString(36).substring(2, 10).toUpperCase()}` } // Format file size export const formatBytes = (bytes, decimals = 2) => { if (bytes === 0) return "0 Bytes" const k = 1024 const dm = decimals < 0 ? 0 : decimals const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i] } // Format date export const formatDate = (date) => { const d = new Date(date) return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } // Format time export const formatTime = (date) => { const d = new Date(date) return d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", }) } // Debounce function export const debounce = (func, wait) => { let timeout return function executedFunction(...args) { const later = () => { clearTimeout(timeout) func(...args) } clearTimeout(timeout) timeout = setTimeout(later, wait) } } // Check if device is mobile export const isMobile = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) } // Get random item from array export const getRandomItem = (arr) => { return arr[Math.floor(Math.random() * arr.length)] } // Shuffle array export const shuffleArray = (array) => { const newArray = [...array] for (let i = newArray.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[newArray[i], newArray[j]] = [newArray[j], newArray[i]] } return newArray } [V0_FILE]typescriptreact:file="src/utils/default-apps.ts" isMerged="true" export const dfApps = { // Default desktop apps desktop: ["explorer", "edge", "store", "settings", "notepad", "calculator", "terminal", "recycle"], // Default pinned apps pinned: ["explorer", "edge", "store", "settings"], // Default recent apps recent: [], } // Default menu structure export const defaultMenus = { desk: [ { name: "View", icon: "ViewIcon", type: "svg", opts: [ { name: "Large icons", action: "changeIconSize", payload: "large", dot: false, }, { name: "Medium icons", action: "changeIconSize", payload: "medium", dot: true, }, { name: "Small icons", action: "changeIconSize", payload: "small", dot: false, }, { type: "hr" }, { name: "Show desktop icons", action: "deskHide", check: true, }, ], }, { name: "Sort by", icon: "SortIcon", type: "svg", opts: [ { name: "Name", action: "changeSort", payload: "name", dot: true, }, { name: "Size", action: "changeSort", payload: "size", dot: false, }, { name: "Date modified", action: "changeSort", payload: "date", dot: false, }, ], }, { name: "Refresh", action: "refresh", icon: "RefreshIcon", type: "svg", }, { type: "hr" }, { name: "New", icon: "NewIcon", type: "svg", opts: [ { name: "Folder", action: "createFolder", }, { name: "Shortcut", action: "createShortcut", }, { name: "Text Document", action: "createTextDoc", }, ], }, { type: "hr" }, { name: "Display settings", action: "SETTINGS", payload: "display", }, { name: "Personalize", action: "SETTINGS", payload: "personalization", }, ], task: [ { name: "Align icons", opts: [ { name: "Left", action: "changeTaskAlign", payload: "left", dot: false, }, { name: "Center", action: "changeTaskAlign", payload: "center", dot: true, }, ], }, { name: "Search", opts: [ { name: "Show", action: "TASKSRCH", payload: true, dot: true, }, { name: "Hide", action: "TASKSRCH", payload: false, dot: false, }, ], }, { name: "Widgets", opts: [ { name: "Show", action: "TASKWIDG", payload: true, dot: true, }, { name: "Hide", action: "TASKWIDG", payload: false, dot: false, }, ], }, { type: "hr" }, { name: "Taskbar settings", action: "SETTINGS", payload: "taskbar", }, ], } [V0_FILE]typescriptreact:file="src/store/reducers/menuReducer.ts" isMerged="true" import { defaultMenus } from "../../utils/default-apps" const initialState = { hide: true, top: 0, left: 0, opts: "desk", menus: defaultMenus, data: { desk: { width: 310, secwid: 180, }, task: { width: 220, secwid: 180, }, }, } export const menuReducer = (state = initialState, action) => { switch (action.type) { case "MENUSHOW": return { ...state, hide: false, top: action.payload.top, left: action.payload.left, opts: action.payload.menu || "desk", } case "MENUHIDE": return { ...state, hide: true, } case "MENUCHNG": return { ...state, ...action.payload, } default: return state } } [V0_FILE]typescriptreact:file="src/store/reducers/desktopReducer.ts" isMerged="true" import { dfApps } from "../../utils/default-apps" // Load desktop icons from localStorage or use defaults const getDesktopIcons = () => { const savedDesktop = localStorage.getItem("desktop") if (savedDesktop) { try { return JSON.parse(savedDesktop) } catch (e) { return dfApps.desktop } } return dfApps.desktop } const initialState = { icons: getDesktopIcons(), size: 1.2, // medium sort: "name", hide: false, } export const desktopReducer = (state = initialState, action) => { switch (action.type) { case "DESKSIZE": return { ...state, size: action.payload, } case "DESKSORT": return { ...state, sort: action.payload, } case "DESKTOGG": return { ...state, hide: !state.hide, } case "DESKHIDE": return { ...state, hide: true, } case "DESKSHOW": return { ...state, hide: false, } case "DESKADD": const newIcons = [...state.icons, action.payload.name] localStorage.setItem("desktop", JSON.stringify(newIcons)) return { ...state, icons: newIcons, } case "DESKREM": const filteredIcons = state.icons.filter((icon) => icon !== action.payload) localStorage.setItem("desktop", JSON.stringify(filteredIcons)) return { ...state, icons: filteredIcons, } default: return state } } [V0_FILE]typescriptreact:file="src/components/desktop.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import DesktopIcon from "./desktop-icon" import Window from "./window" import { useSelector, useDispatch } from "react-redux" import type { RootState } from "../store" export default function Desktop() { const dispatch = useDispatch() const windows = useSelector((state: RootState) => state.apps.windows) const apps = useSelector((state: RootState) => state.apps.apps) const desktop = useSelector((state: RootState) => state.desktop) const handleContextMenu = (e: React.MouseEvent) => { e.preventDefault() dispatch({ type: "MENUSHOW", payload: { top: e.clientY, left: e.clientX, menu: "desk", }, }) } // Get desktop icons based on desktop.icons array const desktopIcons = desktop.icons .map((iconId) => { const app = apps.find((app) => app.id === iconId) if (!app) return null return { id: app.id, name: app.title, icon: app.icon, } }) .filter(Boolean) // Sort desktop icons based on desktop.sort const sortedIcons = [...desktopIcons].sort((a, b) => { if (desktop.sort === "name") { return a.name.localeCompare(b.name) } else if (desktop.sort === "size") { // This would need actual file size data return 0 } else { // Sort by date (would need date data) return 0 } }) return (

{sortedIcons.map((icon) => ( dispatch({ type: "OPEN_APP", payload: icon.id })} size={desktop.size} /> ))} {windows.map((window) => { const app = apps.find((a) => a.id === window.appId) if (!app || window.isMinimized) return null return ( ) })}

) } [V0_FILE]typescriptreact:file="src/components/desktop-icon.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useDispatch } from "react-redux" interface DesktopIconProps { name: string icon: string onClick: () => void size?: number } export default function DesktopIcon({ name, icon, onClick, size = 1 }: DesktopIconProps) { const [isSelected, setIsSelected] = useState(false) const dispatch = useDispatch() const handleClick = (e: React.MouseEvent) => { e.stopPropagation() setIsSelected(true) } const handleDoubleClick = (e: React.MouseEvent) => { e.stopPropagation() onClick() setIsSelected(false) } const handleContextMenu = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() // Set the icon as selected setIsSelected(true) // Show context menu with app-specific options dispatch({ type: "MENUSHOW", payload: { top: e.clientY, left: e.clientX, menu: "app", app: name, }, }) } return (

{ e.currentTarget.src = "/placeholder.svg?height=40&width=40" }} />

{name}

) } [V0_FILE]typescriptreact:file="src/components/context-menu.tsx" isEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { useSelector, useDispatch } from "react-redux" import type { RootState } from "../store" import ActMenu from "./context-menu/act-menu" export default function ContextMenu() { const dispatch = useDispatch() const menu = useSelector((state: RootState) => state.menus) // Close menu when clicking outside useEffect(() => { const handleClick = () => { if (!menu.hide) { dispatch({ type: "MENUHIDE" }) } } document.addEventListener("click", handleClick) return () => { document.removeEventListener("click", handleClick) } }, [dispatch, menu.hide]) return } [V0_FILE]scss:file="src/components/context-menu/menu.scss" isEdit="true" isMerged="true" .actmenu { --bg1: rgba(249, 249, 249, 0.9); --bg1a: rgba(248, 248, 248, 0.96); --bg2: rgba(0, 0, 0, 0.08); position: absolute; background: var(--bg1); backdrop-filter: saturate(2) blur(20px); z-index: 10000; opacity: 1; pointer-events: all; // border: solid 1px var(--comp-txt); border-radius: 8px; transition: opacity 0.1s ease; &[data-hide="true"] { opacity: 0; pointer-events: none; } &[data-left="false"] .minimenu { left: unset; right: 98%; } } body[data-theme="dark"] .actmenu { --bg1: rgba(34, 36, 47, 0.8); --bg1a: rgba(30, 32, 47, 0.9); --bg2: rgba(255, 255, 255, 0.08); } .minimenu { position: absolute; display: none; top: 0; left: 99%; background: var(--bg1a); z-index: 9999; padding: 4px 0; // border: solid 1px var(--comp-txt); animation: fadein 600ms ease-in-out; // backdrop-filter: saturate(2) blur(20px); border-radius: 8px; } .menuopt { height: 28px; box-sizing: border-box; position: relative; padding: 4px 6px; font-size: 12px; cursor: default; margin: 6px; border-radius: 4px; display: flex; align-items: center; font-weight: 500; color: var(--txt-col); // transition: all 0.1s ease; &:hover { background: var(--bg2); .minimenu { display: block; } } .spcont { width: 16px; margin-right: 12px; } .micon { position: absolute; } .rightIcon { right: 8px; } .dotIcon, .checkIcon { right: 8px; color: var(--med-txt); } } .menuhr { position: relative; left: 0; width: 100%; height: 1px; background-color: #ccc5; margin: 4px 0; } [V0_FILE]scss:file="src/components/shared/battery.scss" isMerged="true" .battery { display: flex; position: relative; } .btFull { overflow: hidden; position: absolute; z-index: 0; } .charger svg { position: absolute; z-index: 1; } [V0_FILE]scss:file="src/components/panels/panels.scss" isMerged="true" .bandpane { --bg1: #dae2f2; --bg2: #e6edf8; --bgHvr: rgb(0 0 0 / 5%); &.bd-blur { --bg1: rgba(242, 242, 242, 0.9); --bg2: rgba(0, 0, 0, 0.05); --bgHvr: rgba(0, 0, 0, 0.05); backdrop-filter: blur(20px); } position: absolute; bottom: 10px; right: 129px; background: var(--bgHvr); color: var(--dark-txt); overflow: hidden; transition: cubic-bezier(0.62, 0, 0.32, 1) 250ms; z-index: 9999; border-radius: 8px; max-height: fit-content; &[data-hide="true"] { opacity: 0; animation: overflow-hider 0s ease-in-out 0.2s forwards; transition: all cubic-bezier(0.62, 0, 0.32, 1) 150ms; } .bandContainer { background: var(--bg2); display: flex; flex-wrap: wrap; max-width: 82px; div { padding: 12px; } } } body[data-theme="dark"] .bandpane { --bg1: #1c1c1c; --bg2: #242424; --bgHvr: #313131; &.bd-blur { --bg1: rgba(36, 36, 36, 0.8); --bg2: rgba(0, 0, 0, 0.2); --bgHvr: rgba(255, 255, 255, 0.08); } } .sidePane { --bg1: #dae2f2; --bg2: #e6edf8; --bg3: #fbfbfb; --bg4: rgb(0 0 0 / 5%); --sliderThumbClr: white; position: absolute; bottom: 12px; right: 12px; width: 360px; border-radius: 0.5rem; color: var(--dark-txt); background: var(--bg1); overflow: hidden; transition: cubic-bezier(0.62, 0, 0.32, 1) 250ms; z-index: 9999; transform: translateX(0); &.bd-blur { --bg1: rgb(242 242 242 / 90%); --bg2: rgb(255 255 255 / 20%); backdrop-filter: blur(20px); } &[data-hide="true"] { transform: translateY(110%); animation: overflow-hider 0s ease-in-out 150ms forwards; transition: all cubic-bezier(0.62, 0, 0.32, 1) 150ms; } .quickSettings { background: var(--bg2); display: flex; flex-direction: column; gap: 2rem; .qkCont { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; .qkGrp { display: flex; flex-direction: column; align-items: center; .qkbtn { width: 6rem; height: 3rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; border-bottom-color: rgba(0, 0, 0, 0.2); background: var(--bg3); border: solid 0.1px rgba(17, 17, 17, 0.1); transition: all 0.1s ease; &[data-state="true"] { background: var(--clrPrm); } } .qktext { width: max-content; font-size: 0.75em; margin: 0.5rem 0 1.33rem 0; } } } } .sliderCont { width: 100%; display: flex; align-items: center; .sliders { width: 100%; height: 4px; &[type="range"] { --track-color: linear-gradient(90deg, var(--clrPrm) 100%, #888888 100%); -webkit-appearance: none; background: transparent; } &[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: var(--track-color); border-radius: 10px; border: 0; } &[type="range"]::-webkit-slider-thumb { border: 4px solid var(--sliderThumbClr); height: 18px; width: 18px; border-radius: 10px; background: var(--clrPrm); -webkit-appearance: none; margin-top: -8px; transition: all 0.1s; &:hover { border: 3px solid var(--sliderThumbClr); } &:active { border: 5px solid var(--sliderThumbClr); } } &[type="range"]:focus::-webkit-slider-runnable-track { background: var(--track-color); } &[type="range"]::-moz-range-track { width: 100%; height: 4px; background: var(--track-color); border-radius: 10px; border: 0; } &[type="range"]::-moz-range-thumb { border: 4px solid var(--sliderThumbClr); height: 18px; width: 18px; border-radius: 10px; background: var(--clrPrm); &:hover { border: 3px solid var(--sliderThumbClr); } &:active { border: 5px solid var(--sliderThumbClr); } } } } .bottomBar { box-sizing: border-box; border-top: 1px solid var(--bg4); height: 3rem; display: flex; align-items: center; .battery-sidepane { height: 100%; display: flex; align-items: center; border-radius: 4px; &:hover { background: var(--bg4); } } } } body[data-theme="dark"] .sidePane { --bg1: #1c1c1c; --bg2: #242424; --bg3: #313131; --bg4: rgb(255 255 255 / 5%); --sliderThumbClr: #454545; &.bd-blur { --bg1: rgb(36 36 36 / 85%); --bg2: rgb(255 255 255 / 3.33%); } .uicon { filter: invert(1); } } .calnpane { --bg1: #dae2f2; --bg2: #e6edf8; --bgHvr: rgb(0 0 0 / 5%); &.bd-blur { --bg1: rgba(242, 242, 242, 0.9); --bg2: rgba(0, 0, 0, 0.05); --bgHvr: rgba(0, 0, 0, 0.05); backdrop-filter: blur(20px); } position: absolute; bottom: 12px; right: 12px; width: 21rem; background: var(--bg1); color: var(--dark-txt); overflow: hidden; transition: cubic-bezier(0.62, 0, 0.32, 1) 250ms; z-index: 9999; border-radius: 8px; max-height: 500px; &.collapse { max-height: 50px; } &[data-hide="true"] { transform: translateX(120%); animation: overflow-hider 0s ease-in-out 0.2s forwards; transition: all cubic-bezier(0.62, 0, 0.32, 1) 150ms; } #dycalendar { background: var(--bg2); } .topBar { height: 50px; border-bottom: 1px solid var(--comp-txt); display: flex; align-items: center; justify-content: space-between; .collapser { background: var(--bg2); } } } body[data-theme="dark"] .calnpane { --bg1: #1c1c1c; --bg2: #242424; --bgHvr: #313131; &.bd-blur { --bg1: rgba(36, 36, 36, 0.8); --bg2: rgba(0, 0, 0, 0.2); --bgHvr: rgba(255, 255, 255, 0.08); } } .searchMenu { min-height: 500px; padding: 32px; text-align: left; } .searchBar { height: 30px; border-bottom: solid 2px var(--clrPrm); border-radius: 4px; background: var(--comp-clr); display: flex; padding: 0 10px; .uicon { filter: brightness(0.6); margin-right: 12px; } input { width: 100%; background: inherit; color: var(--dark-txt); &::placeholder { color: var(--txt-col); } } } .smatch { background: var(--bg2); } .opts { color: var(--med-txt); div { border: solid 0 var(--clrPrm); cursor: pointer; &[value="true"] { border-bottom-width: 2px; color: var(--dark-txt); } } } .leftSide { width: 100%; } .leftSide[data-width="true"] { width: 32%; } .rightSide { margin: 8px; height: 560px; background: var(--bg2); display: flex; flex-direction: column; align-items: center; .hline { width: 90%; height: 1px; border-radius: 10px; background: var(--bg2); } } .topApp { background: var(--bg2); width: 19%; display: flex; flex-direction: column; align-items: center; border-radius: 4px; &:hover { filter: brightness(0.9); } } .qksrch { border-radius: 4px; .uicon { font-size: 20px; } &:hover { background: var(--bg2); } } .powerCont { position: absolute; top: -100px; left: -36px; width: 108px; font-size: 12px; background: var(--bg2); padding: 4px 6px; border-radius: 6px; box-shadow: 2px 2px 12px rgba(46, 40, 40, 0.25); opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 200ms ease-in-out; &[data-vis="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; } .flex { padding: 4px 6px; border-radius: 4px; &:hover { background: var(--bg2); } } .uicon { margin-right: 8px; } } @keyframes overflow-hider { 0% { overflow: visible; } 100% { overflow: hidden; } } [V0_FILE]typescriptreact:file="src/components/panels/side-pane.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useDispatch, useSelector } from "react-redux" import { Icon } from "../../utils/general" import Battery from "../shared/battery" import { getTreeValue } from "../../actions" import "./panels.scss" export const SidePane = () => { const sidepane = useSelector((state) => state.sidepane) const setting = useSelector((state) => state.setting) const tasks = useSelector((state) => state.taskbar) const [pnstates, setPnstate] = useState([]) const dispatch = useDispatch() const clickDispatch = (event) => { var action = { type: event.target.dataset.action, payload: event.target.dataset.payload, } if (action.type) { if (action.type != action.type.toUpperCase()) { // Call action from Actions if (window[action.type]) { window[action.type](action.payload) } } else dispatch(action) } // For battery saver if (action.payload === "system.power.saver.state") setBrightness() } const vSlider = document.querySelector(".vSlider") const bSlider = document.querySelector(".bSlider") const setVolume = (e) => { var aud = 3 if (e.target.value < 70) aud = 2 if (e.target.value < 30) aud = 1 if (e.target.value == 0) aud = 0 dispatch({ type: "TASKAUDO", payload: aud }) sliderBackground(vSlider, e.target.value) } function sliderBackground(elem, e) { if (elem) { elem.style.setProperty("--track-color", `linear-gradient(90deg, var(--clrPrm) ${e - 3}%, #888888 ${e}%)`) } } const setBrightness = (e) => { const brightnessSlider = document.getElementById("brightnessSlider") if (!brightnessSlider) return var brgt = brightnessSlider.value if (!e) { // Battery saver const state = setting.system.power.saver.state const factor = state ? 0.7 : 100 / 70 const newBrgt = brgt * factor setBrightnessValue(newBrgt) brightnessSlider.value = newBrgt } else { // Brightness slider setBrightnessValue(brgt) } } function setBrightnessValue(brgt) { const brightoverlay = document.getElementById("brightoverlay") if (brightoverlay) { brightoverlay.style.opacity = (100 - brgt) / 100 } dispatch({ type: "STNGSETV", payload: { path: "system.display.brightness", value: brgt, }, }) sliderBackground(bSlider, brgt) } useEffect(() => { if (sidepane && sidepane.quicks) { sidepane.quicks.forEach((item, i) => { if (item.src == "nightlight") { if (pnstates[i]) document.body.dataset.sepia = "true" else document.body.dataset.sepia = "false" } }) } }, [pnstates, sidepane]) useEffect(() => { if (sidepane && sidepane.quicks) { var tmp = [] for (var i = 0; i < sidepane.quicks.length; i++) { var val = getTreeValue(setting, sidepane.quicks[i].state) if (sidepane.quicks[i].name == "Theme") val = val == "dark" tmp.push(val) } setPnstate(tmp) } }, [setting, sidepane]) // Default quick settings if not available const defaultQuicks = [ { name: "WiFi", icon: "wifi", state: "system.network.wifi", action: "STNGTOGG", payload: "system.network.wifi", }, { name: "Bluetooth", icon: "bluetooth", state: "system.network.bluetooth", action: "STNGTOGG", payload: "system.network.bluetooth", }, { name: "Airplane Mode", icon: "airplane", state: "system.network.airplane", action: "STNGTOGG", payload: "system.network.airplane", }, { name: "Battery Saver", icon: "battery", state: "system.power.saver.state", action: "STNGTOGG", payload: "system.power.saver.state", }, { name: "Theme", icon: "theme", state: "person.theme", action: "changeTheme", payload: "", }, { name: "Night Light", icon: "nightlight", state: "system.display.nightlight", action: "STNGTOGG", payload: "system.display.nightlight", }, ] const quickSettings = sidepane?.quicks || defaultQuicks return (

{quickSettings.map((qk, idx) => { return (

{qk.name}

) })}

) } export default SidePane [V0_FILE]typescriptreact:file="src/components/panels/calendar-widget.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useSelector } from "react-redux" import { Icon } from "../../utils/general" import "./panels.scss" export const CalendarWidget = () => { const sidepane = useSelector((state) => state.sidepane) const [loaded, setLoad] = useState(false) const [collapse, setCollapse] = useState("") const collapseToggler = () => { collapse === "" ? setCollapse("collapse") : setCollapse("") } useEffect(() => { if (!loaded) { setLoad(true) // Initialize calendar if dycalendar library is available if (window.dycalendar) { window.dycalendar.draw({ target: "#dycalendar", type: "month", dayformat: "ddd", monthformat: "full", prevnextbutton: "show", highlighttoday: true, }) } } }, [loaded]) return (

{new Date().toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric", })}

{collapse === "" ? : }

) } export default CalendarWidget [V0_FILE]typescriptreact:file="src/components/panels/band-pane.tsx" isMerged="true" import { useSelector } from "react-redux" import { Icon } from "../../utils/general" import "./panels.scss" export const BandPane = () => { const sidepane = useSelector((state) => state.sidepane) return (

) } export default BandPane [V0_FILE]typescriptreact:file="src/components/desktop-app.tsx" isMerged="true" import { useDispatch, useSelector } from "react-redux" import { Icon } from "../utils/general" export const DesktopApp = () => { const deskApps = useSelector((state) => { var arr = { ...state.desktop } var tmpApps = [...arr.apps] if (arr.sort == "name") { tmpApps.sort((a, b) => (a.name > b.name ? 1 : b.name > a.name ? -1 : 0)) } else if (arr.sort == "size") { tmpApps.sort((a, b) => { var anm = a.name, bnm = b.name return anm[bnm.charCodeAt(0) % anm.length] > bnm[anm.charCodeAt(0) % bnm.length] ? 1 : -1 }) } else if (arr.sort == "date") { tmpApps.sort((a, b) => { var anm = a.name, bnm = b.name var anml = anm.length, bnml = bnm.length return anm[(bnml * 13) % anm.length] > bnm[(anml * 17) % bnm.length] ? 1 : -1 }) } arr.apps = tmpApps return arr }) const dispatch = useDispatch() return (

{!deskApps.hide && deskApps.apps.map((app, i) => { return ( // to allow it to be focusable (:focus)

{app.name}

) })}

) } export default DesktopApp [V0_FILE]scss:file="src/components/desktop.scss" isMerged="true" .desktopCont { width: 100%; height: calc(100% - 48px); position: absolute; top: 0; left: 0; display: grid; grid-template-columns: repeat(auto-fill, 80px); grid-template-rows: repeat(auto-fill, 90px); grid-auto-flow: column; padding: 4px; overflow: hidden; } .dskApp { width: 80px; height: 90px; display: flex; flex-direction: column; align-items: center; border-radius: 4px; margin: 4px; &:hover, &:focus { background-color: rgba(255, 255, 255, 0.1); } .dskIcon { width: 48px; height: 48px; margin-top: 8px; margin-bottom: 4px; display: flex; justify-content: center; align-items: center; img { width: 100%; height: 100%; object-fit: contain; } } .appName { color: white; font-size: 12px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .prtclk { cursor: pointer; } [V0_FILE]typescriptreact:file="src/store/reducers/sidepaneReducer.ts" isMerged="true" const initialState = { hide: true, banhide: true, calhide: true, winhide: true, quicks: [ { name: "WiFi", icon: "wifi", state: "system.network.wifi", action: "STNGTOGG", payload: "system.network.wifi", }, { name: "Bluetooth", icon: "bluetooth", state: "system.network.bluetooth", action: "STNGTOGG", payload: "system.network.bluetooth", }, { name: "Airplane Mode", icon: "airplane", state: "system.network.airplane", action: "STNGTOGG", payload: "system.network.airplane", }, { name: "Battery Saver", icon: "battery", state: "system.power.saver.state", action: "STNGTOGG", payload: "system.power.saver.state", }, { name: "Theme", icon: "theme", state: "person.theme", action: "changeTheme", payload: "", }, { name: "Night Light", icon: "nightlight", state: "system.display.nightlight", action: "STNGTOGG", payload: "system.display.nightlight", }, ], } export const sidepaneReducer = (state = initialState, action) => { switch (action.type) { case "PANEHIDE": return { ...state, hide: true, } case "PANESHOW": return { ...state, hide: false, } case "PANETOGGLE": return { ...state, hide: !state.hide, } case "BANDTOGGLE": return { ...state, banhide: !state.banhide, } case "CALTOGGLE": return { ...state, calhide: !state.calhide, } case "WINTOGGLE": return { ...state, winhide: !state.winhide, } default: return state } } [V0_FILE]typescriptreact:file="src/store/reducers/settingReducer.ts" isMerged="true" const initialState = { system: { display: { brightness: 100, nightlight: false, theme: "default", }, sound: { volume: 100, mute: false, }, network: { wifi: true, bluetooth: false, airplane: false, }, power: { battery: 100, saver: { state: false, threshold: 20, }, }, }, person: { name: "User", theme: "light", accent: "#0078D7", }, } export const settingReducer = (state = initialState, action) => { switch (action.type) { case "STNGSETV": // Set a specific setting value const { path, value } = action.payload const pathArray = path.split(".") const newState = { ...state } let current = newState for (let i = 0; i < pathArray.length - 1; i++) { current = current[pathArray[i]] } current[pathArray[pathArray.length - 1]] = value return newState case "STNGTOGG": // Toggle a boolean setting const togglePath = action.payload const togglePathArray = togglePath.split(".") const toggleState = { ...state } let currentToggle = toggleState for (let i = 0; i < togglePathArray.length - 1; i++) { currentToggle = currentToggle[togglePathArray[i]] } currentToggle[togglePathArray[togglePathArray.length - 1]] = !currentToggle[togglePathArray[togglePathArray.length - 1]] return toggleState case "STNGTHEME": // Change theme return { ...state, person: { ...state.person, theme: action.payload, }, } case "SETTLOAD": // Load settings from storage return action.payload default: return state } } [V0_FILE]scss:file="src/components/start-menu/start-menu.scss" isMerged="true" .startMenu { --bg1: rgba(242, 242, 242, 0.9); --bg2: rgba(255, 255, 255, 0.9); --bg3: rgba(0, 0, 0, 0.033); --bg4: #aaa; --roundRad: 8px; position: absolute; bottom: 12px; width: 640px; height: min(100% - 24px, 720px); left: 0; &[data-align="center"] { margin-left: auto; margin-right: auto; right: 0; text-align: center; } &[data-align="left"] { left: 8px; } color: var(--dark-txt); background: var(--bg1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: var(--roundRad); overflow: hidden; transition: all 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86); z-index: 9999; box-sizing: border-box; &[data-hide="true"] { transform: translateY(100px); opacity: 0; pointer-events: none; } } body[data-theme="dark"] .startMenu { --bg1: rgba(36, 36, 36, 0.8); --bg2: rgba(255, 255, 255, 0.1); --bg3: rgba(0, 0, 0, 0.15); --bg4: #444; .blueicon { filter: brightness(4); } } .allCont, .stmenu { position: relative; height: calc(100% - 64px); &[data-allapps="false"] { opacity: 0; transition: cubic-bezier(0, 0.58, 0.42, 1) 300ms; } &[data-allapps="true"] { transform: translateX(-640px); transition: cubic-bezier(0, 0.58, 0.42, 1) 300ms; } } .stmenu { &[data-allapps="false"] { opacity: 1; } &[data-allapps="true"] { opacity: 0; } } .allCont { top: 0; position: absolute; left: 100%; overflow: hidden; width: 100%; } .menuBar { position: absolute; bottom: 0; box-sizing: border-box; width: 100%; height: 64px; padding: 0 48px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: var(--bg3); border-top: 1px solid var(--bg4); } .profile { // height: 2.5rem; padding: 0.6em 0.8em; display: flex; align-items: center; border-radius: 4px; &:hover { background: var(--bg2); } .usName { margin-left: 12px; font-size: 0.7em; font-weight: 500; color: var(--txt-col); } } .powerMenu { height: 2.5rem; width: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 4px; &:hover { background: var(--bg2); } } .menuUp { padding: 32px; box-sizing: border-box; } .stAcbar { display: flex; justify-content: space-between; padding: 0 32px; .gpname { font-weight: 500; font-size: 14px; color: var(--dark-col); } .gpbtn { background: var(--bg2); padding: 0 8px 2px; font-size: 0.64em; display: flex; align-items: center; border-radius: 3px; box-shadow: 1px 1px 2px rgba(34, 34, 34, 0.25); cursor: pointer; svg { margin-left: 4px; padding-top: 2px; color: var(--med-txt); } .chevLeft svg { margin-left: 0; margin-right: 4px; } } } .appCont .stAcbar { padding-right: 64px; } .pnApps { min-height: 150px; padding: 20px 0; display: flex; flex-direction: row; flex-wrap: wrap; .pnApp { width: 96px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border-radius: 4px; transition: all ease-in-out 100ms; &:hover { background: var(--bg2); } .appName { width: 24px; display: flex; color: var(--dark-txt); margin-top: 4px; font-size: 12px; text-align: center; white-space: nowrap; justify-content: center; cursor: default; } } } .pnEmpty { pointer-events: none; } .recApps { position: absolute; bottom: 0; overflow: auto; max-height: calc(100% - 332px); } .reApps { margin: 12px 0 24px 0; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; .rnApp { width: calc(50% - 10px); height: 56px; display: flex; align-items: center; border-radius: 4px; &:hover { background: var(--bg2); } .pnIcon { margin: 0 12px; } .acInfo { width: 100px; text-align: left; .appName { color: var(--dark-txt); font-size: 0.8em; } .timeUsed { color: var(--gray-txt); font-size: 0.6em; font-weight: 500; } } } } .appCont { position: relative; padding: 32px; padding-right: 0; width: 100%; height: 100%; box-sizing: border-box; } .allApps { margin-top: 16px; padding: 0 16px; height: 100%; overflow: auto; transition: all ease-in-out 200ms; transform-origin: center; &[data-alpha="true"] { transform: scale(0); opacity: 0; pointer-events: none; } .allApp { position: relative; display: flex; align-items: center; width: 536px; height: 42px; box-sizing: border-box; padding-left: 12px; z-index: 1; border-radius: 4px; cursor: pointer; &:hover { background: var(--bg2); } .ltName { width: 22px; text-align: center; font-size: 14px; } .appName { text-align: left; padding-left: 16px; color: var(--dark-txt); font-size: 12px; } } } .alphaBox { position: absolute; top: 14%; width: 94%; height: 80%; z-index: 2; display: grid; place-items: center; transform-origin: center; transition: all ease-in-out 200ms; &[data-alpha="false"] { opacity: 0; transform: scale(2); pointer-events: none; } } .alphaCont { margin-left: -48px; width: 160px; height: 280px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); color: var(--txt-col); cursor: pointer; .allApp { display: grid; place-items: center; } .dullApp { cursor: default; color: var(--sat-txt); } } .searchMenu { min-height: 500px; padding: 32px; text-align: left; } .searchBar { height: 30px; border-bottom: solid 2px var(--clrPrm); border-radius: 4px; background: var(--comp-clr); display: flex; padding: 0 10px; .uicon { filter: brightness(0.6); margin-right: 12px; } input { width: 100%; background: inherit; color: var(--dark-txt); &::placeholder { color: var(--txt-col); } } } .smatch { background: var(--bg2); } .opts { color: var(--med-txt); div { border: solid 0 var(--clrPrm); cursor: pointer; &[value="true"] { border-bottom-width: 2px; color: var(--dark-txt); } } } .leftSide { width: 100%; } .leftSide[data-width="true"] { width: 32%; } .rightSide { margin: 8px; height: 560px; background: var(--bg2); display: flex; flex-direction: column; align-items: center; .hline { width: 90%; height: 1px; border-radius: 10px; background: var(--bg2); } } .topApp { background: var(--bg2); width: 19%; display: flex; flex-direction: column; align-items: center; border-radius: 4px; &:hover { filter: brightness(0.9); } } .qksrch { border-radius: 4px; .uicon { font-size: 20px; } &:hover { background: var(--bg2); } } .powerCont { position: absolute; top: -100px; left: -36px; width: 108px; font-size: 12px; background: var(--bg2); padding: 4px 6px; border-radius: 6px; box-shadow: 2px 2px 12px rgba(46, 40, 40, 0.25); opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 200ms ease-in-out; &[data-vis="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; } .flex { padding: 4px 6px; border-radius: 4px; &:hover { background: var(--bg2); } } .uicon { margin-right: 8px; } } .win11Scroll { &::-webkit-scrollbar { width: 6px; height: 6px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 10px; } &::-webkit-scrollbar-thumb:hover { background: var(--scrollHover); } } [V0_FILE]typescriptreact:file="src/components/start-menu/start-menu.tsx" isFixed="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useSelector, useDispatch } from "react-redux" import { Icon } from "../../utils/general" import "./start-menu.scss" export const StartMenu = () => { const { align } = useSelector((state) => state.taskbar || { align: "center" }) const start = useSelector((state) => { // Default state if not available const defaultState = { hide: false, menu: true, showAll: false, alpha: false, pwctrl: false, pnApps: [], rcApps: [], allApps: [], contApps: [], } const startMenuState = state.startmenu || defaultState // Process pinned apps const pnApps = [...(startMenuState.pnApps || [])] const ln = (6 - (pnApps.length % 6)) % 6 for (let i = 0; i < ln; i++) { pnApps.push({ empty: true, }) } // Process recent apps const rcApps = [...(startMenuState.rcApps || [])] for (let i = 0; i < rcApps.length; i++) { if (rcApps[i].lastUsed < 0) { rcApps[i].lastUsed = "Recently Added" } else if (rcApps[i].lastUsed < 10) { rcApps[i].lastUsed = "Just Now" } else if (rcApps[i].lastUsed < 60) { rcApps[i].lastUsed += "m ago" } else if (rcApps[i].lastUsed < 360) { rcApps[i].lastUsed = Math.floor(rcApps[i].lastUsed / 60) + "h ago" } } // Process all apps const allApps = [] let tmpApps = [] if (startMenuState.apps) { tmpApps = Object.keys(startMenuState.apps) .filter((x) => x != "hz") .map((key) => { return startMenuState.apps[key] }) } else { // Default apps if not available tmpApps = [ { name: "Calculator", icon: "/img/icons/calculator.png", action: "CALCUAPP" }, { name: "Calendar", icon: "/img/icons/calendar.png", action: "CALCUAPP" }, { name: "Edge", icon: "/img/icons/edge.png", action: "MSEDGE" }, { name: "Explorer", icon: "/img/icons/explorer.png", action: "EXPLORER" }, { name: "Mail", icon: "/img/icons/mail.png", action: "MAILAPP" }, { name: "Notepad", icon: "/img/icons/notepad.png", action: "NOTEPAD" }, { name: "Settings", icon: "/img/icons/settings.png", action: "SETTINGS" }, { name: "Store", icon: "/img/icons/store.png", action: "WNSTORE" }, ] } tmpApps.sort((a, b) => (a.name > b.name ? 1 : b.name > a.name ? -1 : 0)) for (let i = 0; i < 27; i++) { allApps[i] = [] } for (let i = 0; i < tmpApps.length; i++) { var t1 = tmpApps[i].name.trim().toUpperCase().charCodeAt(0) if (t1 > 64 && t1 < 91) { allApps[t1 - 64].push(tmpApps[i]) } else { allApps[0].push(tmpApps[i]) } } return { ...startMenuState, pnApps, rcApps, contApps: allApps, allApps: tmpApps, } }) const [query, setQuery] = useState("") const [match, setMatch] = useState({}) const [atab, setTab] = useState("All") const dispatch = useDispatch() const tabSw = (e) => { setTab(e.target.innerText.trim()) } const clickDispatch = (event) => { var action = { type: event.target.dataset.action, payload: event.target.dataset.payload, } if (action.type) { dispatch(action) } if (action.type && (action.payload == "full" || action.type == "EDGELINK")) { dispatch({ type: "STARTHID", }) } if (action.type == "STARTALPHA") { var targetElement = document.getElementById("char" + action.payload) if (targetElement) { targetElement.parentNode.scrollTop = targetElement.offsetTop } else { var targetElement2 = document.getElementById("charA") targetElement2.parentNode.scrollTop = 0 } } } useEffect(() => { if (query.length) { for (var i = 0; i < start.allApps.length; i++) { if (start.allApps[i].name.toLowerCase().includes(query.toLowerCase())) { setMatch(start.allApps[i]) break } } } }, [query]) const userName = useSelector((state) => state.setting?.person?.name || "User") // Default pinned apps if not available const defaultPinnedApps = [ { name: "Edge", icon: "/img/icons/edge.png", action: "MSEDGE" }, { name: "Explorer", icon: "/img/icons/explorer.png", action: "EXPLORER" }, { name: "Store", icon: "/img/icons/store.png", action: "WNSTORE" }, { name: "Settings", icon: "/img/icons/settings.png", action: "SETTINGS" }, { name: "Notepad", icon: "/img/icons/notepad.png", action: "NOTEPAD" }, { name: "Calculator", icon: "/img/icons/calculator.png", action: "CALCUAPP" }, ] // Default recent apps if not available const defaultRecentApps = [ { name: "Mail", icon: "/img/icons/mail.png", action: "MAILAPP", lastUsed: "Recently Added" }, { name: "Calendar", icon: "/img/icons/calendar.png", action: "CALCUAPP", lastUsed: "2h ago" }, { name: "Photos", icon: "/img/icons/photos.png", action: "PHOTOS", lastUsed: "Yesterday" }, { name: "Spotify", icon: "/img/icons/spotify.png", action: "SPOTIFY", lastUsed: "3d ago" }, { name: "Twitter", icon: "/img/icons/twitter.png", action: "TWITTER", lastUsed: "5d ago" }, { name: "VS Code", icon: "/img/icons/code.png", action: "VSCODE", lastUsed: "1w ago" }, ] // Default quick search options const defaultQuickSearch = [ ["faSearch", null, "Search the web"], ["faLocationArrow", null, "Weather"], ["faFilm", null, "Movies & TV"], ["faNewspaper", null, "News & interests"], ] const pinnedApps = start.pnApps.length > 0 ? start.pnApps : defaultPinnedApps const recentApps = start.rcApps.length > 0 ? start.rcApps : defaultRecentApps const quickSearch = start.qksrch || defaultQuickSearch return (

{start.menu ? ( <>

Pinned

All apps

{pinnedApps.map((app, i) => { return app.empty ? (

) : (

{app.name}

) })}

Recommended

{recentApps.slice(0, 6).map((app, i) => { return app.name ? (

{app.name}

{app.lastUsed}

) : null })}

All apps

Back

{start.contApps.map((ldx, i) => { if (ldx.length == 0) return null var tpApps = [] tpApps.push(

{i == 0 ? "#" : String.fromCharCode(i + 64)}

, ) ldx.forEach((app, j) => { tpApps.push(

{app.name}

, ) }) return tpApps })}

{start.contApps.map((ldx, i) => { return (

{i == 0 ? "#" : String.fromCharCode(i + 64)}

) })}

{userName}

Lock

Shut down

Restart

) : (

{ setQuery(event.target.value.trim()) }} defaultValue={query} placeholder="Type here to search" autoFocus />

All

Apps

Documents

Web

{query.length ? "Best match" : "Top apps"}

{query.length ? (

{match.name}

App

Search online

Web

) : ( <>

{recentApps.slice(1, 7).map((app, i) => { return (

{app.name}

) })}

Quick Searches

{quickSearch.map((srch, i) => { return (

{srch[2]}

) })}

)}

{query.length ? (

{match.name}

App

Open

) : null}

)}

) } export default StartMenu [V0_FILE]scss:file="src/components/widgets/widget.scss" isMerged="true" .widPaneCont { --bg1: rgba(234, 234, 234, 0.25); --bg2: rgba(255, 255, 255, 0.5); --clr1: #fefefe; --clrWeather: #fff3be; --topStoriesClr: #c6a0ff; position: absolute; top: 12px; left: 12px; bottom: 12px; width: 760px; max-width: 50vw; border-radius: 8px; overflow: hidden; transform: translateX(0); backdrop-filter: blur(20px); transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1); z-index: 9999; &[data-hide="true"] { transform: translateX(-110%); transition: all 0.6s cubic-bezier(0.77, 0, 0.18, 1); } .WidPane { width: 100%; height: 100%; color: var(--dark-txt); background: var(--bg1); display: flex; flex-direction: column; align-items: center; overflow-x: hidden; overflow-y: scroll; .widtop { width: 96%; display: flex; padding: 18px 28px 0 0; justify-content: flex-end; color: var(--txt-col); } .widTime { display: flex; justify-content: center; font-size: 1.5em; color: var(--txt-col); } .widgetCont { width: 80%; } .topWidgets { margin-top: 24px; display: flex; justify-content: space-between; .weatherCont { width: 50%; margin: 4px; height: 240px; padding: 12px 14px; border-radius: 6px; box-sizing: border-box; background: var(--clr1); background: linear-gradient( to bottom right, var(--clr1) 0%, var(--clrWeather) 80% ); display: flex; flex-direction: column; align-items: center; } .wthtop { width: 100%; display: flex; align-items: center; font-size: 0.8em; // font-weight: 400; .uicon { margin-right: 0.5em; } span { padding-bottom: 2px; } } .wthcity { width: 50%; display: flex; font-size: 0.64em; margin-top: 8px; * { margin: 0 2px; } } .wthInfo { width: 100%; display: flex; justify-content: space-between; } .wthTemp { display: flex; align-items: flex-end; .uicon { padding-bottom: 4px; } * { margin: 0 3px; } .wthdeg { font-size: 2em; } .wthunit { margin: 0 2px; font-size: 0.72em; color: var(--sat-txt); padding-bottom: 6px; } } .moreWinfo { display: flex; flex-direction: column; align-items: flex-end; padding-top: 2px; } .wcontext { font-size: 0.68em; margin-bottom: 4px; } .rainProb { display: flex; .chanceOfRain { display: flex; font-size: 0.68em; margin-left: 12px; .uicon { margin-right: 2px; color: var(--med-txt); } } } .weekWthCont { width: 100%; display: flex; justify-content: space-between; margin-top: 12px; .weekDay { width: 23%; border-radius: 4px; padding: 4px 0; background: var(--bg2); display: flex; flex-direction: column; justify-content: space-between; align-items: center; font-size: 0.6em; padding-bottom: 12px; .uicon { margin: 8px 0; } .tempCont { font-size: 1.36em; color: var(--med-txt); } } } .shortCont { width: 50%; height: 250px; display: flex; flex-direction: column; .short0, .short1 { box-sizing: border-box; width: 100%; height: 100%; margin: 4px 4px 6px; background: var(--clrWeather); border-radius: 6px; padding: 8px 12px 0; overflow: hidden; .shName { width: 100%; font-size: 0.6em; letter-spacing: 1px; color: var(--gray-txt); margin-bottom: 16px; display: flex; justify-content: space-between; } .shEntry { display: flex; justify-content: space-between; margin-bottom: 18px; .stockName { display: flex; font-size: 0.8em; font-weight: 500; .uicon { margin-right: 6px; } .stName { color: var(--med-txt); padding-top: 1px; } } .stockValue { font-size: 0.8em; font-weight: 600; display: flex; } .stRes { width: 52px; text-align: center; padding: 1px 0; border-radius: 2px; margin-left: 8px; font-size: 0.8em; background: #eb3535; color: #fefefe; &[data-pos="true"] { background: #09d031; } } } } .short1 { position: relative; background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 1; &::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--afterBack); background-repeat: no-repeat; background-size: contain; background-position: center; filter: brightness(0.72); z-index: -1; } &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: brightness(0.8); filter: blur(10px); z-index: -2; } .shName { margin-bottom: 4px; color: #eee; div:nth-child(2) { font-weight: 600; } } .infotextCont { position: absolute; bottom: 6px; padding-right: 10px; display: flex; flex-direction: column; } .dayInfo { max-height: 64px; font-size: 0.72em; color: #ddd; margin-top: auto; line-height: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align: justify; transition: all 200ms ease-in-out; padding: 4px; &:hover { cursor: none; background: rgb(34 34 34 / 65%); } } a { text-decoration: none; font-size: 0.64em; color: #c3c3c3; text-align: right; } } } } } .newsCont { width: 100%; margin-top: 18px; padding: 6px; * { cursor: default; } } .topStories { position: relative; border-radius: 4px; padding: 12px; background: var(--comp-txt); background: linear-gradient( to bottom right, var(--topStoriesClr) 0%, var(--comp-txt) 100% ); .topNewsText { color: var(--txt-col); font-size: 0.72em; font-weight: 600; } .topNewsCont { width: 100%; display: grid; padding-bottom: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); .tpNews { padding: 16px 12px 0 0; .tpSource { color: var(--gray-txt); font-size: 0.6em; } .tpArticle { margin: 4px 0; font-size: 0.76em; font-weight: 600; color: var(--txt-col); height: 48px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-align: justify; } } } } .allNewsCont { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 10px; grid-row-gap: 10px; } .articleCont { position: relative; height: 220px; padding: 0 12px; border-radius: 6px; overflow: hidden; background-color: var(--comp-txt); background-repeat: no-repeat; background-size: cover; background-position: center; cursor: pointer; &::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: var(--dark-txt); background: linear-gradient(transparent 50%, var(--backgrad) 90%); z-index: 0; } &:hover { filter: brightness(0.9); cursor: pointer; } .tpNews { position: absolute; bottom: 0; padding: 0 12px 12px 0; .tpSource { color: var(--txt-col); font-size: 0.6em; font-weight: 500; text-shadow: 0 0 4px var(--comp-txt); } .tpArticle { margin-top: 4px; font-size: 0.8em; font-weight: 600; color: var(--txt-col); max-height: 56px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-align: justify; } } &:nth-child(5n) { grid-column-start: 1; grid-column-end: 3; background-size: contain; background-position-x: 160px; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-txt); background: linear-gradient( to left, transparent 0%, var(--backgrad) 60% ); z-index: 0; } .tpNews { width: 45%; position: relative; padding: 16px 0; .tpSource { margin-bottom: 24px; } .tpArticle { margin-bottom: 8px; } .tpdesc { font-size: 0.72em; font-weight: 400; color: var(--med-txt); max-height: 90px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-align: justify; } } } } } body[data-theme="dark"] .widPaneCont { --bg1: rgba(31, 31, 31, 0.25); --bg2: rgba(255, 255, 255, 0.1); --clr1: #534f88; --clrWeather: #1b2257; --topStoriesClr: #35264c; } [V0_FILE]typescriptreact:file="src/components/widgets/widget-pane.tsx" isMerged="true" import { useSelector, useDispatch } from "react-redux" import { Icon } from "../../utils/general" import "./widget.scss" // Lazy component to only render when visible const LazyComponent = ({ show, children }) => { if (!show) return null return children } export const WidgetPane = () => { const dispatch = useDispatch() const widget = useSelector((state) => state.widpane || { hide: true, data: {} }) const theme = useSelector((state) => state.setting?.person?.theme || "light") const getRandom = (x = 0) => { if (theme == "light") return `hsl(${Math.floor(Math.random() * 360)}deg 36% 84%)` if (theme == "dark") return `hsl(${Math.floor(Math.random() * 360)}deg 36% 16%)` } // Default widget data if not available const defaultWidgetData = { weather: { city: "New York", country: "US", temp: "24", wstate: "Sunny", icon: "c", rain: 10, wind: "5 mph", days: [ { day: "Mon", min: 20, max: 25, icon: "c" }, { day: "Tue", min: 18, max: 23, icon: "c" }, { day: "Wed", min: 17, max: 22, icon: "lr" }, { day: "Thu", min: 16, max: 20, icon: "lr" }, ], }, stock: [ [2750.12, 2.3, 1], [823.45, 1.2, 0], ], date: "April 9", event: { text: "On this day in 1865, Confederate General Robert E. Lee surrendered to Union General Ulysses S. Grant at Appomattox Court House, Virginia, effectively ending the American Civil War.", pages: [ { thumbnail: { source: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Surrender_of_General_Lee.jpg/320px-Surrender_of_General_Lee.jpg", }, content_urls: { desktop: { page: "https://en.wikipedia.org/wiki/Surrender_at_Appomattox" } }, }, ], }, news: [ { source: { name: "CNN" }, title: "Breaking news headline about current events", urlToImage: "/placeholder.svg?height=220&width=320", }, { source: { name: "BBC" }, title: "Important world news that's happening right now", urlToImage: "/placeholder.svg?height=220&width=320", }, { source: { name: "Reuters" }, title: "Financial markets update with latest trends", urlToImage: "/placeholder.svg?height=220&width=320", }, { source: { name: "AP News" }, title: "Political developments from around the globe", urlToImage: "/placeholder.svg?height=220&width=320", }, { source: { name: "The Guardian" }, title: "Feature story on environmental challenges", content: "This in-depth report examines the ongoing environmental challenges facing our planet and the innovative solutions being developed to address them.", urlToImage: "/placeholder.svg?height=220&width=320", }, { source: { name: "Al Jazeera" }, title: "International diplomatic relations update", urlToImage: "/placeholder.svg?height=220&width=320", }, { source: { name: "NPR" }, title: "Cultural trends and social movements", urlToImage: "/placeholder.svg?height=220&width=320", }, { source: { name: "Bloomberg" }, title: "Technology industry innovations and breakthroughs", content: "The latest advancements in artificial intelligence are transforming industries from healthcare to transportation, with new applications emerging daily.", urlToImage: "/placeholder.svg?height=220&width=320", }, ], } const widgetData = widget.data && Object.keys(widget.data).length > 0 ? widget.data : defaultWidgetData return (

{new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", })}

Weather

{widgetData.weather.city}, {widgetData.weather.country}

{widgetData.weather.temp}

ºC

{widgetData.weather.wstate}

{widgetData.weather.rain}%

{widgetData.weather.wind}

{widgetData.weather.days.map((item, i) => { return (

{i == 0 ? "Today" : item.day}

{item.min}º

{item.max}º

) })}

MONEY | MARKET

GOOGL

{widgetData.stock[0][0]}

{widgetData.stock[0][2] ? "+" : "-"} {widgetData.stock[0][1]}%

TSLA

{widgetData.stock[1][0]}

{widgetData.stock[1][2] ? "+" : "-"} {widgetData.stock[1][1]}%

ON THIS DAY

{widgetData.date}

{widgetData.event.text}

Online Status Indicator Demo

Look at the taskbar below. There's a WiFi icon with a colored dot:

Green dot means you're online
Red dot means you're offline

To test it, you can:

Open browser dev tools (F12)
Go to Network tab
Check "Offline" to simulate offline status
Uncheck to go back online

[V0_FILE]typescriptreact:file="components/online-status-indicator.tsx" isMerged="true" import { Wifi } from "lucide-react" interface OnlineStatusIndicatorProps { isOnline: boolean } export default function OnlineStatusIndicator({ isOnline }: OnlineStatusIndicatorProps) { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Wifi } from "lucide-react" export default function Home() { const [isOnline, setIsOnline] = useState(true) const [currentTime, setCurrentTime] = useState(new Date()) // Online durumunu takip et useEffect(() => { // İlk durumu ayarla setIsOnline(navigator.onLine) // Event listener'ları ekle const handleOnline = () => { console.log("Sistem online oldu") setIsOnline(true) } const handleOffline = () => { console.log("Sistem offline oldu") setIsOnline(false) } window.addEventListener("online", handleOnline) window.addEventListener("offline", handleOffline) // Temizleme işlemi return () => { window.removeEventListener("online", handleOnline) window.removeEventListener("offline", handleOffline) } }, []) // Saati güncelle useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) const formatTime = (date) => { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } const formatDate = (date) => { return date.toLocaleDateString([], { month: "numeric", day: "numeric", year: "numeric" }) } return (

Windows 11 Online Durum Göstergesi

Mevcut durum:{" "} {isOnline ? "Online" : "Offline"}

Test etmek için: Tarayıcı geliştirici araçlarını açın (F12), Network sekmesine gidin ve "Offline" seçeneğini işaretleyin

{/* Windows 11 masaüstü simülasyonu */}

Start

{/* Windows 11 tarzı taskbar */}

{/* Start butonu */}

{/* System tray */}

{formatTime(currentTime)}

{formatDate(currentTime)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Windows 11 Online Durum Göstergesi", description: "Next.js ile oluşturulmuş Windows 11 tarzı online durum göstergesi", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { user-select: none; } [V0_FILE]plaintext:file="public/windows-icon.png" url="https://v0.blob.com/JGJmyTOGJ.png" [V0_FILE]plaintext:file="public/wallpaper.jpg" url="https://v0.blob.com/JGJmyTOGJ.jpg"

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This