Add icon preview interface

src/App.scss

@@ -7,3 +7,82 @@
   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;
+}
+
+/* Styles for the separate tab interface for the icon preview */
+.icon-tabs {
+  border-bottom: 1px solid #2c2f36;
+  padding-left: 0;
+  margin-bottom: 2rem;
+  list-style: none;
+  padding: 0;
+}
+
+.icon-tab {
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+.icon-tab a {
+  padding: 0.5rem 1rem;
+  display: block;
+  text-decoration: none;
+  color: #ffffff;
+  background-color: #24272e;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.icon-tab a:hover,
+.icon-tab a:focus,
+.icon-tab a.active {
+  color: #ffffff;
+  background-color: #1e212b;
+  border-color: #2c2f36;
+}
+
+.icon-tab-content {
+  border: 1px solid #2c2f36;
+  border-radius: 8px;
+  background-color: #24272e;
+  color: #ffffff;
+  padding: 1rem;
+  margin-top: -1px;
+}
+
+@media (max-width: 768px) {
+  .icon-tabs {
+    display: block;
+  }
+
+  .icon-tab {
+    display: block;
+    margin-right: 0;
+    margin-bottom: 0.5rem;
+  }
+}

src/App.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import './App.scss';
 import UploadForm from './UploadForm';
 import GitHubButtons from './GitHubButtons';
+import IconPreviewInterface from './IconPreviewInterface';
+import { Tabs, Tab } from 'react-bootstrap';
 
 /**
  * The root component of the application
@@ -12,7 +14,14 @@ function App() {
       <header className="App-header">
         <h1>Custom Icon Badges</h1>
         <GitHubButtons user="DenverCoder1" repo="custom-icon-badges" />
-        <UploadForm />
+        <Tabs defaultActiveKey="upload" id="icon-tabs" className="mb-3">
+          <Tab eventKey="upload" title="Upload">
+            <UploadForm />
+          </Tab>
+          <Tab eventKey="preview" title="Preview">
+            <IconPreviewInterface />
+          </Tab>
+        </Tabs>
       </header>
     </div>
   );

src/IconPreviewInterface.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Form, Card } from 'react-bootstrap';
+
+const IconPreviewInterface = () => {
+  const [iconSource, setIconSource] = useState('');
+  const [availableIcons, setAvailableIcons] = useState<string[]>([]);
+  const [selectedIcon, setSelectedIcon] = useState('');
+  const [previewUrl, setPreviewUrl] = useState('');
+  const [badgeUrl, setBadgeUrl] = useState('');
+
+  useEffect(() => {
+    if (iconSource) {
+      // Fetch the list of available icons based on the selected source
+      fetch(`https://custom-icon-badges.demolab.com/api/icons?source=${iconSource}`)
+        .then((response) => response.json())
+        .then((data) => setAvailableIcons(data.icons))
+        .catch((error) => console.error('Error fetching icons:', error));
+    }
+  }, [iconSource]);
+
+  const handleIconSourceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setIconSource(e.target.value);
+  };
+
+  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="iconSourceSelect">
+          <Form.Label>Select an Icon Source</Form.Label>
+          <Form.Control as="select" value={iconSource} onChange={handleIconSourceChange}>
+            <option value="">Select an icon source...</option>
+            <option value="octicons">Octicons</option>
+            <option value="feather">Feather</option>
+            {/* Future options for other icon sources can be added here */}
+          </Form.Control>
+        </Form.Group>
+        {iconSource && (
+          <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>
+              {availableIcons.map((icon) => (
+                <option key={icon} value={icon}>{icon}</option>
+              ))}
+            </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;