feat: enhance Button component with variants and sizes; update HeaderTop to use DUMMY data
This commit is contained in:
Ardeman
parent
f8a87019af
commit
d2534bd94e
@ -1,3 +1,71 @@
|
||||
export const Button = () => {
|
||||
return <div>Button</div>
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import type {
|
||||
ButtonHTMLAttributes,
|
||||
HTMLAttributes,
|
||||
MouseEventHandler,
|
||||
ReactNode,
|
||||
} from 'react'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
|
||||
newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
|
||||
// destructive:
|
||||
// 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
// outline:
|
||||
// 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
// secondary:
|
||||
// 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
// ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
// link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-[50px] w-[150px]',
|
||||
block: 'h-[50px] w-full',
|
||||
// sm: 'h-8 rounded-md px-3 text-xs',
|
||||
// lg: 'h-10 rounded-md px-8',
|
||||
// icon: 'h-9 w-9',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'newsPrimary',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
type TProperties = {
|
||||
type?: ButtonHTMLAttributes<HTMLButtonElement>['type']
|
||||
onClick?: MouseEventHandler<HTMLButtonElement>
|
||||
className?: HTMLAttributes<HTMLButtonElement>['className']
|
||||
disabled?: boolean
|
||||
children: ReactNode
|
||||
variant?: VariantProps<typeof buttonVariants>['variant']
|
||||
size?: VariantProps<typeof buttonVariants>['size']
|
||||
}
|
||||
|
||||
export const Button = (properties: TProperties) => {
|
||||
const {
|
||||
type = 'button',
|
||||
onClick,
|
||||
className,
|
||||
disabled,
|
||||
children,
|
||||
variant,
|
||||
size,
|
||||
} = properties
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
className={twMerge(buttonVariants({ variant, size, className }))}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
export const HTML_TITLE = 'React Router'
|
||||
@ -1,4 +1,6 @@
|
||||
export const DUMMY = {
|
||||
title: 'React Router',
|
||||
description:
|
||||
'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
|
||||
logo: '/images/logo.svg',
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import { Button } from '~/components/button'
|
||||
import { HTML_TITLE } from '~/configs/meta'
|
||||
import { DUMMY } from '~/data/dummy'
|
||||
|
||||
export const HeaderTop = () => {
|
||||
@ -12,16 +11,24 @@ export const HeaderTop = () => {
|
||||
className="h-full py-[5px]"
|
||||
>
|
||||
<img
|
||||
src="/images/logo.svg"
|
||||
alt={HTML_TITLE}
|
||||
src={DUMMY.logo}
|
||||
alt={DUMMY.title}
|
||||
className="h-full w-auto"
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
|
||||
{DUMMY.description}
|
||||
</div>
|
||||
<div className="">
|
||||
<Button />
|
||||
<div className="flex items-center gap-[15px]">
|
||||
<Button>About Us</Button>
|
||||
<Button variant="newsSecondary">Akun</Button>
|
||||
<div className="w-[60px]">
|
||||
<img
|
||||
alt="language"
|
||||
src="/flags/id.svg"
|
||||
className="shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -17,10 +17,12 @@
|
||||
"@react-router/fs-routes": "^7.1.3",
|
||||
"@react-router/node": "^7.1.3",
|
||||
"@react-router/serve": "^7.1.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"isbot": "^5.1.17",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router": "^7.1.3"
|
||||
"react-router": "^7.1.3",
|
||||
"tailwind-merge": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.6.1",
|
||||
|
||||
18
pnpm-lock.yaml
generated
18
pnpm-lock.yaml
generated
@ -17,6 +17,9 @@ importers:
|
||||
'@react-router/serve':
|
||||
specifier: ^7.1.3
|
||||
version: 7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
isbot:
|
||||
specifier: ^5.1.17
|
||||
version: 5.1.22
|
||||
@ -29,6 +32,9 @@ importers:
|
||||
react-router:
|
||||
specifier: ^7.1.3
|
||||
version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
tailwind-merge:
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1
|
||||
devDependencies:
|
||||
'@commitlint/cli':
|
||||
specifier: ^19.6.1
|
||||
@ -1534,6 +1540,9 @@ packages:
|
||||
resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
class-variance-authority@0.7.1:
|
||||
resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
|
||||
|
||||
classnames@2.5.1:
|
||||
resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
|
||||
|
||||
@ -3624,6 +3633,9 @@ packages:
|
||||
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
tailwind-merge@3.0.1:
|
||||
resolution: {integrity: sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==}
|
||||
|
||||
tailwindcss@4.0.1:
|
||||
resolution: {integrity: sha512-UK5Biiit/e+r3i0O223bisoS5+y7ZT1PM8Ojn0MxRHzXN1VPZ2KY6Lo6fhu1dOfCfyUAlK7Lt6wSxowRabATBw==}
|
||||
|
||||
@ -5450,6 +5462,10 @@ snapshots:
|
||||
|
||||
ci-info@4.1.0: {}
|
||||
|
||||
class-variance-authority@0.7.1:
|
||||
dependencies:
|
||||
clsx: 2.1.1
|
||||
|
||||
classnames@2.5.1: {}
|
||||
|
||||
clean-regexp@1.0.0:
|
||||
@ -7647,6 +7663,8 @@ snapshots:
|
||||
|
||||
supports-preserve-symlinks-flag@1.0.0: {}
|
||||
|
||||
tailwind-merge@3.0.1: {}
|
||||
|
||||
tailwindcss@4.0.1: {}
|
||||
|
||||
tapable@2.2.1: {}
|
||||
|
||||
26
public/flags/en.svg
Normal file
26
public/flags/en.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900">
|
||||
<rect width="7410" height="3900" fill="#b22234"/>
|
||||
<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300"/>
|
||||
<rect width="2964" height="2100" fill="#3c3b6e"/>
|
||||
<g fill="#fff">
|
||||
<g id="s18">
|
||||
<g id="s9">
|
||||
<g id="s5">
|
||||
<g id="s4">
|
||||
<path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/>
|
||||
<use xlink:href="#s" y="420"/>
|
||||
<use xlink:href="#s" y="840"/>
|
||||
<use xlink:href="#s" y="1260"/>
|
||||
</g>
|
||||
<use xlink:href="#s" y="1680"/>
|
||||
</g>
|
||||
<use xlink:href="#s4" x="247" y="210"/>
|
||||
</g>
|
||||
<use xlink:href="#s9" x="494"/>
|
||||
</g>
|
||||
<use xlink:href="#s18" x="988"/>
|
||||
<use xlink:href="#s9" x="1976"/>
|
||||
<use xlink:href="#s5" x="2470"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 899 B |
5
public/flags/id.svg
Normal file
5
public/flags/id.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="300" viewBox="0 0 3 2">
|
||||
<rect fill="#FFF" width="3" height="2"/>
|
||||
<rect fill="#F00" width="3" height="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 215 B |
Loading…
x
Reference in New Issue
Block a user