From 0eb0a7eb9c130327a58f0775c4df4bdbaa3692b0 Mon Sep 17 00:00:00 2001 From: YourGitHubUsername Date: Fri, 15 Aug 2025 00:33:32 +0530 Subject: [PATCH 1/5] removed name from logo --- docusaurus.config.ts | 2 +- package.json | 2 +- src/css/custom.css | 348 +++++++++++++++++++++++++++++++++---------- 3 files changed, 275 insertions(+), 77 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 8f274766..d70c5224 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -83,7 +83,7 @@ const config: Config = { respectPrefersColorScheme: false, }, navbar: { - title: "Recode Hive", + logo: { alt: "RecodeHive Logo", src: "img/logo.png", diff --git a/package.json b/package.json index 1dac038c..082250ad 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@docusaurus/plugin-content-docs": "3.8.1", "@docusaurus/plugin-google-analytics": "^3.8.1", "@docusaurus/plugin-ideal-image": "3.8.1", - "@docusaurus/preset-classic": "3.8.1", + "@docusaurus/preset-classic": "^3.8.1", "@docusaurus/theme-classic": "^3.8.1", "@docusaurus/theme-mermaid": "3.8.1", "@docusaurus/theme-search-algolia": "3.8.1", diff --git a/src/css/custom.css b/src/css/custom.css index c23bcef4..ea0da2fc 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,11 +6,6 @@ .dropdown-content a.col-span-2 { color: #111 !important; } -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ /* You can override the default Infima variables here. */ @import "tailwindcss"; @@ -42,7 +37,7 @@ textarea { transition: all 0.1s ease !important; } -/* Instant navbar theme change */ +/* Navbar styling and alignment */ .navbar, .navbar__inner, .navbar__brand, @@ -51,6 +46,96 @@ textarea { transition: background-color 0.1s ease, color 0.1s ease !important; } +/* Fix navbar alignment and spacing */ +.navbar { + padding: 0.2rem 1rem; + height: auto; + display: flex; + align-items: center; +} + +.navbar__brand { + display: flex; + align-items: center; + margin-right: 1rem; + margin-left: 0.9rem; +} + +.navbar__logo { + height: 3rem; + margin-right: 0.5rem; +} + +.navbar__items { + display: flex; + align-items: center; + gap: 0 !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Adjust individual navbar items */ +.navbar__items > .navbar__item { + padding: 0.5rem 0.4rem !important; + margin: 0 !important; +} + +.navbar__item { + display: flex; + align-items: center; + padding: 0.5rem; + font-size: 1rem; +} + +.navbar__link { + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Fix icon alignment in navbar */ +.navbar__link svg, +.navbar__link img { + margin: auto; + vertical-align: middle; +} + +/* Fix dropdown menu spacing and alignment */ +.dropdown { + display: inline-flex !important; + align-items: center !important; + margin: 0 !important; + padding: 0 !important; +} + +.dropdown__menu { + min-width: max-content !important; + margin-top: 0.5rem !important; + padding: 0.25rem 0 !important; +} + +.dropdown__link { + display: flex !important; + align-items: center !important; + padding: 0.4rem 0.75rem !important; + margin: 0 !important; + width: 100% !important; + font-size: 0.9rem !important; +} + +/* Remove extra spacing between dropdown items */ +.dropdown__menu > .dropdown__link { + padding: 0.4rem 0.75rem !important; + margin: 0 !important; +} + +/* Fix spacing between icon and text in dropdown */ +.dropdown__link svg, +.dropdown__link img { + margin-right: 0.5rem !important; + margin-left: 0 !important; +} + /* Force instant theme updates for key elements */ [data-theme="light"] .navbar { background-color: #ffffff !important; @@ -128,6 +213,92 @@ textarea { --dark-input-focus-border: #25c2a0; } +/* Mobile navigation styles */ +@media screen and (max-width: 996px) { + /* Hide text in navbar */ + .navbar__items .navbar__item span, + .navbar__items .navbar__link span, + span[id^="nav-"] { + display: none !important; + } + + /* Hide text but keep icons visible */ + .navbar__items + .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( + .quickstart-icons + ), + .navbar__items + .navbar__link:not(.navbar__toggle):not(.navbar__brand):not( + .quickstart-icons + ) { + font-size: 0 !important; + padding: 0.4rem !important; + } + + /* Layout for mobile navbar */ + .navbar { + justify-content: flex-start !important; + padding: 0.3rem 0.5rem !important; + } + + .navbar__inner { + width: 100% !important; + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + } + + /* Essential elements visibility and styling */ + .navbar__toggle, + .navbar__search, + .navbar-sidebar__brand, + .navbar__brand, + .navbar-sidebar .navbar__item, + .quickstart-icons { + display: flex !important; + align-items: center !important; + } + + /* Icon sizes and visibility */ + .navbar__toggle svg, + .navbar__search svg, + .navbar__link svg, + .navbar__link img, + .quickstart-icons svg, + .quickstart-icons img { + display: block !important; + width: 24px !important; + height: 24px !important; + margin: 0 !important; + opacity: 1 !important; + color: currentColor !important; + } + + /* Toggle and search button styling */ + .navbar__toggle { + transform: scale(1.2) !important; + padding: 0.6rem !important; + margin-right: 0.5rem !important; + } + + .navbar__search { + margin-left: 0.5rem !important; + } + + /* Right side items */ + .navbar__items--right { + display: flex !important; + align-items: center !important; + gap: 0.8rem !important; + margin-left: auto !important; + } + + /* Logo size */ + .navbar__logo { + height: 40px !important; + } +} + @media screen and (min-width: 1057px) { .nav-emoji { display: none; @@ -178,12 +349,12 @@ textarea { background-color: #24292e !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; - /* Increase sidebar width for better spacing */ - .navbar-sidebar { - width: 270px !important; - min-width: 270px !important; - max-width: 320px !important; - } + /* Increase sidebar width for better spacing */ + .navbar-sidebar { + width: 270px !important; + min-width: 270px !important; + max-width: 320px !important; + } box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; @@ -449,7 +620,37 @@ textarea { border-right: 1px solid #4e8da0db; margin: 2px; } +/* Fix navbar icon and text alignment */ +.navbar__items .navbar__link { + display: inline-flex !important; + align-items: center !important; + gap: 0.2rem !important; + height: 40px !important; /* Consistent height */ + padding: 0.5rem 0.8rem !important; +} + +/* Fix specific icon alignment in navbar */ +.navbar__link img, +.navbar__link svg { + width: 20px !important; + height: 20px !important; + margin: 0 !important; + vertical-align: middle !important; +} + +/* Ensure text and icons are centered */ +.navbar__link span { + display: inline-flex !important; + align-items: center !important; + line-height: 1 !important; +} +/* Adjust dropdown items alignment */ +.dropdown__link { + display: inline-flex !important; + align-items: center !important; + gap: 0.2rem !important; +} .nav__icons { color: #111 !important; text-decoration: none; @@ -1357,81 +1558,79 @@ html { pointer-events: auto !important; } + /* STAR section border fixes for dark mode */ + [data-theme="dark"] .star-border-red { + border-color: #ef4444 !important; + } -/* STAR section border fixes for dark mode */ -[data-theme='dark'] .star-border-red { - border-color: #ef4444 !important; -} - -[data-theme='dark'] .star-border-yellow { - border-color: #eab308 !important; -} - -[data-theme='dark'] .star-border-green { - border-color: #22c55e !important; -} + [data-theme="dark"] .star-border-yellow { + border-color: #eab308 !important; + } -[data-theme='dark'] .star-border-blue { - border-color: #3b82f6 !important; -} + [data-theme="dark"] .star-border-green { + border-color: #22c55e !important; + } -[data-theme='light'] .interview-prep-page h1, -[data-theme='light'] .interview-prep-page h2, -[data-theme='light'] .interview-prep-page h3, -[data-theme='light'] .interview-prep-page h4, -[data-theme='light'] .interview-prep-page h5, -[data-theme='light'] .interview-prep-page h6 { - color: #ffffff !important; -} + [data-theme="dark"] .star-border-blue { + border-color: #3b82f6 !important; + } -.watch-video-btn { - background-color: #dc2626; - color: #ffffff; - padding: 0.5rem 1rem; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - display: inline-flex; - align-items: center; - transition: background-color 0.2s ease-in-out; -} + [data-theme="light"] .interview-prep-page h1, + [data-theme="light"] .interview-prep-page h2, + [data-theme="light"] .interview-prep-page h3, + [data-theme="light"] .interview-prep-page h4, + [data-theme="light"] .interview-prep-page h5, + [data-theme="light"] .interview-prep-page h6 { + color: #ffffff !important; + } -.watch-video-btn:hover { - background-color: #b91c1c; -} + .watch-video-btn { + background-color: #dc2626; + color: #ffffff; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + display: inline-flex; + align-items: center; + transition: background-color 0.2s ease-in-out; + } -[data-theme='dark'] .interview-prep-sidebar:hover { - border-color: #3b82f6 !important; -} + .watch-video-btn:hover { + background-color: #b91c1c; + } -[data-theme='dark'] .interview-prep-sidebar { - border-color:#4b5563 !important; -} + [data-theme="dark"] .interview-prep-sidebar:hover { + border-color: #3b82f6 !important; + } -/* Active tab in dark mode */ -[data-theme='dark'] .interview-prep-nav-tab-active { - border-bottom-color: #60a5fa !important; - color: #60a5fa !important; -} + [data-theme="dark"] .interview-prep-sidebar { + border-color: #4b5563 !important; + } -/* Inactive tab in dark mode */ -[data-theme='dark'] .interview-prep-nav-tab-inactive { - border-bottom-color: transparent !important; - color: #9ca3af !important; -} + /* Active tab in dark mode */ + [data-theme="dark"] .interview-prep-nav-tab-active { + border-bottom-color: #60a5fa !important; + color: #60a5fa !important; + } -[data-theme='dark'] .interview-prep-nav-tab-inactive:hover { - color: #d1d5db !important; -} + /* Inactive tab in dark mode */ + [data-theme="dark"] .interview-prep-nav-tab-inactive { + border-bottom-color: transparent !important; + color: #9ca3af !important; + } -.interview-prep-discord-btn{ - color:white; + [data-theme="dark"] .interview-prep-nav-tab-inactive:hover { + color: #d1d5db !important; + } -} + .interview-prep-discord-btn { + color: white; + } -[data-theme='dark'].interview-prep-join-comm{ - border-color:#854D0E -} + [data-theme="dark"].interview-prep-join-comm { + border-color: #854d0e; + } /* Fix: Remove extra box/space above dropdown nav items in sidebar */ .navbar-sidebar__item, @@ -1464,4 +1663,3 @@ html { padding-top: 0 !important; } } - From 87c42ac86be7118fdba155f517aca665fc1f0ede Mon Sep 17 00:00:00 2001 From: YourGitHubUsername Date: Fri, 15 Aug 2025 08:31:02 +0530 Subject: [PATCH 2/5] implemented basic static discussion page --- src/components/discussions/DiscussionList.tsx | 0 src/pages/dashboard/dashboard.css | 334 ++++++++++++++++- src/pages/dashboard/index.tsx | 335 ++++++++++++++++-- 3 files changed, 633 insertions(+), 36 deletions(-) create mode 100644 src/components/discussions/DiscussionList.tsx diff --git a/src/components/discussions/DiscussionList.tsx b/src/components/discussions/DiscussionList.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css index 64321fa6..0debef0a 100644 --- a/src/pages/dashboard/dashboard.css +++ b/src/pages/dashboard/dashboard.css @@ -176,30 +176,338 @@ /* Discussion Section */ .discussion-container { - max-width: 800px; + max-width: 1200px; margin: 0 auto; - padding: 2rem 0; + padding: 2rem 1rem; + color: var(--ifm-font-color-base); + margin-left: 2rem; } -.discussion-container h2 { - font-size: 2rem; +.discussion-header { + text-align: center; + margin-bottom: 3rem; +} + +.discussion-header h1 { + font-size: 3rem; + font-weight: 700; margin-bottom: 1rem; - color: var(--ifm-heading-color); + color: var(--ifm-color-emphasis-900); } -.discussion-container p { +.discussion-header h1 .highlight { + background: linear-gradient(135deg, var(--ifm-color-primary), #e74c3c); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.discussion-header p { + font-size: 1.1rem; color: var(--ifm-color-emphasis-700); + max-width: 600px; + margin: 0 auto; +} + +.discussion-toolbar { + display: flex; + justify-content: space-between; + align-items: center; margin-bottom: 2rem; - font-size: 1.1rem; - line-height: 1.6; + padding: 0.5rem; + background: var(--ifm-background-surface-color); + border-radius: 12px; + border: 1px solid var(--ifm-toc-border-color); } -.giscus-container { - margin-top: 2rem; - background: var(--ifm-card-background-color); +.toolbar-left { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.tab-btn { + padding: 0.75rem 1.25rem; + border: none; + background: transparent; + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; border-radius: 8px; - padding: 2rem; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transition: all 0.2s ease; +} + +.tab-btn:hover { + background: var(--ifm-menu-color-background-active); + color: var(--ifm-color-primary); +} + +.tab-btn.active { + background: var(--ifm-color-primary); + color: white; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.sort-dropdown select { + padding: 0.75rem 2.5rem 0.75rem 1.25rem; + border: 1px solid var(--ifm-toc-border-color); + border-radius: 8px; + background: var(--ifm-background-color); + color: var(--ifm-color-emphasis-600); + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1em; +} + +.new-discussion-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + background: var(--ifm-color-primary); + color: white; + border: none; + border-radius: 8px; + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.new-discussion-btn:hover { + background: var(--ifm-color-primary-dark); +} + +.categories-bar { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--ifm-toc-border-color); + overflow-x: auto; + scrollbar-width: none; +} + +.categories-bar::-webkit-scrollbar { + display: none; +} + +.category { + padding: 0.5rem 1.25rem; + border-radius: 20px; + background: var(--ifm-background-surface-color); + border: 1px solid var(--ifm-toc-border-color); + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + white-space: nowrap; + transition: all 0.2s ease; +} + +.category:hover { + background: var(--ifm-menu-color-background-active); + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); +} + +.category.active { + background: var(--ifm-color-primary); + color: white; + border-color: var(--ifm-color-primary); + font-weight: 600; +} + +.search-filters { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + align-items: center; +} + +.search-bar { + flex: 1; + position: relative; +} + +.search-bar input { + width: 100%; + padding: 0.75rem 1.25rem 0.75rem 3rem; + border: 1px solid var(--ifm-toc-border-color); + border-radius: 8px; + background: var(--ifm-background-surface-color); + color: var(--ifm-font-color-base); + font-size: 0.9rem; + transition: all 0.2s ease; +} + +.search-bar input:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 2px var(--ifm-color-primary-lightest); +} + +.searchbar-icon { + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + color: var(--ifm-color-emphasis-500); +} + +.discussions-list { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; +} + +.discussion-item { + display: flex; + gap: 1.5rem; + padding: 1.5rem; + background: var(--ifm-card-background-color); + border-radius: 12px; + border: 1px solid var(--ifm-toc-border-color); + transition: all 0.2s ease; +} + +.discussion-item:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); + border-color: var(--ifm-color-primary); +} + +.discussion-item.pinned { + background: var(--ifm-color-primary-lightest); + border-left: 4px solid var(--ifm-color-primary); +} + +.discussion-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; +} + +.discussion-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.discussion-content { + flex: 1; +} + +.discussion-header-content { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 0.75rem; +} + +.discussion-header-content h3 { + font-size: 1.2rem; + font-weight: 600; + margin: 0; + color: var(--ifm-heading-color); +} + +.pinned-badge { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.375rem 0.75rem; + background: var(--ifm-color-primary-light); + color: var(--ifm-color-primary-darkest); + border-radius: 20px; + font-size: 0.75rem; + font-weight: 600; +} + +.discussion-body p { + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + line-height: 1.6; + margin: 0 0 1.25rem 0; +} + +.discussion-meta { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +.tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.tags .tag { + padding: 0.375rem 0.75rem; + background: var(--ifm-color-emphasis-100); + border-radius: 20px; + color: var(--ifm-color-emphasis-700); + font-size: 0.75rem; + font-weight: 500; +} + +.meta-info { + display: flex; + align-items: center; + gap: 1.25rem; + color: var(--ifm-color-emphasis-600); + font-size: 0.875rem; +} + +.meta-info span { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.giscus-wrapper { + margin-top: 3rem; + padding-top: 2rem; + border-top: 1px solid var(--ifm-toc-border-color); +} + +@media (max-width: 768px) { + .discussion-toolbar { + flex-direction: column; + gap: 1rem; + align-items: stretch; + } + + .toolbar-left { + flex-wrap: wrap; + justify-content: center; + } + + .search-filters { + flex-direction: column; + align-items: stretch; + } + + .discussion-item { + flex-direction: column; + gap: 1rem; + } + + .discussion-meta { + flex-direction: column; + align-items: flex-start; + } } /* Dashboard Container */ diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index f4f0c6dc..0233d9d8 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -12,6 +12,25 @@ import Giscus from "@giscus/react"; import { useLocation, useHistory } from "@docusaurus/router"; import "./dashboard.css"; +type DiscussionTab = "discussions" | "trending" | "unanswered"; +type SortOption = "most_popular" | "latest" | "oldest"; +type Category = "all" | "react" | "typescript" | "nodejs" | "python" | "ai_ml"; + +interface Discussion { + id: string; + title: string; + content: string; + author: { + name: string; + avatar: string; + }; + createdAt: string; + likes: number; + comments: number; + tags: string[]; + isPinned?: boolean; +} + interface LeaderboardEntry { rank: number; name: string; @@ -82,12 +101,87 @@ const parseCSVToJSON = (csvText: string): any[] => { return data; }; +const categories: Category[] = [ + "all", + "react", + "typescript", + "nodejs", + "python", + "ai_ml", +]; + const DashboardContent: React.FC = () => { const location = useLocation(); const history = useHistory(); const [activeTab, setActiveTab] = useState< "home" | "discuss" | "leaderboard" | "giveaway" >("home"); + + // Discussion state management + const [activeDiscussionTab, setActiveDiscussionTab] = + useState("discussions"); + const [selectedCategory, setSelectedCategory] = useState("all"); + const [sortBy, setSortBy] = useState("most_popular"); + const [searchQuery, setSearchQuery] = useState(""); + const [discussions, setDiscussions] = useState([ + { + id: "1", + title: "Best practices for React component optimization", + content: + "I've been working on a large React application and noticed some performance issues. What are the most effective ways to optimize React components for better performance? I'm particularly interested in memo, useMemo, and useCallback usage patterns.", + author: { + name: "Sarah Chen", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), + likes: 24, + comments: 8, + tags: ["react", "performance", "frontend"], + isPinned: true, + }, + { + id: "2", + title: "Building scalable microservices with Node.js", + content: + "Looking for advice on architecting microservices using Node.js. What patterns and tools do you recommend?", + author: { + name: "Mike Rodriguez", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), + likes: 31, + comments: 14, + tags: ["nodejs", "microservices", "architecture"], + }, + { + id: "3", + title: "How to use AI/ML in Python for sentiment analysis?", + content: + "I'm new to AI/ML and want to build a sentiment analysis tool in Python. Where should I start? What libraries are recommended?", + author: { + name: "Alex Doe", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), + likes: 15, + comments: 3, + tags: ["python", "ai_ml", "sentiment-analysis"], + }, + { + id: "4", + title: "Getting started with TypeScript in a React project", + content: + "What are the benefits of using TypeScript with React? I'm looking for a simple guide to set it up.", + author: { + name: "Jane Smith", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), + likes: 45, + comments: 0, + tags: ["react", "typescript"], + }, + ]); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); const [leaderboardData, setLeaderboardData] = useState( [] @@ -123,6 +217,89 @@ const DashboardContent: React.FC = () => { } }, [activeTab]); + // Discussion handlers + const handleDiscussionTabChange = (tab: DiscussionTab) => { + setActiveDiscussionTab(tab); + }; + + const handleCategoryChange = (category: Category) => { + setSelectedCategory(category); + }; + + const handleSortChange = (event: React.ChangeEvent) => { + setSortBy(event.target.value as SortOption); + }; + + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchQuery(event.target.value); + }; + + const handleNewDiscussion = () => { + // This could open a modal or navigate to a new discussion form + alert("New discussion feature coming soon!"); + }; + + // Filter discussions based on current state and tab + const getFilteredDiscussions = (discussions: Discussion[]) => { + return discussions + .filter((discussion) => { + // First apply tab filter + switch (activeDiscussionTab) { + case "trending": + return discussion.likes > 20; // Show discussions with more than 20 likes + case "unanswered": + return discussion.comments === 0; + default: + return true; + } + }) + .filter((discussion) => { + // Then apply category filter + if (selectedCategory !== "all") { + return discussion.tags.some( + (tag) => tag.toLowerCase() === selectedCategory + ); + } + return true; + }) + .filter((discussion) => { + // Then apply search filter + if (searchQuery) { + return ( + discussion.title + .toLowerCase() + .includes(searchQuery.toLowerCase()) || + discussion.content.toLowerCase().includes(searchQuery.toLowerCase()) + ); + } + return true; + }) + .sort((a, b) => { + // Pinned discussions first + if (a.isPinned && !b.isPinned) return -1; + if (!a.isPinned && b.isPinned) return 1; + + // Finally sort the results + switch (sortBy) { + case "latest": + return ( + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + case "oldest": + return ( + new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() + ); + default: + return b.likes - a.likes; // most_popular + } + }); + }; + + const filteredDiscussions = React.useMemo( + () => getFilteredDiscussions(discussions), + [discussions, activeDiscussionTab, selectedCategory, searchQuery, sortBy] + ); + // Rate limit timer useEffect(() => { let interval: NodeJS.Timeout; @@ -1265,30 +1442,142 @@ const DashboardContent: React.FC = () => { ) : activeTab === "discuss" ? ( -
-

Community Discussions

-

- Join the conversation, ask questions, and share your thoughts - with the RecodeHive community. -

-
- + +
+

+ Community Discussions +

+

+ Join the conversation, ask questions, and share your thoughts + with the RecodeHive community. +

-
+ +
+
+ + + +
+ +
+ +
+ {categories.map((category) => ( +
handleCategoryChange(category)} + > + {category.charAt(0).toUpperCase() + category.slice(1)} +
+ ))} +
+ +
+
+ + + + +
+
+ +
+
+ +
+ {filteredDiscussions.map((discussion) => ( +
+
+ {`${discussion.author.name}'s +
+
+
+

{discussion.title}

+ {discussion.isPinned && ( + 📌 Pinned + )} +
+
+

{discussion.content}

+
+
+
+ {discussion.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + by {discussion.author.name} + + + {new Date( + discussion.createdAt + ).toLocaleDateString()} + + 👍 {discussion.likes} + 💬 {discussion.comments} +
+
+
+
+ ))} +
+ ) : ( // Giveaway tab content
From e9cb12be105879223163e2abe5513f68ec0b3c88 Mon Sep 17 00:00:00 2001 From: YourGitHubUsername Date: Fri, 15 Aug 2025 11:14:28 +0530 Subject: [PATCH 3/5] improved ui --- src/components/discussions/DiscussionList.tsx | 0 src/pages/dashboard/dashboard.css | 1594 +++++++++++++++-- src/pages/dashboard/index.tsx | 12 +- 3 files changed, 1455 insertions(+), 151 deletions(-) delete mode 100644 src/components/discussions/DiscussionList.tsx diff --git a/src/components/discussions/DiscussionList.tsx b/src/components/discussions/DiscussionList.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css index 0debef0a..9a5bb06d 100644 --- a/src/pages/dashboard/dashboard.css +++ b/src/pages/dashboard/dashboard.css @@ -174,124 +174,316 @@ max-width: 100%; } -/* Discussion Section */ +/* Discussion Section - Enhanced Modern UI */ .discussion-container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; color: var(--ifm-font-color-base); - margin-left: 2rem; + position: relative; +} + +/* Sidebar compatibility */ +.dashboard-main.discuss-view .discussion-container { + padding: 2rem 2rem; +} + +.dashboard-main.sidebar-collapsed.discuss-view .discussion-container { + padding: 2rem 1rem; +} + +/* Animated background particles */ +.discussion-container::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + circle at 20% 50%, + var(--ifm-color-primary-lightest) 0%, + transparent 50% + ), + radial-gradient( + circle at 80% 20%, + var(--ifm-color-secondary-lightest) 0%, + transparent 50% + ), + radial-gradient( + circle at 40% 80%, + var(--ifm-color-primary-lightest) 0%, + transparent 50% + ); + opacity: 0.3; + pointer-events: none; + z-index: -1; } .discussion-header { text-align: center; margin-bottom: 3rem; + position: relative; + z-index: 1; } .discussion-header h1 { - font-size: 3rem; - font-weight: 700; + font-size: 3.5rem; + font-weight: 800; margin-bottom: 1rem; color: var(--ifm-color-emphasis-900); + position: relative; + display: inline-block; +} + +.discussion-header h1::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 2px; + animation: pulse-glow 2s ease-in-out infinite alternate; +} + +@keyframes pulse-glow { + 0% { + box-shadow: 0 0 5px var(--ifm-color-primary); + width: 60px; + } + 100% { + box-shadow: 0 0 20px var(--ifm-color-primary), + 0 0 30px var(--ifm-color-primary-light); + width: 80px; + } } .discussion-header h1 .highlight { - background: linear-gradient(135deg, var(--ifm-color-primary), #e74c3c); + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + #e74c3c, + var(--ifm-color-secondary) + ); + background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + animation: gradient-shift 3s ease-in-out infinite; +} + +@keyframes gradient-shift { + 0%, + 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } } .discussion-header p { - font-size: 1.1rem; + font-size: 1.2rem; color: var(--ifm-color-emphasis-700); - max-width: 600px; + max-width: 700px; margin: 0 auto; + line-height: 1.6; + opacity: 0.9; } +/* Enhanced Toolbar */ .discussion-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; - padding: 0.5rem; - background: var(--ifm-background-surface-color); - border-radius: 12px; - border: 1px solid var(--ifm-toc-border-color); + padding: 1rem 1.5rem; + background: var(--ifm-card-background-color); + border-radius: 20px; + border: 1px solid var(--ifm-color-border); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .discussion-toolbar { + background: rgba(var(--ifm-card-background-color-rgb), 0.8); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +.discussion-toolbar::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); + transition: left 0.5s; +} + +.discussion-toolbar:hover::before { + left: 100%; } .toolbar-left { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.75rem; } +/* Enhanced Tab Buttons */ .tab-btn { - padding: 0.75rem 1.25rem; + padding: 0.875rem 1.5rem; border: none; background: transparent; color: var(--ifm-color-emphasis-700); - font-size: 0.9rem; + font-size: 0.95rem; font-weight: 600; cursor: pointer; - border-radius: 8px; - transition: all 0.2s ease; + border-radius: 12px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + display: flex; + align-items: center; + gap: 0.5rem; + white-space: nowrap; + flex-shrink: 0; +} + +.tab-btn::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--ifm-color-primary); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; } .tab-btn:hover { - background: var(--ifm-menu-color-background-active); + background: var(--ifm-color-primary-lightest); color: var(--ifm-color-primary); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.tab-btn:hover::before { + opacity: 0.1; } .tab-btn.active { background: var(--ifm-color-primary); color: white; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.4); + transform: translateY(-1px); +} + +.tab-btn.active::before { + opacity: 1; +} + +/* Enhanced Sort Dropdown */ +.sort-dropdown { + position: relative; } .sort-dropdown select { - padding: 0.75rem 2.5rem 0.75rem 1.25rem; - border: 1px solid var(--ifm-toc-border-color); - border-radius: 8px; - background: var(--ifm-background-color); - color: var(--ifm-color-emphasis-600); - font-size: 0.9rem; - font-weight: 500; + padding: 0.875rem 3rem 0.875rem 1.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 12px; + background: var(--ifm-card-background-color); + color: var(--ifm-color-emphasis-700); + font-size: 0.95rem; + font-weight: 600; cursor: pointer; appearance: none; - background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right 1rem center; - background-size: 1em; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.sort-dropdown select:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.sort-dropdown select:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest); +} + +.sort-dropdown::after { + content: "▼"; + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--ifm-color-primary); + pointer-events: none; + transition: transform 0.3s ease; +} + +.sort-dropdown:hover::after { + transform: translateY(-50%) scale(1.1); } +/* Enhanced New Discussion Button */ .new-discussion-btn { display: flex; align-items: center; - gap: 0.5rem; - padding: 0.75rem 1.5rem; - background: var(--ifm-color-primary); + gap: 0.75rem; + padding: 0.875rem 2rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); color: white; border: none; - border-radius: 8px; - font-size: 0.9rem; - font-weight: 600; + border-radius: 25px; + font-size: 0.95rem; + font-weight: 700; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 15px rgba(var(--ifm-color-primary-rgb), 0.3); + white-space: nowrap; } .new-discussion-btn:hover { - background: var(--ifm-color-primary-dark); + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(var(--ifm-color-primary-rgb), 0.4); } +/* Enhanced Categories Bar */ .categories-bar { display: flex; gap: 1rem; margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 1px solid var(--ifm-toc-border-color); + padding: 1rem 0; overflow-x: auto; scrollbar-width: none; + position: relative; } .categories-bar::-webkit-scrollbar { @@ -299,20 +491,23 @@ } .category { - padding: 0.5rem 1.25rem; - border-radius: 20px; - background: var(--ifm-background-surface-color); - border: 1px solid var(--ifm-toc-border-color); + padding: 0.75rem 1.5rem; + border-radius: 25px; + background: var(--ifm-card-background-color); + border: 2px solid var(--ifm-color-border); color: var(--ifm-color-emphasis-700); font-size: 0.9rem; - font-weight: 500; + font-weight: 600; cursor: pointer; white-space: nowrap; - transition: all 0.2s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + flex-shrink: 0; } .category:hover { - background: var(--ifm-menu-color-background-active); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border-color: var(--ifm-color-primary); color: var(--ifm-color-primary); } @@ -321,192 +516,1167 @@ background: var(--ifm-color-primary); color: white; border-color: var(--ifm-color-primary); - font-weight: 600; + font-weight: 700; + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.3); } +/* Enhanced Search Filters */ .search-filters { display: flex; - gap: 1rem; - margin-bottom: 2rem; + gap: 1.5rem; + margin-bottom: 2.5rem; align-items: center; } .search-bar { flex: 1; position: relative; + min-width: 0; } .search-bar input { width: 100%; - padding: 0.75rem 1.25rem 0.75rem 3rem; - border: 1px solid var(--ifm-toc-border-color); - border-radius: 8px; - background: var(--ifm-background-surface-color); + padding: 1rem 1.5rem 1rem 3.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 15px; + background: var(--ifm-card-background-color); color: var(--ifm-font-color-base); - font-size: 0.9rem; - transition: all 0.2s ease; + font-size: 1rem; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .search-bar input:focus { outline: none; border-color: var(--ifm-color-primary); - box-shadow: 0 0 0 2px var(--ifm-color-primary-lightest); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest), + 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); } .searchbar-icon { position: absolute; top: 50%; - left: 1rem; + left: 1.25rem; transform: translateY(-50%); - color: var(--ifm-color-emphasis-500); + color: var(--ifm-color-primary); + font-size: 1.1rem; + transition: all 0.3s ease; + z-index: 1; } -.discussions-list { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; +.searchbar-icon::before { + content: "🔍"; + font-size: 1rem; } -.discussion-item { - display: flex; - gap: 1.5rem; - padding: 1.5rem; - background: var(--ifm-card-background-color); - border-radius: 12px; - border: 1px solid var(--ifm-toc-border-color); - transition: all 0.2s ease; +/* Responsive Design */ +@media (max-width: 1200px) { + .dashboard-main.discuss-view .discussion-container { + padding: 2rem 1.5rem; + } +} + +@media (max-width: 992px) { + .dashboard-main { + margin-left: 0; + max-width: 100%; + padding: 1rem; + } + + .dashboard-sidebar { + transform: translateX(-100%); + z-index: 1000; + } + + .dashboard-sidebar.show { + transform: translateX(0); + } + + .discussion-container { + padding: 1rem; + } + + .discussion-header h1 { + font-size: 2.5rem; + } +} + +@media (max-width: 768px) { + .discussion-header h1 { + font-size: 2rem; + } + + .discussion-header p { + font-size: 1rem; + } + + .discussion-toolbar { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .toolbar-left { + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; + } + + .tab-btn { + padding: 0.75rem 1rem; + font-size: 0.85rem; + } + + .new-discussion-btn { + width: 100%; + justify-content: center; + padding: 1rem; + } + + .categories-bar { + padding: 0.5rem 0; + gap: 0.75rem; + } + + .category { + padding: 0.6rem 1rem; + font-size: 0.85rem; + } + + .search-filters { + flex-direction: column; + gap: 1rem; + } + + .search-bar input { + padding: 0.875rem 1rem 0.875rem 3rem; + font-size: 0.9rem; + } + + .sort-dropdown select { + width: 100%; + padding: 0.875rem 2.5rem 0.875rem 1rem; + } +} + +@media (max-width: 480px) { + .discussion-container { + padding: 0.5rem; + } + + .discussion-header { + margin-bottom: 2rem; + } + + .discussion-header h1 { + font-size: 1.75rem; + } + + .discussion-header p { + font-size: 0.9rem; + } + + .discussion-toolbar { + padding: 0.75rem; + } + + .tab-btn { + padding: 0.6rem 0.8rem; + font-size: 0.8rem; + } + + .category { + padding: 0.5rem 0.8rem; + font-size: 0.8rem; + } + + .search-bar input { + padding: 0.75rem 0.875rem 0.75rem 2.75rem; + font-size: 0.85rem; + } + + .searchbar-icon { + left: 1rem; + } + + .sort-dropdown select { + padding: 0.75rem 2rem 0.75rem 0.875rem; + font-size: 0.85rem; + } +} + +/* Mobile Menu Button */ +.mobile-menu-btn { + display: none; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 1001; + background: var(--ifm-color-primary); + color: white; + border: none; + border-radius: 8px; + width: 44px; + height: 44px; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; +} + +.mobile-menu-btn:hover { + background: var(--ifm-color-primary-dark); + transform: scale(1.05); +} + +.mobile-menu-btn::before { + content: "☰"; + font-size: 1.2rem; +} + +.mobile-menu-btn.open::before { + content: "✕"; +} + +/* Mobile responsive styles */ +@media (max-width: 992px) { + .mobile-menu-btn { + display: flex; + } + + .dashboard-sidebar { + transform: translateX(-100%); + z-index: 1000; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); + } + + .dashboard-sidebar.show { + transform: translateX(0); + } + + .dashboard-layout::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + } + + .dashboard-layout.sidebar-open::before { + opacity: 1; + visibility: visible; + } + + .discussion-container { + padding-top: 4rem; + } +} + +/* Sidebar collapsed states */ +@media (min-width: 993px) { + .dashboard-main.sidebar-collapsed.discuss-view .discussion-container { + padding: 2rem 1.5rem; + } +} + +/* Mobile sidebar overlay */ +@media (max-width: 992px) { + .dashboard-layout::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + } + + .dashboard-layout.sidebar-open::before { + opacity: 1; + visibility: visible; + } +} + +/* Enhanced New Discussion Button */ +.new-discussion-btn { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 2rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); + color: white; + border: none; + border-radius: 25px; + font-size: 0.95rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 15px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.new-discussion-btn::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s; +} + +.new-discussion-btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(var(--ifm-color-primary-rgb), 0.4); +} + +.new-discussion-btn:hover::before { + left: 100%; +} + +.new-discussion-btn:active { + transform: translateY(-1px); +} + +/* Enhanced Categories Bar */ +.categories-bar { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + padding: 1rem 0; + overflow-x: auto; + scrollbar-width: none; + position: relative; +} + +.categories-bar::-webkit-scrollbar { + display: none; +} + +.categories-bar::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 1px; + opacity: 0.3; +} + +.category { + padding: 0.75rem 1.5rem; + border-radius: 25px; + background: var(--ifm-card-background-color); + border: 2px solid var(--ifm-color-border); + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.category::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--ifm-color-primary); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.category:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); +} + +.category:hover::before { + opacity: 0.1; +} + +.category.active { + background: var(--ifm-color-primary); + color: white; + border-color: var(--ifm-color-primary); + font-weight: 700; + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.category.active::before { + opacity: 1; +} + +/* Enhanced Search Filters */ +.search-filters { + display: flex; + gap: 1.5rem; + margin-bottom: 2.5rem; + align-items: center; +} + +.search-bar { + flex: 1; + position: relative; +} + +.search-bar input { + width: 100%; + padding: 1rem 1.5rem 1rem 3.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 15px; + background: var(--ifm-card-background-color); + color: var(--ifm-font-color-base); + font-size: 1rem; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.search-bar input:hover { + border-color: var(--ifm-color-primary-light); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.search-bar input:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest), + 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.search-bar input::placeholder { + color: var(--ifm-color-emphasis-500); + font-style: italic; +} + +.searchbar-icon { + position: absolute; + top: 50%; + left: 1.25rem; + transform: translateY(-50%); + color: var(--ifm-color-primary); + font-size: 1.1rem; + transition: all 0.3s ease; + z-index: 1; +} + +.searchbar-icon::before { + content: "🔍"; + font-size: 1rem; +} + +.search-bar:hover .searchbar-icon { + color: var(--ifm-color-primary-dark); + transform: translateY(-50%) scale(1.1) lateY(-50%) scale(1.1); +} + +/* Enhanced New Discussion Button */ +.new-discussion-btn { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 2rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); + color: white; + border: none; + border-radius: 25px; + font-size: 0.95rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 15px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.new-discussion-btn::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s; +} + +.new-discussion-btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(var(--ifm-color-primary-rgb), 0.4); +} + +.new-discussion-btn:hover::before { + left: 100%; +} + +.new-discussion-btn:active { + transform: translateY(-1px); +} + +/* Enhanced Categories Bar */ +.categories-bar { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + padding: 1rem 0; + overflow-x: auto; + scrollbar-width: none; + position: relative; +} + +.categories-bar::-webkit-scrollbar { + display: none; +} + +.categories-bar::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 1px; + opacity: 0.3; +} + +.category { + padding: 0.75rem 1.5rem; + border-radius: 25px; + background: var(--ifm-card-background-color); + border: 2px solid var(--ifm-color-border); + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.category::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--ifm-color-primary); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.category:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); +} + +.category:hover::before { + opacity: 0.1; +} + +.category.active { + background: var(--ifm-color-primary); + color: white; + border-color: var(--ifm-color-primary); + font-weight: 700; + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.category.active::before { + opacity: 1; +} + +/* Enhanced Search Filters */ +.search-filters { + display: flex; + gap: 1.5rem; + margin-bottom: 2.5rem; + align-items: center; +} + +.search-bar { + flex: 1; + position: relative; +} + +.search-bar input { + width: 100%; + padding: 1rem 1.5rem 1rem 3.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 15px; + background: var(--ifm-card-background-color); + color: var(--ifm-font-color-base); + font-size: 1rem; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.search-bar input:hover { + border-color: var(--ifm-color-primary-light); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.search-bar input:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest), + 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.search-bar input::placeholder { + color: var(--ifm-color-emphasis-500); + font-style: italic; +} + +.searchbar-icon { + position: absolute; + top: 50%; + left: 1.25rem; + transform: translateY(-50%); + color: var(--ifm-color-primary); + font-size: 1.1rem; + transition: all 0.3s ease; +} + +.search-bar:hover .searchbar-icon { + color: var(--ifm-color-primary-dark); + transform: translateY(-50%) scale(1.1); +} + +/* Enhanced Discussions List */ +.discussions-list { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; +} + +/* Enhanced Discussion Items */ +.discussion-item { + display: flex; + flex-direction: column; + padding: 1.5rem; + background: #ffffff; + border-radius: 16px; + border: 1px solid #e2e8f0; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + cursor: pointer; +} + +[data-theme="dark"] .discussion-item { + background: #1e293b; + border-color: #334155; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), + 0 2px 4px -1px rgba(0, 0, 0, 0.2); +} + +[data-theme="dark"] .discussion-item { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); +} + +.discussion-item::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + transform: scaleX(0); + transition: transform 0.3s ease; +} + +.discussion-item:hover { + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); + border-color: #10b981; +} + +[data-theme="dark"] .discussion-item:hover { + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), + 0 10px 10px -5px rgba(0, 0, 0, 0.2); + border-color: #10b981; +} + +.discussion-item:hover::before { + transform: scaleX(1); +} + +/* Enhanced Avatar */ +.discussion-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + position: relative; + border: 2px solid #e2e8f0; + transition: all 0.2s ease; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); +} + +[data-theme="dark"] .discussion-avatar { + border-color: #475569; +} + +.discussion-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.discussion-avatar.verified::after { + content: "✓"; + position: absolute; + bottom: -2px; + right: -2px; + width: 16px; + height: 16px; + background: #2563eb; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: bold; + border: 2px solid #ffffff; +} + +[data-theme="dark"] .discussion-avatar.verified::after { + border-color: #1e293b; +} + +.discussion-content { + flex: 1; + display: flex; + flex-direction: column; +} + +[data-theme="dark"] .discussion-content { + color: #f1f5f9; +} + +.discussion-content { + flex: 1; + display: flex; + flex-direction: column; +} + +.discussion-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.discussion-pinned-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: #059669; + color: white; + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.875rem; + font-weight: 600; +} + +.discussion-pinned-badge::before { + content: "📌"; +} + +.discussion-title { + font-size: 1.5rem; + font-weight: 700; + margin: 0 0 1rem 0; + color: #1e293b; + line-height: 1.375; + transition: color 0.2s ease; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.discussion-item:hover .discussion-title { + color: #2563eb; +} + +[data-theme="dark"] .discussion-title { + color: #f1f5f9; +} + +[data-theme="dark"] .discussion-item:hover .discussion-title { + color: #60a5fa; +} + +/* Enhanced Pinned Badge */ +.pinned-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); + color: white; + border-radius: 25px; + font-size: 0.8rem; + font-weight: 700; + box-shadow: 0 2px 8px rgba(var(--ifm-color-primary-rgb), 0.3); + animation: glow-pulse 2s ease-in-out infinite alternate; +} + +@keyframes glow-pulse { + 0% { + box-shadow: 0 2px 8px rgba(var(--ifm-color-primary-rgb), 0.3); + } + 100% { + box-shadow: 0 4px 16px rgba(var(--ifm-color-primary-rgb), 0.5); + } +} + +.discussion-body p { + color: #475569; + font-size: 1rem; + line-height: 1.625; + margin: 0 0 1.5rem 0; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } -.discussion-item:hover { - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); - border-color: var(--ifm-color-primary); +[data-theme="dark"] .discussion-body p { + color: #cbd5e1; } -.discussion-item.pinned { - background: var(--ifm-color-primary-lightest); - border-left: 4px solid var(--ifm-color-primary); +.discussion-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid #e2e8f0; } -.discussion-avatar { - width: 48px; - height: 48px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; +[data-theme="dark"] .discussion-meta { + border-top-color: #334155; } -.discussion-avatar img { - width: 100%; - height: 100%; - object-fit: cover; +.discussion-author { + color: #64748b; + font-size: 0.875rem; } -.discussion-content { - flex: 1; +[data-theme="dark"] .discussion-author { + color: #94a3b8; } -.discussion-header-content { +.discussion-stats { display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 0.75rem; + gap: 1rem; + align-items: center; + color: #64748b; + font-size: 0.875rem; } -.discussion-header-content h3 { - font-size: 1.2rem; - font-weight: 600; - margin: 0; - color: var(--ifm-heading-color); +[data-theme="dark"] .discussion-stats { + color: #94a3b8; } -.pinned-badge { - display: inline-flex; +.discussion-stats span { + display: flex; align-items: center; - gap: 0.375rem; - padding: 0.375rem 0.75rem; - background: var(--ifm-color-primary-light); - color: var(--ifm-color-primary-darkest); - border-radius: 20px; - font-size: 0.75rem; - font-weight: 600; -} - -.discussion-body p { - color: var(--ifm-color-emphasis-700); - font-size: 0.9rem; - line-height: 1.6; - margin: 0 0 1.25rem 0; + gap: 0.25rem; } +/* Enhanced Meta Section */ .discussion-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; - gap: 1rem; + gap: 1.5rem; + padding-top: 1rem; + border-top: 1px solid var(--ifm-color-border); +} + +/* Enhanced Tags */ +.tags { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; } .tags { display: flex; gap: 0.5rem; flex-wrap: wrap; + margin-bottom: 1rem; } .tags .tag { padding: 0.375rem 0.75rem; - background: var(--ifm-color-emphasis-100); - border-radius: 20px; - color: var(--ifm-color-emphasis-700); + background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); + border-radius: 9999px; + color: #1e40af; font-size: 0.75rem; font-weight: 500; + transition: all 0.2s ease; + border: 1px solid #bfdbfe; + text-decoration: none; +} + +[data-theme="dark"] .tags .tag { + background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%); + color: #dbeafe; + border-color: #3b82f6; +} + +.tags .tag:hover { + background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); + color: white; + border-color: #2563eb; +} + +.tags .tag::before { + content: "#"; + opacity: 0.8; + margin-right: 0.125rem; } +/* Enhanced Meta Info */ .meta-info { display: flex; align-items: center; - gap: 1.25rem; + gap: 1.5rem; color: var(--ifm-color-emphasis-600); - font-size: 0.875rem; + font-size: 0.9rem; + font-weight: 500; } .meta-info span { display: flex; align-items: center; - gap: 0.375rem; + gap: 0.5rem; + padding: 0.25rem 0.75rem; + border-radius: 15px; + background: var(--ifm-color-emphasis-100); + transition: all 0.3s ease; +} + +.meta-info span:hover { + background: var(--ifm-color-primary-lightest); + color: var(--ifm-color-primary); + transform: translateY(-1px); } +/* Enhanced Giscus Wrapper */ .giscus-wrapper { - margin-top: 3rem; - padding-top: 2rem; - border-top: 1px solid var(--ifm-toc-border-color); + margin-top: 4rem; + padding-top: 3rem; + border-top: 2px solid var(--ifm-color-border); + position: relative; } +.giscus-wrapper::before { + content: ""; + position: absolute; + top: -1px; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 1px; +} + +/* Responsive Design */ @media (max-width: 768px) { + .discussion-container { + padding: 1rem; + } + + .discussion-header h1 { + font-size: 2.5rem; + } + .discussion-toolbar { flex-direction: column; - gap: 1rem; + gap: 1.5rem; align-items: stretch; + padding: 1.5rem; } .toolbar-left { flex-wrap: wrap; justify-content: center; + gap: 0.5rem; + } + + .tab-btn { + padding: 0.75rem 1rem; + font-size: 0.85rem; + } + + .new-discussion-btn { + justify-content: center; + padding: 1rem 1.5rem; + } + + .categories-bar { + gap: 0.75rem; + padding: 0.75rem 0; + } + + .category { + padding: 0.6rem 1rem; + font-size: 0.85rem; } .search-filters { flex-direction: column; align-items: stretch; + gap: 1rem; + } + + .search-bar input { + padding: 0.875rem 1.25rem 0.875rem 3rem; + } + + .discussions-list { + gap: 1.5rem; } .discussion-item { flex-direction: column; gap: 1rem; + padding: 1.5rem; + } + + .discussion-avatar { + width: 48px; + height: 48px; + align-self: flex-start; } .discussion-meta { flex-direction: column; align-items: flex-start; + gap: 1rem; + } + + .meta-info { + gap: 1rem; + flex-wrap: wrap; + } +} + +@media (max-width: 480px) { + .discussion-header h1 { + font-size: 2rem; + } + + .discussion-header p { + font-size: 1rem; + } + + .discussion-item { + padding: 1rem; + } + + .discussion-header-content h3 { + font-size: 1.1rem; + } + + .tab-btn { + padding: 0.6rem 0.8rem; + font-size: 0.8rem; + } + + .category { + padding: 0.5rem 0.8rem; + font-size: 0.8rem; } } @@ -564,32 +1734,109 @@ } .dashboard-stat-card { - background: var(--ifm-color-background); - border-radius: 1.5rem; - padding: 2rem; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + background: linear-gradient( + 135deg, + var(--ifm-card-background-color) 0%, + rgba(var(--ifm-color-primary-rgb), 0.05) 100% + ); + border-radius: 2rem; + padding: 2.5rem; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid var(--ifm-color-border); - transition: all 0.3s ease; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; - gap: 1.5rem; + gap: 2rem; + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +[data-theme="dark"] .dashboard-stat-card { + background: linear-gradient( + 135deg, + rgba(var(--ifm-card-background-color-rgb), 0.95) 0%, + rgba(var(--ifm-color-primary-rgb), 0.1) 100% + ); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.dashboard-stat-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--ifm-color-primary-rgb), 0.1) 0%, + transparent 50%, + rgba(var(--ifm-color-secondary-rgb), 0.05) 100% + ); + opacity: 0; + transition: opacity 0.4s ease; + pointer-events: none; } .dashboard-stat-card:hover { - transform: translateY(-2px); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); + transform: translateY(-8px) scale(1.02); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08); + border-color: var(--ifm-color-primary-light); +} + +[data-theme="dark"] .dashboard-stat-card:hover { + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); +} + +.dashboard-stat-card:hover::before { + opacity: 1; } .dashboard-stat-icon { - font-size: 3rem; - width: 4rem; - height: 4rem; + font-size: 3.5rem; + width: 5rem; + height: 5rem; display: flex; align-items: center; justify-content: center; - background: var(--ifm-color-primary-lightest); - border-radius: 1rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary) 0%, + var(--ifm-color-primary-dark) 100% + ); + border-radius: 1.5rem; flex-shrink: 0; + position: relative; + overflow: hidden; + box-shadow: 0 8px 24px rgba(var(--ifm-color-primary-rgb), 0.3); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.dashboard-stat-icon::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.3) 50%, + transparent 70% + ); + transform: rotate(-45deg); + transition: transform 0.6s ease; +} + +.dashboard-stat-card:hover .dashboard-stat-icon { + transform: scale(1.1) rotate(5deg); + box-shadow: 0 12px 32px rgba(var(--ifm-color-primary-rgb), 0.4); +} + +.dashboard-stat-card:hover .dashboard-stat-icon::before { + transform: rotate(-45deg) translate(100%, 100%); } .dashboard-stat-content { @@ -597,18 +1844,59 @@ } .dashboard-stat-title { - font-size: 1.1rem; - font-weight: 600; - color: var(--ifm-color-emphasis-800); - margin-bottom: 0.5rem; + font-size: 1.2rem; + font-weight: 700; + color: var(--ifm-color-emphasis-900); + margin-bottom: 0.75rem; + transition: all 0.3s ease; + position: relative; } -.dashboard-stat-value { - font-size: 2.5rem; - font-weight: 700; +.dashboard-stat-title::after { + content: ""; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 1px; +} + +.dashboard-stat-card:hover .dashboard-stat-title { color: var(--ifm-color-primary); + transform: translateX(4px); +} + +.dashboard-stat-card:hover .dashboard-stat-title::after { + width: 100%; +} + +.dashboard-stat-value { + font-size: 3rem; + font-weight: 800; + background: linear-gradient( + 135deg, + var(--ifm-color-primary) 0%, + var(--ifm-color-primary-dark) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; margin-bottom: 0.5rem; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + position: relative; +} + +.dashboard-stat-card:hover .dashboard-stat-value { + transform: scale(1.05); + filter: drop-shadow(0 0 10px rgba(var(--ifm-color-primary-rgb), 0.3)); } .dashboard-slot-counter { @@ -618,10 +1906,18 @@ } .dashboard-stat-description { - font-size: 0.9rem; - color: var(--ifm-color-emphasis-600); + font-size: 0.95rem; + color: var(--ifm-color-emphasis-700); margin: 0; - line-height: 1.4; + line-height: 1.5; + transition: all 0.3s ease; + opacity: 0.9; +} + +.dashboard-stat-card:hover .dashboard-stat-description { + color: var(--ifm-color-emphasis-800); + opacity: 1; + transform: translateY(-2px); } .loading-spinner { diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 0233d9d8..a6eeb417 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -183,6 +183,7 @@ const DashboardContent: React.FC = () => { }, ]); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); + const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [leaderboardData, setLeaderboardData] = useState( [] ); @@ -692,6 +693,7 @@ const DashboardContent: React.FC = () => { tab: "home" | "discuss" | "leaderboard" | "giveaway" ) => { setActiveTab(tab); + setIsMobileSidebarOpen(false); // Close mobile sidebar if (tab === "discuss") { history.push("#discuss"); window.scrollTo(0, 0); @@ -981,12 +983,18 @@ const DashboardContent: React.FC = () => { RecodeHive | Dashboard -
+
+ {/* Mobile Menu Button */} + +
+
    +
  • handleTabChange("home")} + > + + + + Home +
    • +
  • handleTabChange("discuss")} + > + + + + Discuss +
    • +
  • handleTabChange("leaderboard")} + > + + + + Leaderboard +
    • +
  • + + + + Giveaway +
    • +
+
+ +
+ + +
+
+
+

🎉 RecodeHive Giveaway

+

Participate now and win exclusive swag, resources, and more!

+ +
+ {['days', 'hours', 'minutes', 'seconds'].map((unit) => ( +
+
{timeLeft[unit as keyof typeof timeLeft]}
+
{unit}
+
+ ))} +
-
-
-

🎉 RecodeHive Giveaway

-

Participate now and win exclusive swag, resources, and more!

- -
- {['days', 'hours', 'minutes', 'seconds'].map((unit) => ( -
-
{timeLeft[unit as keyof typeof timeLeft]}
-
{unit}
+
+

🏆 Leaderboard

+ + + + + + + + + + + + + + + + + + + + + + + + + +
RankUsernamePoints
1OpenSourcePro1200
2CodeWizard950
3DevChampion875
- ))} -
-
-

🏆 Leaderboard

- - - - - - - - - - - - - - - - - - - - - - - - - -
RankUsernamePoints
1OpenSourcePro1200
2CodeWizard950
3DevChampion875
+

+ Winners will be announced after the countdown ends. Stay active on the dashboard to climb up the leaderboard! +

+
- -

- Winners will be announced after the countdown ends. Stay active on the dashboard to climb up the leaderboard! -

-
+
); From fb43d5033781cf6c4f5b4b332653e8eaa6633af2 Mon Sep 17 00:00:00 2001 From: YourGitHubUsername Date: Fri, 15 Aug 2025 12:34:44 +0530 Subject: [PATCH 5/5] implemented sidebar --- docs/python/conditional-statements-python.md | 170 +++++ docs/python/python-array.md | 233 +++++++ docs/sql/SQL-basics/grouping-data.md | 117 ++++ src/css/custom.css | 125 +++- src/pages/interview-prep/index.tsx | 676 +++++++++++++++++-- 5 files changed, 1221 insertions(+), 100 deletions(-) create mode 100644 docs/python/conditional-statements-python.md create mode 100644 docs/python/python-array.md create mode 100644 docs/sql/SQL-basics/grouping-data.md diff --git a/docs/python/conditional-statements-python.md b/docs/python/conditional-statements-python.md new file mode 100644 index 00000000..191a4065 --- /dev/null +++ b/docs/python/conditional-statements-python.md @@ -0,0 +1,170 @@ +--- +id: python-conditional-statements +title: Conditional Statements in Python +sidebar_label: Conditional Statements in Python +sidebar_position: 9 +tags: + [ + Python, + Conditional Statements, + if else, + elif, + Control Flow, + Python Syntax + ] + +--- + +# Conditional Statements in Python + +Conditional statements in Python allow you to make decisions in your code. They control the flow of execution depending on whether a given condition is **True** or **False**. + +--- + +## The `if` Statement + +The simplest conditional is the `if` statement. + +**Syntax:** + +```python +if condition: + # block of code +``` + +**Example:** + +```python +x = 10 +if x > 5: + print("x is greater than 5") +``` + +--- + +## The `if...else` Statement + +The `else` block runs when the `if` condition is **False**. + +```python +x = 3 +if x > 5: + print("x is greater than 5") +else: + print("x is less than or equal to 5") +``` + +**Output:** +``` +x is less than or equal to 5 +``` + +--- + +## The `if...elif...else` Statement + +`elif` stands for "else if". It lets you check multiple conditions. + +```python +score = 85 + +if score >= 90: + print("Grade A") +elif score >= 75: + print("Grade B") +elif score >= 60: + print("Grade C") +else: + print("Grade D") +``` + +--- + +## Nested `if` Statements + +You can put an `if` statement inside another `if` statement. + +```python +x = 15 +if x > 10: + if x < 20: + print("x is between 10 and 20") +``` + +--- + +## Conditional Expressions (Ternary Operator) + +Python has a shorter way to write `if...else` using **ternary expressions**. + +```python +age = 18 +status = "Adult" if age >= 18 else "Minor" +print(status) +``` + +**Output:** +``` +Adult +``` + +--- + +## Logical Operators in Conditions + +You can combine multiple conditions using `and`, `or`, and `not`. + +```python +x = 7 +if x > 5 and x < 10: + print("x is between 5 and 10") + +if x < 5 or x > 10: + print("x is outside 5 to 10") + +if not x == 8: + print("x is not 8") +``` + +--- + +## Comparing Multiple Values + +You can check if a value exists in a sequence using `in`. + +```python +fruits = ["apple", "banana", "cherry"] +if "apple" in fruits: + print("Apple is in the list") +``` + +--- + +## Indentation Rules + +In Python, indentation is important for defining code blocks. + +```python +if True: + print("This is indented correctly") + print("Still inside if block") +print("Outside if block") +``` + +--- + +## Summary Table + +| Statement Type | Description | +|------------------------|------------------------------------------| +| `if` | Executes a block if condition is `True` | +| `if...else` | Executes `else` block if condition is `False` | +| `if...elif...else` | Checks multiple conditions | +| Nested `if` | `if` inside another `if` | +| Ternary Expression | Short form of `if...else` | + +--- + +## Conclusion + +Conditional statements are essential for decision-making in programs. Mastering `if`, `elif`, and `else` allows you to control your program's logic effectively. diff --git a/docs/python/python-array.md b/docs/python/python-array.md new file mode 100644 index 00000000..cdef71b6 --- /dev/null +++ b/docs/python/python-array.md @@ -0,0 +1,233 @@ +--- +id: python-array +title: Array in Python +sidebar_label: Array in Python #displays in sidebar +sidebar_position: 9 +tags: + [ + Python, + Array in Python, + Introduction of python, + Python Syntax, + Variables, + Operators, + Type Casting, + String + ] + +--- + +# Python Arrays + +An **Array** in Python is a data structure that stores multiple elements of the **same data type** in contiguous memory locations. +Arrays are **ordered**, **mutable**, and **type-restricted**, making them more memory-efficient than lists for large numeric data. + +In Python, arrays are provided by the built-in **`array`** module, which must be imported before use. + +--- + +## Creating an Array + +You create an array using the `array()` constructor from the `array` module. + +```python +import array + +# Empty array of integers +empty_array = array.array('i', []) + +# Array of Integers +numbers = array.array('i', [1, 2, 3, 4, 5]) + +# Array of Floats +floats = array.array('f', [1.1, 2.2, 3.3]) + +print(numbers) # array('i', [1, 2, 3, 4, 5]) +``` + +--- + +## Type Codes + +Arrays in Python require a **type code** to specify the element type: + +| Type Code | C Type | Python Type | Size (bytes) | +| --------- | --------------- | ----------- | ------------ | +| `'i'` | signed int | int | 2 or 4 | +| `'I'` | unsigned int | int | 2 or 4 | +| `'f'` | float | float | 4 | +| `'d'` | double | float | 8 | +| `'b'` | signed char | int | 1 | +| `'B'` | unsigned char | int | 1 | +| `'u'` | Py_UNICODE | Unicode | 2 | + +--- + +## Indexing + +Just like lists, arrays use **zero-based indexing**. + +```python +nums = array.array('i', [10, 20, 30, 40, 50]) + +print(nums[0]) # 10 +print(nums[2]) # 30 +print(nums[-1]) # 50 +``` + +--- + +## Slicing + +You can slice arrays to get sub-arrays. + +```python +print(nums[1:4]) # array('i', [20, 30, 40]) +print(nums[:3]) # array('i', [10, 20, 30]) +print(nums[::2]) # array('i', [10, 30, 50]) +``` + +**Syntax:** + +``` +array[start:stop:step] +``` + +--- + +## Modifying Elements + +Arrays are **mutable**, so you can change elements: + +```python +nums[1] = 99 +print(nums) # array('i', [10, 99, 30, 40, 50]) +``` + +--- + +## Array Methods + +Python's `array` module provides several useful methods: + +| Method | Description | +| ------------------ | ----------------------------------------------------- | +| `append(x)` | Adds an element to the end | +| `insert(i, x)` | Inserts an element at index `i` | +| `extend(iterable)` | Adds elements from another iterable | +| `remove(x)` | Removes the first occurrence of the item | +| `pop([i])` | Removes and returns the item at index `i` | +| `index(x)` | Returns the index of the first occurrence of the item | +| `count(x)` | Counts how many times the item appears | +| `reverse()` | Reverses the array | +| `buffer_info()` | Returns a tuple (memory address, length) | +| `tobytes()` | Converts the array to a bytes object | +| `frombytes(b)` | Appends items from a bytes object | + +--- + +### Examples + +#### append() + +```python +nums = array.array('i', [1, 2, 3]) +nums.append(4) +print(nums) # array('i', [1, 2, 3, 4]) +``` + +#### insert() + +```python +nums.insert(1, 100) +print(nums) # array('i', [1, 100, 2, 3, 4]) +``` + +#### extend() + +```python +nums.extend([5, 6]) +print(nums) # array('i', [1, 100, 2, 3, 4, 5, 6]) +``` + +#### remove() and pop() + +```python +nums.remove(100) +print(nums) # array('i', [1, 2, 3, 4, 5, 6]) + +nums.pop() # Removes last element +print(nums) # array('i', [1, 2, 3, 4, 5]) + +nums.pop(2) # Removes index 2 +print(nums) # array('i', [1, 2, 4, 5]) +``` + +--- + +## Iterating Through an Array + +**Using a for loop:** + +```python +for num in nums: + print(num) +``` + +**Using indices:** + +```python +for i in range(len(nums)): + print(i, nums[i]) +``` + +--- + +## Membership Test + +Check if an element exists in an array: + +```python +print(10 in nums) # True or False +print(100 not in nums) # True or False +``` + +--- + +## Array from List + +```python +list_data = [1, 2, 3, 4] +arr = array.array('i', list_data) +print(arr) +``` + +--- + +## Copying Arrays + +Assigning directly creates a reference: + +```python +a = array.array('i', [1, 2, 3]) +b = a +b.append(4) +print(a) # array('i', [1, 2, 3, 4]) +``` + +To make an independent copy: + +```python +c = array.array(a.typecode, a) +c.append(5) + +print(a) # array('i', [1, 2, 3, 4]) +print(c) # array('i', [1, 2, 3, 4, 5]) +``` + +--- + +## Conclusion + +Python Arrays are useful when you need to store large amounts of **numeric data** of the same type efficiently. +They provide faster performance and smaller memory footprint compared to lists for numerical operations. diff --git a/docs/sql/SQL-basics/grouping-data.md b/docs/sql/SQL-basics/grouping-data.md new file mode 100644 index 00000000..5b27466d --- /dev/null +++ b/docs/sql/SQL-basics/grouping-data.md @@ -0,0 +1,117 @@ +# Grouping Data in SQL + +When you work with a lot of data, you often want to **combine rows that have the same values** in certain columns and calculate something for each group. +In SQL, this is done with the **`GROUP BY`** clause. + + + +## Why Use GROUP BY? + +Imagine you have a `sales` table: + +| id | product | category | quantity | price | +|----|-----------|-----------|----------|-------| +| 1 | Apple | Fruit | 10 | 2.5 | +| 2 | Orange | Fruit | 5 | 3.0 | +| 3 | Carrot | Vegetable | 7 | 1.5 | +| 4 | Apple | Fruit | 8 | 2.5 | + +If you want **total quantity sold for each category**, you can group the rows by `category`. + + + +## GROUP BY Syntax + +```sql +SELECT column1, column2, ..., aggregate_function(column) +FROM table_name +GROUP BY column1, column2, ...; +```` + +* **`aggregate_function`**: Functions that calculate a value for a group, such as: + + * `COUNT()` → Counts rows + * `SUM()` → Adds values + * `AVG()` → Calculates average + * `MIN()` → Finds smallest value + * `MAX()` → Finds largest value + + +## Example: GROUP BY with SUM + +```sql +SELECT category, SUM(quantity) AS total_quantity +FROM sales +GROUP BY category; +``` + +**Result:** + +| category | total\_quantity | +| --------- | --------------- | +| Fruit | 23 | +| Vegetable | 7 | + +**How it works:** + +1. SQL looks at the `category` column. +2. Rows with the same category are grouped together. +3. The `SUM(quantity)` is calculated for each group. + + + +## GROUP BY with Multiple Columns + +You can group by **more than one column**. + +```sql +SELECT category, product, SUM(quantity) AS total_quantity +FROM sales +GROUP BY category, product; +``` + +Now each unique **(category, product)** pair is its own group. + + + +## Filtering Groups with HAVING + +`WHERE` filters **rows before grouping**. +`HAVING` filters **groups after grouping**. + +Example: Show only categories where total quantity > 10. + +```sql +SELECT category, SUM(quantity) AS total_quantity +FROM sales +GROUP BY category +HAVING SUM(quantity) > 10; +``` + +**Result:** + +| category | total\_quantity | +| -------- | --------------- | +| Fruit | 23 | + + + +## Difference Between WHERE and HAVING + +| Clause | Filters On | Works With Aggregates? | +| ------ | --------------- | ---------------------- | +| WHERE | Individual rows | ❌ (no aggregates) | +| HAVING | Grouped results | ✅ (with aggregates) | + + + +## Common Aggregate Functions + +| Function | Description | Example | +| ----------- | ----------------- | --------------- | +| COUNT(\*) | Counts all rows | `COUNT(*)` | +| SUM(column) | Adds all values | `SUM(quantity)` | +| AVG(column) | Average of values | `AVG(price)` | +| MIN(column) | Minimum value | `MIN(price)` | +| MAX(column) | Maximum value | `MAX(price)` | + diff --git a/src/css/custom.css b/src/css/custom.css index ea0da2fc..5d1e02ee 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1563,9 +1563,79 @@ html { border-color: #ef4444 !important; } - [data-theme="dark"] .star-border-yellow { - border-color: #eab308 !important; + /* Fix: Remove extra box/space above dropdown nav items in sidebar */ + .navbar-sidebar__item, + .navbar-sidebar__link, + .navbar-sidebar__brand { + margin-top: 0 !important; + padding-top: 0 !important; + border-top: none !important; + box-shadow: none !important; } + .navbar-sidebar__item:first-child, + .navbar-sidebar__link:first-child { + margin-top: 0 !important; + padding-top: 0 !important; + border-top: none !important; + box-shadow: none !important; + } + /* Remove any unwanted hr or divider above dropdowns */ + .navbar-sidebar hr, + .navbar-sidebar__item hr { + display: none !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; + } + /* Remove grid gap above dropdowns */ + .navbar-sidebar .grid { + gap: 0 !important; + margin-top: 0 !important; + padding-top: 0 !important; + } +} + +/* STAR section border fixes for dark mode */ +[data-theme='dark'] .star-border-red { + border-color: #ef4444 !important; +} + + /* Fix: Remove extra box/space above dropdown nav items in sidebar */ + .navbar-sidebar__item, + .navbar-sidebar__link, + .navbar-sidebar__brand { + margin-top: 0 !important; + padding-top: 0 !important; + border-top: none !important; + box-shadow: none !important; + } + .navbar-sidebar__item:first-child, + .navbar-sidebar__link:first-child { + margin-top: 0 !important; + padding-top: 0 !important; + border-top: none !important; + box-shadow: none !important; + } + /* Remove any unwanted hr or divider above dropdowns */ + .navbar-sidebar hr, + .navbar-sidebar__item hr { + display: none !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; + } + /* Remove grid gap above dropdowns */ + .navbar-sidebar .grid { + gap: 0 !important; + margin-top: 0 !important; + padding-top: 0 !important; + } + + +/* STAR section border fixes for dark mode */ +[data-theme='dark'] .star-border-red { + border-color: #ef4444 !important; +} [data-theme="dark"] .star-border-green { border-color: #22c55e !important; @@ -1628,38 +1698,23 @@ html { color: white; } - [data-theme="dark"].interview-prep-join-comm { - border-color: #854d0e; - } +.interview-prep-discord-btn{ + color:white; - /* Fix: Remove extra box/space above dropdown nav items in sidebar */ - .navbar-sidebar__item, - .navbar-sidebar__link, - .navbar-sidebar__brand { - margin-top: 0 !important; - padding-top: 0 !important; - border-top: none !important; - box-shadow: none !important; - } - .navbar-sidebar__item:first-child, - .navbar-sidebar__link:first-child { - margin-top: 0 !important; - padding-top: 0 !important; - border-top: none !important; - box-shadow: none !important; - } - /* Remove any unwanted hr or divider above dropdowns */ - .navbar-sidebar hr, - .navbar-sidebar__item hr { - display: none !important; - margin: 0 !important; - padding: 0 !important; - border: none !important; - } - /* Remove grid gap above dropdowns */ - .navbar-sidebar .grid { - gap: 0 !important; - margin-top: 0 !important; - padding-top: 0 !important; - } } + +[data-theme='dark'] .overview-sidebar-blue{ + border-color:#3b82f6 +} +[data-theme='dark'] .overview-sidebar-green{ + border-color:#22c55e +} +[data-theme='dark'] .overview-sidebar-yellow{ + border-color:#eab308 +} +[data-theme='dark'] .overview-sidebar-purple{ + border-color: #a855f7 + +} + + diff --git a/src/pages/interview-prep/index.tsx b/src/pages/interview-prep/index.tsx index fb6f0e3b..5dfec89a 100644 --- a/src/pages/interview-prep/index.tsx +++ b/src/pages/interview-prep/index.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import React from "react" import { useState } from "react" import Layout from "@theme/Layout" import Head from "@docusaurus/Head" -import { motion } from "framer-motion" +import { motion, AnimatePresence } from "framer-motion" import Link from "@docusaurus/Link" // Animation variants @@ -222,6 +222,23 @@ const InterviewPrepPage: React.FC = () => { })) } + const [showTips, setShowTips] = useState<{ [key: number]: boolean }>({}) + const [showQuestions, setShowQuestions] = useState<{ [key: number]: boolean }>({}) + + const toggleTips = (index: number) => { + setShowTips((prev) => ({ + ...prev, + [index]: !prev[index], + })) + } + + const toggleQuestions = (index: number) => { + setShowQuestions((prev) => ({ + ...prev, + [index]: !prev[index], + })) + } + return ( { + + {showTips[index] && ( + +
    + {stage.tips.map((tip, tipIndex) => ( + + + {tip} + + ))} +
+ + )} + +
+ +
+ + + {showQuestions[index] && ( + +
+ {stage.commonQuestions.map((question, qIndex) => ( + +

"{question}"

+ + ))} +
+ + )} + +
+
+ + + + ) + })} + + + + + +
+

Preparation Strategy

+
+
+
+
+
+ 🧠 +
+

Problem-Solving Mastery

+

+ Build strong algorithmic thinking through consistent practice. Focus on understanding patterns + rather than memorizing solutions. +

+
+
+
+ 💬 +
+

Communication Excellence

+

+ Practice explaining complex concepts clearly. Develop your ability to think out loud and + collaborate effectively. +

+
+
+
+ 🎭 +
+

Behavioral Readiness

+

+ Prepare compelling stories using the STAR method. Showcase leadership, growth mindset, and + cultural alignment. +

+
+
+ +
+
+ 💡 + Pro Tip: Balance Your Preparation +
+

+ Allocate 60% of your time to technical skills, 30% to behavioral preparation, and 10% to company + research. This balance ensures you're well-rounded and confident in all interview stages. +

+
+
+ + + +

+ Quick Access to Resources +

+
+ {[ + { + id: "technical", + title: "Technical Prep", + icon: "💻", + description: "Coding challenges, algorithms, system design", + color: "from-blue-500 to-blue-600", + items: ["500+ Problems", "System Design", "Code Review"], + }, + { + id: "behavioral", + title: "Behavioral Prep", + icon: "🤝", + description: "STAR method, leadership stories, soft skills", + color: "from-green-500 to-green-600", + items: ["STAR Framework", "Leadership", "Communication"], + }, + { + id: "companies", + title: "Company Guides", + icon: "🏢", + description: "Company-specific tips and strategies", + color: "from-purple-500 to-purple-600", + items: ["FAANG Tips", "Culture Fit", "Specific Questions"], + }, + { + id: "practice", + title: "Mock Practice", + icon: "🎯", + description: "Simulate real interview conditions", + color: "from-orange-500 to-orange-600", + items: ["Live Practice", "Feedback", "Time Management"], + }, + ].map((section) => ( + setActiveTab(section.id as any)} + whileHover={{ y: -5 }} + > +
+
{section.icon}
+

{section.title}

+
+
+

{section.description}

+
+ {section.items.map((item, i) => ( +
+ + {item} +
+ ))} +
+
+ + Explore Section → + +
+
+ + ))} +
+ {/* Quick Stats */} { {/* Introduction Section */} -

- Behavioral Interview Preparation -

+

Behavioral Interview Preparation

Master the art of storytelling and showcase your soft skills with confidence

@@ -691,10 +1244,10 @@ const InterviewPrepPage: React.FC = () => { >
{section.questions.map((question, i) => ( -
+

"{question}"

))} @@ -816,12 +1369,7 @@ const InterviewPrepPage: React.FC = () => { {video.channel} {video.duration}
- + ▶️ Watch Video @@ -856,7 +1404,7 @@ const InterviewPrepPage: React.FC = () => { {/* Contributor Note */}
@@ -1021,25 +1569,23 @@ const InterviewPrepPage: React.FC = () => { >
{question.type.charAt(0).toUpperCase() + question.type.slice(1)} {question.difficulty && ( {question.difficulty}