Sample Page

import React, { useState } from 'react';
import { Button, Card, Input, Modal } from '@vchata/components';

const SampleComponent = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
    console.log('Form submitted:', formData);
  };

  return (
    <div className="sample-page">
      <Card title="Sample Component">
        <form onSubmit={handleSubmit}>
          <Input
            label="Name"
            value={formData.name}
            onChange={(e) => setFormData({...formData, name: e.target.value})}
            required
          />
          <Input
            label="Email"
            type="email"
            value={formData.email}
            onChange={(e) => setFormData({...formData, email: e.target.value})}
            required
          />
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </form>
        
        <Button 
          onClick={() => setIsModalOpen(true)}
          variant="secondary"
        >
          Open Modal
        </Button>
        
        <Modal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          title="Sample Modal"
        >
          <p>This is a sample modal content.</p>
        </Modal>
      </Card>
    </div>
  );
};

export default SampleComponent;

import React from 'react';
import { useMediaQuery } from '@vchata/hooks';

const ResponsiveSample = () => {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
  const isDesktop = useMediaQuery('(min-width: 1025px)');

  return (
    <div className={`responsive-container ${isMobile ? 'mobile' : ''}`}>
      <div className="grid">
        <div className="grid-item">
          <h3>Responsive Grid Item</h3>
          <p>This content adapts to different screen sizes.</p>
        </div>
        <div className="grid-item">
          <h3>Adaptive Layout</h3>
          <p>Layout changes based on device type.</p>
        </div>
        {isDesktop && (
          <div className="grid-item">
            <h3>Desktop Only</h3>
            <p>This content only appears on desktop devices.</p>
          </div>
        )}
      </div>
    </div>
  );
};