diff --git a/packages/web/components/elements/Checkbox.tsx b/packages/web/components/elements/Checkbox.tsx index 64d11ace6..f09997077 100644 --- a/packages/web/components/elements/Checkbox.tsx +++ b/packages/web/components/elements/Checkbox.tsx @@ -2,39 +2,21 @@ import React from 'react' import { styled } from '@stitches/react' import * as CheckboxPrimitive from '@radix-ui/react-checkbox' import { CheckIcon } from './images/CheckIcon' -import { Box } from './LayoutPrimitives' -import { Check } from 'phosphor-react' -// const Checkbox = styled(CheckboxPrimitive.Root, { -// all: 'unset', -// width: 15, -// height: 15, -// borderRadius: 2, -// display: 'flex', -// alignItems: 'center', -// justifyContent: 'center', -// }) - -// const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, { -// color: '#FFFFFF', -// }) - -const CheckboxRoot = styled(CheckboxPrimitive.Root, { +const Checkbox = styled(CheckboxPrimitive.Root, { all: 'unset', - backgroundColor: 'white', - width: 25, - height: 25, - borderRadius: 4, + width: 16, + height: 16, + minWidth: 16, + minHeight: 16, + borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', - boxShadow: `0 2px 10px black`, - '&:hover': { backgroundColor: 'violet' }, - '&:focus': { boxShadow: `0 0 0 2px black` }, }) const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, { - color: 'violet', + color: '#FFFFFF', }) export const CheckboxComponent: React.FC<{ @@ -44,15 +26,18 @@ export const CheckboxComponent: React.FC<{ const toggleChecked = () => setChecked(!checked) return ( -
- - - - - - - -
+ + + + + ) } diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx index 070eed429..278748d10 100644 --- a/packages/web/components/patterns/LibraryCards/CardTypes.tsx +++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx @@ -21,4 +21,6 @@ export type LinkedItemCardProps = { viewer: UserBasicData inMultiSelect: boolean handleAction: (action: LinkedItemCardAction) => void + + isHovered?: boolean } diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index b224994d7..1775c6143 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -146,3 +146,18 @@ export function LibraryItemMetadata( ) } + +type CardCheckBoxProps = { + isChecked: boolean + handleChanged: () => void +} + +export function CardCheckbox(props: CardCheckBoxProps): JSX.Element { + return ( + + ) +} diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 2429481c6..6484079ef 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -4,22 +4,21 @@ import type { LinkedItemCardProps } from './CardTypes' import { CoverImage } from '../../elements/CoverImage' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' -import { useMemo, useState } from 'react' +import { useCallback, useMemo, useState } from 'react' import { DotsThreeVertical } from 'phosphor-react' import Link from 'next/link' import { CardMenu } from '../CardMenu' import { AuthorInfoStyle, + CardCheckbox, DescriptionStyle, LibraryItemMetadata, MenuStyle, MetaStyle, siteName, - timeAgo, TitleStyle, } from './LibraryCardStyles' import { sortedLabels } from '../../../lib/labelsSort' -import CheckboxComponent from '../../elements/Checkbox' dayjs.extend(relativeTime) @@ -53,12 +52,8 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element { ) } -// Component export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { const [isHovered, setIsHovered] = useState(false) - const [menuOpen, setMenuOpen] = useState(false) - - const originText = siteName(props.item.originalArticleUrl, props.item.url) return ( - - + ) : ( + - - - {props.inMultiSelect ? ( - - { - event.preventDefault() - }} - > - - ) : ( - - setMenuOpen(open)} - actionHandler={props.handleAction} - triggerElement={ - - } - /> - - )} - - - - {props.item.title} - - {props.item.description} - - {props.item.author} - {props.item.author && originText && ' | '} - - {originText} - - - - - - - - - {sortedLabels(props.item.labels).map( - ({ name, color }, index) => ( - - ) - )} - - - {props.item.image && ( - { - ;(e.target as HTMLElement).style.display = 'none' - }} - /> - )} - - - - - + + + + )} ) } + +const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { + const [menuOpen, setMenuOpen] = useState(false) + const [isChecked, setIsChecked] = useState(false) + + const originText = siteName(props.item.originalArticleUrl, props.item.url) + + const handleCheckChanged = useCallback(() => { + setIsChecked(!isChecked) + }, [isChecked]) + + return ( + <> + + + {props.inMultiSelect ? ( + + + + ) : ( + + setMenuOpen(open)} + actionHandler={props.handleAction} + triggerElement={ + + } + /> + + )} + + + + {props.item.title} + + {props.item.description} + + {props.item.author} + {props.item.author && originText && ' | '} + {originText} + + + + + + + + {sortedLabels(props.item.labels).map(({ name, color }, index) => ( + + ))} + + + {props.item.image && ( + { + ;(e.target as HTMLElement).style.display = 'none' + }} + /> + )} + + + + + ) +} diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index c2ead3bd9..ff57c9c2f 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -1,27 +1,23 @@ import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' import { LabelChip } from '../../elements/LabelChip' import type { LinkedItemCardProps } from './CardTypes' -import { useMemo, useState } from 'react' +import { useCallback, useState } from 'react' import { DotsThree } from 'phosphor-react' import Link from 'next/link' import { CardMenu } from '../CardMenu' import { AuthorInfoStyle, + CardCheckbox, LibraryItemMetadata, MenuStyle, MetaStyle, siteName, - timeAgo, TitleStyle, } from './LibraryCardStyles' import { sortedLabels } from '../../../lib/labelsSort' -import { Checkbox } from '@radix-ui/react-checkbox' export function LibraryListCard(props: LinkedItemCardProps): JSX.Element { const [isHovered, setIsHovered] = useState(false) - const [menuOpen, setMenuOpen] = useState(false) - - const originText = siteName(props.item.originalArticleUrl, props.item.url) return ( - - + ) : ( + - - - {props.inMultiSelect ? ( - - - - ) : ( - - setMenuOpen(open)} - actionHandler={props.handleAction} - triggerElement={ - - } - /> - - )} - - - {props.item.title} - - {props.item.author} - {props.item.author && originText && ' | '} - - {originText} - - - - - - {sortedLabels(props.item.labels).map( - ({ name, color }, index) => ( - - ) - )} - - - - - + + + + )} ) } + +export function LibraryListCardContent( + props: LinkedItemCardProps +): JSX.Element { + const [menuOpen, setMenuOpen] = useState(false) + const [isChecked, setIsChecked] = useState(false) + + const originText = siteName(props.item.originalArticleUrl, props.item.url) + + const handleCheckChanged = useCallback(() => { + setIsChecked(!isChecked) + }, [isChecked]) + + return ( + <> + + + {props.inMultiSelect ? ( + + + + ) : ( + + setMenuOpen(open)} + actionHandler={props.handleAction} + triggerElement={ + + } + /> + + )} + + + {props.item.title} + + {props.item.author} + {props.item.author && originText && ' | '} + {originText} + + + + + {sortedLabels(props.item.labels).map(({ name, color }, index) => ( + + ))} + + + + + ) +}