Merge pull request #39 from HarlonGarcia/feature/challenge-solutions

Implemented challenge solutions

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: [master]
 
 jobs:
   CI:

src/components/Select/index.tsx

@@ -1,36 +1,41 @@
 import { ChangeEvent, ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { NONE } from 'utils/constants';
 
 import './styles.scss';
 
 interface SelectProps extends ComponentProps<'select'> {
-  cannotBeEmpty?: boolean;
-  placeholder: string;
-  label?: string;
-  value?: string;
-  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
-  options: {
-    label: string;
-    value: string;
-    disabled?: boolean;
-  }[];
+    onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+    deselectable?: boolean;
+    error?: string;
+    placeholder?: string;
+    label?: string;
+    value?: string;
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
 }
 
 export const Select = ({
     id,
-    cannotBeEmpty = false,
+    deselectable = false,
+    error,
     placeholder,
     label,
     options,
     value,
     onChange,
     ...rest
 }: SelectProps) => {
+    const { t } = useTranslation();
+
     return (
         <div className='co-select'>
             {label && (
-                <label htmlFor={id}>{label}</label>
+                <label className='mb-2 text-green-800 sm:text-lg' htmlFor={id}>{label}</label>
             )}
             <select
                 id={id}
@@ -39,11 +44,9 @@ export const Select = ({
                 className='co-select-input'
                 {...rest}
             >
-                {placeholder && (
-                    <option value={NONE} defaultValue={NONE} disabled={cannotBeEmpty}>
-                        {placeholder}
-                    </option>
-                )}
+                <option value={NONE} defaultValue={NONE} disabled={deselectable}>
+                    {placeholder || t('global.select.placeholder')}
+                </option>
                 {options.map(({ label, value, disabled }) => (
                     <option
                         key={value}
@@ -54,6 +57,9 @@ export const Select = ({
                     </option>
                 ))}
             </select>
+            {error && (
+                <span className='mt-2 font-sm text-red-500'>{error}</span>
+            )}
         </div>
     );
 };

src/components/Sidebar/index.tsx

@@ -49,7 +49,7 @@ export default function Sidebar({
             .findIndex(({ path }) => path === window.location.pathname.split('/')[2]);
 
         setActivePage(-1 === pathIndex ? 0 : pathIndex);
-    }, [activePage]);
+    }, []);
 
     return (
         <S.Container visible={visible}>

src/components/shared/Avatar/index.tsx

@@ -1,11 +1,12 @@
-import { twJoin } from 'tailwind-merge';
+import { twJoin, twMerge } from 'tailwind-merge';
 import { tv } from 'tailwind-variants';
 
 interface AvatarProps {
     url?: string;
     name?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';
     border?: boolean;
+    className?: string;
     onClick?: () => void;
 }
 
@@ -50,6 +51,7 @@ export const Avatar = ({
     url,
     size,
     border = false,
+    className = '',
     onClick = () => {},
 }: AvatarProps) => {
     const getPlaceholder = (text?: string): string => {
@@ -62,12 +64,14 @@ export const Avatar = ({
 
     const placeholder = getPlaceholder(name);
 
-    const classNames = twJoin(avatar({ size }),
+    const defaultClasses = twJoin(avatar({ size }),
         border && 'border-green-800',
     );
 
+    const classes = twMerge(defaultClasses, className);
+
     return (
-        <div title={name} className={classNames}>
+        <div title={name} className={classes}>
             <button type='button' onClick={onClick} className='overflow-hidden'>
                 {url
                     ? (

src/components/shared/Select/index.tsx

@@ -1,7 +1,7 @@
 import {
-  ReactNode,
-  SelectHTMLAttributes,
-  forwardRef,
+    ReactNode,
+    SelectHTMLAttributes,
+    forwardRef,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,62 +32,62 @@ type SelectProps = DefaultSelectProps & {
 };
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  function Select(props, ref) {
-    const {
-      label,
-      error,
-      size = 'sm',
-      weight = 'normal',
-      options,
-      default: defaultOption,
-      ...rest
-    } = props;
+    function Select(props, ref) {
+        const {
+            label,
+            error,
+            size = 'sm',
+            weight = 'normal',
+            options,
+            default: defaultOption,
+            ...rest
+        } = props;
 
-    const { t } = useTranslation();
+        const { t } = useTranslation();
 
-    return (
-      <S.Wrapper size={size} weight={weight}>
-        {label && (
-          <label htmlFor={rest.id}>
-            {label}
-          </label>
-        )}
+        return (
+            <S.Wrapper size={size} weight={weight}>
+                {label && (
+                    <label htmlFor={rest.id}>
+                        {label}
+                    </label>
+                )}
 
-        <S.ContentArea ref={ref} {...rest}>
-          {!defaultOption && (
-            <S.Option
-              style={{ display: 'none' }}
-              value={NONE}
-            >
-              {t('global.select.placeholder')}
-            </S.Option>
-          )}
+                <S.ContentArea ref={ref} {...rest}>
+                    {!defaultOption && (
+                        <S.Option
+                            style={{ display: 'none' }}
+                            value={NONE}
+                        >
+                            {t('global.select.placeholder')}
+                        </S.Option>
+                    )}
 
-          {defaultOption && (
-            <S.Option
-              style={{ display: 'none' }}
-              value={defaultOption.value}
-            >
-              {defaultOption.label}
-            </S.Option>
-          )}
+                    {defaultOption && (
+                        <S.Option
+                            style={{ display: 'none' }}
+                            value={defaultOption.value}
+                        >
+                            {defaultOption.label}
+                        </S.Option>
+                    )}
 
-          {options.map(({ key, value, label, disabled = false }) => (
-            <S.Option
-              key={key}
-              value={value}
-              disabled={disabled}
-              isDisabled={disabled}
-            >
-              {label}
-            </S.Option>
-          ))}
-        </S.ContentArea>
+                    {options.map(({ key, value, label, disabled = false }) => (
+                        <S.Option
+                            key={key}
+                            value={value}
+                            disabled={disabled}
+                            isDisabled={disabled}
+                        >
+                            {label}
+                        </S.Option>
+                    ))}
+                </S.ContentArea>
 
-        {error && (
-          <span>{error}</span>
-        )}
-      </S.Wrapper>
-    );
-  },
+                {error && (
+                    <span>{error}</span>
+                )}
+            </S.Wrapper>
+        );
+    },
 );

src/components/shared/UserLink/index.tsx

@@ -5,29 +5,29 @@ import { getUrlWithoutPrefix } from 'services/utils';
 import * as S from './styles';
 
 interface UserLinkProps extends Omit<ComponentProps<'a'>, 'ref'> {
-  blank?: boolean;
-  prettify?: boolean;
-  spacing?: boolean;
+    blank?: boolean;
+    prettify?: boolean;
+    spacing?: boolean;
 };
 
 export const UserLink = ({
-  href,
-  spacing = false,
-  prettify = false,
-  blank = true,
-  ...otherProps
+    href,
+    spacing = false,
+    prettify = false,
+    blank = true,
+    ...otherProps
 }: UserLinkProps) => {
-  const formattedUrl = prettify && href ? getUrlWithoutPrefix(href) : '-';
+    const formattedUrl = prettify && href ? getUrlWithoutPrefix(href) : '-';
 
-  return (
-    <S.Content
-      spacing={spacing}
-      href={href}
-      target={blank ? '_blank' : undefined}
-      rel={blank ? 'noreferrer' : undefined}
-      {...otherProps}
-    >
-      {prettify ? formattedUrl : href}
-    </S.Content>
-  );
+    return (
+        <S.Content
+            spacing={spacing}
+            href={href}
+            target={blank ? '_blank' : undefined}
+            rel={blank ? 'noreferrer' : undefined}
+            {...otherProps}
+        >
+            {prettify ? formattedUrl : href}
+        </S.Content>
+    );
 }

src/components/shared/UserLink/styles.ts

@@ -1,19 +1,24 @@
 import { styled } from 'styles';
 
 const Content = styled('a', {
-  '&:hover': {
-    color: '$highlight',
-  },
+    maxWidth: '20rem',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
 
-  variants: {
-    spacing: {
-      true: {
-        letterSpacing: '1px',
-      }
+    '&:hover': {
+        color: '$highlight',
     },
-  }
+
+    variants: {
+        spacing: {
+            true: {
+                letterSpacing: '1px',
+            },
+        },
+    }
 });
 
 export {
-  Content,
+    Content,
 };

src/pages/Challenges/Participants/PreviewDemo/index.tsx

@@ -0,0 +1,28 @@
+import { Trans } from 'react-i18next';
+
+interface PreviewDemoProps {
+    url: string;
+    preview: string;
+}
+
+export const PreviewDemo = ({ url, preview }: PreviewDemoProps) => {
+    return (
+        <div className='relative group hover:text-green-800'>
+            <div className='z-[2] opacity-0 absolute top-6 -left-48 w-64 rounded-3xl rounded-tr-sm transition-all duration-300 ease-in-out pointer-events-none overflow-hidden group-hover:opacity-100 md:left-0 md:rounded-tr-3xl md:rounded-tl-sm md:w-96'>
+                <img
+                    src={preview}
+                    alt='Preview'
+                    className='w-full bg-cover'
+                />
+            </div>
+            <a
+                className='font-fira transition-all duration-300 ease-in-out '
+                href={url}
+                target={'_blank'}
+                rel={'noreferrer'}
+            >
+                <Trans>{'pages.challenge_users.table.columns.demo'}</Trans>
+            </a>
+        </div>
+    )
+}