بیایید با React یک مبدل کد رنگ بسازیم!

Next.js یک چارچوب React عالی است که به لطف ویژگی‌های جالبی مانند رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و موارد دیگر، ساخت برنامه‌های وب را آسان می‌کند. امروز، ما در حال غواصی در یک چیز هیجان انگیز هستیم: ایجاد خودمان مبدل کد رنگ با استفاده از Next.js.

این را تصور کنید: یک رنگ را با فرمت هگز وارد می‌کنید، و voilà – بلافاصله معادل‌های RGB و HSL را به شما نشان می‌دهد. حتی دارای یک انتخابگر رنگ برای به روز رسانی در زمان واقعی است. سرگرم کننده به نظر می رسد، درست است؟ بیایید شروع کنیم!

در حال نصب Next.js

اول از همه — بیایید پروژه Next.js خود را راه اندازی کنیم.

مرحله 1: ابزارهای خود را بررسی کنید

قبل از اینکه وارد شوید، مطمئن شوید که سیستم شما دارای موارد زیر است:

• Node.js (ترجیحا نسخه 16 یا بالاتر).
• npm یا نخ (هر دو با Node.js ارائه می شوند).

با اجرای این دستورات می توانید بررسی کنید که آیا آنها نصب شده اند:

node -v
npm -v

مرحله 2: چرخش یک پروژه جدید

ما از ابزار CLI Next.js برای ایجاد پروژه خود استفاده خواهیم کرد. این دستور را اجرا کنید:

npx create-next-app@latest my-nextjs-app

جایگزین کنید my-nextjs-app با هر اسمی که دوست داری این همه کارهای سنگین را انجام می دهد – پوشه را تنظیم می کند، وابستگی ها را نصب می کند و موارد دیگر.

اگر نخ را ترجیح می دهید:

yarn create next-app my-nextjs-app

مرحله 3: پروژه را باز کنید

به پوشه پروژه جدید خود بروید:

cd my-nextjs-app

مرحله 4: سرور Dev را راه اندازی کنید

بیایید آن را در عمل ببینیم. اجرا کنید:

npm run dev

(یا yarn dev اگر از نخ استفاده می کنید).

در مرورگر خود از http://localhost:3000 دیدن کنید. شما باید صفحه خوش آمدگویی Next.js را ببینید.

ما چه می سازیم؟

ما در حال ساختن یک مبدل کد رنگ. در اینجا نحوه کار آن آمده است:

1. شما رنگی را در قالب هگز انتخاب یا تایپ می کنید.
2. این برنامه آن را به فرمت های RGB و HSL تبدیل می کند.
3. رابط به صورت پویا با انتخابگر رنگ و فیلد ورودی به روز می شود.

کاربرپسند، تعاملی، و استفاده فوق العاده راضی کننده است.

شکستن آن: چگونه آن را بسازیم

بیایید گام به گام کد را مرور کنیم تا “چرا” پشت هر قسمت را درک کنید.

مرور کد

این کد است. نگران نباشید – همینطور که می رویم توضیح می دهم:

'use client'

import { useState } from 'react';
import { ChromePicker, ColorResult } from 'react-color';

export default function Home() {
  const [color, setColor] = useState('#3498db');
  const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 });
  const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 });

  const handleColorChange = (selectedColor : ColorResult) => {
    const hex = selectedColor.hex;
    const rgb = selectedColor.rgb;
    const hsl = selectedColor.hsl;

    setColor(hex);
    setRgb({ r: rgb.r, g: rgb.g, b: rgb.b });
    setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });
  };

  const handleHexInputChange = (e : React.ChangeEvent<HTMLInputElement>) => {
    const hex = e.target.value;
    setColor(hex);
  };

  return (
    <div className="min-h-screen bg-black flex items-center justify-center text-white">
      <div className="w-full max-w-md p-6 bg-gray-800 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-center mb-6">Color Code Converterh1>

        {/* Color Picker */}
        <div className="mb-6 flex justify-center">
          <ChromePicker color={color} onChangeComplete={handleColorChange} />
        div>

        {/* Hex Input */}
        <div className="flex flex-col items-center mb-4">
          <label className="mb-2 text-gray-300">Enter Hex Code:label>
          <input
            type="text"
            value={color}
            onChange={handleHexInputChange}
            className="bg-gray-700 text-white text-center p-2 rounded-lg w-32 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        div>

        {/* Converted Values */}
        <div className="mt-6">
          <h3 className="text-xl font-semibold mb-3 text-center">Converted Valuesh3>
          <div className="space-y-2">
            <p><span className="font-bold">Hex:span> {color}p>
            <p><span className="font-bold">RGB:span> rgb({rgb.r}, {rgb.g}, {rgb.b})p>
            <p><span className="font-bold">HSL:span> hsl({hsl.h}, {hsl.s}%, {hsl.l}%)p>
          div>
        div>
      div>
    div>
  );
}

ما با وارد کردن ابزارهایی که نیاز داریم شروع می کنیم. اول، React است useState، که به ما در مدیریت وضعیت برنامه کمک می کند. سپس، ما وارد می کنیم ChromePicker جزء و ColorResult تایپ کنید از react-color کتابخانه این به ما یک UI انتخابگر رنگ منظم و یک روش ساختاریافته برای مدیریت رنگ های انتخاب شده می دهد.

در مرحله بعد، با استفاده از چند متغیر حالت تنظیم می کنیم useState. به این صورت است که رنگ انتخاب شده را در قالب های مختلف پیگیری می کنیم:

const [color, setColor] = useState('#3498db');
const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 });
const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 });

اینجا، color در حالی که کد هگز فعلی را نگه می دارد rgb و hsl ردیابی مقادیر تبدیل شده ما آنها را با یک رنگ پیش فرض خوب (در این مورد آبی) مقداردهی اولیه می کنیم.

حالا بیایید در مورد مدیریت تغییرات رنگ صحبت کنیم. وقتی رنگ جدیدی را با استفاده از انتخابگر رنگ انتخاب می کنیم، این تابع فعال می شود:

const handleColorChange = (selectedColor : ColorResult) => {
  const hex = selectedColor.hex;
  const rgb = selectedColor.rgb;
  const hsl = selectedColor.hsl;

  setColor(hex);
  setRgb({ r: rgb.r, g: rgb.g, b: rgb.b });
  setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });
};

این چیزی است که اتفاق می افتد:

• ابتدا مقادیر هگز، RGB و HSL را از آن استخراج می کنیم selectedColor شی (این توسط ChromePicker).
• سپس با استفاده از متغیرهای حالت خود را به روز می کنیم setColor، setRgb، و setHsl. توجه کنید که چگونه مقادیر HSL را گرد می کنیم تا تمیزتر به نظر برسند.

اگر کاربر تصمیم بگیرد که به صورت دستی یک کد هگز را تایپ کند، ما آن را نیز پوشش داده ایم:

const handleHexInputChange = (e : React.ChangeEvent<HTMLInputElement>) => {
  const hex = e.target.value;
  setColor(hex);
};

این تابع به تغییرات فیلد ورودی گوش می دهد و آن را به روز می کند color بر این اساس بیان کنید.

در نهایت رابط کاربری را طراحی می کنیم. را ChromePicker جزء جلو و مرکز برای انتخاب رنگ است:

<ChromePicker color={color} onChangeComplete={handleColorChange} />

همچنین یک فیلد ورودی برای وارد کردن دستی کدهای هگز اضافه می کنیم:

<input
  type="text"
  value={color}
  onChange={handleHexInputChange}
  className="bg-gray-700 text-white text-center p-2 rounded-lg w-32 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>

و البته مقادیر تبدیل شده را در زیر نمایش می دهیم:

<p>RGB: rgb({rgb.r}, {rgb.g}, {rgb.b})p>
<p>HSL: hsl({hsl.h}, {hsl.s}%, {hsl.l}%)p>

برای اینکه همه چیز زیبا به نظر برسد، از Tailwind CSS برای یک ظاهر طراحی شده استفاده می کنیم. این طرح ما را تمیز، پاسخگو و آسان برای خواندن نگه می دارد.

جمع بندی

و بس! با هم، یک مبدل کد رنگ کاملاً کاربردی با Next.js ساخته‌ایم. اکنون می‌توانید رنگ‌ها را وارد کنید، آنها را انتخاب کنید و تبدیل‌های فوری را ببینید. به آزمایش ادامه دهید—حتی ممکن است ویژگی های بیشتری مانند ذخیره رنگ های مورد علاقه یا کپی کردن مقادیر به کلیپ بورد اضافه کنید. آسمان حد است!