React میں Shadcn شیٹ کا جزو کیسے بنایا جائے: کارٹ اور فلٹر پینل کی مثالیں۔

اس ٹیوٹوریل میں، ہم shadcn/ui اور بنیادی UI پرائمیٹوز کو Shadcn Space کے ذریعے استعمال کرتے ہوئے پروڈکشن کے لیے تیار شیٹ کے دو اجزاء بنائیں گے۔

1. کوئی راستہ نہیں شاپنگ کارٹ شیٹ مقدار کا کنٹرول، آئٹم کو ہٹانا، اور ریئل ٹائم سب ٹوٹلز شامل ہیں۔

2. کوئی راستہ نہیں فلٹر پینل شیٹ زمرہ چیک باکسز، قیمت کی حد سلائیڈر، ستارے کی درجہ بندی، اور فعال فلٹرز کی تعداد پر مشتمل ہے۔

آخر کار، آپ کے پروجیکٹ میں چلنے والے دونوں اجزاء اور ان کے پیچھے ریاست اور ترتیب کے فیصلوں کی اچھی سمجھ کے ساتھ، آپ شروع سے ہی اپنی شیٹ کی مختلف شکلیں بنا سکیں گے۔

انڈیکس

شرطیں

شروع کرنے سے پہلے، درج ذیل کو چیک کریں:

• Node.js 18 یا اس سے زیادہ انسٹال ہے۔

• shadcn/ui پروجیکٹ میں شروع کیا گیا ہے (npx shadcn@latest init)

• React اور TypeScript کا بنیادی علم

اگر آپ نے ابھی تک shadcn/ui شروع نہیں کیا ہے تو چلائیں: npx shadcn@latest init پروجیکٹ کی جڑ سے جاری رکھنے سے پہلے اشارے پر عمل کریں۔

کیا تعمیر کرنا ہے

اس ٹیوٹوریل میں نصب اجزاء کا استعمال کیا گیا ہے: Shadcn کی جگہ رجسٹری کا اوپن سورس مجموعہ، shadcn/ui کے لیے UI بلاکس، اور پروڈکشن کے لیے تیار اجزاء۔

آپ کو مکمل سیٹ یہاں مل سکتا ہے: Shadcn شیٹ جزو لائبریری. ہر جزو Radix UI اور Base UI پرائمیٹوز دونوں کو سپورٹ کرتا ہے اور اس میں شامل ہیں: فوری کاپی کے اختیاراتاگر آپ پروٹو ٹائپنگ کر رہے ہیں، تو آپ اجزاء کے چشمی کو v0، پیارے، یا بولٹ جیسے ٹولز میں چسپاں کر سکتے ہیں۔ یہ ٹیوٹوریل ڈیفالٹ UI ورژن استعمال کرتا ہے۔

شاپنگ کارٹ شیٹ (Sheet-03)

• شاپنگ کارٹ آئیکن ٹرگر اور آئٹم کاؤنٹ بیج کے ساتھ دائیں طرف سلائیڈ ان پینل

• ہر شے کے لیے مقدار میں اضافہ، کمی یا ہٹا دیں۔

• خریداری کی ٹوکری کے اسٹیٹس سے شمار کیے گئے ریئل ٹائم ذیلی کل اور ٹوٹل

• درمیان میں آئٹمز کی اسکرول قابل فہرست کے ساتھ فکسڈ ہیڈر اور فوٹر۔

فلٹر پینل شیٹ (Sheet-04)

• بائیں سے سلائیڈ ان پینل

• ملٹی سلیکٹ زمرہ چیک باکس

• ریئل ٹائم کم از کم/زیادہ سے زیادہ ڈسپلے کے ساتھ قیمت کی حد کا سلائیڈر

• سنگل سلیکٹ ریٹنگ فلٹر

• فعال فلٹر کاؤنٹ بیج اور "سب کو صاف کریں” ایکشن جو پینل بند نہ ہو۔

CLI رجسٹری کو کیسے ترتیب دیا جائے۔

انسٹالیشن کمانڈ چلانے سے پہلے Shadcn اسپیس رجسٹری۔ components.json فائل

کھلا components.json اسے پروجیکٹ کی جڑ میں شامل کریں۔ registries میدان:

{
  "registries": {
    "@shadcn-space": {
      "url": "https://shadcnspace.com/r/{name}.json"
    }
  }
}

یہ shadcn CLI کو بتاتا ہے کہ پریفکسڈ اجزاء کو کہاں تلاش کرنا ہے۔ @shadcn-space/. اس قدم کے بغیر، نیچے دی گئی انسٹالیشن کمانڈ ناکام ہو جائے گی۔

رجسٹری کی ترتیبات کی مکمل واک تھرو کے لیے، دیکھیں: شروع کرنا گائیڈ. Shadcn اسپیس بھی ایم سی پی سرورلہذا اگر آپ اپنے ورک فلو میں MCP ٹولز استعمال کرتے ہیں، تو آپ ایڈیٹر سے ہی اجزاء کو براؤز اور انسٹال کر سکتے ہیں۔ اگر آپ ویڈیو کے ساتھ بصری طور پر پیروی کرنا چاہتے ہیں، تو یہاں جائیں:

کارٹ سیٹ کی خصوصیات

شاپنگ کارٹ کا آئیکن نیویگیشن بار میں واقع ہے۔ اس پر کلک کرنے سے دائیں ہاتھ کا پینل سلائیڈ ہو جاتا ہے جو مقدار کو تبدیل کرنے یا شے کو مکمل طور پر ہٹانے کے کنٹرول کے ساتھ ہر آئٹم کی تصویر، نام، مختلف قسم اور قیمت دکھاتا ہے۔ آپ کے منتقل ہوتے ہی ذیلی ٹوٹل اپ ڈیٹ ہو جاتے ہیں، اور فوٹر نچلے حصے میں ٹھیک رہتا ہے اس سے قطع نظر کہ فہرست میں کتنے آئٹمز ہیں۔

کارٹ سیٹ انسٹال کرنے کا طریقہ

آپ کے پیکیج مینیجر پر منحصر ہے، درج ذیل میں سے ایک چلائیں:

این پی ایم:

npx shadcn@latest add @shadcn-space/sheet-03

pnpm:

pnpm dlx shadcn@latest add @shadcn-space/sheet-03

تابکاری:

yarn dlx shadcn@latest add @shadcn-space/sheet-03

روٹی:

bunx --bun shadcn@latest add @shadcn-space/sheet-03

CLI مندرجہ ذیل جگہ پر اجزاء کو آپ کے پروجیکٹ میں کاپی کرتا ہے:

components/
  shadcn-space/
    sheet/
      sheet-03.tsx

اجزاء کوڈ

"use client";
import { useState } from "react";
import { ShoppingCartIcon, PlusIcon, MinusIcon, Trash2Icon } from "lucide-react";
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

const initialItems = [
  {
    id: 1,
    name: "Apple Watch S9",
    variant: "Midnight / 41mm",
    price: 684.0,
    qty: 1,
    image: "https://images.shadcnspace.com/assets/ecommerce/product-category/product-category-03-1.webp",
  },
  {
    id: 2,
    name: "Beige Jacket",
    variant: "Size M / Beige",
    price: 479.0,
    qty: 1,
    image: "https://images.shadcnspace.com/assets/ecommerce/product-category/product-category-02-2.webp",
  },
  {
    id: 3,
    name: "Glow Serum",
    variant: "30ml / Vitamin C",
    price: 46.0,
    qty: 2,
    image: "https://images.shadcnspace.com/assets/ecommerce/product-category/product-category-03-3.webp",
  },
];

const ShoppingCartDemo = () => {
  const [items, setItems] = useState(initialItems);

  const updateQty = (id, delta) => {
    setItems((prev) =>
      prev
        .map((item) => (item.id === id ? { ...item, qty: item.qty + delta } : item))
        .filter((item) => item.qty > 0)
    );
  };

  const subtotal = items.reduce((sum, item) => sum + item.price * item.qty, 0);
  const totalCount = items.reduce((sum, item) => sum + item.qty, 0);

  return (
    
      }>
        
        {totalCount > 0 && (
          
            {totalCount}
          
        )}
      

      
        
          Your Cart
          
            {totalCount > 0
              ? `${totalCount} item${totalCount > 1 ? "s" : ""} in your cart`
              : "Your cart is empty"}
          
        

        

          {items.map((item) => (
            

              

                
              
              

                
{item.name}
                
{item.variant}
                
${item.price.toFixed(2)}
              
              

                 updateQty(item.id, -item.qty)}
                >
                  
                
                
                   updateQty(item.id, -1)}>
                    
                  
                  {item.qty}
                   updateQty(item.id, 1)}>
                    
                  
                
              
            
          ))}
        

        
          

            

              Subtotal
              ${subtotal.toFixed(2)}
            
            

              Shipping
              Free
            
            
            

              Total
              ${subtotal.toFixed(2)}
            
          
          Checkout
          }>
            Continue Shopping
          
        
      
    
  );
};

export default ShoppingCartDemo;

آئیے دیکھتے ہیں کہ یہ کیسے کام کرتا ہے۔

1. ٹریک شدہ ریاستوں کے بجائے اخذ کردہ کل

subtotal اور totalCount سے شمار کیا جاتا ہے items کسی بھی رینڈرنگ پر جو خود محفوظ نہیں ہے۔ useState. اگر آپ اسے الگ سے ٹریک کرتے ہیں، تو پہلی بار اپ ڈیٹ کرتے وقت یہ مطابقت پذیری سے باہر ہو جائے گا۔ items اور میں ان کے ساتھ گنتی کو اپ ڈیٹ کرنا بھول گیا۔

2. کسی شے کو ہٹانے کا مطلب ہے کہ اس چیز کی مقدار کو صفر کرنا۔

const updateQty = (id, delta) => {
  setItems((prev) =>
    prev
      .map((item) => (item.id === id ? { ...item, qty: item.qty + delta } : item))
      .filter((item) => item.qty > 0)
  );
};

کوڑے دان کا آئیکن کہا جاتا ہے۔ updateQty(item.id, -item.qty)اس چیز کی مقدار کو 0 تک گرا دیتا ہے۔ .filter() پھر ہم اسے صف سے ہٹا دیتے ہیں۔ اس کا مطلب ہے کہ ایک علیحدہ "آئٹم کو ہٹا دیں” فنکشن کی ضرورت نہیں ہے جو پہلے سے موجود منطق کو نقل کرتا ہے۔ updateQty.

3۔ render سہارے کے بجائے asChild

SheetTrigger اور SheetClose استعمال کریں render سہارے (render={})بچوں کو پیک کرنے سے۔ asChild پیٹرن یہ پہلے سے طے شدہ UI کنونشن ہے جسے Shadcn Space جزو کے ذریعے استعمال کیا جاتا ہے اور بٹن (فوکس سٹیٹ، کی بورڈ ہینڈلنگ) کو حسب ضرورت ریپر سے اوور رائیڈ کرنے کے بجائے اس کے مکمل قابل رسائی رویے کو محفوظ رکھتا ہے۔

4. ہیڈر اور فوٹر فکسڈ، سینٹر سکرول ایبل

  
  
{/* items */}
  

flex-1 overflow-y-auto سینٹر ڈیو وہی ہے جو ہیڈر اور فوٹر کو درست رکھتا ہے جبکہ آئٹمز کی فہرست آزادانہ طور پر سکرول ہوتی ہے۔ اگر آپ اسے چھوڑ دیتے ہیں، تو لمبی ٹوکری چیک آؤٹ بٹن کو اسکرین سے دھکیل دے گی۔

لائیو پیش نظارہ:

فلٹر پینل شیٹ کیسے بنائیں (شیٹ-04)

فلٹر شیٹ کا فنکشن

فلٹر بٹن بائیں طرف سے ایک پینل کو سلائیڈ کرتا ہے جس میں زمرہ چیک باکسز، قیمت کی حد کا سلائیڈر، ستارہ درجہ بندی کا فلٹر، اور دستیابی ٹوگل ہوتا ہے۔ فعال فلٹرز کی تعداد خود محرک بٹن پر ظاہر ہوتی ہے، اور فلٹر کو صاف کرنے سے پینل کو بند کیے بغیر حالت دوبارہ ترتیب دی جاتی ہے۔

فلٹر شیٹ کو انسٹال کرنے کا طریقہ

npx shadcn@latest add @shadcn-space/sheet-04

CLI جزو کو نقل کرتا ہے:

components/
  shadcn-space/
    sheet/
      sheet-04.tsx

اجزاء کوڈ

"use client";

import { useState } from "react";
import { SlidersHorizontalIcon, StarIcon } from "lucide-react";
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Slider } from "@/components/ui/slider";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

const CATEGORIES = ["Watches", "Clothing", "Beauty", "Electronics", "Home & Living"];
const RATINGS = [4, 3, 2, 1];
const AVAILABILITY = ["In Stock", "On Sale"];

const AdvancedFiltersDemo = () => {
  const [selectedCategories, setSelectedCategories] = useState([]);
  const [priceRange, setPriceRange] = useState([0, 1000]);
  const [selectedRating, setSelectedRating] = useState(null);
  const [selectedAvailability, setSelectedAvailability] = useState([]);

  const toggleCategory = (cat) =>
    setSelectedCategories((prev) => (prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]));

  const toggleAvailability = (val) =>
    setSelectedAvailability((prev) => (prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val]));

  const clearAll = () => {
    setSelectedCategories([]);
    setPriceRange([0, 1000]);
    setSelectedRating(null);
    setSelectedAvailability([]);
  };

  const activeCount =
    selectedCategories.length +
    (priceRange[0] !== 0 || priceRange[1] !== 1000 ? 1 : 0) +
    (selectedRating !== null ? 1 : 0) +
    selectedAvailability.length;

  return (
    
      }>
        
        Filters
        {activeCount > 0 && (
          {activeCount}
        )}
      

      
        
          Filters
          Narrow down products by your preferences.
        

        

          

            
Category
            {CATEGORIES.map((cat) => (
              

                 toggleCategory(cat)} />
                {cat}
              
            ))}
          

          

          

            

              
Price Range
              ${priceRange[0]} -- ${priceRange[1]}
            
             setPriceRange(Array.isArray(val) ? [...val] : [val])} min={0} max={1000} step={10} />
          

          

          

            
Rating
            {RATINGS.map((rating) => (
              
 setSelectedRating(selectedRating === rating ? null : rating)}>
                 setSelectedRating(selectedRating === rating ? null : rating)} />
                
                  {Array.from({ length: rating }).map((_, i) => )}
                  {Array.from({ length: 5 - rating }).map((_, i) => )}
                  & up
                
              
            ))}
          

          

          

            
Availability
            {AVAILABILITY.map((val) => (
              

                 toggleAvailability(val)} />
                {val}
              
            ))}
          
        

        
          

Clear All }>Apply Filters ); }; export default AdvancedFiltersDemo;

یہ جزو کیسے کام کرتا ہے:

1. ہر فلٹر کی قسم کے لیے الگ الگ سٹیٹس استعمال کریں۔

زمرہ جات اور دستیابی صفوں کا استعمال کرتے ہیں کیونکہ صارف متعدد اختیارات منتخب کر سکتا ہے۔ درجہ بندی ایک واحد قدر ہے (یا null) اس کی وجہ یہ ہے کہ آپ صرف ایک لیول منتخب کر سکتے ہیں۔ قیمت دو قدروں کی ایک صف ہے ([min, max]) منتخب کردہ رینج کو محفوظ کریں۔ یہ ہر فلٹر کی حالت کو سادہ اور UI کے کام کرنے کے طریقے سے مطابقت رکھتا ہے۔

2. activeCount یہ ٹریک نہیں ہے، یہ حساب ہے.

اوپر والے کارٹ بیج کے لیے وہی استدلال:

const activeCount =
  selectedCategories.length +
  (priceRange[0] !== 0 || priceRange[1] !== 1000 ? 1 : 0) +
  (selectedRating !== null ? 1 : 0) +
  selectedAvailability.length;

اگر آپ اس گنتی کو دستی طور پر ٹریک کر رہے تھے، تو آپ نئے فلٹرز کو شامل کریں گے اور گنتی کی منطق کو اپ ڈیٹ کرنا بھول جائیں گے، اور آپ اپنے صارفین کو ایک بیج دکھا رہے ہوں گے۔

3. "فلٹر لگائیں” پینل کو بند کر دیتا ہے، "سب کو صاف کریں” پینل کو بند نہیں کرتا ہے۔

Clear All فون کال clearAll() براہ راست میدانی علاقوں میں Button. Apply Filters میں لپیٹ SheetCloseلہذا ہم کسی بھی چیز کو ری سیٹ کیے بغیر پینل کو بند کر دیتے ہیں۔ فلٹرز صاف کرنے والے صارفین عام طور پر نئے فلٹرز کو منتخب کرنے کے لیے پینل کو کھلا رکھنا چاہتے ہیں۔ اگر آپ اپنے تمام کاموں کو بند کرتے ہیں، تو آپ کو انہیں ہر بار دوبارہ کھولنا پڑے گا۔

4. زمرے تبدیل کریں۔ .filter() اور پھیلاؤ

const toggleCategory = (cat) =>
  setSelectedCategories((prev) => (prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]));

یہ ایک لائن صف سے زمرے شامل کرنے اور ہٹانے دونوں کو سنبھالتی ہے اس پر منحصر ہے کہ آیا زمرہ پہلے سے موجود ہے یا نہیں۔ یہ ایک ایسا نمونہ ہے جس کو دوبارہ استعمال کرنے کے قابل ہے جہاں آپ کے پاس کثیر انتخابی چیک باکسز کی فہرست ہے جس میں تاروں کی ایک صف سے تعاون کیا جاتا ہے۔

لائیو پیش نظارہ:

فوری حوالہ کی میز

کسی ایک کو انسٹال کرنے کے لیے، CLI کمانڈ میں شناخت کنندہ کو تبدیل کریں۔

npx shadcn@latest add @shadcn-space/

Shadcn شیٹ استعمال کرنے کے لیے کلیدی تصورات

• ثانوی ورک فلو کے لیے شیٹس استعمال کریں۔ یہ فلٹرز، شاپنگ کارٹس، سیٹنگز، نیویگیشن مینو اور فارمز کے لیے مثالی ہے جو مرکزی صفحہ کے ساتھ مداخلت نہیں کرنا چاہیے۔

• اپنی ترتیب کو مستقل رکھیں۔ فکسڈ ہیڈر، سکرول قابل مواد کا علاقہ (flex-1 overflow-y-auto) اور ایک چسپاں فوٹر تاکہ آپ کا کام طویل مواد میں بھی نظر آتا رہے۔

• ریاست سے UI قدریں اخذ کرنا: شمار، ٹوٹل، اور بیجز (جیسے فعال فلٹرز یا کارٹ آئٹمز) کا حساب الگ سے ذخیرہ کرنے کے بجائے ریاست سے کیا جانا چاہیے۔

• جب آپ کام کر لیں تو شیٹ بند کر دیں۔ کام جیسے فلٹر لگائیں۔، حاصل کریںیا معائنہ نشست بند ہونی چاہیے۔ کام جیسے فلٹر صاف کریں۔ یا اسے واپس رکھو اسے کھلا رکھا جانا چاہیے تاکہ صارفین تبدیلیاں کرتے رہیں۔

• صحیح ریاستی ڈھانچہ کا انتخاب کریں۔ متعدد انتخاب کے اختیارات (جیسے زمرہ یا دستیابی)، واحد قدر (یا null) واحد منتخب اختیارات (جیسے درجہ بندی) اور دو قدر والی صفیں ([min, max]) رینج فلٹرز کے لیے جیسے قیمت۔

• اپنے کاموں کو آسانی سے قابل رسائی رکھیں: درج ذیل بنیادی کاموں کو ترتیب دیں: لاگو کریں، حاصل کریںیا معائنہ اسے اپنے فوٹر میں شامل کریں تاکہ آپ کا مواد اسکرول کرتے وقت قابل رسائی رہے۔

• سیٹ کو اوور لوڈ کرنے سے گریز کریں۔ اگر آپ کا ورک فلو لمبا ہے، متعدد مراحل کی ضرورت ہے، یا صارف کی پوری توجہ کی ضرورت ہے، تو شیٹس کے بجائے وقف شدہ صفحات استعمال کرنے پر غور کریں۔

نتیجہ

اس گائیڈ میں، ہم نے دو عملی Shadcn شیٹ اجزاء بنائے ہیں، ایک شاپنگ کارٹ اور ایک فلٹر پینل، ان نمونوں کو ظاہر کرنے کے لیے جو آپ اکثر React ایپلی کیشنز میں استعمال کریں گے۔ راستے میں، ہم نے ترتیب کے بہترین طریقوں، ریاستی انتظام، اخذ کردہ اقدار، اور تعامل کے نمونوں کا احاطہ کیا جو شیٹس کو بدیہی اور قابل اعتماد محسوس کرتے ہیں۔

یہ مثالیں محض مظاہروں سے زیادہ ہیں۔ یہ سیٹنگ پینز، موبائل نیویگیشن، نوٹیفکیشن پینلز، اور بہت سے دوسرے سائڈ پینل تجربات کی تعمیر کے لیے دوبارہ قابل استعمال بنیاد فراہم کرتا ہے۔ ان نمونوں کی پیروی کرنے سے آپ کو Shadcn شیٹ کے اجزاء بنانے میں مدد ملے گی جو صاف، جوابدہ، اور آپ کی ایپلیکیشن بڑھنے کے ساتھ برقرار رکھنے میں آسان ہیں۔

وسائل