یک تلفن (یا هر فایل PNG دیگری) را با یک تصویر پس زمینه قابل تنظیم و یک تم تیره اختیاری نمایش دهید

بیانیه های واردات

import { cn } from '@/lib/utils';
import { HTMLAttributes } from 'react';

• import { cn } from '@/lib/utils': این تابع ابزاری به نام cn را از فایلی که در آن قرار دارد وارد می کند @/lib/utils. تابع cn معمولاً برای الحاق نام کلاس ها به صورت شرطی استفاده می شود.

• import { HTMLAttributes } from 'react': این نوع HTMLAttributes را از React وارد می کند. برای گسترش ویژگی های رابط PhoneProps استفاده می شود.

تعریف رابط

interface PhoneProps extends HTMLAttributes<HTMLDivElement> {
  imgSrc: string;
  dark?: boolean; 
}

رابط یعنی PhoneProps شامل تمام خصوصیات استاندارد یک عنصر div، به علاوه هر ویژگی اضافی تعریف شده در آن است. یک ویژگی اختیاری dark از نوع Boolean که تم الگوی تلفن را تعیین می کند (لبه های تیره یا سفید).

تعریف مولفه

const Phone = ({ imgSrc, className, dark = false, ...props }: PhoneProps) => {

این یک جزء کاربردی به نام را تعریف می کند Phone که طول می کشد غرفه مطابق با PhoneProps رابط. تخریب می کند imgSrc, className, dark (پیش‌فرض به false در صورت عدم ارائه)، و هر وسیله دیگری.

بازگشت JSX

return (
  <div
// concatenate the default class names with any additional 
// class names passed as className prop.
    className={cn(
      'relative pointer-events-none z-50 overflow-hidden',
      className
    )}
    {...props}>
    <img
      src={
        dark
          ? '/phone-template-dark-edges.png'
          : '/phone-template-white-edges.png'
      }
      className='pointer-events-none z-50 select-none'
      alt='phone image'
    />

    <div className='absolute -z-10 inset-0'> // set z index to -10
      <img
        className='object-cover min-w-full min-h-full'
        src={imgSrc}
        alt='overlaying phone image'
      />
    div>
  div>
);

خلاصه

مؤلفه Phone یک div حاوی دو تصویر را ارائه می دهد:

1. تصویری از یک الگوی تلفن که بر اساس قسمت تاریک تغییر می کند.
2. یک تصویر همپوشانی (imgSrc) که کاملاً در پشت تصویر الگوی تلفن قرار دارد.

این تنظیمات به شما امکان می دهد تلفنی را با یک تصویر پس زمینه قابل تنظیم و یک تم تیره اختیاری نمایش دهید.

نتیجه

مهم

اینها یادداشت های مطالعه من برای casecobra پروژه توسط josh tried coding در یوتیوب.