Add new badge

Author: MartinBraquet

web/components/filters/desktop-filters.tsx

@@ -424,6 +424,8 @@ export function DesktopFilters(props: {
 
       {/* Interests */}
       <CustomizeableDropdown
+        showNewBadge
+        newBadgeClassName={"-top-3 -left-2"}
         buttonContent={(open) => (
           <DropdownButton
             open={open}
@@ -457,6 +459,8 @@ export function DesktopFilters(props: {
 
       {/* Causes */}
       <CustomizeableDropdown
+        showNewBadge
+        newBadgeClassName={"-top-3 -left-2"}
         buttonContent={(open) => (
           <DropdownButton
             open={open}
@@ -490,6 +494,8 @@ export function DesktopFilters(props: {
 
       {/* Work */}
       <CustomizeableDropdown
+        showNewBadge
+        newBadgeClassName={"-top-3 -left-2"}
         buttonContent={(open) => (
           <DropdownButton
             open={open}

web/components/filters/mobile-filters.tsx

@@ -33,6 +33,7 @@ import {
 import {MbtiFilter, MbtiFilterText} from "web/components/filters/mbti-filter";
 import {InterestFilter, InterestFilterText} from "web/components/filters/interest-filter";
 import {OptionTableKey} from "common/profiles/constants";
+import {NewBadge} from "web/components/new-badge";
 
 function MobileFilters(props: {
   filters: Partial<FilterFields>
@@ -370,6 +371,8 @@ function MobileFilters(props: {
 
       {/* INTERESTS */}
       <MobileFilterSection
+        showNewBadge
+        newBadgeClassName={"-top-0 -left-0"}
         title="Interests"
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
@@ -396,6 +399,8 @@ function MobileFilters(props: {
 
       {/* CAUSES */}
       <MobileFilterSection
+        showNewBadge
+        newBadgeClassName={"-top-0 -left-0"}
         title="Causes"
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
@@ -422,6 +427,8 @@ function MobileFilters(props: {
 
       {/* WORK */}
       <MobileFilterSection
+        showNewBadge
+        newBadgeClassName={"-top-0 -left-0"}
         title="Work"
         openFilter={openFilter}
         setOpenFilter={setOpenFilter}
@@ -544,6 +551,10 @@ export function MobileFilterSection(props: {
   childrenClassName?: string
   icon?: ReactNode
   selection?: ReactNode
+  // When true, shows a tiny "new" badge at the top-left of the button
+  showNewBadge?: boolean
+  // Optional extra classes for the badge container (to tweak position/size)
+  newBadgeClassName?: string
 }) {
   const {
     title,
@@ -555,19 +566,22 @@ export function MobileFilterSection(props: {
     childrenClassName,
     icon,
     selection,
+    showNewBadge,
+    newBadgeClassName,
   } = props
   const isOpen = openFilter == title
   return (
     <Col className={clsx(className)}>
       <button
         className={clsx(
-          'text-ink-600 flex w-full flex-row justify-between px-4 pt-4',
+          'text-ink-600 flex w-full flex-row justify-between px-4 pt-4 relative',
           isOpen ? 'pb-2' : 'pb-4'
         )}
         onClick={() =>
           isOpen ? setOpenFilter(undefined) : setOpenFilter(title)
         }
       >
+        {showNewBadge && <NewBadge classes={newBadgeClassName}/>}
         <Row
           className={clsx('items-center gap-0.5', isActive && 'font-semibold')}
         >

web/components/new-badge.tsx

@@ -0,0 +1,12 @@
+import clsx from "clsx"
+
+export function NewBadge(props: { classes: string | undefined }) {
+  return <span
+    className={clsx(
+      "absolute z-10 rounded px-1 text-xs text-primary-500 font-semibold tracking-wide shadow",
+      props.classes
+    )}
+  >
+    new
+  </span>
+}

web/components/widgets/customizeable-dropdown.tsx

@@ -1,8 +1,9 @@
-import { Popover } from '@headlessui/react'
+import {Popover} from '@headlessui/react'
 import clsx from 'clsx'
-import { AnimationOrNothing } from '../comments/dropdown-menu'
-import { useState } from 'react'
-import { usePopper } from 'react-popper'
+import {AnimationOrNothing} from '../comments/dropdown-menu'
+import {useState} from 'react'
+import {usePopper} from 'react-popper'
+import {NewBadge} from "web/components/new-badge";
 
 export function CustomizeableDropdown(props: {
   menuWidth?: string
@@ -16,6 +17,10 @@ export function CustomizeableDropdown(props: {
   closeOnClick?: boolean
   withinOverflowContainer?: boolean
   popoverClassName?: string
+  // When true, shows a tiny "new" badge at the top-left of the button
+  showNewBadge?: boolean
+  // Optional extra classes for the badge container (to tweak position/size)
+  newBadgeClassName?: string
 }) {
   const {
     menuWidth,
@@ -26,25 +31,28 @@ export function CustomizeableDropdown(props: {
     buttonDisabled,
     withinOverflowContainer,
     popoverClassName,
+    showNewBadge,
+    newBadgeClassName,
   } = props
   const [referenceElement, setReferenceElement] =
     useState<HTMLButtonElement | null>()
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>()
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+  const {styles, attributes} = usePopper(referenceElement, popperElement, {
     strategy: withinOverflowContainer ? 'fixed' : 'absolute',
   })
   return (
     <Popover className={clsx('relative inline-block text-left', className)}>
-      {({ open, close }) => (
+      {({open, close}) => (
         <>
           <Popover.Button
             ref={setReferenceElement}
-            className={clsx('flex items-center', buttonClass)}
+            className={clsx('flex items-center relative', buttonClass)}
             onClick={(e: any) => {
               e.stopPropagation()
             }}
             disabled={buttonDisabled}
           >
+            {showNewBadge && <NewBadge classes={newBadgeClassName}/>}
             {buttonContent(open)}
           </Popover.Button>