Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreivcodes
andreivcodes committed Jan 21, 2025
1 parent 1ff5afc commit 9a1c07b
Show file tree
Hide file tree
Showing 3 changed files with 220 additions and 156 deletions.
93 changes: 58 additions & 35 deletions apps/web-arbitrum/app/[daoSlug]/[groupId]/components/menubar/BodyViewBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { ViewEnum } from '@/app/searchParams';
import * as Switch from '@radix-ui/react-switch';
import { ArrowDown, ArrowUp } from 'lucide-react';
import Link from 'next/link';
import {
Expand Down Expand Up @@ -41,33 +40,53 @@ export const BodyViewBar = ({ totalVersions }: { totalVersions: number }) => {
view === ViewEnum.BODY ? 'translate-y-0' : 'translate-y-full' }`}
>
<div
className='flex w-full items-center justify-between gap-2 rounded-full border
border-neutral-350 bg-white p-2 text-sm font-bold shadow-lg transition-colors
className='border-neutral-350 flex w-full items-center justify-between gap-2 rounded-full
border bg-white p-2 text-sm font-bold shadow-lg transition-colors
dark:border-neutral-800 dark:bg-neutral-950'
>
<div className='flex w-full justify-between text-neutral-600 dark:text-neutral-200'>
<div className='flex items-center gap-4'>
<Link href='#'>
<ArrowUp
className='h-8 w-8 rounded-full border p-1 hover:bg-neutral-100 dark:border-neutral-800
dark:hover:bg-neutral-800'
className='border-neutral-350 h-8 w-8 rounded-full border bg-neutral-50 p-1
hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800
dark:hover:bg-neutral-700'
/>
</Link>
<div className='flex items-center gap-2 text-nowrap'>
<Switch.Root
id='changes'
checked={diff}
onCheckedChange={(checked) => setDiff(checked)}
className='relative h-6 w-11 rounded-full bg-neutral-200 px-0.5
data-[state=checked]:bg-brand-accent dark:bg-neutral-700
dark:data-[state=checked]:bg-brand-accent'
<div
className='border-neutral-350 flex h-8 cursor-pointer items-center justify-start
rounded-full border bg-neutral-50 px-4 pl-1 pr-4 text-sm transition-colors
hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800
dark:hover:bg-neutral-700'
>
<label
htmlFor='changes'
className='flex cursor-pointer items-center gap-2'
>
<Switch.Thumb
className='block h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-100
will-change-transform data-[state=checked]:translate-x-5 dark:bg-neutral-950'
/>
</Switch.Root>
<label htmlFor='changes' className='cursor-pointer'>
<div className='relative flex items-start'>
<input
type='checkbox'
id='changes'
checked={diff}
onChange={(e) => setDiff(e.target.checked)}
className='border-neutral-350 h-6 w-6 cursor-pointer appearance-none rounded-full border
bg-neutral-50 checked:border-neutral-400 dark:border-neutral-700
dark:bg-neutral-800'
/>
{diff && (
<svg
width='12'
height='9'
viewBox='0 0 12 9'
fill='none'
xmlns='http://www.w3.org/2000/svg'
className='pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
fill-neutral-700 dark:fill-neutral-200'
>
<path d='M0.680398 4.75L1.54403 3.86364L4.54403 6.81818L10.7486 0.636363L11.6349 1.52273L4.54403 8.59091L0.680398 4.75Z' />
</svg>
)}
</div>
Show changes
</label>
</div>
Expand All @@ -77,19 +96,21 @@ export const BodyViewBar = ({ totalVersions }: { totalVersions: number }) => {
<button
onClick={() => setVersion(Math.max(0, currentVersion - 1))}
disabled={currentVersion === 0}
className={`flex h-8 items-center justify-center rounded-md px-3 ${
className={`flex h-8 items-center justify-center rounded-full border px-3 transition-colors
${
currentVersion === 0
? `cursor-not-allowed bg-neutral-200 text-neutral-400 dark:bg-neutral-800
dark:text-neutral-600`
: `bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900
dark:hover:bg-neutral-800`
}`}
? `cursor-not-allowed border-neutral-200 bg-neutral-50 text-neutral-400
dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-600`
: `border-neutral-350 bg-neutral-50 hover:bg-neutral-100 dark:border-neutral-700
dark:bg-neutral-800 dark:hover:bg-neutral-700`
}`}
>
Previous
</button>
<div
className='pointer-events-none flex h-8 items-center justify-center rounded-md
bg-neutral-100 px-3 dark:bg-neutral-900'
className='border-neutral-350 pointer-events-none flex h-8 items-center justify-center
rounded-full border bg-neutral-50 px-3 dark:border-neutral-700
dark:bg-neutral-800'
>
Version {currentVersion + 1} of {totalVersions}
</div>
Expand All @@ -98,13 +119,14 @@ export const BodyViewBar = ({ totalVersions }: { totalVersions: number }) => {
setVersion(Math.min(totalVersions - 1, currentVersion + 1))
}
disabled={currentVersion === totalVersions - 1}
className={`flex h-8 items-center justify-center rounded-md px-3 ${
className={`flex h-8 items-center justify-center rounded-full border px-3 transition-colors
${
currentVersion === totalVersions - 1
? `cursor-not-allowed bg-neutral-200 text-neutral-400 dark:bg-neutral-800
dark:text-neutral-600`
: `bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900
dark:hover:bg-neutral-800`
}`}
? `cursor-not-allowed border-neutral-200 bg-neutral-50 text-neutral-400
dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-600`
: `border-neutral-350 bg-neutral-50 hover:bg-neutral-100 dark:border-neutral-700
dark:bg-neutral-800 dark:hover:bg-neutral-700`
}`}
>
Next
</button>
Expand All @@ -122,8 +144,9 @@ export const BodyViewBar = ({ totalVersions }: { totalVersions: number }) => {
>
<div>Comments and Votes</div>
<ArrowDown
className='h-8 w-8 rounded-full border p-1 hover:bg-neutral-100 dark:border-neutral-800
dark:hover:bg-neutral-800'
className='border-neutral-350 h-8 w-8 rounded-full border bg-neutral-50 p-1
hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800
dark:hover:bg-neutral-700'
/>
</div>
</div>
Expand Down
138 changes: 80 additions & 58 deletions apps/web-arbitrum/app/[daoSlug]/[groupId]/components/menubar/CommentsViewBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { ViewEnum, VotesFilterEnum } from '@/app/searchParams';
import * as Popover from '@radix-ui/react-popover';
import * as Switch from '@radix-ui/react-switch';
import { ArrowUp, Check, ChevronsUpDown } from 'lucide-react';
import { parseAsBoolean, parseAsStringEnum, useQueryState } from 'nuqs';
import { voteFilters } from './MenuBar';
Expand Down Expand Up @@ -39,8 +38,8 @@ export const CommentsViewBar = () => {
view === ViewEnum.COMMENTS ? 'translate-y-0' : '-translate-y-full' }`}
>
<div
className='flex w-full items-center justify-between gap-2 rounded-full border
border-neutral-350 bg-white p-2 text-sm font-bold shadow-lg transition-colors
className='border-neutral-350 flex w-full items-center justify-between gap-2 rounded-full
border bg-white p-2 text-sm font-bold shadow-lg transition-colors
dark:border-neutral-800 dark:bg-neutral-950'
>
<div className='flex w-full justify-between text-neutral-600 dark:text-neutral-200'>
Expand All @@ -52,70 +51,93 @@ export const CommentsViewBar = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
>
<ArrowUp className='h-8 w-8 rounded-full border p-1 hover:bg-neutral-100 dark:hover:bg-neutral-800' />
<ArrowUp
className='border-neutral-350 h-8 w-8 rounded-full border bg-neutral-50 p-1
hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800
dark:hover:bg-neutral-700'
/>
<div>Read Full Proposal</div>
</div>
<div className='flex gap-2'>
<div className='flex items-center gap-2'>
<Switch.Root
id='comments'
checked={comments}
onCheckedChange={(checked) => setComments(checked)}
className='relative h-6 w-11 rounded-full bg-neutral-200 px-0.5
data-[state=checked]:bg-brand-accent dark:bg-neutral-700
dark:data-[state=checked]:bg-brand-accent'
<div
className='border-neutral-350 flex h-8 cursor-pointer items-center justify-start
rounded-full border bg-neutral-50 px-4 pl-1 pr-4 text-sm transition-colors
hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800
dark:hover:bg-neutral-700'
>
<label
htmlFor='comments-view'
className='flex cursor-pointer items-center gap-2'
>
<Switch.Thumb
className='block h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-100
will-change-transform data-[state=checked]:translate-x-5 dark:bg-neutral-950'
/>
</Switch.Root>
<label htmlFor='comments' className='cursor-pointer'>
<div className='relative flex items-start'>
<input
type='checkbox'
id='comments-view'
checked={comments}
onChange={(e) => setComments(e.target.checked)}
className='border-neutral-350 h-6 w-6 cursor-pointer appearance-none rounded-full border
bg-neutral-50 checked:border-neutral-400 dark:border-neutral-700
dark:bg-neutral-800'
/>
{comments && (
<svg
width='12'
height='9'
viewBox='0 0 12 9'
fill='none'
xmlns='http://www.w3.org/2000/svg'
className='pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
fill-neutral-700 dark:fill-neutral-200'
>
<path d='M0.680398 4.75L1.54403 3.86364L4.54403 6.81818L10.7486 0.636363L11.6349 1.52273L4.54403 8.59091L0.680398 4.75Z' />
</svg>
)}
</div>
Show comments
</label>
</div>

<div className='flex items-center gap-2'>
<Popover.Root>
<Popover.Trigger asChild>
<button
className='flex h-8 w-[200px] items-center justify-between rounded-full border bg-white
px-4 text-sm dark:border-neutral-800 dark:bg-neutral-950'
aria-expanded={false}
>
{voteFilters.find((filter) => filter.value === votesFilter)
?.label || 'Select vote filter...'}
<ChevronsUpDown className='h-4 w-4 opacity-50' />
</button>
</Popover.Trigger>
<Popover.Content
className='w-[200px] rounded-md border border-neutral-350 bg-white p-1 shadow-lg
dark:border-neutral-800 dark:bg-neutral-950'
<Popover.Root>
<Popover.Trigger asChild>
<button
className='border-neutral-350 flex h-8 w-[200px] items-center justify-between rounded-full
border bg-neutral-50 px-4 text-sm transition-colors hover:bg-neutral-100
dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700'
aria-expanded={false}
>
<div className='space-y-1'>
{voteFilters.map((filter) => (
<button
key={filter.value}
className='flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm
hover:bg-neutral-100 dark:hover:bg-neutral-800'
onClick={() => {
setVotesFilter(
filter.value === votesFilter
? VotesFilterEnum.ALL
: (filter.value as VotesFilterEnum)
);
}}
>
{filter.label}
{votesFilter === filter.value && (
<Check className='h-4 w-4' />
)}
</button>
))}
</div>
</Popover.Content>
</Popover.Root>
</div>
{voteFilters.find((filter) => filter.value === votesFilter)
?.label || 'Select vote filter...'}
<ChevronsUpDown className='h-4 w-4 opacity-50' />
</button>
</Popover.Trigger>
<Popover.Content
className='border-neutral-350 w-[200px] rounded-md border bg-neutral-50 p-1 shadow-lg
dark:border-neutral-700 dark:bg-neutral-800'
sideOffset={5}
>
<div className='space-y-1'>
{voteFilters.map((filter) => (
<button
key={filter.value}
className='flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm
transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-700'
onClick={() => {
setVotesFilter(
filter.value === votesFilter
? VotesFilterEnum.ALL
: (filter.value as VotesFilterEnum)
);
}}
>
{filter.label}
{votesFilter === filter.value && (
<Check className='h-4 w-4' />
)}
</button>
))}
</div>
</Popover.Content>
</Popover.Root>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 9a1c07b

Please sign in to comment.