shadcn/ui کا استعمال کرتے ہوئے پروڈکشن کے لیے تیار کارڈ کے اجزاء کیسے بنائے جائیں۔

. اس کے لیے ایک مستقل اجزاء کی ساخت، ایک مستحکم ڈیزائن سسٹم، اور ایک سوچے سمجھے ٹیل وِنڈ پیٹرن کی ضرورت ہوتی ہے۔

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

آخر میں آپ کے پاس ہوگا:

1. گروپ ہوور امیج ایفیکٹ، اوورلے ایرو آئیکن، اور پراپرٹی کی تفصیلات لے آؤٹ کے ساتھ پیش نظارہ کارڈ

2. درج کردہ میٹرک پروپس، مشروط بیج کا رنگ، اور آرائشی پس منظر کی تصویر کے ساتھ تجزیہ کارڈ

3. جوابی 4 کالم ای کامرس شماریات گرڈ اور آئیکن بیجز کے ساتھ شماریات کارڈ

4. سائز کے انتخاب، خواہش کی فہرست ٹوگل، شاپنگ کارٹ بٹن، اور خرید بٹن کے لیے ریپل اینیمیشن کے ساتھ ای کامرس پروڈکٹ ویری ایشن کارڈ۔

انڈیکس

شرطیں

شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کے پاس درج ذیل ہیں:

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

• Next.js یا React پروجیکٹ کو ترتیب دینا

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

• Tailwind CSS اب کنفیگر ہو گیا ہے۔

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

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

shadcn/ui کیوں؟

shadcn/ui Radix UI، قابل رسائی، اوپن سورس React اجزاء کا مجموعہ جو Base UI کے اوپر بنایا گیا ہے اور Tailwind CSS کے ساتھ اسٹائل کیا گیا ہے۔

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

کچھ اہم فوائد:

• ڈیفالٹ کے ذریعے قابل رسائی: Radix UI اور بیس UI پرائمیٹوز پر بنایا گیا ہے۔

• مکمل طور پر ٹیل ونڈ پر مبنی: کوئی بیرونی CSS فائلیں اور کوئی مخصوصیت کا تنازعہ نہیں۔

• زیرو لاک ان: جزو آپ کا ہے۔ components/ فولڈر، اندر نہیں node_modules

• کہیں بھی کام کرتا ہے۔: Next.js، Vite، Astro، Remix اور دیگر React فریم ورک

کہ Card، Badge، Buttonاور Separator تمام اجزاء جو ہم اس ٹیوٹوریل میں استعمال کریں گے وہ shadcn/ui کی ڈیفالٹ انسٹالیشن سے آتے ہیں۔

Shadcn Space کیا ہے؟

Shadcn کی جگہ پروڈکشن کے لیے تیار اجزاء اور UI بلاکس کی ایک اوپن سورس رجسٹری جو shadcn/ui کے اوپری حصے میں بنائی گئی ہے۔ یہ ایک انتہائی پرکشش ترتیب تک پہنچنے کے لیے عام نمونوں کی اضافی تغیرات کا استعمال کرتے ہوئے shadcn/ui اجزاء کے بنیادی سیٹ کو بڑھاتا ہے۔

ڈیفالٹ shadcn/ui سے کلیدی اختلافات Card جزو یہ ہے کہ Shadcn اسپیس کارڈز ایک مخصوص ترتیب کے پیٹرن کو فٹ کرنے کے لیے بنائے گئے ہیں۔ بنیادی طور پر، آپ کو زیادہ ڈھانچہ ملتا ہے۔

Shadcn Space کا ہر جزو Radix UI اور Base UI پرائمیٹوز دونوں کو سپورٹ کرتا ہے۔ تم بھی پرامپٹ کاپی کریں۔. یہ ٹیوٹوریل ڈیفالٹ UI ورژن استعمال کرتا ہے۔ آپ اسے ایک ہی CLI کمانڈ کے ذریعے shadcn/ui جزو کی طرح انسٹال کرتے ہیں، اور سورس فائلیں آپ کے پروجیکٹ میں محفوظ ہوجاتی ہیں۔

آپ کو کارڈ کا پورا مجموعہ یہاں مل سکتا ہے: Shadcn کارڈ جزو لائبریری.

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

یہاں چار کارڈز کا ایک جائزہ ہے جو آپ ہر کارڈ کی مخصوص خصوصیات کے ساتھ بنائیں گے۔

پیش نظارہ کارڈ (کارڈ-02)

• ہوور برائٹنس کے ساتھ بڑی تصویر اور انیمیشن کا سائز تبدیل کریں۔

• تیر کا آئیکن جو صرف اوپر منڈلاتے وقت ظاہر ہوتا ہے۔

• پراپرٹی کا عنوان اور مقام

• فیروزی رنگ سکیم میں قیمت کا بیج

• بستر، باتھ ٹب اور خلائی شبیہیں کے ساتھ سہولیات کی قطار

تجزیہ کارڈ (کارڈ-05)

• پہلے سے طے شدہ ڈیٹا سیٹ کے ساتھ ٹائپ اسکرپٹ ٹائپ اسکرپٹ پروپس

• میٹرکس کے دو کالم عمودی تقسیم کرنے والے سے الگ کیے گئے ہیں۔

• مثبت یا منفی رجحانات کی بنیاد پر مشروط بیج کا رنگ

• آرائشی پس منظر کی تصویر نیچے دائیں جانب پن کی گئی ہے۔

شماریات کارڈ (کارڈ-06)

• 4 کالم ریسپانسیو گرڈ موبائل پر سجا ہوا ہے۔

• ہر میٹرک کے لیے سولر آئیکن سیٹ کو آئیکنیفائی کریں۔

• رجحان کی سمت کے آئیکن کے ساتھ بیج

• بارڈر ڈیوائیڈر خود بخود آخری کالم سے ہٹا دیا جاتا ہے۔

ای کامرس پروڈکٹ ویرینٹ کارڈ (کارڈ-17)

• 3D شیڈو اور ہوور زوم کے ساتھ پروڈکٹ کی تصاویر

• وش لسٹ ہارٹ ٹوگل ڈارک موڈ کو سپورٹ کرتا ہے۔

• فعال حیثیت کو نمایاں کرنے کے ساتھ سائز سلیکٹر

• کلک کرنے پر بھرنے کے لیے بیگ کا آئیکن ٹوگل کریں۔

• CSS ریپل اینیمیشن کے ساتھ "ابھی خریدیں” بٹن

• آرڈینل فارمیٹ میں ڈائنامک ڈیلیوری کی تاریخ

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

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

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

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

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

آپ کا پورا components.json رجسٹری کو شامل کرنے کے بعد اسے اس طرح نظر آنا چاہئے:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@shadcn-space": {
      "url": "https://shadcnspace.com/r/{name}.json"
    }
  }
}

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

پیش نظارہ کارڈ بنانے کا طریقہ (کارڈ-02)

پیش نظارہ کارڈ کی خصوصیات

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

جب صارف کارڈ پر منڈلاتا ہے تو تصویر سیاہ اور بڑی ہو جاتی ہے۔ کونے میں تیر کا نشان نظر آئے گا۔ تصویر کے نیچے آپ کو عنوان، مقام، قیمت کا بیج، اور سہولیات کی ایک قطار نظر آئے گی۔

پیش نظارہ کارڈ انسٹال کرنے کا طریقہ

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

npm:

npx shadcn@latest add @shadcn-space/card-02

pnpm:

pnpm dlx shadcn@latest add @shadcn-space/card-02

تابکاری:

yarn dlx shadcn@latest add @shadcn-space/card-02

روٹی:

bunx --bun shadcn@latest add @shadcn-space/card-02

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

components/
  shadcn-space/
    card/
      Card-02.tsx

اجزاء کوڈ

import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { ArrowRight, Bath, BedDouble, Expand } from "lucide-react";

const PreviewCard = () => (
  
    

      
        

          
        
      

      
    

    
  
);

export default PreviewCard;

اب دیکھتے ہیں کہ یہ کوڈ کیسے کام کرتا ہے۔

1. گروپ ہور سلوک

کہ group باہر کلاس Card عناصر اس جزو کا دل ہیں۔ تمام بچے عناصر کے ساتھ group-hover: جب آپ کارڈز کے ساتھ ساتھ انفرادی عناصر کی طرف اشارہ کرتے ہیں تو کلاس جواب دیتی ہے۔

اس طرح تصویر گہری ہوتی جاتی ہے (group-hover:brightness-50)، توسیع (group-hover:scale-125)، ایک تیر کا آئیکن ظاہر ہوتا ہے (group-hover:block)۔

2. تصاویر کو زوم ان/آؤٹ کرتے وقت اوور فلو کلپنگ

بغیر overflow-hidden تصویر کے ریپر میں scale-125 منڈلاتے وقت کارڈ کے گول کونوں سے خرابی خون بہاتی ہے۔ ریپر تصویر کو تراشتا ہے اور اسے کارڈ کی حدود کے اندر رکھتا ہے۔

توجہ فرمائیں rounded-t-2xl یہ ریپر اور تصویر دونوں پر ظاہر ہوتا ہے تاکہ ٹرانزیشن کے دوران مسلسل کونے والے ریڈی کو برقرار رکھا جا سکے۔

3. سہولت والی قطاروں کے لیے منطقی سرحدی خصوصیات

سہولیات کی قطار استعمال کرتی ہے: border-e اس کے بجائے border-r. سی ایس ایس کی منطقی خصوصیات کا یہی مطلب ہے۔ "ان لائن کے آخر میں بارڈر۔” بائیں سے دائیں لے آؤٹ میں، یہ دائیں طرف ہوگا۔ دائیں سے بائیں لے آؤٹ میں، یہ خود بخود پلٹ جاتا ہے۔ منطقی خصوصیات کا استعمال کسی بھی جزو کے لیے اچھی پروڈکشن پریکٹس ہے جس کو متعدد لوکیلز کو سپورٹ کرنے کی ضرورت ہے۔

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

---

تجزیہ کارڈ کیسے لکھیں (کارڈ-05)

تجزیہ کارڈ کی خصوصیات

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

اجزاء ٹائپ اسکرپٹ انٹرفیس کے طور پر ان پٹ ہوتے ہیں، جس سے API سے اصل ڈیٹا کا تبادلہ کرنا آسان ہوجاتا ہے۔

تجزیاتی کارڈ انسٹال کرنے کا طریقہ

npx shadcn@latest add @shadcn-space/card-05

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

components/
  shadcn-space/
    card/
      card-05.tsx

اجزاء کوڈ

다음에서 { 배지 } 가져오기 "@/구성요소/ui/배지"; 다음에서 { 카드, 카드 콘텐츠 } 가져오기 "@/컴포넌트/ui/카드"; 에서 { 구분 기호 } 가져오기 "@/구성 요소/ui/구분 기호"; 다음에서 {CN } 가져오기 "@/lib/유틸"; DashboardMetric 유형 = { 라벨: 문자열; 값: 문자열; 백분율: 문자열; isPositive?: 부울; }; MainDashboardData = { 제목: 문자열; 설명: 문자열; 측정항목: DashboardMetric[]; }; type WidgetProps = { mainDashboard?: MainDashboardData; }; const mainDashboardData: MainDashboardData = { 제목: "분석 대시보드"설명: "모든 통계를 확인하세요"측정항목: [
    {
      label: "Earnings",
      value: "$27,850",
      percentage: "+18%",
      isPositive: true,
    },
    {
      label: "Expense",
      value: "$18,453",
      percentage: "-5%",
      isPositive: false,
    },
  ]}; const AnalyticsCard = ({ mainDashboard = mainDashboardData }: WidgetProps) => { return (
    

      

        
          
            

              

                

                  
                  {mainDashboard.title}
                
                

                  
                  {mainDashboard.description}
                
              
              

                
                {mainDashboard.metrics.map((metric, index) => (
                  

                    

                      

                        
                        {metric.label}
                      
                      

                        

                          
                          {메트릭.값}
                        
                        
                          
                          {metric.percentage}
                        
                      
                    
                    
                    {색인 < mainDashboard.metrics.length - 1 && (
                      
                    )}
                  
                ))}
              
            

            
          
        
      
    
  );
};

export default AnalyticsCard;

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

1. ڈیفالٹ ڈیٹاسیٹ کا استعمال کرتے ہوئے اختیاری پرپس

جزو انتخاب کو قبول کرتا ہے۔ mainDashboard سہارے اگر کچھ بھی نہیں گزرتا ہے، تو یہ واپس آتا ہے: mainDashboardDataایک ہی فائل میں مستقل کی وضاحت کی گئی ہے۔

const AnalyticsCard = ({ mainDashboard = mainDashboardData }: WidgetProps) => {

یہ پیٹرن آپ کے اجزاء کو ڈیمو یا اسٹوری بک میں باکس سے باہر کام کرنے کی اجازت دیتا ہے، جبکہ پیداوار میں حقیقی API ڈیٹا کے ذریعہ مکمل طور پر چلایا جاتا ہے۔ ریئل ٹائم ڈیٹا سے منسلک ہونے کے لیے، بس درج ذیل سے مماثل ایک پروپ پاس کریں: MainDashboardData شکل

2. مشروط بیج کا رنگ cn()

کہ cn() افادیت (میں @/lib/utils) Tailwind کلاس کے ناموں کو ضم کریں اور مشروط منطق کو صاف طور پر ہینڈل کریں۔ یہ متضاد ٹیل ونڈ کلاسز کے ڈپلیکیٹس کو خود بخود بھی ہٹا دیتا ہے، جو کچھ باقاعدہ ٹیمپلیٹ لٹریلز نہیں کرتے ہیں۔

className={cn(
  "font-normal text-muted-foreground",
  metric.isPositive ? "bg-teal-400/10" : "bg-red-500/10"
)}

3. صرف میٹرکس کے درمیان الگ کرنے والے ہیں اور آخری میٹرک کے بعد کوئی الگ کرنے والے نہیں ہیں۔

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

{index < mainDashboard.metrics.length - 1 && (
  
)}

4. بالکل پوزیشن میں آرائشی تصویر

چارٹ کی تصاویر استعمال کی جاتی ہیں۔ absolute bottom-0 right-0 اسے کارڈ کے نیچے دائیں کونے میں پن کریں۔ یہ چھوٹی اسکرینوں پر چھپا ہوا ہے۔ hidden sm:block موبائل پر ترتیب کے مسائل سے بچیں. والدین Card ہے relative اسے پوزیشن میں رکھیں تاکہ اس پر مشتمل ہو سکے۔

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

---

شماریات کارڈ کیسے لکھیں (کارڈ-06)

شماریاتی کارڈ کے افعال

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

لے آؤٹ مکمل طور پر ریسپانسیو ہے، درمیانی اسکرینوں پر چار سے دو کالموں سے ٹوٹ جاتا ہے اور موبائل پر اسٹیک ہوتا ہے۔

یہ کارڈ @iconify/react اس کے بجائے آئیکن کے لیے: lucide-reactسٹرنگ پر مبنی آئیکن کے ناموں کا استعمال کرتے ہوئے ہزاروں آئیکن سیٹ تک رسائی حاصل کریں۔

اعدادوشمار کارڈ انسٹال کرنے کا طریقہ

براہ کرم پہلے انسٹال کریں۔ @iconify/react اگر آپ کے پاس یہ نہیں ہے:

npm install @iconify/react

پھر کارڈ کا جزو شامل کریں۔

npx shadcn@latest add @shadcn-space/card-06

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

components/
  shadcn-space/
    card/
      card-06.tsx

اجزاء کوڈ

"use client";
import { Icon } from "@iconify/react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

const StatisticsCard = () => {
  const EcommerceActions = [
    {
      title: "Orders",
      subtitle: "5868",
      cardIcon: "solar:bag-4-line-duotone",
      badgeColor: "bg-teal-400/10",
      statusValue: "+18%",
      statusIcon: "solar:course-up-line-duotone",
    },
    {
      title: "Sales",
      subtitle: "$96,850",
      cardIcon: "solar:box-line-duotone",
      badgeColor: "bg-orange-400/10",
      statusValue: "-5%",
      statusIcon: "solar:course-down-line-duotone",
    },
    {
      title: "Profit",
      subtitle: "$82,906",
      cardIcon: "solar:chart-square-line-duotone",
      badgeColor: "bg-teal-400/10",
      statusValue: "+18%",
      statusIcon: "solar:course-up-line-duotone",
    },
    {
      title: "Expense",
      subtitle: "$14,653",
      cardIcon: "solar:star-line-duotone",
      badgeColor: "bg-teal-400/10",
      statusValue: "+18%",
      statusIcon: "solar:course-up-line-duotone",
    },
  ];

  return (
    

      
        
          {EcommerceActions.map((item, index) => (
            

              

                

                  
                  

                    
{item.subtitle}
                    

                      
Last 7 days
                      
                        

                          {item.statusValue}
                          
                        
                      
                    
                  
                
              
            
          ))}
        
      
    
  );
};

export default StatisticsCard;

اسٹیٹ کارڈز کیسے کام کرتے ہیں:

1. صفوں کا استعمال کرتے ہوئے ڈیٹا پر مبنی ترتیب

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

2. قبول کالم کی چوڑائی

ہر کالم تمام بریک پوائنٹس کو سنبھالنے کے لیے تین چوڑائی کلاسز کا استعمال کرتا ہے۔

• w-full موبائل (واحد قطار، عمودی طور پر سجا ہوا)

• md:w-6/12 درمیانی اسکرین (2 قطاریں)

• lg:w-3/12 بڑی اسکرین (4 برابر قطاریں)

کہ flex-wrap کو CardContent کالم چھوٹی اسکرینوں پر قدرتی طور پر لپیٹ سکتے ہیں۔ lg:flex-nowrap بڑی اسکرینوں پر اسے ایک لائن میں ظاہر ہونے پر مجبور کیا جائے گا۔

3. آخری بارڈر ہٹا دیں۔ last:

کہ last:border-e-0 کلاس آخری کالم سے دائیں بارڈر کو ہٹا دیتی ہے۔ بصورت دیگر، آپ کارڈ کے دائیں کنارے کے ارد گرد ایک غلط بارڈر کے ساتھ ختم ہو سکتے ہیں۔

کہ last: تبدیلی ایک ٹیل ونڈ سیوڈو کلاس ہے جو گروپ کے آخری چائلڈ عنصر کو نشانہ بناتی ہے، جو انڈیکس کو دستی طور پر ٹریک کرنے سے زیادہ صاف ہے۔

4. کیوں "use client" یہاں کی ضرورت ہے

کہ @iconify/react پیکیج کو براؤزر کے ماحول کی ضرورت ہے۔ کوئی بھی جزو جو App Router کے ساتھ Next.js میں صرف کلائنٹ پیکج درآمد کرتا ہے۔ "use client" فائل کے اوپری حصے میں ایک ہدایت ہے۔ دوسری صورت میں، سرور رینڈرنگ کے دوران ایک غلطی پھینک دے گا.

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

---

ای کامرس پروڈکٹ ویری ایشن کارڈ کیسے بنائیں (کارڈ-17)

ای کامرس پروڈکٹ ویرینٹ کارڈز کی خصوصیات

یہ اس ٹیوٹوریل میں سب سے زیادہ انٹرایکٹو کارڈ ہے۔ ماؤس اوور زوم، وش لسٹ ٹوگل، سائز بٹن، بیگ ٹوگل اور ریپل اینیمیشن کے ساتھ خریداری کے بٹن کے ساتھ جوتوں کی فہرست کے لیے پروڈکٹ کارڈ۔ تمام تعاملات React کے ساتھ سنبھالے جاتے ہیں۔ useStateلہذا آپ کو بیرونی ریاست کے انتظام کی لائبریری کی ضرورت نہیں ہے۔

پروڈکٹ ویرینٹ کارڈ کیسے انسٹال کریں۔

npx shadcn@latest add @shadcn-space/card-17

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

components/
  shadcn-space/
    card/
      card-17.tsx

اجزاء کوڈ

"use client";

import { useState } from "react";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Heart, ShoppingBag } from "lucide-react";
import { cn } from "@/lib/utils";

const sizes = ["7", "8", "9", "10"];

const getDeliveryDate = () => {
  const date = new Date();
  date.setDate(date.getDate() + 3);
  const day = date.getDate();
  const month = [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
  ][date.getMonth()];
  const suffix = ["th", "st", "nd", "rd"][
    day % 10 > 3 ? 0 : (day % 100 - day % 10 !== 10 ? day % 10 : 0)
  ];
  return `${day}${suffix} ${month}`;
};

export default function EcommerceProductCard() {
  const [activeSize, setActiveSize] = useState(1);
  const [isWishlisted, setIsWishlisted] = useState(false);
  const [inBag, setInBag] = useState(false);

  return (
    

      

        {/* Image zone */}
        

          

          {/* Discount badge */}
          
            -21%
          

          {/* Wishlist button */}
           setIsWishlisted(!isWishlisted)}
            title="خواہش کی فہرست"
            className={cn(
              "absolute top-3 right-3 h-8 w-8 rounded-full border shadow-sm flex items-center justify-center transition-all duration-200 hover:scale-110 active:scale-95",
              isWishlisted
                ? "bg-rose-50 border-rose-200 dark:bg-rose-950 dark:border-rose-800"
                : "bg-background"
            )}
          >
            
          
        

        {/* Info zone */}
        
          

            
Nike
            

              Air Max Pulse Running Shoes
            
          

          

            
              Down 21%
            
            $150
            $119
          

          

            Delivery by{" "}
            
              {getDeliveryDate()}
            
          

          {/* Size selector */}
          

            {sizes.map((s, i) => (
               setActiveSize(i)}
                className={cn(
                  "flex-1 h-7 rounded-lg text-sm font-medium border transition-all duration-150",
                  activeSize === i
                    ? "bg-foreground text-background border-foreground"
                    : "text-muted-foreground hover:border-foreground/50 hover:text-foreground"
                )}
              >
                US {s}
              
            ))}
          
        

        {/* Action zone */}
        
           setInBag(!inBag)}
            title={inBag ? "Remove from bag" : "Add to bag"}
            className={cn(
              "h-12 w-12 shrink-0 rounded-xl border flex items-center justify-center transition-all duration-200 hover:scale-105 active:scale-95",
              inBag
                ? "bg-foreground text-background border-foreground"
                : "bg-background text-muted-foreground hover:border-foreground/50 hover:text-foreground"
            )}
          >
            
          

          
            
            
              Buy Now
            
          
        

      
    
  );
}

ای کامرس پروڈکٹ کے مختلف کارڈز کیسے کام کرتے ہیں:

1. نامزد گروپ ہور رینج

یہ کارڈ دو آزاد ہوور گروپ رینجز کا استعمال کرتا ہے۔ group/card بیرونی کارڈ پر group/btn ابھی خریدیں بٹن پر کلک کریں۔ Tailwind کے نامزد گروپوں کی خصوصیت /name ان کو الگ رکھنے کے لیے لاحقے:

// Card-level hover: zooms the product image

  

// Button-level hover: triggers the ripple animation
  
    

اگر کوئی نامزد گروپ نہیں ہے تو، بٹن کو ہوور کرنے سے کارڈ کا ہوور اسٹائل بھی متحرک ہو جائے گا۔ کہ /card اور /btn لاحقہ اس سے روکتا ہے۔

2. CSS Ripple Animation for Buy Now بٹن

لہر کا اثر خالص سی ایس ایس اسکیل اینیمیشن کا استعمال کرتا ہے۔ سفید دائرہ (w-8 h-8 rounded-full) آغاز کا وقت scale-0 اور پھر یہ اس پر سوئچ کرتا ہے: scale-[20] جب آپ کسی بٹن کی طرف اشارہ کرتے ہیں۔ کہ overflow-hidden کو Button بٹن کے بارڈر پر کلپس۔ کہ z-10 متن کو لیبل کے پھیلتے ہوئے دائرے کے اوپر مرئی رکھتا ہے۔

3. ترسیل کی تاریخ کے لیے عام لاحقہ منطق

کہ getDeliveryDate() فنکشن اب سے 3 دن کی تاریخ کا حساب لگاتا ہے اور درست آرڈینل لاحقہ (st, nd, rd, th) شامل کرتا ہے۔

const suffix = ["th", "st", "nd", "rd"][
  day % 10 > 3 ? 0 : (day % 100 - day % 10 !== 10 ? day % 10 : 0)
];

منطق ہمیشہ 11ویں، 12ویں اور 13ویں انتہائی صورتوں کو استعمال کرتی ہے: "ایک” آخری ہندسے سے قطع نظر۔ یہ آرڈینل فارمیٹس کے ساتھ ایک عام مسئلہ ہے۔

4. suppressHydrationWarning ڈیلیوری کی تاریخ کی حد

ڈیلیوری کی تاریخ کا حساب رینڈر کے وقت استعمال کرتے ہوئے کیا جاتا ہے: new Date(). سرور درخواست پر اس کا حساب لگاتا ہے، اور کلائنٹ ہائیڈریشن پر اس کا دوبارہ حساب لگاتا ہے۔

اگر ٹائم زون میں فرق ہے تو، React ایک اشارے کی زبان سے مماثل انتباہ ظاہر کرے گا۔ suppressHydrationWarning باقی درخت کو متاثر کیے بغیر مخصوص نوڈ کے لیے اس انتباہ کو خاموش کر دیتا ہے۔

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

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

کارڈ	شناخت کنندہ	کیسز استعمال کریں۔
پیش نظارہ کارڈ	card-02	رئیل اسٹیٹ کی فہرستیں، ہوٹل کارڈز، پروڈکٹ کے مناظر
تجزیہ کارڈ	card-05	میٹرک ڈیٹا کے ساتھ ڈیش بورڈ ویجٹ
شماریات کارڈ	card-06	ای کامرس کے اعداد و شمار کا گرڈ
مصنوعات کے مختلف کارڈ	card-17	سائز کے انتخاب اور شاپنگ کارٹ کے ساتھ پروڈکٹ کا صفحہ

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

npx shadcn@latest add @shadcn-space/

کلیدی تصورات کا خلاصہ

ذیل میں اس ٹیوٹوریل میں چاروں کارڈز میں استعمال ہونے والے کلیدی Tailwind، React اور TypeScript پیٹرن کا خلاصہ ہے۔

ٹیل ونڈ گروپ ہور

کہ group پیرنٹ ایلیمنٹ کی کلاس تمام چائلڈ عناصر کو یہ استعمال کرتے ہوئے پیرنٹ ایلیمنٹ کی ہوور حالت کا جواب دینے کی اجازت دیتی ہے: group-hover: کلاس

نیسٹڈ ہوور اسکوپس کے لیے، اس طرح کے نام والے گروپ استعمال کریں: group/card اور group/btn کے ساتھ group-hover/card: اور group-hover/btn:. یہ ہوور اسٹائل کو جزو کی حدود سے باہر خون بہنے سے روکتا ہے۔

کہ cn() عوامی خدمت

cn() سے @/lib/utils Tailwind کلاس سٹرنگز کو ضم کرتا ہے، مشروط کلاس منطق کو ہینڈل کرتا ہے، اور Tailwind کی متضاد یوٹیلیٹیز کی نقل کو ختم کرتا ہے۔ جب بھی آپ کے پاس مشروط کلاسز ہوں تو ان کو ٹیمپلیٹ لٹریلز کے بجائے استعمال کریں۔

last: نیچے کی طرف کی اخترتی

کہ last: سیوڈو کلاس تبدیلیاں گروپ کے آخری بچے کو نشانہ بناتی ہیں۔ شماریات کارڈ پر last:border-e-0 جاوا اسکرپٹ میں انڈیکس ٹریکنگ کے بغیر آخری کالم سے پچھلی بارڈر کو ہٹا دیں۔

سی ایس ایس کی منطقی خصوصیات

border-e مطلب ہے "ان لائن کے آخر میں بارڈر” جو LTR لے آؤٹ میں دائیں اور RTL لے آؤٹ میں بائیں ہے۔ مندرجہ ذیل منطقی خصوصیات کا استعمال کرتے ہوئے: border-e، ps-اور pe- اس کے بجائے border-r، pl-اور pr- بنیادی طور پر جزو کے مقام کو آگاہ کرتا ہے۔

پہلے سے طے شدہ اقدار کے ساتھ TypeScript اختیاری خصوصیات

پہلے سے طے شدہ اقدار کو براہ راست فنکشن کے دستخط کو تفویض کریں، اس طرح: ({ mainDashboard = mainDashboardData }: WidgetProps)اجزاء کے لیے ایک صاف ستھرا نمونہ ہے جس کو کمپوز ایبل ہونے کے باوجود معقول فال بیک ڈیٹا کی ضرورت ہوتی ہے۔ حقیقی API ڈیٹا کا استعمال کرتے ہوئے ڈیمو، اسٹوری بکس، اور پروڈکشن کے مقاصد کے لیے کام کرتا ہے۔

"use client" Next.js ایپ راؤٹر میں

استعمال شدہ تمام اجزاء useStateبراؤزر API یا صرف کلائنٹ پیکجز جیسے: @iconify/react ضرورت "use client" فائل کے اوپری حصے میں ایک ہدایت ہے۔ اس کے بغیر، Next.js ایپ راؤٹر سرور پر جزو کو رینڈر کرنے کی کوشش کرے گا اور غلطی کو پھینک دے گا۔

suppressHydrationWarning

اگر سرور پر پیش کی گئی قدر (جیسے کہ موجودہ تاریخ یا وقت)، ٹائم زون کے فرق کی وجہ سے کلائنٹ پر پیش کی گئی قدر سے مختلف ہے تو رد عمل ہائیڈریشن سے مطابقت نہ ہونے کی وارننگ دیتا ہے۔ شامل کرنا suppressHydrationWarning مخصوص عناصر کے لیے انتباہات کو جزو کے باقی درخت کو متاثر کیے بغیر نظر انداز کر دیا جاتا ہے۔

سی ایس ایس ریپل اینیمیشن پیٹرن

سی ایس ایس ریپل اثرات جاوا اسکرپٹ کے بغیر استعمال کیے جا سکتے ہیں: scale-0 کو scale-[N] تبدیلی rounded-full عناصر کو اندر رکھا گیا ہے۔ overflow-hidden کنٹینر ہوور پر، دائرہ پھیلتا ہے اور کنٹینر کی حدود سے کٹ جاتا ہے۔ لیبل کا متن اس کے اوپر ہے۔ relative z-10.

نتیجہ

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

1. پیش نظارہ کارڈ: گروپ ہوور امیج اینیمیشن، اوور فلو کلپنگ اور منطقی سرحدی سہولیات کی قطاریں۔

2. تجزیہ کارڈ: بنیادی اعداد و شمار کے ساتھ ان پٹ سہارا، مشروط بیج کا رنگ cn()آرائشی تصویر مطلق پوزیشن میں

3. شماریات کارڈ: ڈیٹا پر مبنی ریپیٹ لے آؤٹ، ریسپانسیو متغیر کالم، خودکار آخری بارڈر کو ہٹانا last:

4. ای کامرس پروڈکٹ ویرینٹ کارڈ: نام شدہ ہوور گروپس، سی ایس ایس ریپل بٹن، آرڈینل ڈیٹ فارمیٹ اور نمی کی وارننگ دبانا

ہر کارڈ ایک CLI کمانڈ کے ساتھ انسٹال ہوتا ہے اور پروجیکٹ کے سورس ٹری میں واقع ہوتا ہے۔ آپ کوڈ کے مالک ہیں اور آپ کے ڈیزائن سسٹم میں فٹ ہونے کے لیے کسی بھی چیز میں ترمیم کر سکتے ہیں۔

نامزد گروپ ہوور اسکوپس سے لے کر منطقی CSS خصوصیات کے لیے پہلے سے طے شدہ قدروں کے ساتھ ٹائپ شدہ پرپس تک، یہاں شامل پیٹرن کارڈ کے اجزاء سے کہیں زیادہ لاگو ہوتے ہیں۔ آپ اسے زیادہ تر UI اجزاء میں مفید پائیں گے جنہیں آپ shadcn/ui اور Tailwind CSS کا استعمال کرتے ہوئے بناتے ہیں۔

وسائل