Skip to content

add topmate close functionality #560

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 21, 2025
Merged

add topmate close functionality #560

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

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 44 additions & 13 deletions src/components/topmate/TopMateCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React from 'react';
import { motion } from 'framer-motion';
import { ArrowUpRight, Clock } from 'lucide-react';
import { useColorMode } from '@docusaurus/theme-common';
import React from "react";
import { motion } from "framer-motion";
import { ArrowUpRight, Clock } from "lucide-react";
import { useColorMode } from "@docusaurus/theme-common";

interface TopMateCardProps {
title: string;
description: string;
duration: string;
profileImage: string;
username: string;
setShowTopmate: (value: boolean) => void;
}

const TopMateCard: React.FC<TopMateCardProps> = ({
Expand All @@ -17,17 +18,18 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
duration,
profileImage,
username,
setShowTopmate,
}) => {
const { colorMode } = useColorMode();
const isDark = colorMode === 'dark';
const isDark = colorMode === "dark";

return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className={`relative w-full max-w-md mx-auto rounded-3xl shadow-2xl overflow-hidden hover:shadow-3xl transition-all duration-300 transform hover:-translate-y-1 ${
isDark ? 'bg-[#1a1a1a] text-white' : 'bg-white text-black'
isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
}`}
>
{/* Decorative Arrows */}
Expand All @@ -50,28 +52,47 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<span className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
<span
className={`text-sm font-medium ${
isDark ? "text-gray-300" : "text-gray-600"
}`}
>
1:1 CALL
</span>
<div className={`flex items-center gap-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
<div
className={`flex items-center gap-1 ${
isDark ? "text-gray-400" : "text-gray-500"
}`}
>
<Clock size={16} />
<span className="text-sm">{duration}</span>
</div>
</div>
<button
className={`text-xl font-semibold ${isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'}`}
className={`text-xl font-semibold ${
isDark
? "text-gray-500 hover:text-gray-300"
: "text-gray-400 hover:text-gray-600"
}`}
onClick={() => setShowTopmate(false)}
>
<span className="sr-only">Close</span>×
</button>
</div>

{/* Title */}
<h2 className={`text-2xl font-bold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
<h2
className={`text-2xl font-bold mb-4 ${
isDark ? "text-white" : "text-gray-900"
}`}
>
{title}
</h2>

{/* Description */}
<p className={`${isDark ? 'text-gray-300' : 'text-gray-600'} mb-6`}>{description}</p>
<p className={`${isDark ? "text-gray-300" : "text-gray-600"} mb-6`}>
{description}
</p>

{/* Profile Section */}
<div className="flex items-center justify-between flex-wrap md:flex-nowrap gap-y-3">
Expand All @@ -82,7 +103,11 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
className="w-12 h-12 rounded-full object-cover border-2 border-purple-200"
/>
<div className="flex flex-col">
<span className={`text-sm ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
<span
className={`text-sm ${
isDark ? "text-gray-300" : "text-gray-600"
}`}
>
Book a slot at
</span>
<a
Expand All @@ -106,7 +131,13 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
/>
</div>
{/* Theme-aware text to ensure readability on dark backgrounds */}
<span className={`text-sm font-semibold shrink-0 ${isDark ? 'text-gray-200' : 'text-gray-700'}`}>topmate</span>
<span
className={`text-sm font-semibold shrink-0 ${
isDark ? "text-gray-200" : "text-gray-700"
}`}
>
topmate
</span>
</div>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/components/topmate/TopMateSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import TopMateCard from './TopMateCard';
import { useColorMode } from '@docusaurus/theme-common';
import React from "react";
import TopMateCard from "./TopMateCard";
import { useColorMode } from "@docusaurus/theme-common";

const TopMateSection = () => {
const TopMateSection = ({ setShowTopmate }) => {
const { colorMode } = useColorMode(); // Get current theme: 'light' or 'dark'

const profileData = {
title: "1:1 Mentorship Call",
description: "Book a slot, Free for Hive Community Members",
duration: "30 mins",
profileImage: "/sanjay.png",
username: "sanjaykv"
username: "sanjaykv",
};

return (
Expand All @@ -19,22 +19,22 @@ const TopMateSection = () => {
<div className="mx-auto text-center mb-16">
<h1
className={`text-4xl font-bold mb-4 ${
colorMode === 'dark' ? 'text-white' : 'text-gray-900'
colorMode === "dark" ? "text-white" : "text-gray-900"
}`}
>
Book a Session
</h1>
<p
className={`text-lg ${
colorMode === 'dark' ? 'text-gray-300' : 'text-gray-600'
colorMode === "dark" ? "text-gray-300" : "text-gray-600"
}`}
>
Get personalized guidance and feedback through one-on-one sessions
</p>
</div>

<div>
<TopMateCard {...profileData} />
<TopMateCard {...profileData} setShowTopmate={setShowTopmate} />
</div>
</div>
</div>
Expand Down
50 changes: 33 additions & 17 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import type { ReactNode } from "react";
Expand All @@ -18,23 +18,25 @@ import FAQs from "../components/faqs/faqs";

export default function Home(): ReactNode {
const { siteConfig } = useDocusaurusContext();

const [showTopmate, setShowTopmate] = useState(true);

useEffect(() => {
// Add page transition animation on mount
const mainElement = document.querySelector('main');
const mainElement = document.querySelector("main");
if (mainElement) {
mainElement.style.opacity = '0';
mainElement.style.transform = 'translateY(20px)';
mainElement.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';

mainElement.style.opacity = "0";
mainElement.style.transform = "translateY(20px)";
mainElement.style.transition =
"opacity 0.6s ease-out, transform 0.6s ease-out";

// Trigger animation after a brief delay
setTimeout(() => {
mainElement.style.opacity = '1';
mainElement.style.transform = 'translateY(0)';
mainElement.style.opacity = "1";
mainElement.style.transform = "translateY(0)";
}, 100);
}
}, []);

return (
<Layout
title={`${siteConfig.title}`}
Expand All @@ -49,9 +51,21 @@ export default function Home(): ReactNode {
</Head>

{/* ✅ Wrap in solid background to fix light mode */}
<div className="transition-colors duration-300" style={{ backgroundColor: "var(--ifm-background-color)", color: "var(--ifm-font-color-base)" }}>
<main className="transition-colors duration-300 page-enter" style={{ backgroundColor: "var(--ifm-background-color)", color: "var(--ifm-font-color-base)" }}>
<div className="m-4">
<div
className="transition-colors duration-300"
style={{
backgroundColor: "var(--ifm-background-color)",
color: "var(--ifm-font-color-base)",
}}
>
<main
className="transition-colors duration-300 page-enter"
style={{
backgroundColor: "var(--ifm-background-color)",
color: "var(--ifm-font-color-base)",
}}
>
<div className="m-4">
<Header />
</div>

Expand All @@ -75,10 +89,12 @@ export default function Home(): ReactNode {
</div>

<div className="m-4 grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
<div className="col-span-1">
<TopMateSection />
</div>
<div className="col-span-2">
{showTopmate && (
<div className="col-span-1">
<TopMateSection setShowTopmate={setShowTopmate} />
</div>
)}
<div className={showTopmate ? `col-span-2` : `col-span-3`}>
<TestimonialCarousel />
</div>
</div>
Expand Down
Loading