ساخت داشبورد با Next.js با استفاده از Appwrite’s Pink Design

ek3nk4r 2023-03-21

0 44 5 دقیقه قبل خوانده شده

ساخت داشبورد با Next.js با استفاده از Appwrite's Pink Design

پیشنهاد ویژه

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

Pink Design یک سیستم منبع باز از Appwrite است که برای ایجاد رابط های کاربری سازگار و قابل استفاده مجدد استفاده می شود. همکاری، تجربه توسعه و دسترسی را افزایش می دهد. این آموزش نحوه استفاده از Appwrite’s Pink Design برای ایجاد داشبورد با Next.js را نشان می دهد.

فهرست مطالب

GitHub

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

پیش نیازها

برای دنبال کردن این آموزش، باید دانش کاری در مورد موارد زیر داشته باشید:

React، Next.js و CSS
یک IDE به انتخاب شما

ایجاد پروژه Next.js

برای ایجاد پروژه Next.js مراحل زیر را انجام دهید:

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

npx create-next-app sample-dashboard

به دایرکتوری پروژه بروید و سرور توسعه را روشن کنید localhost:3000 با این دستور:

cd sample-dashboard && npm run dev

شروع با طراحی صورتی

شما می توانید طراحی صورتی را از طریق یک شبکه تحویل محتوا (CDN) یا Node Package Manager (NPM) در یک پروژه ادغام کنید. در این آموزش از NPM استفاده خواهیم کرد.

برای نصب Pink Design، یک ترمینال در فهرست پروژه باز کنید و دستور زیر را اجرا کنید:

npm install @appwrite.io/pink

بسته باید در شما پیدا شود package.json فایل.

برای استفاده از طرح صورتی در پروژه خود، آن را در فایل های جاوا اسکریپت پروژه خود وارد کنید.

ایجاد داشبورد

برای هدف این آموزش، یک داشبورد ساده ایجاد می‌کنید که برخی از داده‌های قرارداد ساختگی را با استفاده از Pink Design نشان می‌دهد.

ایجاد یک src/components پوشه در ریشه پروژه شما. در پوشه، a را ایجاد کنید ContractStatus.js کامپوننت و کد زیر را در آن قرار دهید.

import "@appwrite.io/pink";
import "@appwrite.io/pink-icons";

const ContractStatus = () => {
    return (
        <div class="u-flex u-main-center">
            <div class="u-margin-32">
                <div class="status is-complete">
                    <span class="status-icon"></span>
                    <span class="text">Accepted</span>
                </div>
                <h4 class="heading-level-4 u-text-center">2,340</h4>
            </div>
            <div class="u-margin-32">
                <div class="status is-pending">
                    <span class="status-icon"></span>
                    <span class="text">In Contract</span>
                </div>
                <h4 class="heading-level-4 u-text-center">1,782</h4>
            </div>
            <div class="u-margin-32">
                <div class="status is-processing">
                    <span class="status-icon"></span>
                    <span class="text">In Approval</span>
                </div>
                <h4 class="heading-level-4 u-text-center">1,596</h4>
            </div>

        </div>
    )
}
export default ContractStatus;

کد بالا کارهای زیر را انجام می دهد:

خطوط 1 و 2 بسته Appwrite’s Pink Design و نمادهای آن را وارد می کنند.
در ظرف اصلی، u-flex کلاس از Pink Design کانتینر را به صورت flex و مرکز u-main محتوای ظرف را به مرکز توجیه می کند.
وضعیت کامل است، در حال بررسی است، در حال پردازش است وضعیت یک فرآیند را مشخص کنید.
را نماد وضعیت کلاس از نمادی استفاده می کند که با موارد مشخص شده مطابقت دارد وضعیت کلاس
عنوان-سطح-4 یک قابلیت تایپوگرافی است که اندازه عنوان را مشخص می کند.
در حاشیه-32 حاشیه ظرف یا آیتم را مشخص می کند.

از کد بالا می توانید ببینید که چگونه Pink Design استایل دادن به عناصر را آسان می کند.

وارد کنید src/components/ContractStatus.js جزء به pages/index.js فایل. فایل در این مرحله باید به شکل زیر باشد:

import Head from 'next/head'
import ContractStatus from '@/src/components/ContractStatus';
import "@appwrite.io/pink";
export default function Home() {
  return (
    <>
      <Head>
        <title>Contract Dashboard</title>
      </Head>
      <div class="box u-margin-32 u-padding-block-12">
        <h1 class="heading-level-1 u-text-center">Contract Dashboard</h1>
        <ContractStatus />
      </div>
    </>
  )
}

در کد بالا، جعبه کلاس کانتینر را به صورت جعبه استایل می دهد، در حاشیه-32 حاشیه 32 پیکسل را اعمال می کند و u-padding-block-12 یک بالشتک 0.75 rem اعمال می کند.

در این مرحله، رابط کاربری شما باید به شکل زیر باشد:

داشبورد

ایجاد یک src/components/CycleTime.js کامپوننت و کد زیر را در آن قرار دهید.

const CycleTime = () => {
    return (
        <div>
            <h4 class="heading-level-4 u-text-center">Average Cycle Time</h4>
            <div class="u-flex u-main-space-between">
                <div class="alert is-success u-width-250 u-margin-32">
                    <div class="alert-grid">
                        <div class="u-flex u-gap-32 u-cross-center">
                            <p class="u-bold">25 days</p>
                            <p class="u-bold">NDA</p>
                            <img
                                class="avatar"
                                width="32"
                                height="32"
                                src="https://unsplash.it/41"
                                alt="image"
                            />
                        </div>
                    </div>
                </div>
                <div class="alert is-success u-width-250 u-margin-32">
                    <div class="alert-grid">
                        <div class="u-flex u-gap-24 u-cross-center">
                            <p class="u-bold">12 days</p>
                            <p class="u-bold">Insurance</p>
                            <img
                                class="avatar"
                                width="32"
                                height="32"
                                src="https://unsplash.it/41"
                                alt="image"
                            />
                        </div>
                    </div>
                </div>
                <div class="alert is-success u-width-250 u-margin-32">
                    <div class="alert-grid">
                        <div class="u-flex u-gap-32 u-cross-center">
                            <p class="u-bold">45 days</p>
                            <p class="u-bold">Lease</p>
                            <img
                                class="avatar"
                                width="32"
                                height="32"
                                src="https://unsplash.it/41"
                                alt="image"
                            />
                        </div>
                    </div>
                </div>
                <div class="alert is-success u-width-250 u-margin-32">
                    <div class="alert-grid">
                        <div class="u-flex u-gap-24 u-cross-center">
                            <p class="u-bold">18 days</p>
                            <p class="u-bold">Purchase</p>
                            <img
                                class="avatar"
                                width="32"
                                height="32"
                                src="https://unsplash.it/41"
                                alt="image"
                            />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default CycleTime;

کد بالا یک سری از را ایجاد می کند شبکه های هشدار برای نمایش برخی داده ها هشدارها پیام های تولید شده توسط وظیفه و سیستم را نشان می دهد. در این مورد، ایستا است، اما هدف این است که نشان دهد طراحی صورتی آسان به ایجاد هشدار کمک می کند. نوع هشدار باید توسط کاربر تنظیم شود: به عنوان مثال، موفقیت است، هشدار دهنده است، و اطلاعات است.

وارد کنید src/components/CycleTime.js جزء به pages/index.js فایل. فایل در این مرحله باید به شکل زیر باشد:

import Head from 'next/head'
import ContractStatus from '@/src/components/ContractStatus';
import CycleTime from '@/src/components/CycleTime';
import "@appwrite.io/pink";

export default function Home() {
  return (
    <>
      <Head>
        <title>Contract Dashboard</title>
      </Head>
      <div class="box u-margin-32 u-padding-block-12">
        <h1 class="heading-level-1 u-text-center">Contract Dashboard</h1>
        <ContractStatus />
        <CycleTime/>
      </div>
    </>
  )
}

در این مرحله، UI باید به شکل زیر باشد:

داشبورد

ایجاد یک src/components/ContractTable.js کامپوننت و کد زیر را در آن قرار دهید.

import "@appwrite.io/pink";
import "@appwrite.io/pink-icons";

const ContractTable = () => {
    return (
        <div>
            <h4 class="heading-level-4 u-text-center">My Contracts</h4>
            <table class="table">
                <thead class="table-thead">
                    <tr class="table-row">
                        <th class="table-thead-col"><span class="eyebrow-heading-3">Serial No.</span></th>
                        <th class="table-thead-col">
                            <span class="eyebrow-heading-3">Name</span>
                        </th>
                        <th class="table-thead-col">
                            <span class="eyebrow-heading-3">Value</span>
                        </th>
                        <th class="table-thead-col">
                            <span class="eyebrow-heading-3">Status</span>
                        </th>
                        <th class="table-thead-col">
                            <span class="eyebrow-heading-3">Deadline</span>
                        </th>
                    </tr>
                </thead>
                <tbody class="table-tbody">
                    <tr class="table-row">
                        <td class="table-col" data-title="Name">
                            <div class="u-inline-flex u-cross-center u-gap-12">
                                <span class="text u-break-word u-line-height-1-5">1001</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Name">
                            <div><span class="text">Horizon Tech</span></div>
                        </td>
                        <td class="table-col" data-title="Value">
                            <span class="text">$48,292</span>
                        </td>
                        <td class="table-col" data-title="Status">
                            <div class="tag is-success">
                                <span class="text">Active</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Deadline">
                            <span class="text">01.01.2024</span>
                        </td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-col" data-title="Name">
                            <div class="u-inline-flex u-cross-center u-gap-12">
                                <span class="text u-break-word u-line-height-1-5">1002</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Name">
                            <div><span class="text">Flowtech Labs</span></div>
                        </td>
                        <td class="table-col" data-title="Value">
                            <span class="text">$20,500</span>
                        </td>
                        <td class="table-col" data-title="Status">
                            <div class="tag is-warning">
                                <span class="text">Draft</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Deadline">
                            <span class="text">-</span>
                        </td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-col" data-title="Name">
                            <div class="u-inline-flex u-cross-center u-gap-12">
                                <span class="text u-break-word u-line-height-1-5">1003</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Name">
                            <div><span class="text">ServerTech</span></div>
                        </td>
                        <td class="table-col" data-title="Value">
                            <span class="text">$15,800</span>
                        </td>
                        <td class="table-col" data-title="Status">
                            <div class="tag is-success">
                                <span class="text">Active</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Deadline">
                            <span class="text">01.03.2024</span>
                        </td>
                    </tr>
                    <tr class="table-row">
                        <td class="table-col" data-title="Name">
                            <div class="u-inline-flex u-cross-center u-gap-12">
                                <span class="text u-break-word u-line-height-1-5">1004</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Name">
                            <div><span class="text">DoveTech</span></div>
                        </td>
                        <td class="table-col" data-title="Value">
                            <span class="text">$20,500</span>
                        </td>
                        <td class="table-col" data-title="Status">
                            <div class="tag is-success">
                                <span class="text">Active</span>
                            </div>
                        </td>
                        <td class="table-col" data-title="Deadline">
                            <span class="text">01.01.2024</span>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    )
}
export default ContractTable;

کد بالا یک جدول با استفاده از Appwrite’s Pink Design ایجاد می کند. جداول از پنج جزء تشکیل شده است:

کلاس	تایپ کنید
سر میز	سر
میز-سر-کل	سر ستون
بدنه میز	بدن
ردیف جدول	ردیف
جدول-col	ستون

وارد کنید src/components/ContractTable.js به درون pages/index.js فایل. فایل باید به شکل زیر باشد:

import Head from 'next/head'
import ContractStatus from '@/src/components/ContractStatus';
import ContractTable from '@/src/components/ContractTable';
import CycleTime from '@/src/components/CycleTime';
import "@appwrite.io/pink";

export default function Home() {
  return (
    <>
      <Head>
        <title>Contract Dashboard</title>
      </Head>
      <div class="box u-margin-32 u-padding-block-12">
        <h1 class="heading-level-1 u-text-center">Contract Dashboard</h1>
        <ContractStatus />
        <CycleTime/>
        <ContractTable/>
      </div>
    </>
  )
}