Skip to content

Commit 6684ce2

Browse files
Shitanshukumar607Shitanshukumar607
committed
add topmate close functionality
1 parent 61c3753 commit 6684ce2

File tree

3 files changed

+85
-38
lines changed

3 files changed

+85
-38
lines changed

‎src/components/topmate/TopMateCard.tsx‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import React from 'react';
2-
import { motion } from 'framer-motion';
3-
import { ArrowUpRight, Clock } from 'lucide-react';
4-
import { useColorMode } from '@docusaurus/theme-common';
1+
import React from "react";
2+
import { motion } from "framer-motion";
3+
import { ArrowUpRight, Clock } from "lucide-react";
4+
import { useColorMode } from "@docusaurus/theme-common";
55

66
interface TopMateCardProps {
77
title: string;
88
description: string;
99
duration: string;
1010
profileImage: string;
1111
username: string;
12+
setShowTopmate: (value: boolean) => void;
1213
}
1314

1415
const TopMateCard: React.FC<TopMateCardProps> = ({
@@ -17,17 +18,18 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
1718
duration,
1819
profileImage,
1920
username,
21+
setShowTopmate,
2022
}) => {
2123
const { colorMode } = useColorMode();
22-
const isDark = colorMode === 'dark';
24+
const isDark = colorMode === "dark";
2325

2426
return (
2527
<motion.div
2628
initial={{ opacity: 0, y: 20 }}
2729
animate={{ opacity: 1, y: 0 }}
2830
transition={{ duration: 0.5 }}
2931
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 ${
30-
isDark ? 'bg-[#1a1a1a] text-white' : 'bg-white text-black'
32+
isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
3133
}`}
3234
>
3335
{/* Decorative Arrows */}
@@ -50,28 +52,47 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
5052
{/* Header */}
5153
<div className="flex items-center justify-between mb-4">
5254
<div className="flex items-center gap-2">
53-
<span className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
55+
<span
56+
className={`text-sm font-medium ${
57+
isDark ? "text-gray-300" : "text-gray-600"
58+
}`}
59+
>
5460
1:1 CALL
5561
</span>
56-
<div className={`flex items-center gap-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
62+
<div
63+
className={`flex items-center gap-1 ${
64+
isDark ? "text-gray-400" : "text-gray-500"
65+
}`}
66+
>
5767
<Clock size={16} />
5868
<span className="text-sm">{duration}</span>
5969
</div>
6070
</div>
6171
<button
62-
className={`text-xl font-semibold ${isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'}`}
72+
className={`text-xl font-semibold ${
73+
isDark
74+
? "text-gray-500 hover:text-gray-300"
75+
: "text-gray-400 hover:text-gray-600"
76+
}`}
77+
onClick={() => setShowTopmate(false)}
6378
>
6479
<span className="sr-only">Close</span>×
6580
</button>
6681
</div>
6782

6883
{/* Title */}
69-
<h2 className={`text-2xl font-bold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
84+
<h2
85+
className={`text-2xl font-bold mb-4 ${
86+
isDark ? "text-white" : "text-gray-900"
87+
}`}
88+
>
7089
{title}
7190
</h2>
7291

7392
{/* Description */}
74-
<p className={`${isDark ? 'text-gray-300' : 'text-gray-600'} mb-6`}>{description}</p>
93+
<p className={`${isDark ? "text-gray-300" : "text-gray-600"} mb-6`}>
94+
{description}
95+
</p>
7596

7697
{/* Profile Section */}
7798
<div className="flex items-center justify-between flex-wrap md:flex-nowrap gap-y-3">
@@ -82,7 +103,11 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
82103
className="w-12 h-12 rounded-full object-cover border-2 border-purple-200"
83104
/>
84105
<div className="flex flex-col">
85-
<span className={`text-sm ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
106+
<span
107+
className={`text-sm ${
108+
isDark ? "text-gray-300" : "text-gray-600"
109+
}`}
110+
>
86111
Book a slot at
87112
</span>
88113
<a
@@ -106,7 +131,13 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
106131
/>
107132
</div>
108133
{/* Theme-aware text to ensure readability on dark backgrounds */}
109-
<span className={`text-sm font-semibold shrink-0 ${isDark ? 'text-gray-200' : 'text-gray-700'}`}>topmate</span>
134+
<span
135+
className={`text-sm font-semibold shrink-0 ${
136+
isDark ? "text-gray-200" : "text-gray-700"
137+
}`}
138+
>
139+
topmate
140+
</span>
110141
</div>
111142
</div>
112143
</div>

‎src/components/topmate/TopMateSection.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import React from 'react';
2-
import TopMateCard from './TopMateCard';
3-
import { useColorMode } from '@docusaurus/theme-common';
1+
import React from "react";
2+
import TopMateCard from "./TopMateCard";
3+
import { useColorMode } from "@docusaurus/theme-common";
44

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

88
const profileData = {
99
title: "1:1 Mentorship Call",
1010
description: "Book a slot, Free for Hive Community Members",
1111
duration: "30 mins",
1212
profileImage: "/sanjay.png",
13-
username: "sanjaykv"
13+
username: "sanjaykv",
1414
};
1515

1616
return (
@@ -19,22 +19,22 @@ const TopMateSection = () => {
1919
<div className="mx-auto text-center mb-16">
2020
<h1
2121
className={`text-4xl font-bold mb-4 ${
22-
colorMode === 'dark' ? 'text-white' : 'text-gray-900'
22+
colorMode === "dark" ? "text-white" : "text-gray-900"
2323
}`}
2424
>
2525
Book a Session
2626
</h1>
2727
<p
2828
className={`text-lg ${
29-
colorMode === 'dark' ? 'text-gray-300' : 'text-gray-600'
29+
colorMode === "dark" ? "text-gray-300" : "text-gray-600"
3030
}`}
3131
>
3232
Get personalized guidance and feedback through one-on-one sessions
3333
</p>
3434
</div>
3535

3636
<div>
37-
<TopMateCard {...profileData} />
37+
<TopMateCard {...profileData} setShowTopmate={setShowTopmate} />
3838
</div>
3939
</div>
4040
</div>

‎src/pages/index.tsx‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from "react";
1+
import React, { useEffect, useState } from "react";
22
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
33
import Layout from "@theme/Layout";
44
import type { ReactNode } from "react";
@@ -18,23 +18,25 @@ import FAQs from "../components/faqs/faqs";
1818

1919
export default function Home(): ReactNode {
2020
const { siteConfig } = useDocusaurusContext();
21-
21+
const [showTopmate, setShowTopmate] = useState(true);
22+
2223
useEffect(() => {
2324
// Add page transition animation on mount
24-
const mainElement = document.querySelector('main');
25+
const mainElement = document.querySelector("main");
2526
if (mainElement) {
26-
mainElement.style.opacity = '0';
27-
mainElement.style.transform = 'translateY(20px)';
28-
mainElement.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
29-
27+
mainElement.style.opacity = "0";
28+
mainElement.style.transform = "translateY(20px)";
29+
mainElement.style.transition =
30+
"opacity 0.6s ease-out, transform 0.6s ease-out";
31+
3032
// Trigger animation after a brief delay
3133
setTimeout(() => {
32-
mainElement.style.opacity = '1';
33-
mainElement.style.transform = 'translateY(0)';
34+
mainElement.style.opacity = "1";
35+
mainElement.style.transform = "translateY(0)";
3436
}, 100);
3537
}
3638
}, []);
37-
39+
3840
return (
3941
<Layout
4042
title={`${siteConfig.title}`}
@@ -49,9 +51,21 @@ export default function Home(): ReactNode {
4951
</Head>
5052

5153
{/* ✅ Wrap in solid background to fix light mode */}
52-
<div className="transition-colors duration-300" style={{ backgroundColor: "var(--ifm-background-color)", color: "var(--ifm-font-color-base)" }}>
53-
<main className="transition-colors duration-300 page-enter" style={{ backgroundColor: "var(--ifm-background-color)", color: "var(--ifm-font-color-base)" }}>
54-
<div className="m-4">
54+
<div
55+
className="transition-colors duration-300"
56+
style={{
57+
backgroundColor: "var(--ifm-background-color)",
58+
color: "var(--ifm-font-color-base)",
59+
}}
60+
>
61+
<main
62+
className="transition-colors duration-300 page-enter"
63+
style={{
64+
backgroundColor: "var(--ifm-background-color)",
65+
color: "var(--ifm-font-color-base)",
66+
}}
67+
>
68+
<div className="m-4">
5569
<Header />
5670
</div>
5771

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

7791
<div className="m-4 grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
78-
<div className="col-span-1">
79-
<TopMateSection />
80-
</div>
81-
<div className="col-span-2">
92+
{showTopmate && (
93+
<div className="col-span-1">
94+
<TopMateSection setShowTopmate={setShowTopmate} />
95+
</div>
96+
)}
97+
<div className={showTopmate ? `col-span-2` : `col-span-3`}>
8298
<TestimonialCarousel />
8399
</div>
84100
</div>

0 commit comments

Comments
 (0)