okay now generate output button will generate another output that will be on the second tab called Repository, the original tab is called Entity, the repository output will also be generated from the inputs and it will look like this:

"package com.example.repository;

import com.example.entity.Customer;
import org.springframework.data.jpa.repository.CrudRepository;
import org.springframework.stereotype.Repository;

// The @Repository annotation is optional if extending JpaRepository, but good practice
public interface CustomerRepository extends CrudRepository<Customer, Long> {

}"

index.html

@@ -67,21 +67,33 @@
             <!-- Right Column - Output -->
             <div class="lg:w-2/3 h-full">
                 <div class="bg-gray-800 rounded-lg shadow-xl h-full flex flex-col">
-                    <div class="p-4 border-b border-gray-700 flex justify-between items-center">
-                        <h2 class="text-xl font-semibold text-primary-500">Generated Output</h2>
+                    <custom-tab-group class="border-b border-gray-700">
+                        <button slot="tabs" class="tab-btn">Entity</button>
+                        <button slot="tabs" class="tab-btn">Repository</button>
+                        
+                        <div slot="contents" class="tab-content h-full">
+                            <div class="p-4 flex-1 h-full">
+                                <textarea id="output-entity" class="w-full h-full bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea>
+                            </div>
+                        </div>
+                        
+                        <div slot="contents" class="tab-content h-full">
+                            <div class="p-4 flex-1 h-full">
+                                <textarea id="output-repository" class="w-full h-full bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea>
+                            </div>
+                        </div>
+                    </custom-tab-group>
+                    
+                    <div class="p-4 border-t border-gray-700 flex justify-end">
                         <button id="download-btn" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center">
                             <i data-feather="download" class="w-4 h-4 mr-2"></i> Download
                         </button>
                     </div>
-                    
-                    <div class="p-4 flex-1">
-                        <textarea id="output-text" class="w-full h-full bg-gray-800 text-gray-100 p-4 rounded-lg border border-gray-700 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" readonly></textarea>
-                    </div>
 </div>
             </div>
         </div>
     </div>
-
+    <script src="components/tab-component.js"></script>
     <script src="script.js"></script>
 <script>
         feather.replace();

script.js

@@ -109,20 +109,40 @@ generateBtn.addEventListener('click', () => {
         });
 
         jpaCode += `}\n`;
-        // Update output
-        // Update output
-        outputTextarea.value = jpaCode;
-        hljs.highlightElement(outputTextarea);
+        // Generate Repository output
+        let repositoryCode = `package com.example.repository;\n\n`;
+        repositoryCode += `import com.example.entity.${className};\n`;
+        repositoryCode += `import org.springframework.data.jpa.repository.JpaRepository;\n`;
+        repositoryCode += `import org.springframework.stereotype.Repository;\n\n`;
+        repositoryCode += `@Repository\n`;
+        repositoryCode += `public interface ${className}Repository extends JpaRepository<${className}, Long> {\n\n`;
+        repositoryCode += `}\n`;
+
+        // Update outputs
+        document.getElementById('output-entity').value = jpaCode;
+        document.getElementById('output-repository').value = repositoryCode;
+        hljs.highlightAll();
 
         // Set up download functionality
-const downloadBtn = document.getElementById('download-btn');
-        downloadBtn.onclick = function() {
+        const downloadBtn = document.getElementById('download-btn');
+downloadBtn.onclick = function() {
             const blob = new Blob([jpaCode], { type: 'text/plain' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
-            a.download = `${className}.java`;
-            document.body.appendChild(a);
+            // Get active tab content
+            const activeTab = document.querySelector('custom-tab-group').shadowRoot.querySelector('.tab-btn.active');
+            const tabIndex = Array.from(document.querySelector('custom-tab-group').shadowRoot.querySelectorAll('.tab-btn')).indexOf(activeTab);
+            
+            const contentToDownload = tabIndex === 0 ? jpaCode : repositoryCode;
+            const fileName = tabIndex === 0 ? `${className}.java` : `${className}Repository.java`;
+            
+            const blob = new Blob([contentToDownload], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = fileName;
+document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
             URL.revokeObjectURL(url);