tailwinds custom theme and tw plus components

This commit is contained in:
2025-06-29 07:43:18 -04:00
parent cfcc4c480e
commit ec6a0861f0
12 changed files with 1114 additions and 280 deletions

View File

@@ -3,6 +3,7 @@
import { useState } from 'react';
import Link from 'next/link';
import React from 'react';
import SearchInput from '@/components/SearchInput';
// AR-15 Build Requirements grouped by main categories
const buildGroups = [
@@ -333,13 +334,11 @@ export default function BuildPage() {
{/* Search Row */}
<div className="mb-4 flex justify-end">
<div className="w-1/2">
<label className="block text-sm font-medium text-gray-700 mb-1">Search Components</label>
<input
type="text"
placeholder="Search components..."
<SearchInput
label="Search Components"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
onChange={setSearchTerm}
placeholder="Search components..."
/>
</div>
</div>
@@ -459,23 +458,23 @@ export default function BuildPage() {
return (
<React.Fragment key={group.name}>
{/* Group Header */}
<tr className="bg-gray-50">
<tr className="bg-gray-800">
<td colSpan={7} className="px-6 py-4">
<div className="flex items-center">
<div className="flex-shrink-0">
<div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
<span className="text-blue-600 font-semibold text-sm">
<div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
<span className="text-white font-semibold text-lg">
{group.name === 'Upper Parts' ? '🔫' :
group.name === 'Lower Parts' ? '🔧' : '📦'}
</span>
</div>
</div>
<div className="ml-4">
<h3 className="text-lg font-semibold text-gray-900">{group.name}</h3>
<p className="text-sm text-gray-500">{group.description}</p>
<h3 className="text-xl font-bold text-white">{group.name}</h3>
<p className="text-gray-300">{group.description}</p>
</div>
<div className="ml-auto text-right">
<div className="text-sm text-gray-500">
<div className="text-gray-300 font-medium">
{groupComponents.length} components
</div>
</div>