Transform Figma Designs into Production-Ready React Code

import React from 'react';

export const DashboardCard = ({ 
  title, 
  value, 
  change, 
  icon 
}) => {
  const isPositive = change > 0;
  
  return (
    <div className="bg-white rounded-xl 
      shadow-sm border border-gray-100 p-6">
      <div className="flex justify-between">
        <p className="text-gray-500 text-sm">
          {title}
        </p>
        <div className="text-indigo-500">
          {icon}
        </div>
      </div>
      
      <div className="mt-4">
        <h3 className="text-2xl font-bold">
          {value}
        </h3>
        
        <div className={`mt-2 flex items-center 
          ${isPositive ? 'text-green-600' : 
          'text-red-600'}`}>
          {isPositive ? (
            <svg className="w-4 h-4 mr-1" 
              fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" 
                d="M12 7a1 1 0 110-2h5a1 1 0 
                011 1v5a1 1 0 11-2 0V8.414l-4.293 
                4.293a1 1 0 01-1.414 0L8 10.414l-4.293 
                4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 
                011.414 0L11 10.586l3.293-3.293a1 
                1 0 010-1.414z" 
                clipRule="evenodd" />
            </svg>
          ) : (
            // Negative icon code...
          )}
          <span className="text-sm">
            {Math.abs(change)}%
          </span>
        </div>
      </div>
    </div>
  );
};

import React from 'react';
import { Heart, ShoppingCart } from 'react-feather';

export const ProductCard = ({ 
  image, 
  name, 
  price, 
  rating,
  isFeatured 
}) => {
  return (
    <div className="group relative bg-white
      rounded-xl overflow-hidden shadow-sm
      border border-gray-100 transition-all
      duration-300 hover:shadow-md">
      {isFeatured && (
        <span className="absolute top-2 left-2
          bg-indigo-500 text-white text-xs px-2
          py-1 rounded-full z-10">
          Featured
        </span>
      )}
      
      <div className="relative h-64 overflow-hidden">
        <img 
          src={image} 
          alt={name}
          className="w-full h-full object-cover
          transition-transform duration-500
          group-hover:scale-105"
        />
        
        <button className="absolute top-2 right-2
          bg-white p-2 rounded-full shadow-sm
          text-gray-400 hover:text-red-500
          transition-colors duration-200">
          <Heart size={18} />
        </button>
      </div>
      
      <div className="p-4">
        <h3 className="font-semibold text-gray-800">
          {name}
        </h3>
        
        <div className="flex justify-between
          items-center mt-2">
          <p className="font-bold text-gray-900">
            ${price}
          </p>
          
          // Rating component...
        </div>
        
        <button className="mt-4 w-full bg-indigo-50
          hover:bg-indigo-100 text-indigo-600
          font-medium py-2 px-4 rounded-lg
          transition-colors duration-200
          flex items-center justify-center">
          <ShoppingCart size={16} className="mr-2" />
          Add to Cart
        </button>
      </div>
    </div>
  );
};

import React from 'react';
import { 
  View, 
  Text, 
  Image, 
  TouchableOpacity,
  StyleSheet 
} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

export const ProfileCard = ({ 
  user, 
  onMessage,
  onFollow 
}) => {
  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <Image 
          source={{ uri: user.avatar }}
          style={styles.avatar}
        />
        
        <View style={styles.userInfo}>
          <Text style={styles.name}>
            {user.name}
          </Text>
          <Text style={styles.handle}>
            @{user.handle}
          </Text>
        </View>
        
        {user.isVerified && (
          <Icon 
            name="check-circle" 
            size={18} 
            color="#4F46E5"
            style={styles.verifiedIcon}
          />
        )}
      </View>
      
      <Text style={styles.bio}>
        {user.bio}
      </Text>
      
      <View style={styles.stats}>
        <View style={styles.statItem}>
          <Text style={styles.statValue}>
            {user.posts}
          </Text>
          <Text style={styles.statLabel}>
            Posts
          </Text>
        </View>
        
        // Followers and Following stats...
      </View>
      
      <View style={styles.actions}>
        <TouchableOpacity 
          style={styles.messageButton}
          onPress={onMessage}
        >
          <Icon name="message-circle" 
            size={16} color="#4F46E5" />
          <Text style={styles.messageText}>
            Message
          </Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.followButton}
          onPress={onFollow}
        >
          <Text style={styles.followText}>
            Follow
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};