Atomic Components Demo

by oktaviardi pratama

HTML

<div class="section">
    <h2>Atomic Design Explanation</h2>
    <p>
      Atomic Design adalah cara membangun UI dari bagian terkecil (atom) ke bagian lebih kompleks (molecule & organism).
    </p>
    <ul>
      <li><strong>Atom:</strong> Komponen terkecil seperti Button, Input, Badge</li>
      <li><strong>Molecule:</strong> Gabungan beberapa atom menjadi unit lebih kompleks, contoh ProductCard</li>
      <li><strong>Organism:</strong> Gabungan molecules, misal Header, Footer, Product List</li>
    </ul>
  </div>

  <div class="section">
    <h2>Atom: Button</h2>
    <div class="component">
      <button class="primary">Primary Button</button>
      <button class="secondary">Secondary Button</button>
    </div>
    <p><em>Prompt for Copilot: "// Create reusable Button component with primary and secondary variant using Tailwind CSS or basic CSS"</em></p>
  </div>

  <div class="section">
    <h2>Atom: Input</h2>
    <div class="component">
      <input type="text" placeholder="Type here..." />
    </div>
    <p><em>Prompt for Copilot: "// Create reusable Input component supporting type and placeholder using Tailwind CSS or basic CSS"</em></p>
  </div>

  <div class="section">
    <h2>Atom: Badge</h2>
    <div class="component">
      <span class="badge">NEW</span>
      <span class="badge">SALE</span>
    </div>
    <p><em>Prompt for Copilot: "// Create Badge component with rounded style and customizable text"</em></p>
  </div>

  <div class="section">
    <h2>Molecule: ProductCard</h2>
    <div class="component product-card">
      <img src="https://picsum.photos/220/140" alt="Product Image" />
      <span class="badge">NEW</span>
      <h3>Sneakers Casual</h3>
      <p>Rp 350.000</p>
      <button class="primary">Beli Sekarang</button>
    </div>
    <p><em>Prompt for Copilot: "// Create ProductCard component combining Image, Badge, Title, Price and Button using Tailwind CSS or basic CSS"</em></p>
  </div>

CSS

body { font-family: Arial, sans-serif; padding: 20px; background: #f9fafb; }
    h2 { color: #1f2937; }
    .section { margin-bottom: 40px; }
    .component { margin: 10px 0; }
    button.primary { background: #4f46e5; color: white; padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; }
    button.secondary { border: 2px solid #4f46e5; color: #4f46e5; padding: 8px 16px; border-radius: 6px; background: white; cursor: pointer; }
    input { padding: 8px 12px; border-radius: 6px; border: 1px solid #cbd5e1; width: 200px; }
    .badge { display: inline-block; padding: 4px 8px; border-radius: 12px; background: #22c55e; color: white; font-size: 12px; }
    .product-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; width: 220px; background: white; margin-bottom: 20px; }
    .product-card img { width: 100%; border-radius: 8px; }
    .product-card h3 { margin: 8px 0 4px; font-size: 16px; }
    .product-card p { margin: 0 0 8px; color: #4f46e5; font-weight: bold; }body { font-family: Arial, sans-serif; padding: 20px; background: #f9fafb; }
    h2 { color: #1f2937; }
    .section { margin-bottom: 40px; }
    .component { margin: 10px 0; }
    button.primary { background: #4f46e5; color: white; padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; }
    button.secondary { border: 2px solid #4f46e5; color: #4f46e5; padding: 8px 16px; border-radius: 6px; background: white; cursor: pointer; }
    input { padding: 8px 12px; border-radius: 6px; border: 1px solid #cbd5e1; width: 200px; }
    .badge { display: inline-block; padding: 4px 8px; border-radius: 12px; background: #22c55e; color: white; font-size: 12px; }
    .product-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; width: 220px; background: white; margin-bottom: 20px; }
    .product-card img { width: 100%; border-radius: 8px; }
    .product-card h3 { margin: 8px 0 4px; font-size: 16px; }
    .product-card p { margin: 0 0 8px;...