React: حلول التصميم في React

/* Button.module.css */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.primary {
  background: #1890ff;
  color: white;
}

.primary:hover {
  background: #40a9ff;
}

.danger {
  background: #ff4d4f;
  color: white;
}

.danger:hover {
  background: #ff7875;
}

.default {
  background: #f0f0f0;
  color: #333;
}

.default:hover {
  background: #d9d9d9;
}

import styles from './Button.module.css'

function Button({ variant = 'primary', children, onClick }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

export default Button

npm install clsx

import styles from './Button.module.css'
import clsx from 'clsx'

function Button({ variant = 'primary', size = 'medium', disabled, children }) {
  return (
    <button
      className={clsx(
        styles.button,
        styles[variant],
        styles[size],
        { [styles.disabled]: disabled }
      )}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

/* Button.module.css — Add New Size Variants */
.small { padding: 4px 12px; font-size: 12px; }
.medium { padding: 8px 20px; font-size: 14px; }
.large { padding: 12px 28px; font-size: 16px; }
.disabled { opacity: 0.5; cursor: not-allowed; }

import styles from './Card.module.css'

function Card({ title, children, isHighlighted }) {
  return (
    <div
      className={
        `${styles.card} ${isHighlighted ? styles.highlighted : ''}`
      }
    >
      <h3 className={styles.title}>{title}</h3>
      <div className={styles.content}>{children}</div>
    </div>
  )
}

/* Card.module.css */
.card {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.highlighted {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1a1a;
}

.content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

npm install -D tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

/* index.css */
@import "tailwindcss";

function ProductCard({ product, onAddToCart }) {
  return (
    <div className="border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow bg-white">
      <img
        src={product.image}
        alt={product.name}
        className="w-full h-48 object-cover rounded-md mb-3"
      />
      <h3 className="text-lg font-semibold text-gray-800 mb-1">
        {product.name}
      </h3>
      <p className="text-sm text-gray-500 mb-2 line-clamp-2">
        {product.description}
      </p>
      <div className="flex items-center justify-between">
        <span className="text-xl font-bold text-blue-600">
          ${product.price}
        </span>
        <button
          onClick={() => onAddToCart(product)}
          className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
        >
          Add to Cart
        </button>
      </div>
    </div>
  )
}

npm install styled-components

import styled, { ThemeProvider } from 'styled-components'

// Define the Topic
const theme = {
  colors: {
    primary: '#1890ff',
    success: '#52c41a',
    danger: '#ff4d4f',
    text: '#333',
    textLight: '#fff',
  },
  radii: {
    sm: '4px',
    md: '8px',
    lg: '12px',
  },
  fonts: {
    body: "'Inter', sans-serif",
  },
}

// Styled Components — Automatic Receipt theme prop
const StyledButton = styled.button`
  padding: 10px 24px;
  border: none;
  border-radius: ${props => props.theme.radii.md};
  font-family: ${props => props.theme.fonts.body};
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;

  /* props Conditional Styles Driven by Rules */
  background: ${props => {
    if (props.$variant === 'danger') return props.theme.colors.danger
    if (props.$variant === 'success') return props.theme.colors.success
    return props.theme.colors.primary
  }};
  color: ${props => props.theme.colors.textLight};

  &:hover {
    opacity: 0.85;
    transform: translateY(-1px);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
`

const ButtonGroup = styled.div`
  display: flex;
  gap: 12px;
  padding: 20px;
`

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ButtonGroup>
        <StyledButton $variant="primary">Main Buttons</StyledButton>
        <StyledButton $variant="success">Success Button</StyledButton>
        <StyledButton $variant="danger" disabled>Danger(Disable)</StyledButton>
      </ButtonGroup>
    </ThemeProvider>
  )
}

// Button.module.css
// .primary { background: #1677ff; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
// .danger { background: #ff4d4f; color: white; }
// .outline { background: transparent; border: 1px solid #1677ff; color: #1677ff; }
// .small { padding: 4px 8px; font-size: 12px; }
// .disabled { opacity: 0.5; cursor: not-allowed; }

import styles from './Button.module.css'

function Button({ variant = 'primary', size, disabled, children, ...props }) {
  const classNames = [
    styles[variant],
    size === 'sm' && styles.small,
    disabled && styles.disabled,
  ].filter(Boolean).join(' ')

  return (
    <button className={classNames} disabled={disabled} {...props}>
      {children}
    </button>
  )
}

function ButtonDemo() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button>Primary</Button>
      <Button variant="danger">Delete</Button>
      <Button variant="outline" size="sm">Small Outline</Button>
      <Button disabled>Disabled</Button>
    </div>
  )
}

function ProductGrid({ products }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-4">
      {products.map(product => (
        <div key={product.id} className="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden">
          <div className="h-48 bg-gray-200 flex items-center justify-center">
            <span className="text-gray-400 text-4xl">📦</span>
          </div>
          <div className="p-4">
            <h3 className="font-semibold text-gray-800 truncate">{product.name}</h3>
            <p className="text-sm text-gray-500 mt-1">{product.category}</p>
            <div className="flex items-center justify-between mt-3">
              <span className="text-lg font-bold text-red-500">${product.price}</span>
              <button className="bg-blue-500 hover:bg-blue-600 text-white text-sm px-3 py-1 rounded transition-colors">
                Add to Cart
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}