mirror of
https://github.com/PinkSheep27/SBU-Hackathon.git
synced 2026-10-11 00:00:26 -04:00
pushing css for pages and small features
This commit is contained in:
PawelC4
+82
-27
@@ -1,38 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from 'next/link';
|
||||
// import { useRouter } from "next/navigation"; // Removed Next.js import
|
||||
// import Link from 'next/link'; // Removed Next.js import
|
||||
|
||||
function Dashboard() { // 2. Changed from 'export default function'
|
||||
const router = useRouter();
|
||||
export default function Dashboard() {
|
||||
// const router = useRouter(); // Removed Next.js hook
|
||||
const [query, setQuery] = useState("");
|
||||
const [sideBarOpen, setSidebarOpen] = useState(true);
|
||||
// 1. Add state to track sort order
|
||||
const [sortOrder, setSortOrder] = useState("newest"); // 'newest' or 'oldest'
|
||||
|
||||
const projects = [
|
||||
{ name: "Alpha Project", createdAt: "2025-01-01" },
|
||||
{ name: "Beta Board", createdAt: "2025-02-15" },
|
||||
{ name: "Gamma Tasl", createdAt: "2025-03-10" },
|
||||
];
|
||||
const filtered = projects.filter((p) =>
|
||||
|
||||
// 2. Update sorting logic to use the sortOrder state
|
||||
const sortedProjects = [...projects].sort((a, b) => {
|
||||
// Get numeric timestamps to avoid TypeScript error
|
||||
const dateA = new Date(a.createdAt).getTime();
|
||||
const dateB = new Date(b.createdAt).getTime();
|
||||
|
||||
if (sortOrder === "newest") {
|
||||
return dateB - dateA; // Newest first
|
||||
} else {
|
||||
return dateA - dateB; // Oldest first
|
||||
}
|
||||
});
|
||||
|
||||
// 3. Filter the *sorted* array based on the query
|
||||
const filtered = sortedProjects.filter((p) =>
|
||||
p.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
// Helper function to handle navigation for the "Create" button
|
||||
const handleCreateClick = () => {
|
||||
// Use standard window navigation instead of Next.js router
|
||||
// Also corrected typo from "dashbaord" to "dashboard"
|
||||
window.location.href = "/dashboard/create";
|
||||
};
|
||||
|
||||
// 4. Function to toggle the sort order
|
||||
const toggleSortOrder = () => {
|
||||
setSortOrder(currentOrder => (currentOrder === "newest" ? "oldest" : "newest"));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-zinc-50 dark:bg-black font-sans transition-all duration-300">
|
||||
<div
|
||||
className="flex min-h-screen font-sans transition-all duration-300"
|
||||
style={{ backgroundColor: '#FEEEDF' }} // Main background
|
||||
>
|
||||
<aside
|
||||
className={`${sideBarOpen ? "w-64" : "w-16"
|
||||
} bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 transition-all duration-300 flex flex-col`}
|
||||
} border-r transition-all duration-300 flex flex-col`}
|
||||
style={{ backgroundColor: '#99A48A', borderColor: '#8A947E' }} // Sidebar background and border
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between p-4 "
|
||||
style={{ borderColor: '#8A947E' }} // Sidebar border
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800">
|
||||
{sideBarOpen && (
|
||||
<span className="text-lg font-semibold text-zinc-800 dark:text-zinc-100">
|
||||
<span className="text-lg font-semibold text-white">
|
||||
More
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sideBarOpen)}
|
||||
className="text-zinc-600 dark:text-zinc-300 hover:text-blue-500 transition-colors"
|
||||
className="text-white hover:text-gray-200 transition-colors"
|
||||
title="Toggle Sidebar"
|
||||
>
|
||||
☰
|
||||
@@ -40,32 +76,34 @@ function Dashboard() { // 2. Changed from 'export default function'
|
||||
</div>
|
||||
|
||||
<nav
|
||||
className={`flex flex-col p-4 gap-3 text-zinc-700 dark:text-zinc-300 transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
|
||||
className={`flex flex-col p-4 gap-3 text-white transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
<a
|
||||
href="/"
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
className="hover:text-gray-200 transition-colors"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</a>
|
||||
<p
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
className="hover:text-gray-200 transition-colors"
|
||||
>
|
||||
Settings
|
||||
</p>
|
||||
{/* 3. Added the Logout link here */}
|
||||
<Link
|
||||
<a
|
||||
href="/auth/logout"
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
className="hover:text-gray-200 transition-colors"
|
||||
>
|
||||
Logout
|
||||
</Link>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<header className="sticky top-0 z-10 bg-white dark:bg-black/80 backdrop-blur-sm border-b border-zinc-200 dark:border-zinc-800">
|
||||
<header
|
||||
className="sticky top-0 z-10 backdrop-blur-sm border-b"
|
||||
style={{ backgroundColor: 'rgba(153, 164, 138, 0.9)', borderColor: '#8A947E' }} // Top bar background (semi-transparent) and border
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
@@ -73,15 +111,17 @@ function Dashboard() { // 2. Changed from 'export default function'
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search projects, boards or tasks..."
|
||||
className="w-full max-w-md px-4 py-2 rounded-md border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full max-w-md px-4 py-2 rounded-md border text-black focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
style={{ backgroundColor: '#F7F7F7', borderColor: '#D1D1D1' }} // Search bar "off-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push("/dashbaord/create")}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm"
|
||||
onClick={handleCreateClick} // Use the new handler
|
||||
className="text-white px-4 py-2 rounded-md shadow-sm hover:opacity-90"
|
||||
style={{ backgroundColor: '#EA627F' }} // Create button
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
@@ -90,25 +130,40 @@ function Dashboard() { // 2. Changed from 'export default function'
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl w-full mx-auto px-6 py-10">
|
||||
<h1 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-2xl font-semibold text-black">
|
||||
Project Names
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleSortOrder}
|
||||
className="px-3 py-1 text-sm font-medium border rounded-md"
|
||||
style={{
|
||||
color: '#333',
|
||||
backgroundColor: '#F7F7F7', // "off-white"
|
||||
borderColor: '#D1D1D1'
|
||||
}}
|
||||
>
|
||||
Sort by: {sortOrder === 'newest' ? 'Newest' : 'Oldest'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<ul className="space-y-3">
|
||||
{filtered.map((project, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex justify-between p-4 bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 rounded-md text-zinc-800 dark:text-zinc-100"
|
||||
className="flex justify-between p-4 border rounded-md"
|
||||
style={{ backgroundColor: '#B8C0AD', color: '#222', borderColor: '#A9B29E' }} // Project boxes
|
||||
>
|
||||
<span>{project.name}</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-400 text-sm">
|
||||
<span className="text-gray-700 text-sm">
|
||||
Created: {project.createdAt}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
{filtered.length === 0 && (
|
||||
<li className="text-zinc-500">No results found</li>
|
||||
<li className="text-gray-600">No results found</li>
|
||||
)}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
+137
-47
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
import { motion, useMotionValue, useTransform } from "framer-motion";
|
||||
|
||||
// Removed local fallback JSX declaration — use the official React type definitions instead:
|
||||
// install @types/react and @types/react-dom so JSX.IntrinsicElements is provided by those packages.
|
||||
// 1. Updated ColorWay interface
|
||||
interface ColorWay {
|
||||
card: string;
|
||||
@@ -28,31 +29,126 @@ interface CardData {
|
||||
tracks: string[];
|
||||
}
|
||||
|
||||
const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) => {
|
||||
const [cards, setCards] = useState<CardData[]>(initialCards);
|
||||
const router = useRouter();
|
||||
const cardData: CardData[] = [
|
||||
{
|
||||
|
||||
// Update cards state when initialCards prop changes
|
||||
useEffect(() => {
|
||||
setCards(initialCards);
|
||||
}, [initialCards]);
|
||||
id: 1,
|
||||
|
||||
const removeCard = () => {
|
||||
title: " WEBSITE",
|
||||
|
||||
summary:
|
||||
|
||||
"FFind out what makes GoonMAXXER unique.With this innovative website you will be able to explore various features and functionalities that set GoonMAXXER apart from the rest.",
|
||||
|
||||
tracks: ["Gemini", "Auth0", "VibeCODING", "SmellyMaxxing", "shitposting"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 2,
|
||||
|
||||
title: "Intro to React",
|
||||
|
||||
summary:
|
||||
|
||||
"Learn the fundamentals of React, including components, state, and props.",
|
||||
|
||||
tracks: ["React", "JS", "Frontend"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 3,
|
||||
|
||||
title: "State Management",
|
||||
|
||||
summary:
|
||||
|
||||
"Explore complex state solutions with Zustand, Redux, and Context API.",
|
||||
|
||||
tracks: ["React", "Zustand", "State"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 4,
|
||||
|
||||
title: "Next.js 14",
|
||||
|
||||
summary: "Master the app router, server actions, and data fetching.",
|
||||
|
||||
tracks: ["Next.js", "React", "Fullstack"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 5,
|
||||
|
||||
title: "UI/UX Principles",
|
||||
|
||||
summary:
|
||||
|
||||
"A complete guide to user-centric design, prototyping, and testing.",
|
||||
|
||||
tracks: ["Design", "UI", "UX"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 6,
|
||||
|
||||
title: "Node.js Essentials",
|
||||
|
||||
summary:
|
||||
|
||||
"Build scalable, high-performance backend applications with Node.js.",
|
||||
|
||||
tracks: ["Node", "Backend", "JS"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 7,
|
||||
|
||||
title: "TypeScript",
|
||||
|
||||
summary:
|
||||
|
||||
"Add static typing to your JavaScript projects for robust, large-scale apps.",
|
||||
|
||||
tracks: ["TypeScript", "JS", "DevOps"],
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 8,
|
||||
|
||||
title: "Framer Motion",
|
||||
|
||||
summary: "Create production-ready animations for your React applications.",
|
||||
|
||||
tracks: ["React", "Animation", "Framer"],
|
||||
|
||||
},
|
||||
|
||||
].reverse();
|
||||
|
||||
const SwipeCards: React.FC = () => {
|
||||
const [cards, setCards] = useState<CardData[]>(cardData);
|
||||
|
||||
const onSwipe = () => {
|
||||
setCards((prev) => prev.slice(0, prev.length - 1));
|
||||
};
|
||||
|
||||
const handleAccept = (cardData: CardData) => {
|
||||
removeCard();
|
||||
// Redirect to chatbot with card data
|
||||
router.push(`/chatbot?title=${encodeURIComponent(cardData.title)}&summary=${encodeURIComponent(cardData.summary)}`);
|
||||
};
|
||||
|
||||
const handleReject = () => {
|
||||
removeCard();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setCards([]); // Reset to initial cards
|
||||
setCards(cardData);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -74,8 +170,7 @@ const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) =>
|
||||
cardData={card}
|
||||
colorWay={colorWay}
|
||||
isFront={index === cards.length - 1}
|
||||
onAccept={handleAccept}
|
||||
onReject={handleReject}
|
||||
onSwipe={onSwipe}
|
||||
/>
|
||||
);
|
||||
})
|
||||
@@ -104,11 +199,10 @@ interface CardProps {
|
||||
cardData: CardData;
|
||||
colorWay: ColorWay;
|
||||
isFront: boolean;
|
||||
onAccept: (cardData: CardData) => void;
|
||||
onReject: () => void;
|
||||
onSwipe: () => void;
|
||||
}
|
||||
|
||||
const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onReject }) => {
|
||||
const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onSwipe }) => {
|
||||
const { title, summary, tracks } = cardData;
|
||||
|
||||
const x = useMotionValue(0);
|
||||
@@ -118,30 +212,20 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
[-250, -100, 0, 100, 250],
|
||||
[0, 1, 1, 1, 0],
|
||||
);
|
||||
const controls = useAnimation();
|
||||
|
||||
const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
|
||||
const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
|
||||
const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
|
||||
|
||||
const handleDragEnd = async (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
|
||||
if (info.offset.x > 100) {
|
||||
// Card accepted
|
||||
await controls.start({ x: 1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
|
||||
onAccept(cardData); // Then call onAccept which removes the card and redirects
|
||||
} else if (info.offset.x < -100) {
|
||||
// Card rejected
|
||||
await controls.start({ x: -1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
|
||||
onReject(); // Then call onReject which removes the card
|
||||
} else {
|
||||
// Card not swiped far enough, snap back to center
|
||||
controls.start({ x: 0, rotate: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30 } });
|
||||
const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
|
||||
if (Math.abs(info.offset.x) > 100) {
|
||||
onSwipe();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="absolute flex h-[56rem] w-[42rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
|
||||
className="absolute flex h-[48rem] w-[36rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
|
||||
style={{
|
||||
x,
|
||||
rotate,
|
||||
@@ -151,7 +235,10 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
zIndex: isFront ? 2 : 1,
|
||||
pointerEvents: isFront ? "auto" : "none",
|
||||
}}
|
||||
animate={controls}
|
||||
animate={{
|
||||
scale: isFront ? 1 : 0.95,
|
||||
y: isFront ? 0 : -40,
|
||||
}}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
drag={isFront ? "x" : false}
|
||||
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
|
||||
@@ -175,20 +262,24 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
<div className="relative z-0">
|
||||
{/* 3. Applied the specific titleColor here */}
|
||||
<h2
|
||||
className="mb-4 text-center text-3xl font-bold"
|
||||
className="mb-4 text-center text-7xl font-bold"
|
||||
style={{ color: colorWay.titleColor }}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
{/* This summary <p> will inherit colorWay.text from the parent */}
|
||||
<p className="text-center text-xl font-light">{summary}</p>
|
||||
<p className="text-center text-3xl font-light">{summary}</p>
|
||||
</div>
|
||||
|
||||
<div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
|
||||
{tracks.slice(0, 2).map((track, index) => (
|
||||
{/* This <h3> will also inherit colorWay.text */}
|
||||
<h3 className="mb-4 w-full text-center text-4xl font-semibold">
|
||||
Tracks
|
||||
</h3>
|
||||
{tracks.map((track) => (
|
||||
<span
|
||||
key={track}
|
||||
className="flex items-center justify-center rounded-full px-8 py-3 text-sm font-medium"
|
||||
className="flex items-center justify-center rounded-full px-8 py-3 text-2xl font-medium"
|
||||
style={{
|
||||
// This logic now correctly contrasts with the main text color
|
||||
backgroundColor:
|
||||
@@ -198,7 +289,6 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
|
||||
}}
|
||||
>
|
||||
{track}
|
||||
{index === 0 && tracks.length > 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,7 @@ export interface GenerateConfig {
|
||||
temperature: number;
|
||||
topP: number;
|
||||
responseMimeType: string;
|
||||
maxOutputTokens?: number;
|
||||
}
|
||||
|
||||
export interface ChatSetting {
|
||||
|
||||
+9
-24
@@ -1,4 +1,5 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@@ -8,19 +9,19 @@ export default function Home() {
|
||||
>
|
||||
<header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
|
||||
src="/logo.svg"
|
||||
alt="logo.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="/signin" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
Sign in
|
||||
<a href="/dashboard" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="/register" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
Register
|
||||
<a href="/cards" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
Cards
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -39,29 +40,13 @@ export default function Home() {
|
||||
className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400"
|
||||
>
|
||||
Got a hackathon coming up? Tell us your track, your team’s skills, what you’re passionate about, and more — and we’ll provide you with the perfect project idea!{" "}
|
||||
{/* <a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "} */}
|
||||
{/* center. */}
|
||||
</p>
|
||||
|
||||
{/* <ProtectedNavButton>Get Started</ProtectedNavButton> */}
|
||||
<button
|
||||
style={{ backgroundColor: "#173C46", color: "white" }}
|
||||
className="px-4 py-1.5 rounded-md shadow-md font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
{/* {children} */}
|
||||
Get Started
|
||||
<Link href="/dashboard">Get Started</Link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user