From 26255b64fcfad69e54c72dea56fe7705b4cb3091 Mon Sep 17 00:00:00 2001 From: PawelC4 Date: Sun, 9 Nov 2025 01:28:33 -0500 Subject: [PATCH] pushing css for pages and small features --- app/Dashboard/page.tsx | 113 ++++++++++++++++++------ app/cards/page.tsx | 190 +++++++++++++++++++++++++++++----------- app/exportType/types.ts | 1 + app/page.tsx | 33 ++----- 4 files changed, 234 insertions(+), 103 deletions(-) diff --git a/app/Dashboard/page.tsx b/app/Dashboard/page.tsx index 86da3e8..bb47069 100644 --- a/app/Dashboard/page.tsx +++ b/app/Dashboard/page.tsx @@ -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 ( -
+
-
+
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" />
@@ -90,25 +130,40 @@ function Dashboard() { // 2. Changed from 'export default function'
-

- Project Names -

+
+

+ Project Names +

+ +
    {filtered.map((project, index) => (
  • {project.name} - + Created: {project.createdAt}
    • ))} {filtered.length === 0 && ( -
  • No results found
    • +
  • No results found
    • )}
diff --git a/app/cards/page.tsx b/app/cards/page.tsx index 37faf57..322b377 100644 --- a/app/cards/page.tsx +++ b/app/cards/page.tsx @@ -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(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); + + 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 ( @@ -60,8 +156,8 @@ const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) => className="grid h-screen w-full place-items-center bg-orange-100" // -gradient-to-tr from-orange-200 to-orange-100 style={{ - backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' - viewBox='0 0 32 32' width='32' height='32' fill='none' + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' + viewBox='0 0 32 32' width='32' height='32' fill='none' stroke-width='2' stroke='%23d4d4d4'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")`, }} > @@ -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 = ({ cardData, colorWay, isFront, onAccept, onReject }) => { +const Card: React.FC = ({ cardData, colorWay, isFront, onSwipe }) => { const { title, summary, tracks } = cardData; const x = useMotionValue(0); @@ -118,30 +212,20 @@ const Card: React.FC = ({ 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 ( = ({ 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 = ({ cardData, colorWay, isFront, onAccept, onRe
{/* 3. Applied the specific titleColor here */}

{title}

{/* This summary

will inherit colorWay.text from the parent */} -

{summary}

+

{summary}

- {tracks.slice(0, 2).map((track, index) => ( + {/* This

will also inherit colorWay.text */} +

+ Tracks +

+ {tracks.map((track) => ( = ({ cardData, colorWay, isFront, onAccept, onRe }} > {track} - {index === 0 && tracks.length > 1 && ", "} ))}
@@ -207,4 +297,4 @@ const Card: React.FC = ({ cardData, colorWay, isFront, onAccept, onRe }; -export default SwipeCards; +export default SwipeCards; \ No newline at end of file diff --git a/app/exportType/types.ts b/app/exportType/types.ts index 9b2afbb..7281483 100644 --- a/app/exportType/types.ts +++ b/app/exportType/types.ts @@ -14,6 +14,7 @@ export interface GenerateConfig { temperature: number; topP: number; responseMimeType: string; + maxOutputTokens?: number; } export interface ChatSetting { diff --git a/app/page.tsx b/app/page.tsx index c297bb6..4342fc9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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() { >
Next.js logo
@@ -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!{" "} - {/* -                Templates -              {" "} -              or the{" "} -               -                Learning -              {" "} */} - {/* center. */}

- {/* Get Started */}