Skip to content

Commit 0509ff8

Browse files
committed
Add new badge
1 parent 1dc85e2 commit 0509ff8

File tree

4 files changed

+48
-8
lines changed

4 files changed

+48
-8
lines changed

web/components/filters/desktop-filters.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,8 @@ export function DesktopFilters(props: {
424424

425425
{/* Interests */}
426426
<CustomizeableDropdown
427+
showNewBadge
428+
newBadgeClassName={"-top-3 -left-2"}
427429
buttonContent={(open) => (
428430
<DropdownButton
429431
open={open}
@@ -457,6 +459,8 @@ export function DesktopFilters(props: {
457459

458460
{/* Causes */}
459461
<CustomizeableDropdown
462+
showNewBadge
463+
newBadgeClassName={"-top-3 -left-2"}
460464
buttonContent={(open) => (
461465
<DropdownButton
462466
open={open}
@@ -490,6 +494,8 @@ export function DesktopFilters(props: {
490494

491495
{/* Work */}
492496
<CustomizeableDropdown
497+
showNewBadge
498+
newBadgeClassName={"-top-3 -left-2"}
493499
buttonContent={(open) => (
494500
<DropdownButton
495501
open={open}

web/components/filters/mobile-filters.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
import {MbtiFilter, MbtiFilterText} from "web/components/filters/mbti-filter";
3434
import {InterestFilter, InterestFilterText} from "web/components/filters/interest-filter";
3535
import {OptionTableKey} from "common/profiles/constants";
36+
import {NewBadge} from "web/components/new-badge";
3637

3738
function MobileFilters(props: {
3839
filters: Partial<FilterFields>
@@ -370,6 +371,8 @@ function MobileFilters(props: {
370371

371372
{/* INTERESTS */}
372373
<MobileFilterSection
374+
showNewBadge
375+
newBadgeClassName={"-top-0 -left-0"}
373376
title="Interests"
374377
openFilter={openFilter}
375378
setOpenFilter={setOpenFilter}
@@ -396,6 +399,8 @@ function MobileFilters(props: {
396399

397400
{/* CAUSES */}
398401
<MobileFilterSection
402+
showNewBadge
403+
newBadgeClassName={"-top-0 -left-0"}
399404
title="Causes"
400405
openFilter={openFilter}
401406
setOpenFilter={setOpenFilter}
@@ -422,6 +427,8 @@ function MobileFilters(props: {
422427

423428
{/* WORK */}
424429
<MobileFilterSection
430+
showNewBadge
431+
newBadgeClassName={"-top-0 -left-0"}
425432
title="Work"
426433
openFilter={openFilter}
427434
setOpenFilter={setOpenFilter}
@@ -544,6 +551,10 @@ export function MobileFilterSection(props: {
544551
childrenClassName?: string
545552
icon?: ReactNode
546553
selection?: ReactNode
554+
// When true, shows a tiny "new" badge at the top-left of the button
555+
showNewBadge?: boolean
556+
// Optional extra classes for the badge container (to tweak position/size)
557+
newBadgeClassName?: string
547558
}) {
548559
const {
549560
title,
@@ -555,19 +566,22 @@ export function MobileFilterSection(props: {
555566
childrenClassName,
556567
icon,
557568
selection,
569+
showNewBadge,
570+
newBadgeClassName,
558571
} = props
559572
const isOpen = openFilter == title
560573
return (
561574
<Col className={clsx(className)}>
562575
<button
563576
className={clsx(
564-
'text-ink-600 flex w-full flex-row justify-between px-4 pt-4',
577+
'text-ink-600 flex w-full flex-row justify-between px-4 pt-4 relative',
565578
isOpen ? 'pb-2' : 'pb-4'
566579
)}
567580
onClick={() =>
568581
isOpen ? setOpenFilter(undefined) : setOpenFilter(title)
569582
}
570583
>
584+
{showNewBadge && <NewBadge classes={newBadgeClassName}/>}
571585
<Row
572586
className={clsx('items-center gap-0.5', isActive && 'font-semibold')}
573587
>

web/components/new-badge.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import clsx from "clsx"
2+
3+
export function NewBadge(props: { classes: string | undefined }) {
4+
return <span
5+
className={clsx(
6+
"absolute z-10 rounded px-1 text-xs text-primary-500 font-semibold tracking-wide shadow",
7+
props.classes
8+
)}
9+
>
10+
new
11+
</span>
12+
}

web/components/widgets/customizeable-dropdown.tsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Popover } from '@headlessui/react'
1+
import {Popover} from '@headlessui/react'
22
import clsx from 'clsx'
3-
import { AnimationOrNothing } from '../comments/dropdown-menu'
4-
import { useState } from 'react'
5-
import { usePopper } from 'react-popper'
3+
import {AnimationOrNothing} from '../comments/dropdown-menu'
4+
import {useState} from 'react'
5+
import {usePopper} from 'react-popper'
6+
import {NewBadge} from "web/components/new-badge";
67

78
export function CustomizeableDropdown(props: {
89
menuWidth?: string
@@ -16,6 +17,10 @@ export function CustomizeableDropdown(props: {
1617
closeOnClick?: boolean
1718
withinOverflowContainer?: boolean
1819
popoverClassName?: string
20+
// When true, shows a tiny "new" badge at the top-left of the button
21+
showNewBadge?: boolean
22+
// Optional extra classes for the badge container (to tweak position/size)
23+
newBadgeClassName?: string
1924
}) {
2025
const {
2126
menuWidth,
@@ -26,25 +31,28 @@ export function CustomizeableDropdown(props: {
2631
buttonDisabled,
2732
withinOverflowContainer,
2833
popoverClassName,
34+
showNewBadge,
35+
newBadgeClassName,
2936
} = props
3037
const [referenceElement, setReferenceElement] =
3138
useState<HTMLButtonElement | null>()
3239
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>()
33-
const { styles, attributes } = usePopper(referenceElement, popperElement, {
40+
const {styles, attributes} = usePopper(referenceElement, popperElement, {
3441
strategy: withinOverflowContainer ? 'fixed' : 'absolute',
3542
})
3643
return (
3744
<Popover className={clsx('relative inline-block text-left', className)}>
38-
{({ open, close }) => (
45+
{({open, close}) => (
3946
<>
4047
<Popover.Button
4148
ref={setReferenceElement}
42-
className={clsx('flex items-center', buttonClass)}
49+
className={clsx('flex items-center relative', buttonClass)}
4350
onClick={(e: any) => {
4451
e.stopPropagation()
4552
}}
4653
disabled={buttonDisabled}
4754
>
55+
{showNewBadge && <NewBadge classes={newBadgeClassName}/>}
4856
{buttonContent(open)}
4957
</Popover.Button>
5058

0 commit comments

Comments
 (0)