Skip to content
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

fix: add design based on each case #26

Merged
merged 4 commits into from
Oct 19, 2024
Merged

fix: add design based on each case #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23e2c0c
fix: add design based on each case
Meriem-BM Oct 18, 2024
772f533
chore: linting errors
Meriem-BM Oct 18, 2024
5badbd3
chore: linting errors
Meriem-BM Oct 18, 2024
340cc46
set connected to false
Meriem-BM Oct 18, 2024
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
115 changes: 95 additions & 20 deletions app/allocation/components/BudgetAllocation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import Image from 'next/image';
import Link from 'next/link';
import { useAuth } from '@/app/utils/wallet/AuthProvider';
import { ArrowRightIcon } from '@/public/assets/icon-components/ArrowRightIcon';
import { CollectionProgressStatusEnum } from '@/app/comparison/utils/types';
import { CheckIcon } from '@/public/assets/icon-components/Check';
import { UserColabGroupIcon } from '@/public/assets/icon-components/UserColabGroup';

export interface BudgetCategory {
imageSrc: string
title: string
description: string
status: string
delegations: number
}

interface BudgetAllocationProps extends BudgetCategory {
Expand All @@ -19,6 +24,8 @@ const BudgetAllocation: FC<BudgetAllocationProps> = ({
imageSrc,
title,
description,
delegations,
status,
onDelegate,
onScore,
}) => {
Expand All @@ -42,26 +49,94 @@ const BudgetAllocation: FC<BudgetAllocationProps> = ({
<div className="flex flex-col gap-2 border-l border-gray-200 pl-4"></div>
</div>
<div className="flex w-[24%] items-center justify-center gap-2">
<button
onClick={onScore}
className={`whitespace-nowrap rounded-md px-8 py-2 text-sm font-medium ${
isAutoConnecting
? 'border bg-gray-300 text-gray-600'
: 'bg-primary text-white'
}`}
disabled={isAutoConnecting}
>
Vote
</button>
<button
onClick={onDelegate}
className={`rounded-md border px-4 py-2 text-sm font-medium ${
isAutoConnecting ? 'bg-gray-300 text-gray-600' : 'text-gray-700'
}`}
disabled={isAutoConnecting}
>
Delegate
</button>
<div className="flex w-4/5 items-start justify-center">
{status === CollectionProgressStatusEnum.Pending
? (
<div className="flex w-full flex-col items-center justify-center gap-2">
<div className="flex w-full items-center justify-between">
<button
onClick={onScore}
className={`w-[48%] whitespace-nowrap rounded-md py-3 text-sm font-medium ${
isAutoConnecting
? 'border bg-gray-300 text-gray-600'
: 'bg-primary text-white'
}`}
disabled={isAutoConnecting}
>
Vote
</button>
<button
onClick={onDelegate}
className={`w-[48%] rounded-md border py-3 text-sm font-medium ${
isAutoConnecting
? 'bg-gray-300 text-gray-600'
: 'text-gray-700'
}`}
disabled={isAutoConnecting}
>
Delegate
</button>
</div>
{!!delegations && (
<div className="flex w-full items-center justify-center gap-2 rounded-full bg-[#FFE6D5] p-1">
<UserColabGroupIcon />
<p className="text-xs font-medium text-gray-400">
<strong className="text-dark-500">
{delegations > 1
? delegations + ' people'
: delegations + ' person'}
</strong>
{' '}
delegated to you
</p>
</div>
)}
</div>
)
: status === CollectionProgressStatusEnum.Finished
? (
<div className="flex w-full flex-col items-center justify-center gap-4">
<button className="flex w-full items-center justify-center gap-2 rounded-md border py-3 font-semibold">
Edit
</button>
<div className="flex w-full justify-center gap-2 rounded-xl border border-[#17B26A] bg-[#ECFDF3] py-1">
<p className="text-xs font-medium text-[#17B26A]">Voted</p>
<CheckIcon size={15} />
</div>
<button
onClick={onScore}
className="whitespace-nowrap text-xs text-gray-600 underline"
disabled={isAutoConnecting}
>
View attestation
</button>
</div>
)
: (
status === CollectionProgressStatusEnum.Delegated && (
<div className="flex w-full flex-col items-center justify-center gap-4">
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-[#17B26A] bg-[#ECFDF3] py-3">
<CheckIcon />
<p className="font-semibold text-[#17B26A]">Delegated</p>
</div>
<div className="flex w-full justify-center gap-2 rounded-xl bg-gray-100 py-1">
<p className="text-xs font-medium text-gray-400">
You delegated to
{' '}
<strong className="text-dark-500">@username</strong>
</p>
</div>
<button
onClick={onScore}
className="whitespace-nowrap text-xs text-gray-600 underline"
disabled={isAutoConnecting}
>
Revoke
</button>
</div>
)
)}
</div>
</div>
</div>
);
Expand Down
200 changes: 139 additions & 61 deletions app/allocation/components/CategoryAllocation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,20 @@ import { useAuth } from '@/app/utils/wallet/AuthProvider';
import { ArrowRightIcon } from '@/public/assets/icon-components/ArrowRightIcon';
import { LockIcon } from '@/public/assets/icon-components/Lock';
import { UnlockIcon } from '@/public/assets/icon-components/Unlock';

import {
CollectionProgressStatus,
CollectionProgressStatusEnum,
} from '@/app/comparison/utils/types';
import { CheckIcon } from '@/public/assets/icon-components/Check';
import { UserColabGroupIcon } from '@/public/assets/icon-components/UserColabGroup';
export interface Category {
id: number
imageSrc: string
title: string
description: string
projectCount: number
status: CollectionProgressStatus
delegations: number
}

interface CategoryAllocationProps extends Category {
Expand All @@ -32,11 +39,13 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
title,
description,
projectCount,
status,
allocationPercentage,
locked,
delegations,
onDelegate,
onScore,
onLockClick,
locked,
onPercentageChange,
}) => {
const { isAutoConnecting } = useAuth();
Expand Down Expand Up @@ -89,68 +98,137 @@ const CategoryAllocation: FC<CategoryAllocationProps> = ({
<div className="flex flex-col gap-2 border-l border-gray-200 pl-4"></div>
</div>
<div className="flex w-[24%] items-center justify-center gap-2">
{allocatingBudget
? (
<div className="flex w-full items-start justify-center gap-6 p-2">
<div className="flex flex-col gap-2 text-gray-500">
<div className="flex gap-2 rounded-md border px-6 py-1">
<button
onClick={handleMinus}
className="font-bold text-gray-600"
>
-
</button>
<div className="flex gap-0 rounded bg-white text-dark-500">
<input
onChange={handleInputChange}
ref={inputRef}
className="w-20 bg-gray-50 text-center font-semibold outline-none"
type="number"
defaultValue={allocationPercentage}
/>
<div className="flex w-4/5 items-start justify-center">
{allocatingBudget
? (
<div className="flex w-full items-start justify-center gap-6 p-2">
<div className="flex flex-col gap-2 text-gray-500">
<div className="flex gap-2 rounded-md border px-6 py-1">
<button
onClick={handleMinus}
className="font-bold text-gray-600"
>
-
</button>
<div className="flex gap-0 rounded bg-white text-dark-500">
<input
onChange={handleInputChange}
ref={inputRef}
className="w-20 bg-gray-50 text-center font-semibold outline-none"
type="number"
defaultValue={allocationPercentage}
/>
</div>
<button
onClick={handlePlus}
className="font-bold text-gray-600"
>
+
</button>
</div>
<div className="flex justify-center rounded-md bg-gray-100 px-4 py-0.5 text-sm text-gray-600">
<p className="w-fit text-center text-xs font-medium">
{(allocationPercentage * 100000).toLocaleString() + ' OP'}
</p>
</div>
<button
onClick={handlePlus}
className="font-bold text-gray-600"
>
+
</button>
</div>
<div className="flex justify-center rounded-md bg-gray-100 px-4 py-0.5 text-sm text-gray-600">
<p className="w-fit text-center text-xs font-medium">
{(allocationPercentage * 100000).toLocaleString() + ' OP'}
</p>
</div>
<button
onClick={onLockClick}
className={`rounded-md p-1.5 ${
locked ? 'bg-gray-700' : 'bg-transparent'
}`}
>
{locked ? <LockIcon color="#fff" /> : <UnlockIcon />}
</button>
</div>
<button onClick={onLockClick} className={`rounded-md p-1.5 ${locked ? 'bg-gray-700' : 'bg-transparent'}`}>
{locked ? <LockIcon color="#fff" /> : <UnlockIcon />}
</button>
</div>
)
: (
<>
<button
onClick={onScore}
className={`whitespace-nowrap rounded-md px-8 py-2 text-sm font-medium ${
isAutoConnecting
? 'border bg-gray-300 text-gray-600'
: 'bg-primary text-white'
}`}
disabled={isAutoConnecting}
>
Vote
</button>
<button
onClick={onDelegate}
className={`rounded-md border px-4 py-2 text-sm font-medium ${
isAutoConnecting ? 'bg-gray-300 text-gray-600' : 'text-gray-700'
}`}
disabled={isAutoConnecting}
>
Delegate
</button>
</>
)}
)
: status === CollectionProgressStatusEnum.Pending
? (
<div className="flex w-full flex-col items-center justify-center gap-2">
<div className="flex w-full items-center justify-between">
<button
onClick={onScore}
className={`w-[48%] whitespace-nowrap rounded-md py-3 text-sm font-medium ${
isAutoConnecting
? 'border bg-gray-300 text-gray-600'
: 'bg-primary text-white'
}`}
disabled={isAutoConnecting}
>
Vote
</button>
<button
onClick={onDelegate}
className={`w-[48%] rounded-md border py-3 text-sm font-medium ${
isAutoConnecting
? 'bg-gray-300 text-gray-600'
: 'text-gray-700'
}`}
disabled={isAutoConnecting}
>
Delegate
</button>
</div>
{!!delegations && (
<div className="flex w-full items-center justify-center gap-2 rounded-full bg-[#FFE6D5] p-1">
<UserColabGroupIcon />
<p className="text-xs font-medium text-gray-400">
<strong className="text-dark-500">
{delegations > 1
? delegations + ' people'
: delegations + ' person'}
</strong>
{' '}
delegated to you
</p>
</div>
)}
</div>
)
: status === CollectionProgressStatusEnum.Finished
? (
<div className="flex w-full flex-col items-center justify-center gap-4">
<button className="flex w-full items-center justify-center gap-2 rounded-md border py-3 font-semibold">
Edit
</button>
<div className="flex w-full justify-center gap-2 rounded-xl border border-[#17B26A] bg-[#ECFDF3] py-1">
<p className="text-xs font-medium text-[#17B26A]">Voted</p>
<CheckIcon size={15} />
</div>
<button
onClick={onScore}
className="whitespace-nowrap text-xs text-gray-600 underline"
disabled={isAutoConnecting}
>
View attestation
</button>
</div>
)
: (
status === CollectionProgressStatusEnum.Delegated && (
<div className="flex w-full flex-col items-center justify-center gap-4">
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-[#17B26A] bg-[#ECFDF3] py-3">
<CheckIcon />
<p className="font-semibold text-[#17B26A]">Delegated</p>
</div>
<div className="flex w-full justify-center gap-2 rounded-xl bg-gray-100 py-1">
<p className="text-xs font-medium text-gray-400">
You delegated to
{' '}
<strong className="text-dark-500">@username</strong>
</p>
</div>
<button
onClick={onScore}
className="whitespace-nowrap text-xs text-gray-600 underline"
disabled={isAutoConnecting}
>
Revoke
</button>
</div>
)
)}
</div>
</div>
</div>
);
Expand Down
Loading