Next JS Сборщик ПК

Space of React

требуется вход

Войдите, чтобы смотреть видео

Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.

Войти Создать аккаунт — бесплатно

Закончили урок?

Войдите, чтобы отмечать прогресс

Войти

Урок

Next JS Сборщик ПК — УрокТаблица с компонентами — Next JS Сборщик ПК | Max Roslow | Space of React

TypeScript (lib/types.ts)

Создайте типы и маппинги для компонентов ПК:


export type ComponentCategory = {
    id: string
    name: string
    icon: string
}

export type Component = {
    id: string
    name: string
    price: number
    type: ComponentType
    socket: string | null
}

export type ComponentType = 'cpu' | 'gpu' | 'ram' | 'ssd' | 'motherboard' | 'psu' | 'case' | 'cooler'

export const categoryIdToDbType: Record<string, ComponentType> = {
    cpu: 'cpu',
    gpu: 'gpu',
    ram: 'ram',
    storage: 'ssd',
    motherboard: 'motherboard',
    psu: 'psu',
    case: 'case',
    cooling: 'cooler'
}

export const dbTypeToCategoryId: Record<ComponentType, string> = {
    cpu: 'cpu',
    gpu: 'gpu',
    ram: 'ram',
    ssd: 'storage',
    motherboard: 'motherboard',
    psu: 'psu',
    case: 'case',
    cooler: 'cooling'
}

Назначение:

ComponentCategory — категории с иконками (UI)
Component — комплектующие из Prisma
categoryIdToDbType — UI ID → Prisma тип
dbTypeToCategoryId — Prisma тип → UI ID

Использование:


// Получить компоненты CPU
const cpuComponents = await prisma.component.findMany({ where: { type: categoryIdToDbType['cpu'] }

Иконки для таблицы компонентов

Добавьте маппинг иконок для категорий комплектующих:

app/dashboard/components/table.tsx


import { Cpu, Monitor, Server, MemoryStick, HardDrive, Zap, Box,

Соответствие категорий и иконок:

cpu → Cpu
gpu → Monitor
motherboard → Server
ram → MemoryStick
ssd → HardDrive
psu → Zap
case →

Использование в таблице:


const IconComponent = iconMap[component.type as ComponentCategory['icon']]
<IconComponent className="w-5 h-5"

Константы категорий комплектующих

Создайте массив категорий с русскими названиями и иконками Lucide React:

lib/constants.ts


import { ComponentCategory } from "./types"

export const componentCategories: ComponentCategory[] =

Использование:


// Получить иконку для CPU
const category = componentCategories.find(c => c.id === 'cpu')
const Icon = iconMap

Соответствует маппингам из lib/types.ts для UI и Prisma.

Box