Skip to content

Commit b507c5e

Browse files
davedumtodavedumto
authored
Feat build comment flow (#128)
* feat: built the flow for comment and replies * feat: built the flow for comment and replies * chore: made a lil fix * chore: made a lil fix * chore: addressed code review
1 parent 163cc99 commit b507c5e

5 files changed

Lines changed: 756 additions & 6 deletions

File tree

‎app/comment/page.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
'use client';
2+
3+
import React, { useState } from 'react';
4+
import BoundlessSheet from '@/components/sheet/boundless-sheet';
5+
import { Button } from '@/components/ui/button';
6+
7+
const Page = () => {
8+
const [isSheetOpen, setIsSheetOpen] = useState(false);
9+
10+
const handleCommentSubmit = (comment: string) => {
11+
// Handle comment submission here
12+
// You can add your logic for processing the comment
13+
// For example: API call, state update, etc.
14+
15+
// For now, we'll just acknowledge the comment
16+
// This prevents the linter warning about unused parameters
17+
if (comment && comment.trim()) {
18+
// Comment is valid and can be processed
19+
// Add your comment handling logic here
20+
console.log('Comment submitted:', comment);
21+
22+
// Close the sheet after submission
23+
setIsSheetOpen(false);
24+
}
25+
};
26+
27+
return (
28+
<div className='p-8'>
29+
<Button
30+
onClick={() => setIsSheetOpen(true)}
31+
className='px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700'
32+
>
33+
Open Comment Sheet
34+
</Button>
35+
36+
<BoundlessSheet
37+
open={isSheetOpen}
38+
setOpen={setIsSheetOpen}
39+
title='Add Comment'
40+
side='bottom'
41+
>
42+
<div className='space-y-4'>
43+
<div className='text-center text-gray-300 mb-6'>
44+
<p>Share your thoughts and feedback</p>
45+
</div>
46+
47+
<textarea
48+
placeholder='Write your comment here...'
49+
className='w-full p-3 border border-gray-600 rounded-lg bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
50+
rows={4}
51+
id='comment-input'
52+
/>
53+
54+
<div className='flex gap-3'>
55+
<Button
56+
onClick={() => setIsSheetOpen(false)}
57+
variant='outline'
58+
className='flex-1'
59+
>
60+
Cancel
61+
</Button>
62+
<Button
63+
onClick={() => {
64+
const input = document.getElementById(
65+
'comment-input'
66+
) as HTMLTextAreaElement;
67+
if (input && input.value.trim()) {
68+
handleCommentSubmit(input.value);
69+
}
70+
}}
71+
className='flex-1 bg-blue-600 hover:bg-blue-700'
72+
>
73+
Submit Comment
74+
</Button>
75+
</div>
76+
</div>
77+
</BoundlessSheet>
78+
</div>
79+
);
80+
};
81+
82+
export default Page;

‎app/globals.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,30 @@
33

44
@custom-variant dark (&:is(.dark *));
55

6+
/* Custom scrollbar styles for comment modal */
7+
.custom-scrollbar {
8+
scrollbar-width: thin;
9+
scrollbar-color: #4a4a4a #1a1a1a;
10+
}
11+
12+
.custom-scrollbar::-webkit-scrollbar {
13+
width: 6px;
14+
}
15+
16+
.custom-scrollbar::-webkit-scrollbar-track {
17+
background: #1a1a1a;
18+
border-radius: 3px;
19+
}
20+
21+
.custom-scrollbar::-webkit-scrollbar-thumb {
22+
background: #4a4a4a;
23+
border-radius: 3px;
24+
}
25+
26+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
27+
background: #5a5a5a;
28+
}
29+
630
@theme inline {
731
--color-background: var(--background);
832
--color-foreground: var(--foreground);

‎app/page.tsx‎

Lines changed: 103 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
'use client';
2+
import { PriceDisplay } from '@/components/PriceDisplay';
3+
import EmptyState from '@/components/EmptyState';
24
import { BoundlessButton } from '@/components/buttons';
5+
import { Coins, History, Plus } from 'lucide-react';
6+
import Card from '@/components/card';
7+
import RecentProjects from '@/components/overview/RecentProjects';
8+
import RecentContributions from '@/components/overview/ReecntContributions';
9+
import GrantHistory from '@/components/overview/GrantHistory';
310
import { AuthNav } from '@/components/auth/AuthNav';
11+
import CommentModal from '@/components/comment/modal';
412
import { motion } from 'framer-motion';
513
import {
14+
fadeInUp,
615
staggerContainer,
716
slideInFromLeft,
817
slideInFromRight,
918
} from '@/lib/motion';
1019
import PageTransition from '@/components/PageTransition';
11-
import Link from 'next/link';
1220

1321
export default function Home() {
1422
return (
@@ -27,12 +35,101 @@ export default function Home() {
2735
<AuthNav />
2836
</motion.header>
2937
<motion.main
30-
className='w-full max-w-6xl flex flex-col items-center justify-center'
31-
variants={slideInFromRight}
38+
className='flex flex-col gap-[32px] items-center sm:items-start'
39+
variants={staggerContainer}
3240
>
33-
<Link href='/user'>
34-
<BoundlessButton>Go to Dashboard</BoundlessButton>
35-
</Link>
41+
<motion.div
42+
className='bg-[#1C1C1C] rounded-lg p-4 w-full max-w-[550px]'
43+
variants={fadeInUp}
44+
>
45+
<PriceDisplay price={100} className='text-2xl font-bold' />
46+
<EmptyState
47+
title='No comments yet'
48+
description='Start by sharing your first project idea with the Boundless community. Once submitted, your projects will appear here for easy tracking.'
49+
type='default'
50+
action={
51+
<CommentModal
52+
onCommentSubmit={comment =>
53+
console.log('Comment submitted:', comment)
54+
}
55+
>
56+
<BoundlessButton
57+
variant='default'
58+
size='lg'
59+
icon={<Plus className='w-5 h-5' />}
60+
iconPosition='right'
61+
>
62+
Add comment
63+
</BoundlessButton>
64+
</CommentModal>
65+
}
66+
/>
67+
</motion.div>
68+
<motion.div className='flex gap-4' variants={staggerContainer}>
69+
<motion.div variants={fadeInUp}>
70+
<Card
71+
title='Active Campaigns'
72+
value='10'
73+
bottomText={
74+
<div className='flex items-center gap-2'>
75+
<Coins className='w-4 h-4 text-white/60' />
76+
<PriceDisplay
77+
price={0}
78+
className='!text-xs !tracking-[-0.06px]'
79+
/>
80+
</div>
81+
}
82+
/>
83+
</motion.div>
84+
<motion.div variants={fadeInUp}>
85+
<Card
86+
title='Pending Submissions'
87+
value='0'
88+
bottomText={
89+
<div className='flex items-center gap-2'>
90+
<History className='w-4 h-4 text-white/60' />
91+
<span className='text-white/60'>No recent submissions</span>
92+
</div>
93+
}
94+
/>
95+
</motion.div>
96+
<motion.div variants={fadeInUp}>
97+
<Card
98+
title='Active Projects'
99+
value='0'
100+
bottomText={
101+
<div className='flex items-center gap-2'>
102+
<span className='text-white/90'>0</span>
103+
Approved Submissions
104+
</div>
105+
}
106+
/>
107+
</motion.div>
108+
<motion.div variants={fadeInUp}>
109+
<Card
110+
title='Available Grants'
111+
value={
112+
<PriceDisplay price={0} className='!tracking-[-0.06px]' />
113+
}
114+
bottomText={
115+
<div className='flex items-center gap-2 text-white/90'>
116+
6 grants available
117+
</div>
118+
}
119+
/>
120+
</motion.div>
121+
</motion.div>
122+
<motion.div variants={fadeInUp}>
123+
<RecentProjects projects={[]} />
124+
</motion.div>
125+
<motion.div className='flex gap-4' variants={staggerContainer}>
126+
<motion.div variants={slideInFromLeft}>
127+
<RecentContributions projects={[]} />
128+
</motion.div>
129+
<motion.div variants={slideInFromRight}>
130+
<GrantHistory projects={[]} />
131+
</motion.div>
132+
</motion.div>
36133
</motion.main>
37134
</motion.div>
38135
</PageTransition>

0 commit comments

Comments
 (0)