Link fixes design updates

packages/client/next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
  images: {
- domains: ['js.vik.wiki', 'images.unsplash.com', 'google.com', 'mozsarmate.me'],
+ domains: ['js.vik.wiki', 'images.unsplash.com', 'google.com', 'mozsarmate.me', 'simonyi.bme.hu'],
  },
 }

packages/client/src/components/collection/CollectionListItem.tsx

@@ -23,7 +23,14 @@ export function CollectionListItem({ collection }: Props) {
  alt={collection.name}
  fill={true}
  className={cn('mt-3 overflow-hidden rounded-xl object-cover brightness-50', hasImageError ? 'bg-black' : 'bg-white')}
- onError={() => setHasImageError(true)}
+ onError={() => {
+ setHasImageError(true)
+ console.log('error')
+ }}
+ onInvalid={() => {
+ setHasImageError(true)
+ console.log('error')
+ }}
  />
  </div>
  <div className='relative flex flex-col justify-between bg-gradient-to-b px-5 pb-10 pt-6 text-white'>

packages/client/src/components/links/CollectionLinksContainer.tsx

@@ -6,8 +6,8 @@ import { Collection } from '@/types/collection.type'
 export default function CollectionListContainer({ collection }: { collection: Collection }) {
  return (
  <>
- <h1 className='m-2 ml-8'> Kollekció: {collection.name}</h1>
- <div className={clsx('flex flex-wrap justify-start p-4')}>
+ <h1 className='m-4 ml-8'> Kollekció: {collection.name}</h1>
+ <div className={clsx('flex flex-wrap justify-start px-4')}>
  {collection.links.map((link, _index) => (
  <LinkWidget key={_index} link={link} />
  ))}

packages/client/src/components/links/LinkWidget.tsx

@@ -73,12 +73,12 @@ export default function LinkWidget(props: Props) {
  <div className='flex w-full justify-between'>
  <h2 className='text-nowrap flex text-3xl'>{link.title}</h2>
  <div className='ml-4 flex items-center'>
- {/*{!!props.visits && props.visits > 10 && (*/}
- <div className={'mr-2 flex items-center'} title='Kattintások száma'>
- <BsFire color={'red'} size={18} className='inline' />
- <h4 className={'text-s'}>{props.visits}32</h4>
- </div>
- {/*)}*/}
+ {!!props.visits && props.visits > 10 && (
+  <div className={'mr-2 flex items-center'} title='Kattintások száma'>
+  <BsFire color={'red'} size={18} className='inline' />
+  <h4 className={'text-s'}>{props.visits}32</h4>
+  </div>
+ )}
  {user.data &&
  (!(link.isFavorite || isOptimisticallyFavourite) ? (
  <BsStar className='text-slate-500 hover:text-amber-300' size={20} title='Kedvelem' onClick={e => makeFavorite(e)} />
@@ -91,7 +91,7 @@ export default function LinkWidget(props: Props) {
  </div>
  </div>
  <div className='ml-2'>
- <p className='mt-2 max-w-md overflow-hidden overflow-ellipsis whitespace-nowrap text-base'>{link.description}</p>
+ <p className='mt-2 max-w-sm overflow-hidden overflow-ellipsis whitespace-nowrap text-base'>{link.description}</p>
  </div>
  <SmallKeywords keywords={link.keywords} />
  </div>

packages/client/src/components/navbar/user-display.tsx

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 import Link from 'next/link'
-import { redirect } from 'next/navigation'
+import { TbArrowRight, TbUser } from 'react-icons/tb'
 
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
@@ -22,16 +22,28 @@ export function UserDisplay() {
  )}
  {profile.data && (
  <>
- <Button asChild variant='ghost'>
- <Link href='/admin'>Admin panel</Link>
- </Button>
+ {profile.data.role === 'ADMIN' && (
+ <Button asChild variant='ghost'>
+ <Link href='/admin'>Admin panel</Link>
+ </Button>
+ )}
  <DropdownMenu>
  <DropdownMenuTrigger>
  <Button variant='outline'>{profile.data.firstName}</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
- <DropdownMenuItem onClick={() => redirect('/profile')}>Profil</DropdownMenuItem>
- <DropdownMenuItem onClick={onLogout}>Kijelentkezés</DropdownMenuItem>
+ <DropdownMenuItem>
+ <Link href='/profile' className={'flex items-center gap-2'}>
+ <TbUser />
+ Profil
+ </Link>
+ </DropdownMenuItem>
+ <DropdownMenuItem onClick={onLogout}>
+ <span className={'flex items-center gap-2'}>
+ <TbArrowRight />
+ Kijelentkezés
+ </span>
+ </DropdownMenuItem>
  </DropdownMenuContent>
  </DropdownMenu>
  </>

packages/client/src/components/ui/dropdown-menu.tsx

@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
  ref={ref}
  sideOffset={sideOffset}
  className={cn(
- 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+ 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mr-6 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
  className
  )}
  {...props}