Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
153 changes: 68 additions & 85 deletions components/organization/cards/OrganzationCards.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import { ArrowRight, HandCoins, Triangle, Trophy } from 'lucide-react';
'use client';

import { ArrowRight, HandCoins, Trophy } from 'lucide-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';

interface OrganizationCardProps {
id: string;
Expand All @@ -27,97 +35,72 @@ export default function OrganizationCard({
}: OrganizationCardProps) {
const router = useRouter();
return (
<section
onClick={() => router.push(`/organizations/${id}/settings`)}
className='hover:shadow-primary/10 cursor-pointer rounded-xl border border-zinc-800 bg-black transition-shadow duration-300 hover:shadow-lg'
>
<div className='rounded-xl border border-zinc-800 bg-zinc-900 px-4 pt-4 pb-1 md:px-6 md:pt-6'>
<div className='mb-6 flex items-start gap-4'>
<div className='flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg'>
<TooltipProvider>
<section
onClick={() => router.push(`/organizations/${id}/settings`)}
className='hover:shadow-primary/10 cursor-pointer rounded-lg border border-zinc-800 bg-black transition-shadow duration-300 hover:shadow-lg'
>
<div className='flex items-center justify-between rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3 md:px-5 md:py-4'>
<div className='flex min-w-0 flex-1 items-center gap-3'>
<Image
src={logo}
src={logo || '/placeholder.svg'}
alt={`${name} Logo`}
width={56}
height={56}
className='rounded-lg object-contain'
width={40}
height={40}
className='flex-shrink-0 rounded-lg object-contain'
/>
</div>
<div className='min-w-0 flex-1'>
<h3 className='mb-1 text-lg font-semibold text-white'>{name}</h3>
<p className='text-sm text-zinc-500'>
Created {new Date(createdAt).toLocaleDateString()}
</p>
</div>
</div>

<div className='mb-6 grid grid-cols-2 gap-4'>
<div className='rounded-lg border border-zinc-800 bg-black p-2.5 md:p-4'>
<div className='mb-2 flex items-center gap-2'>
<div className='bg-active-bg grid max-h-7 min-h-7 max-w-7 min-w-7 place-content-center rounded-lg border-[0.5px] border-[rgba(167,249,80,0.24)] md:h-10 md:w-10'>
<Trophy className='text-primary h-3 w-3 md:h-4 md:w-4' />
</div>
<span className='text-xs font-medium text-white sm:text-sm'>
Hackathons
</span>
</div>
<div className='my-2 text-2xl font-semibold text-white'>
{hackathons.count}
</div>
<div className='mb-2 flex items-center gap-1 text-xs text-zinc-500'>
{hackathons.submissions > 5 ? (
<Triangle
className='h-3 w-3 border-0 text-[#40b869] md:h-4 md:w-4'
fill='#40b869'
/>
) : (
<Triangle
className='h-3 w-3 rotate-180 border-0 text-[#dd514d] md:h-4 md:w-4'
fill='#dd514d'
/>
)}
<span>
{hackathons.submissions} submission
{hackathons.submissions !== 1 ? 's' : ''}
</span>
<div className='min-w-0'>
<h3 className='truncate text-sm font-semibold text-white'>
{name}
</h3>
<p className='text-xs text-zinc-500'>
{new Date(createdAt).toLocaleDateString()}
</p>
</div>
</div>

<div className='rounded-lg border border-zinc-800 bg-black p-2.5 md:p-4'>
<div className='mb-2 flex items-center gap-2'>
<div className='bg-active-bg grid h-7 w-7 place-content-center rounded-lg border-[0.5px] border-[rgba(167,249,80,0.24)] md:h-10 md:w-10'>
<HandCoins className='text-primary h-3 w-3 md:h-4 md:w-4' />
</div>
<span className='text-xs font-medium text-white sm:text-sm'>
Grants
</span>
</div>
<div className='my-2 text-2xl font-semibold text-white'>
{grants.count}
</div>
<div className='mb-2 flex items-center gap-1 text-xs text-zinc-500'>
{grants.applications > 5 ? (
<Triangle
className='h-3 w-3 border-0 text-[#40b869] md:h-4 md:w-4'
fill='#40b869'
/>
) : (
<Triangle
className='h-3 w-3 rotate-180 border-0 text-[#dd514d] md:h-4 md:w-4'
fill='#dd514d'
/>
)}
<span>
{grants.applications} application
{grants.applications !== 1 ? 's' : ''}
</span>
</div>
<div className='ml-4 flex items-center gap-2'>
<Tooltip>
<TooltipTrigger asChild>
<div className='flex cursor-help items-center gap-1.5 rounded-lg border border-zinc-800 bg-black px-2.5 py-1.5 transition-colors hover:border-lime-500/50'>
<div className='bg-active-bg grid h-5 w-5 place-content-center rounded border-[0.5px] border-[rgba(167,249,80,0.24)]'>
<Trophy className='text-primary h-2.5 w-2.5' />
</div>
<span className='text-xs font-medium text-white'>
{hackathons.count}
</span>
</div>
</TooltipTrigger>
<TooltipContent>
<p className='text-xs'>
{hackathons.count} hackathons ({hackathons.submissions}{' '}
submissions)
</p>
</TooltipContent>
</Tooltip>

<Tooltip>
<TooltipTrigger asChild>
<div className='flex cursor-help items-center gap-1.5 rounded-lg border border-zinc-800 bg-black px-2.5 py-1.5 transition-colors hover:border-lime-500/50'>
<div className='bg-active-bg grid h-5 w-5 place-content-center rounded border-[0.5px] border-[rgba(167,249,80,0.24)]'>
<HandCoins className='text-primary h-2.5 w-2.5' />
</div>
<span className='text-xs font-medium text-white'>
{grants.count}
</span>
</div>
</TooltipTrigger>
<TooltipContent>
<p className='text-xs'>
{grants.count} grants ({grants.applications} applications)
</p>
</TooltipContent>
</Tooltip>

<ArrowRight className='text-primary ml-2 h-4 w-4 flex-shrink-0' />
</div>
</div>
</div>
<span className='text-primary flex items-center justify-end gap-2 px-10 py-5 text-sm font-medium transition-colors hover:text-lime-400'>
<span>Manage Organization</span>
<ArrowRight className='h-4 w-4' />
</span>
</section>
</section>
</TooltipProvider>
);
}
Loading
Loading