Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: interact with user settings/profile (#9)

Browse Source
This commit is contained in:
Divlo
2022-02-19 23:20:33 +01:00
committed by GitHub
parent 48debe8638
commit 7ac4f86cd5
101 changed files with 6705 additions and 9777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx
View File

@ -11,12 +11,12 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
return (
<div
className='relative flex w-full cursor-pointer transition group'
className='group relative flex w-full cursor-pointer transition'
onClick={handleConfirmationState}
>
<div className='relative group-hover:-translate-x-20 px-8 py-5 w-full transition'>
<div className='flex group-hover:opacity-40 transition'>
<div className='flex justify-center rounded-full filter drop-shadow-lg mr-8 min-w-[60px] min-h-[60px] select-none'>
<div className='relative w-full px-8 py-5 transition group-hover:-translate-x-20'>
<div className='flex transition group-hover:opacity-40'>
<div className='mr-8 flex min-h-[60px] min-w-[60px] select-none justify-center rounded-full drop-shadow-lg filter'>
<Image
className='rounded-full'
src='/images/guilds/Guild_1.svg'
@ -28,13 +28,13 @@ export const UserProfileGuild: React.FC<UserProfileGuildProps> = (props) => {
</div>
<div className='flex flex-col'>
<h1 className='text-xl font-bold'>Guild Name</h1>
<p className='text-gray-300 mt-2'>
<p className='mt-2 text-gray-300'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
nam.
</p>
</div>
</div>
<div className='absolute top-0 right-[-80px] flex justify-center items-center w-[80px] h-full'>
<div className='absolute top-0 right-[-80px] flex h-full w-[80px] items-center justify-center'>
<LoginIcon
height={40}
className='fill-green-600 drop-shadow-[0_0_15px_rgba(22,163,74,0.50)]'

25
components/Application/UserProfile/UserProfileGuilds/UserProfileGuilds.tsx
View File

@ -3,8 +3,11 @@ import classNames from 'classnames'
import { EyeOffIcon } from '@heroicons/react/solid'
import useTranslation from 'next-translate/useTranslation'
import { Guild } from '../../../../models/Guild'
export interface UserProfileGuildsProps {
isPublicGuilds?: boolean
guilds: Guild[]
}
export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
@ -19,10 +22,10 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
>
<div
className={classNames('flex -space-x-7', {
'blur-lg select-none': !isPublicGuilds
'select-none blur-lg': !isPublicGuilds
})}
>
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
<Image
className='rounded-full'
src='/images/guilds/Guild_1.svg'
@ -32,7 +35,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
width={60}
/>
</div>
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
<Image
className='rounded-full'
src='/images/guilds/Guild_2.svg'
@ -42,7 +45,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
width={60}
/>
</div>
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
<Image
className='rounded-full'
src='/images/guilds/Guild_3.svg'
@ -52,7 +55,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
width={60}
/>
</div>
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
<Image
className='rounded-full'
src='/images/guilds/Guild_4.svg'
@ -62,7 +65,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
width={60}
/>
</div>
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
<Image
className='rounded-full'
src='/images/guilds/Guild_5.svg'
@ -72,7 +75,7 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
width={60}
/>
</div>
<div className='flex justify-center items-center rounded-full filter drop-shadow-lg'>
<div className='flex items-center justify-center rounded-full drop-shadow-lg filter'>
<Image
className='rounded-full'
src='/images/guilds/Guild_6.svg'
@ -82,20 +85,20 @@ export const UserProfileGuilds: React.FC<UserProfileGuildsProps> = (props) => {
width={60}
/>
</div>
<div className='w-[60px] h-[60px] flex justify-center items-center rounded-full filter drop-shadow-lg bg-gray-300 dark:bg-gray-800 z-10'>
<span className='font-bold text-black dark:text-white text-xl select-none'>
<div className='z-10 flex h-[60px] w-[60px] items-center justify-center rounded-full bg-gray-300 drop-shadow-lg filter dark:bg-gray-800'>
<span className='select-none text-xl font-bold text-black dark:text-white'>
+4
</span>
</div>
</div>
<div
className={classNames(
'absolute flex items-center top-1/2 -translate-y-1/2',
'absolute top-1/2 flex -translate-y-1/2 items-center',
{ hidden: isPublicGuilds }
)}
>
<EyeOffIcon height={25} />
<p className='drop-shadow-2xl ml-4'>
<p className='ml-4 drop-shadow-2xl'>
{t('application:private-user-guilds-list')}
</p>
</div>