Skip to content

Commit

Permalink
feat!: complete redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
Stormix committed Apr 26, 2023
1 parent d08b110 commit 22842b3
Show file tree
Hide file tree
Showing 32 changed files with 642 additions and 431 deletions.
4 changes: 1 addition & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,13 @@
},
"dependencies": {
"@floating-ui/react": "^0.22.3",
"@headlessui/react": "^1.7.13",
"@headlessui/tailwindcss": "^0.1.2",
"@heroicons/react": "^2.0.17",
"@hookform/resolvers": "^3.0.0",
"@next-auth/prisma-adapter": "^1.0.5",
"@prisma/client": "^4.13.0",
"@radix-ui/react-accordion": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.0.4",
"@radix-ui/react-popover": "^1.0.5",
"@radix-ui/react-select": "^1.2.1",
"@radix-ui/react-switch": "^1.0.2",
"@sentry/nextjs": "^7.47.0",
Expand All @@ -49,7 +48,6 @@
"next-seo": "^6.0.0",
"next-sitemap": "^4.0.7",
"next-themes": "^0.2.1",
"nightwind": "^1.1.13",
"openai": "^3.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down
22 changes: 10 additions & 12 deletions src/components/atoms/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,18 @@ const buttonVariants = cva(
{
variants: {
variant: {
default:
'bg-black text-white hover:bg-white hover:text-black focus-visible:outline-white shadow-sm data-[state=open]:bg-slate-100 ',
destructive: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600',
outline: 'bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100',
subtle: 'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100',
ghost:
'bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
link: 'text-black hover:text-white focus-visible:outline-white data-[state=open]:bg-slate-100 ',
text: ' text-black hover:opacity-50 data-[state=open]:transparent'
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: 'border border-input hover:bg-accent hover:text-secondary-foreground',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-secondary-foreground',
link: 'underline-offset-4 hover:underline text-primary',
text: 'underline-offset-4 hover:underline text-primary'
},
size: {
default: 'h-10 py-2 px-4 font-medium',
sm: 'h-9 px-2 rounded-md text-sm font-medium',
lg: 'h-14 px-12 text-lg rounded-md font-bold',
default: 'h-10 py-2 px-4',
sm: 'h-9 px-3 rounded-md',
lg: 'h-11 px-8 rounded-md',
text: 'font-medium'
}
},
Expand Down
63 changes: 42 additions & 21 deletions src/components/atoms/Card.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,46 @@
import { cn } from '@/utils/styles';
import type { FC } from 'react';
import React from 'react';

interface CardProps {
children: React.ReactNode;
className?: string;
footer?: React.ReactNode;
}
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('rounded-lg border bg-card pt-8 text-card-foreground shadow-sm', className)}
{...props}
/>
));
Card.displayName = 'Card';

const Card: FC<CardProps> = ({ children, className, footer }) => {
return (
<div
className={cn(
'flex flex-col rounded-md bg-opacity-50 bg-clip-padding px-8 pt-8 shadow backdrop-blur-2xl backdrop-filter bg-white',
className,
{ 'pb-8': !footer }
)}
>
{children}
{footer && <div className="mt-8 pb-4">{footer}</div>}
</div>
);
};
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
)
);
CardHeader.displayName = 'CardHeader';

export default Card;
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => (
<h3 ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
)
);
CardTitle.displayName = 'CardTitle';

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
({ className, ...props }, ref) => (
<p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
)
);
CardDescription.displayName = 'CardDescription';

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
);
CardContent.displayName = 'CardContent';

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn(' flex items-center p-6 pt-0', className)} {...props} />
)
);
CardFooter.displayName = 'CardFooter';

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
6 changes: 3 additions & 3 deletions src/components/atoms/Comment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,12 @@ const CommentComponent: FC<CommentThreadProps> = ({ comment, comments, reply, le
<div className="flex flex-grow flex-col">
<div className="flex flex-row gap-2">
<div className="flex flex-grow flex-row items-center gap-2">
<p className="font-semibold text-black">{comment.author.name}</p>
<span className="opacity-70 text-black">{format(comment.createdAt, 'dd/MM/yyyy HH:mm:ss')}</span>
<p className="font-semibold ">{comment.author.name}</p>
<span className="opacity-70 ">{format(comment.createdAt, 'dd/MM/yyyy HH:mm:ss')}</span>
</div>
<CommentActions comment={comment} />
</div>
<div className="py-2 text-black">{comment.content}</div>
<div className="py-2 ">{comment.content}</div>
<div className="flex flex-row gap-2 pb-2">
<Button
variant="text"
Expand Down
2 changes: 0 additions & 2 deletions src/components/atoms/DarkModeSwitch.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useTheme } from 'next-themes';
import nightwind from 'nightwind/helper';
import { DarkModeSwitch as DarkModeSwitchIcon } from 'react-toggle-dark-mode';

export enum Theme {
Expand All @@ -11,7 +10,6 @@ const DarkModeSwitch = () => {
const { theme, setTheme } = useTheme();

const toggle = () => {
nightwind.beforeTransition();
setTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark);
};

Expand Down
15 changes: 10 additions & 5 deletions src/components/atoms/Logo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,20 @@ import { cn } from '@/utils/styles';
import { useRouter } from 'next/router';
import type { FC } from 'react';

const Logo: FC<{ footer?: boolean }> = ({ footer }) => {
const Logo: FC<{ footer?: boolean; small?: boolean }> = ({ footer, small }) => {
const router = useRouter();
return (
<div className={cn('flex cursor-pointer flex-row gap-2', { 'flex-col': footer })} onClick={() => router.push('/')}>
<div
className={cn('flex cursor-pointer flex-row items-center gap-2', { 'flex-col': footer })}
onClick={() => router.push('/')}
>
<LogoSvg className={cn('h-6 w-6', { 'h-16 w-16': footer })} />
<span className="sr-only">{APP_NAME}</span>
<h1 className="font-bold" title={APP_NAME}>
{APP_NAME}
</h1>
{!small && (
<span className="logo" title={APP_NAME}>
{APP_NAME}
</span>
)}
</div>
);
};
Expand Down
30 changes: 30 additions & 0 deletions src/components/atoms/Popover.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
'use client';

import { cn } from '@/utils/styles';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import * as React from 'react';

const Popover = PopoverPrimitive.Root;

const PopoverTrigger = PopoverPrimitive.Trigger;

const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in 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',
className
)}
{...props}
/>
</PopoverPrimitive.Portal>
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;

export { Popover, PopoverTrigger, PopoverContent };
8 changes: 4 additions & 4 deletions src/components/atoms/Rating.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Rating: FC<RatingProps> = ({ rating, readonly, disabled, loading, ratings,
const { getReferenceProps } = useInteractions([hover]);
const ratingValue = rating ?? 0;
return (
<div className="mb-3 flex items-center">
<div className="mb-3 flex items-center">
<div className="flex flex-row-reverse items-center" ref={refs.setReference} {...getReferenceProps()}>
{Array.from({ length: 5 }, (_, i) => {
const isHalf = parseInt(ratingValue.toString()) !== rating && ratingValue < 5 - i && ratingValue > 5 - i - 1;
Expand All @@ -45,14 +45,14 @@ const Rating: FC<RatingProps> = ({ rating, readonly, disabled, loading, ratings,
);
})}
</div>
{loading && <p className="ml-2 text-sm font-medium opacity-50 text-black">Saving...</p>}
{loading && <p className="ml-2 text-sm font-medium text-black opacity-50">Saving...</p>}
{rating && !loading && (
<>
<p>({ratings})</p>
<p className="ml-2 text-sm font-medium opacity-50 text-black">{rating} out of 5</p>
<p className="ml-2 text-sm font-medium text-black opacity-50">{rating} out of 5</p>
</>
)}
{!rating && !loading && <p className="ml-2 text-sm font-medium opacity-50 text-black">No rating yet</p>}
{!rating && !loading && <p className="muted ml-2">No rating yet</p>}
</div>
);
};
Expand Down
34 changes: 20 additions & 14 deletions src/components/atoms/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,43 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
'flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 placeholder:text-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ',
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 opacity-50" />
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, ...props }, ref) => (
>(({ className, children, position = 'popper', ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md bg-white text-slate-700 border-slate-100 animate-in fade-in-80 ',
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
position === 'popper' && 'translate-y-1',
className
)}
position={position}
{...props}
>
<SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
<SelectPrimitive.Viewport
className={cn(
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
)}
>
{children}
</SelectPrimitive.Viewport>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
));
Expand All @@ -52,11 +64,7 @@ const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold text-slate-900 ', className)}
{...props}
/>
<SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;

Expand All @@ -67,7 +75,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className
)}
{...props}
Expand All @@ -81,16 +89,14 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
));

SelectItem.displayName = SelectPrimitive.Item.displayName;

const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-slate-100', className)} {...props} />
<SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
));

SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator };
Loading

1 comment on commit 22842b3

@vercel
Copy link

@vercel vercel bot commented on 22842b3 Apr 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.