تصميم واجهة مستخدم تحاكي نظام Windows 11 باستخدام React هو مشروع مثير يمنحك فرصة لتعلم وتطبيق العديد من التقنيات الحديثة في تطوير الويب. يهدف هذا المشروع إلى إنشاء بيئة تفاعلية تشبه واجهة Windows 11، مع التركيز على تصميم شريط المهام، قائمة “Start”، أيقونات سطح المكتب، والنوافذ التفاعلية التي يمكن سحبها.

المتطلبات

تثبيت React

نقوم بانشاء مشروع جديد باسم windows11-ui باستخدام الكود التالي

				
					npx create-react-app windows11-ui

بعد ذلك ندخل علي ملف المشروع باستخدام الامر التالي

				
					cd windows11-ui

تثبيت tailwindcss

				
					npm install tailwindcss
npx tailwindcss init

افتح ملف tailwind.config.js وأضف الكود التالي:

				
					module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

ثم افتح ملف src/index.css وأضف الكود التالي:

				
					@tailwind base;
@tailwind components;
@tailwind utilities;

تثبيت مكتبة FontAwesome

				
					// تثبيت الكود التالي
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
// اضافة الكود التالي اعلي الصفحات المراد استدعاءها
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

تصميـــــــم واجهـــــــــــه windows 11 باستخـــــدام React انشاء المكونات الرئيسية

سوف نقوم بانشاء فولدر داخل js باسم Components والذي سيحتوي علي جميع ملفات البرنامج بداخلة

ملف Taskbar.js

صفحة تمثل شريط المهام، يحتوي على ايقونة search و ايقونة home بالاضافة الي زر “Start” الذي يفتح أو يغلق قائمة StartMenu.

				
					// src/components/Taskbar.js
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch, faHome } from '@fortawesome/free-solid-svg-icons';
import StartMenu from './StartMenu';

const Taskbar = () => {
  const [isStartMenuOpen, setStartMenuOpen] = useState(false);

  const toggleStartMenu = () => {
    setStartMenuOpen(!isStartMenuOpen);
  };

  return (
    <div className="fixed bottom-0 left-0 w-full bg-gray-800 h-12 flex items-center justify-between px-4 sm:px-6 lg:px-8">
      <div className="flex space-x-4">
        <button className="bg-blue-500 text-white hover:bg-blue-600 p-2 w-20 rounded" onClick={toggleStartMenu}>
          Start
        </button>
        <button className="text-white p-2">
          <FontAwesomeIcon icon={faSearch} />
        </button>
        <button className="text-white p-2">
          <FontAwesomeIcon icon={faHome} />
        </button>
      </div>
      <StartMenu isOpen={isStartMenuOpen} />
    </div>
  );
};

export default Taskbar;

ملف Window.js

مكون نافذة منبثقة ثابتة يمكن استخدامها لعرض المحتوى.

				
					// src/components/Window.js
import React from 'react';

const Window = ({ title, children }) => {
  return (
    <div className="window bg-white shadow-lg rounded-lg overflow-hidden w-full max-w-md mx-auto my-8 md:my-16">
      <div className="bg-gray-100 p-2 flex justify-between items-center">
        <span className="text-gray-700">{title}</span>
        <div className="space-x-2">
          <button className="bg-yellow-500 w-4 h-4 rounded-full"></button>
          <button className="bg-green-500 w-4 h-4 rounded-full"></button>
          <button className="bg-red-500 w-4 h-4 rounded-full"></button>
        </div>
      </div>
      <div className="p-4">
        {children}
      </div>
    </div>
  );
};

export default Window;

ملف DesktopIcon.js

صفحة تمثل أيقونات سطح المكتب مع تأثير عند التمرير عليها.

				
					// src/components/DesktopIcon.js
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const DesktopIcon = ({ icon, label }) => {
  return (
    <div className="group w-16 text-center text-sm cursor-pointer">
      <div className="transition transform group-hover:scale-110">
        <FontAwesomeIcon icon={icon} className="text-white text-4xl" />
      </div>
      <p className="mt-1 text-white group-hover:text-yellow-500">{label}</p>
    </div>
  );
};

export default DesktopIcon;

ملف StartMenu.js

صفحة تمثل قائمة تظهر عند الضغط على زر “Start” في شريط المهام، ويحتوي على اختصارات برامج.

				
					// src/components/StartMenu.js
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCode, faServer, faLaptopCode } from '@fortawesome/free-solid-svg-icons';


const StartMenu = ({ isOpen }) => {
  return (
    <div
    className={`absolute bottom-12 left-8 w-64 h-64 bg-gray-800 text-white p-4 rounded-t-lg shadow-lg transition transform ${
        isOpen ? 'scale-100' : 'scale-0'
      } origin-bottom-left`}
    >
      <ul className="space-y-2">
        <li className="flex items-center space-x-2 cursor-pointer p-2 hover:bg-gray-700 rounded">
          <FontAwesomeIcon icon={faCode} className="text-blue-400" />
          <span>VSCode</span>
        </li>
        <li className="flex items-center space-x-2 cursor-pointer p-2 hover:bg-gray-700 rounded">
          <FontAwesomeIcon icon={faServer} className="text-orange-500" />
          <span>XAMPP</span>
        </li>
        <li className="flex items-center space-x-2 cursor-pointer p-2 hover:bg-gray-700 rounded">
          <FontAwesomeIcon icon={faLaptopCode} className="text-green-500" />
          <span>Node.js</span>
        </li>
      </ul>
    </div>
  );
};

export default StartMenu;

تعديل ملف App.js

افتح الملف src/App.js وقم بتعديل الكود بالاتي

				
					
// src/App.js
import React from 'react';
import Taskbar from './components/Taskbar';
import Window from './components/Window';
import DesktopIcon from './components/DesktopIcon';
import { faFolder, faFile, faTrashAlt, faCogs, faMusic, faCamera } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <div className="h-screen bg-blue-600 relative p-4 sm:p-6 md:p-8">
      <div className="absolute top-4 left-4 space-y-6">
        <DesktopIcon icon={faFolder} label="Folder" />
        <DesktopIcon icon={faFile} label="Document" />
        <DesktopIcon icon={faTrashAlt} label="Recycle Bin" />
        <DesktopIcon icon={faCogs} label="Settings" />
        <DesktopIcon icon={faMusic} label="Music" />
        <DesktopIcon icon={faCamera} label="Photos" />
      </div>
      
      <Window title="My Computer">
        <p>This is a window content area.</p>
      </Window>

      <Taskbar />
    </div>
  );
}

export default App;

لجعل النافذة قابلة للسحب والتحريك

تثبيت مكتبة react-draggable

				
					npm install react-draggable

تعديل ملف window.js

				
					// src/components/Window.js
import React from 'react';
import Draggable from 'react-draggable';

const Window = ({ title, children }) => {
  return (
    <Draggable handle=".window-header">
   <div className="window bg-white shadow-lg rounded-lg overflow-hidden w-full max-w-md mx-auto my-8 md:my-16">
        <div className="window-header bg-gray-100 p-2 flex justify-between items-center cursor-move">
          <span className="text-gray-700">{title}</span>
          <div className="space-x-2">
            <button className="bg-yellow-500 w-4 h-4 rounded-full"></button>
            <button className="bg-green-500 w-4 h-4 rounded-full"></button>
            <button className="bg-red-500 w-4 h-4 rounded-full"></button>
          </div>
        </div>
      <div className="p-4">
        {children}
      </div>
    </div>
    </Draggable>
  );
};

export default Window;

Resuilt

Sharing to

تحميل الملف

Post Views: 243

تصميم واجهه windows 11 باستخدام React