Add icon preview interface

src/App.scss

@@ -7,3 +7,29 @@
   justify-content: center;
   color: white;
 }
+
+/* Styling for the new icon preview interface component */
+.icon-preview-interface {
+  margin-top: 2rem;
+  padding: 1rem;
+  border: 1px solid #2c2f36;
+  border-radius: 8px;
+  background-color: #24272e;
+  color: #ffffff;
+}
+
+.icon-preview-interface select,
+.icon-preview-interface input[type="text"] {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.icon-preview-interface img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 1rem;
+}
+
+.icon-preview-interface .copy-url-btn {
+  margin-top: 1rem;
+}

src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import './App.scss';
 import UploadForm from './UploadForm';
 import GitHubButtons from './GitHubButtons';
+import IconPreviewInterface from './IconPreviewInterface';
 
 /**
  * The root component of the application
@@ -13,6 +14,7 @@ function App() {
         <h1>Custom Icon Badges</h1>
         <GitHubButtons user="DenverCoder1" repo="custom-icon-badges" />
         <UploadForm />
+        <IconPreviewInterface /> {/* */}
       </header>
     </div>
   );

src/IconPreviewInterface.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Button, Form, Card } from 'react-bootstrap';
+
+const IconPreviewInterface = () => {
+  const [selectedIcon, setSelectedIcon] = useState('');
+  const [previewUrl, setPreviewUrl] = useState('');
+  const [badgeUrl, setBadgeUrl] = useState('');
+
+  const handleIconChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const icon = e.target.value;
+    setSelectedIcon(icon);
+    const url = `https://custom-icon-badges.demolab.com/badge/preview-${icon}-blue?logo=${icon}`;
+    setPreviewUrl(url);
+    setBadgeUrl(`https://custom-icon-badges.demolab.com/badge/your-badge-blue?logo=${icon}`);
+  };
+
+  return (
+    <div>
+      <h2>Icon Preview Interface</h2>
+      <Form>
+        <Form.Group controlId="iconSelect">
+          <Form.Label>Select an Icon</Form.Label>
+          <Form.Control as="select" value={selectedIcon} onChange={handleIconChange}>
+            <option value="">Select an icon...</option>
+            <option value="octicon">Octicon</option>
+            <option value="feather">Feather</option>
+            {/* Future options for other icon libraries can be added here */}
+          </Form.Control>
+        </Form.Group>
+        {previewUrl && (
+          <Card>
+            <Card.Body>
+              <Card.Title>Badge Preview</Card.Title>
+              <img src={previewUrl} alt="Badge Preview" />
+            </Card.Body>
+          </Card>
+        )}
+        {badgeUrl && (
+          <Form.Group controlId="badgeUrl">
+            <Form.Label>Badge URL</Form.Label>
+            <Form.Control type="text" readOnly value={badgeUrl} />
+            <Button variant="primary" onClick={() => navigator.clipboard.writeText(badgeUrl)}>
+              Copy URL
+            </Button>
+          </Form.Group>
+        )}
+      </Form>
+    </div>
+  );
+};
+
+export default IconPreviewInterface;