Skip to content

improvised ui, added components #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codecompass-1 merged 1 commit into from
Oct 3, 2025
Merged

improvised ui, added components #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 36 additions & 8 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,52 @@
:root {
--background: #ffffff;
--foreground: #171717;
--card-bg: #f8f9fa;
--button-bg: #e9ecef;
--button-text: #495057;
}

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
[data-theme="dark"] {
--background: #0f172a;
--foreground: #f1f5f9;
--card-bg: #1e293b;
--button-bg: #334155;
--button-text: #cbd5e1;
}

/* Theme configuration for Tailwind CSS variables */

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--background: #0f172a;
--foreground: #f1f5f9;
--card-bg: #1e293b;
--button-bg: #334155;
--button-text: #cbd5e1;
}
}

body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: var(--background);
}

::-webkit-scrollbar-thumb {
background: var(--button-bg);
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--button-text);
}
164 changes: 137 additions & 27 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use client';
import React, { useEffect, useState } from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

type Feed = {
title: string;
Expand All @@ -15,24 +17,47 @@ type Category = {

export default function App() {
const [data, setData] = useState<Category[]>([]);
const [filteredData, setFilteredData] = useState<Category[]>([]);
const [selected, setSelected] = useState<Record<string, boolean>>({});
const [loading, setLoading] = useState(true);
const [opml, setOpml] = useState('');
const [searchQuery, setSearchQuery] = useState('');

useEffect(() => {
fetch('/feeds.json')
.then(res => {
if (!res.ok) throw new Error('feeds.json not found');
return res.json();
})
.then((json: Category[]) => setData(json))
.then((json: Category[]) => {
setData(json);
setFilteredData(json);
})
.catch(err => {
console.error(err);
setData([]);
setFilteredData([]);
})
.finally(() => setLoading(false));
}, []);

// Filter data based on search query
useEffect(() => {
if (!searchQuery.trim()) {
setFilteredData(data);
} else {
const filtered = data.map(category => ({
...category,
feeds: category.feeds.filter(feed =>
feed.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
feed.xmlUrl.toLowerCase().includes(searchQuery.toLowerCase()) ||
(feed.htmlUrl && feed.htmlUrl.toLowerCase().includes(searchQuery.toLowerCase()))
)
})).filter(category => category.feeds.length > 0);
setFilteredData(filtered);
}
}, [data, searchQuery]);

const feedKey = (c: string, f: Feed) => `${c}||${f.xmlUrl}`;

const toggleFeed = (c: string, f: Feed) => {
Expand Down Expand Up @@ -106,55 +131,140 @@ export default function App() {
URL.revokeObjectURL(url);
};

if (loading) return <div className="p-6">Loading feeds...</div>;
const handleAddNew = () => {
// Placeholder for Google Form integration
window.open('https://forms.google.com', '_blank');
};

const handleSearch = (query: string) => {
setSearchQuery(query);
};

if (loading) return (
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)] flex flex-col">
<Navbar title="RSS CSE Setup" onAddNew={handleAddNew} onSearch={handleSearch} />
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="text-lg mb-2">Loading feeds...</div>
<div className="animate-spin text-2xl">⏳</div>
</div>
</div>
<Footer />
</div>
);

return (
<div className="min-h-screen bg-slate-900 text-slate-100 p-6">
<div className="max-w-5xl mx-auto">
<header className="flex items-center justify-between mb-6">
<h1 className="text-3xl font-bold">rss-cse-picker</h1>
<a href="#" className="text-sm underline">Edit feeds.xlsx → convert → commit</a>
</header>
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)] flex flex-col transition-colors duration-300">
<Navbar title="RSS CSE Setup" onAddNew={handleAddNew} onSearch={handleSearch} />

<main className="flex-1 w-full px-4 py-8">
<div className="mb-6 text-center">
<p className="text-lg text-gray-400 mb-4">
Select RSS feeds from various Computer Science and Engineering categories to generate your OPML file.
</p>
{searchQuery && (
<p className="text-sm text-gray-500 mt-2">
Showing results for: "{searchQuery}"
</p>
)}
</div>

<section>
{data.map((cat) => (
<div key={cat.category} className="mb-6 bg-slate-800 p-4 rounded-lg">
{filteredData.length === 0 && searchQuery ? (
<div className="text-center py-12">
<p className="text-gray-400 text-lg">No feeds found matching "{searchQuery}"</p>
<p className="text-gray-500 text-sm mt-2">Try adjusting your search terms</p>
</div>
) : (
filteredData.map((cat) => (
<div key={cat.category} className="mb-6 bg-[var(--card-bg)] p-4 rounded-lg shadow-lg border border-gray-700">
<div className="flex items-center justify-between mb-3">
<h2 className="text-xl font-semibold">{cat.category}</h2>
<h2 className="text-xl font-semibold text-[var(--foreground)]">{cat.category}</h2>
<div className="space-x-2">
<button onClick={() => selectAllCategory(cat.category, true)} className="px-3 py-1 rounded bg-green-600 text-sm">Select all</button>
<button onClick={() => selectAllCategory(cat.category, false)} className="px-3 py-1 rounded bg-red-600 text-sm">Clear</button>
<button
onClick={() => selectAllCategory(cat.category, true)}
className="px-3 py-1 rounded bg-green-600 hover:bg-green-700 text-white text-sm font-medium transition-colors"
>
Select all
</button>
<button
onClick={() => selectAllCategory(cat.category, false)}
className="px-3 py-1 rounded bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition-colors"
>
Clear
</button>
</div>
</div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3">
{cat.feeds.map(f => {
const k = feedKey(cat.category, f);
return (
<label key={k} className={`flex items-start gap-3 p-2 rounded ${selected[k] ? 'bg-slate-700' : 'bg-slate-800'}`}>
<input type="checkbox" checked={!!selected[k]} onChange={() => toggleFeed(cat.category, f)} />
<div>
<div className="font-medium">{f.title || f.xmlUrl}</div>
<div className="text-xs text-slate-400">{f.htmlUrl || f.xmlUrl}</div>
<label
key={k}
className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200 ${
selected[k]
? 'bg-indigo-600/20 border border-indigo-500'
: 'bg-[var(--button-bg)] hover:bg-gray-600 border border-transparent'
}`}
>
<input
type="checkbox"
checked={!!selected[k]}
onChange={() => toggleFeed(cat.category, f)}
className="mt-1 w-4 h-4 accent-indigo-500"
/>
<div className="flex-1 min-w-0">
<div className="font-medium text-[var(--foreground)] truncate">{f.title || f.xmlUrl}</div>
<div className="text-xs text-gray-400 truncate">{f.htmlUrl || f.xmlUrl}</div>
</div>
</label>
);
})}
</div>
</div>
))}
))
)}
</section>

<div className="mt-6 flex gap-3">
<button onClick={generateOpml} className="px-4 py-2 bg-indigo-600 rounded font-semibold">Generate OPML</button>
<button onClick={copyToClipboard} className="px-4 py-2 bg-blue-600 rounded">Copy OPML</button>
<button onClick={downloadOpml} className="px-4 py-2 bg-emerald-600 rounded">Download OPML</button>
<div className="mt-8 flex flex-wrap gap-3">
<button
onClick={generateOpml}
className="px-6 py-3 bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white font-semibold rounded-full shadow-lg transition duration-300"
>
Generate OPML
</button>
<button
onClick={copyToClipboard}
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-full shadow-lg transition duration-300"
>
Copy OPML
</button>
<button
onClick={downloadOpml}
className="px-6 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-semibold rounded-full shadow-lg transition duration-300"
>
Download OPML
</button>
</div>

<div className="mt-6">
<textarea value={opml} readOnly rows={14} className="w-full bg-slate-900 border border-slate-700 p-3 rounded font-mono"></textarea>
<div className="mt-8">
<h3 className="text-lg font-semibold mb-3 text-[var(--foreground)]">Generated OPML:</h3>
<textarea
value={opml}
readOnly
rows={8}
className="w-full bg-[var(--card-bg)] text-[var(--foreground)] border border-gray-600 rounded-lg p-4 font-mono resize-none transition-colors duration-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="Generated OPML will appear here..."
/>
</div>
</div>
</main>

<Footer
githubUrl="https://github.com/your-username/rss-cse-setup"
linkedinUrl="https://linkedin.com/in/your-profile"
codeCompassUrl="https://codecompass.com/your-profile"
/>
</div>
);
}
76 changes: 76 additions & 0 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
'use client';

import { FaGithub, FaLinkedin, FaCompass } from 'react-icons/fa';

interface FooterProps {
githubUrl?: string;
linkedinUrl?: string;
codeCompassUrl?: string;
}

export default function Footer({
githubUrl = "https://github.com",
linkedinUrl = "https://linkedin.com",
codeCompassUrl = "https://codecompass.com"
}: FooterProps) {
return (
<footer className="w-full bg-[var(--card-bg)] border-t border-gray-700 mt-auto">
<div className="max-w-screen mx-auto px-4 py-8">
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
{/* Project Info */}
<div className="text-center md:text-left">
<h3 className="text-lg font-semibold text-[var(--foreground)] mb-2">
RSS CSE Setup
</h3>
<p className="text-sm text-gray-400 max-w-md">
A comprehensive tool for managing and organizing RSS feeds for Computer Science and Engineering resources.
</p>
</div>

{/* Social Links */}
<div className="flex items-center gap-6">
<a
href={githubUrl}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors duration-200"
aria-label="GitHub"
>
<FaGithub className="text-xl" />
<span className="hidden sm:inline">GitHub</span>
</a>

<a
href={linkedinUrl}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-gray-400 hover:text-blue-400 transition-colors duration-200"
aria-label="LinkedIn"
>
<FaLinkedin className="text-xl" />
<span className="hidden sm:inline">LinkedIn</span>
</a>

<a
href={codeCompassUrl}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-gray-400 hover:text-green-400 transition-colors duration-200"
aria-label="CodeCompass"
>
<FaCompass className="text-xl" />
<span className="hidden sm:inline">CodeCompass</span>
</a>
</div>
</div>

{/* Bottom Section */}
<div className="mt-6 pt-6 border-t border-gray-700 text-center">
<p className="text-sm text-gray-500">
© {new Date().getFullYear()} RSS CSE Setup. Built with ❤️ for the developer community.
</p>
</div>
</div>
</footer>
);
}
Loading