Rina Korca

400">"text-purple-400">import { useState, useEffect } 400">"text-purple-400">from 400">'react';

400">"text-purple-400">interface ApiState {
  data: T | 400">"text-orange-400">null;
  loading: boolean;
  error: string | 400">"text-orange-400">null;
}

400">"text-purple-400">export 400">"text-purple-400">function useApi(url: string): ApiState {
  400">"text-purple-400">const [state, setState] = useState>({
    data: 400">"text-orange-400">null,
    loading: 400">"text-orange-400">true,
    error: 400">"text-orange-400">null,
  });

  useEffect(() => {
    400">"text-purple-400">const fetchData = 400">"text-purple-400">async () => {
      try {
        setState(prev => ({ ...prev, loading: 400">"text-orange-400">true }));
        400">"text-purple-400">const response = 400">"text-purple-400">await fetch(url);
        
        400">"text-purple-400">if (!response.ok) {
          throw new Error(400">`HTTP error! status: ${response.status}`);
        }
        
        400">"text-purple-400">const data = 400">"text-purple-400">await response.json();
        setState({ data, loading: 400">"text-orange-400">false, error: 400">"text-orange-400">null });
      } catch (error) {
        setState({
          data: 400">"text-orange-400">null,
          loading: 400">"text-orange-400">false,
          error: error instanceof Error ? error.message : 400">'Unknown error',
        });
      }
    };

    fetchData();
  }, [url]);

  400">"text-purple-400">return state;
}

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.grid-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

400">"text-purple-400">class=400">"text-gray-400">/* Mobile-first approach */
@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
}

400">"text-purple-400">const redis = require(400">'redis');
400">"text-purple-400">const client = redis.createClient();

400">"text-purple-400">const rateLimiter = (options = {}) => {
  400">"text-purple-400">const {
    windowMs = 15 * 60 * 1000, 400">"text-purple-400">class=400">"text-gray-400">// 15 minutes
    maxRequests = 100,
    message = 400">'Too many requests, please try again later.',
    skipSuccessfulRequests = 400">"text-orange-400">false,
  } = options;

  400">"text-purple-400">return 400">"text-purple-400">async (req, res, next) => {
    400">"text-purple-400">const key = 400">`rate_limit:${req.ip}`;
    
    try {
      400">"text-purple-400">const current = 400">"text-purple-400">await client.get(key);
      
      400">"text-purple-400">if (current === 400">"text-orange-400">null) {
        400">"text-purple-400">class=400">"text-gray-400">// First request 400">"text-purple-400">from this IP
        400">"text-purple-400">await client.setex(key, Math.ceil(windowMs / 1000), 1);
        400">"text-purple-400">return next();
      }
      
      400">"text-purple-400">const requestCount = parseInt(current);
      
      400">"text-purple-400">if (requestCount >= maxRequests) {
        400">"text-purple-400">return res.status(429).json({
          error: message,
          retryAfter: 400">"text-purple-400">await client.ttl(key),
        });
      }
      
      400">"text-purple-400">class=400">"text-gray-400">// Increment counter
      400">"text-purple-400">await client.incr(key);
      
      400">"text-purple-400">class=400">"text-gray-400">// Add headers
      res.set({
        400">'X-RateLimit-Limit': maxRequests,
        400">'X-RateLimit-Remaining': maxRequests - requestCount - 1,
        400">'X-RateLimit-Reset': new Date(Date.now() + windowMs),
      });
      
      next();
    } catch (error) {
      console.error(400">'Rate limiter error:', error);
      next(); 400">"text-purple-400">class=400">"text-gray-400">// Fail open
    }
  };
};

module.exports = rateLimiter;