feat: added tooltip and internal article badge

hackerspace-ntnu · Jan 26, 2024 · a33d9cb · a33d9cb
1 parent d9a0056
commit a33d9cb
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 5 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/messages/en.json b/messages/en.json
@@ -42,6 +42,7 @@
   },
   "news": {
     "title": "News",
-    "page": "Page"
+    "page": "Page",
+    "internalArticle": "This is an internal article"
   }
 }
diff --git a/messages/no.json b/messages/no.json
@@ -42,6 +42,7 @@
   },
   "news": {
     "title": "Nyheter",
-    "page": "Side"
+    "page": "Side",
+    "internalArticle": "Dette er en intern artikkel"
   }
 }
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@t3-oss/env-nextjs": "^0.7.1",
     "autoprefixer": "^10.4.17",
     "clsx": "^2.1.0",

diff --git a/src/app/[locale]/(dashboard)/news/page.tsx b/src/app/[locale]/(dashboard)/news/page.tsx
@@ -27,139 +27,162 @@ export default function News({
   const mockData = [
     {
       id: 1,
+      internal: true,
       title: 'Gruppe status: prosjekt spill',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 2,
+      internal: false,
       title: 'DevOps Møtet',
       date: '69. oktober 6969',
       photoUrl: 'mock.jpg',
     },
     {
       id: 3,
+      internal: false,
       title: 'Jonas er kul',
       date: '42. november 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 4,
+      internal: true,
       title: 'Iskrem er godt',
       date: '18. februar 1942',
       photoUrl: 'mock.jpg',
     },
     {
       id: 5,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 6,
+      internal: true,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 7,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 8,
+      internal: false,
       title: 'Dette er en veeeeldig lang overskrift som skal testes',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 9,
+      internal: true,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 10,
+      internal: true,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 11,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 12,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 13,
+      internal: true,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 14,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 15,
+      internal: true,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 16,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 17,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 18,
+      internal: false,
       title: '18',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
 
     {
       id: 19,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 20,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 21,
+      internal: false,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 22,
+      internal: true,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
     {
       id: 23,
+      internal: false,
       title: '23',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
@@ -180,9 +203,13 @@ export default function News({
             )}
             key={data.id}
             id={data.id}
+            internal={data.internal}
             title={data.title}
             date={data.date}
             photoUrl={data.photoUrl}
+            t={{
+              internalArticle: t('internalArticle'),
+            }}
           />
         ))}
       </div>
@@ -196,6 +223,7 @@ export default function News({
           previous: useTranslations('ui')('previous'),
           next: useTranslations('ui')('next'),
           page: t('page'),
+          internalArticle: t('internalArticle'),
         }}
       />
     </>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -10,7 +10,7 @@ import { ProfileMenu } from '@/components/settings/ProfileMenu';
 function Header() {
   const t = useTranslations('layout');
   return (
-    <header className='sticky top-0 z-10 flex w-full justify-center border-b border-border/40 bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-11 md:px-16 lg:px-24'>
+    <header className='sticky top-0 z-20 flex w-full justify-center border-b border-border/40 bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-11 md:px-16 lg:px-24'>
       <div className='flex h-14 w-full max-w-screen-2xl items-center justify-between'>
         <MobileSheet
           className='flex md:hidden'

diff --git a/src/components/news/InternalBadge.tsx b/src/components/news/InternalBadge.tsx
@@ -0,0 +1,49 @@
+import { ShieldAlert } from 'lucide-react';
+
+import { cx } from '@/lib/utils';
+
+import { Button } from '@/components/ui/Button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+
+type InternalBadgeProps = {
+  className?: string;
+  internal: boolean;
+  t: {
+    internalArticle: string;
+  };
+};
+
+function InternalBadge({ className, internal, t }: InternalBadgeProps) {
+  if (!internal) return null;
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            className={cx(
+              className,
+              'absolute z-10 m-1 bg-accent/95 p-0.5 backdrop-blur focus-visible:ring-offset-0 supports-[backdrop-filter]:bg-accent/60',
+            )}
+            asChild
+            variant='ghost'
+            size='xs-icon'
+          >
+            <span tabIndex={0}>
+              <ShieldAlert />
+            </span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent sideOffset={3}>
+          <p>{t.internalArticle}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export { InternalBadge };
diff --git a/src/components/news/NewsCard.tsx b/src/components/news/NewsCard.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { Link } from '@/lib/navigation';
 import { cx } from '@/lib/utils';
 
+import { InternalBadge } from '@/components/news/InternalBadge';
 import { Button } from '@/components/ui/Button';
 import {
   Card,
@@ -14,12 +15,24 @@ import {
 type NewsCardProps = {
   className?: string;
   id: number;
+  internal: boolean;
   title: string;
   date: string;
   photoUrl: string;
+  t: {
+    internalArticle: string;
+  };
 };
 
-function NewsCard({ className, id, title, date, photoUrl }: NewsCardProps) {
+function NewsCard({
+  className,
+  id,
+  internal,
+  title,
+  date,
+  photoUrl,
+  t,
+}: NewsCardProps) {
   return (
     <Button
       className={cx('group whitespace-normal font-normal', className)}
@@ -34,6 +47,7 @@ function NewsCard({ className, id, title, date, photoUrl }: NewsCardProps) {
         }}
       >
         <Card className='relative flex h-full min-h-32 w-full overflow-hidden'>
+          <InternalBadge internal={internal} t={t} />
           <Image
             className='rounded-lg object-cover object-center transition-transform duration-300 group-hover:scale-105'
             src={`/${photoUrl}`}

diff --git a/src/components/news/NewsItem.tsx b/src/components/news/NewsItem.tsx
@@ -3,17 +3,30 @@ import Image from 'next/image';
 import { Link } from '@/lib/navigation';
 import { cx } from '@/lib/utils';
 
+import { InternalBadge } from '@/components/news/InternalBadge';
 import { Button } from '@/components/ui/Button';
 
 type NewsCardProps = {
   className?: string;
   id: number;
+  internal: boolean;
   title: string;
   date: string;
   photoUrl: string;
+  t: {
+    internalArticle: string;
+  };
 };
 
-function NewsItem({ className, id, title, date, photoUrl }: NewsCardProps) {
+function NewsItem({
+  className,
+  id,
+  internal,
+  title,
+  date,
+  photoUrl,
+  t,
+}: NewsCardProps) {
   return (
     <Button
       className={cx('group block whitespace-normal font-normal', className)}
@@ -29,6 +42,7 @@ function NewsItem({ className, id, title, date, photoUrl }: NewsCardProps) {
       >
         <div className='flex gap-4 overflow-hidden rounded-lg transition-colors group-hover:bg-accent group-hover:dark:bg-card'>
           <div className='relative h-28 w-28 flex-shrink-0'>
+            <InternalBadge className='h-5 w-5' internal={internal} t={t} />
             <Image
               className='rounded-lg object-cover object-center'
               src={`/${photoUrl}`}

diff --git a/src/components/news/NewsItemGrid.tsx b/src/components/news/NewsItemGrid.tsx
@@ -8,6 +8,7 @@ import { NewsItem } from '@/components/news/NewsItem';
 type NewsItemGridProps = {
   newsData: {
     id: number;
+    internal: boolean;
     title: string;
     date: string;
     photoUrl: string;
@@ -19,6 +20,7 @@ type NewsItemGridProps = {
     previous: string;
     next: string;
     page: string;
+    internalArticle: string;
   };
 };
 
@@ -42,9 +44,13 @@ function NewsItemGrid({ newsData, t }: NewsItemGridProps) {
           <NewsItem
             key={data.id}
             id={data.id}
+            internal={data.internal}
             title={data.title}
             date={data.date}
             photoUrl={data.photoUrl}
+            t={{
+              internalArticle: t.internalArticle,
+            }}
           />
         ))}
       </div>

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -24,6 +24,7 @@ const buttonVariants = cva({
       lg: 'h-11 rounded-md px-8',
       icon: 'h-10 w-10',
       'sm-icon': 'h-8 w-8',
+      'xs-icon': 'h-6 w-6',
       none: '',
     },
   },