NAM

+ } +) + +export default Object.assign(Card, { + Actions: CardActions, + Body: CardBody, + Title: CardTitle, + Image: CardImage, +}) \ No newline at end of file diff --git a/src/components/data_display/Card/CardActions.tsx b/src/components/data_display/Card/CardActions.tsx new file mode 100644 index 0000000..5df31e2 --- /dev/null +++ b/src/components/data_display/Card/CardActions.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { twMerge } from 'tailwind-merge' +import { IComponentBaseProps } from '@/components/types' + +export type CardActionsProps = React.HTMLAttributes & + IComponentBaseProps + +const CardActions = React.forwardRef( + ({ className, ...props }, ref) => ( +

+ ) +) + +export default CardActions \ No newline at end of file diff --git a/src/components/data_display/Card/CardBody.tsx b/src/components/data_display/Card/CardBody.tsx new file mode 100644 index 0000000..42e095f --- /dev/null +++ b/src/components/data_display/Card/CardBody.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { twMerge } from 'tailwind-merge' +import { IComponentBaseProps } from '@/components/types' + +export type CardBodyProps = React.HTMLAttributes & + IComponentBaseProps + +const CardBody = React.forwardRef( + ({ className, ...props }, ref) => ( +

+ ) +) + +export default CardBody \ No newline at end of file diff --git a/src/components/data_display/Card/CardImage.tsx b/src/components/data_display/Card/CardImage.tsx new file mode 100644 index 0000000..3ad5bea --- /dev/null +++ b/src/components/data_display/Card/CardImage.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +export type CardImageProps = React.ImgHTMLAttributes + +const CardImage = React.forwardRef( + ({ ...props }, ref) => { + return ( +

+ + + ) + } +) + +export default CardImage \ No newline at end of file diff --git a/src/components/data_display/Card/CardTitle.tsx b/src/components/data_display/Card/CardTitle.tsx new file mode 100644 index 0000000..31ef65f --- /dev/null +++ b/src/components/data_display/Card/CardTitle.tsx @@ -0,0 +1,20 @@ +import React, { ElementType } from 'react' +import { twMerge } from 'tailwind-merge' +import { IComponentBaseProps } from '@/components/types' + +export type CardTitleProps = React.HTMLAttributes & + IComponentBaseProps & { + tag?: ElementType + } + +const CardTitle = React.forwardRef( + ({ className, tag = 'div', ...props }, ref) => { + const Tag = tag + + return ( + + ) + } +) + +export default CardTitle \ No newline at end of file diff --git a/src/components/defaultThemes.ts b/src/components/defaultThemes.ts new file mode 100644 index 0000000..c8ffd87 --- /dev/null +++ b/src/components/defaultThemes.ts @@ -0,0 +1,34 @@ +export const DEFAULT_THEMES = [ + 'light', + 'dark', + 'cupcake', + 'bumblebee', + 'emerald', + 'corporate', + 'synthwave', + 'retro', + 'cyberpunk', + 'valentine', + 'halloween', + 'garden', + 'forest', + 'aqua', + 'lofi', + 'pastel', + 'fantasy', + 'wireframe', + 'black', + 'luxury', + 'dracula', + 'cmyk', + 'autumn', + 'business', + 'acid', + 'lemonade', + 'night', + 'coffee', + 'winter', + 'dim', + 'nord', + 'sunset', + ] as const \ No newline at end of file diff --git a/src/components/feedback/Alert.tsx b/src/components/feedback/Alert.tsx new file mode 100644 index 0000000..3e3a9e4 --- /dev/null +++ b/src/components/feedback/Alert.tsx @@ -0,0 +1,52 @@ +import React, { forwardRef, JSX, ReactNode } from 'react' +import clsx from 'clsx' +import { twMerge } from 'tailwind-merge' + +import { IComponentBaseProps, ComponentStatus } from '../types' + +export type AlertProps = React.HTMLAttributes & + IComponentBaseProps & { + icon?: ReactNode + status?: ComponentStatus + soft?: boolean + outline?: boolean + dash?: boolean + } + +const Alert = forwardRef( + ( + { children, icon, status, soft, outline, dash, dataTheme, className, ...props }, + ref + ): JSX.Element => { + const classes = twMerge( + 'alert text-base-100', + className, + clsx({ + 'alert-info': status === 'info', + 'alert-success': status === 'success', + 'alert-warning': status === 'warning', + 'alert-error': status === 'error', + 'alert-soft': soft, + 'alert-outline': outline, + 'alert-dash': dash, + }) + ) + + return ( +

+ {icon} + {children} +

+ ) + } +) + +Alert.displayName = 'Alert' + +export default Alert \ No newline at end of file diff --git a/src/components/feedback/Loading.tsx b/src/components/feedback/Loading.tsx new file mode 100644 index 0000000..4065508 --- /dev/null +++ b/src/components/feedback/Loading.tsx @@ -0,0 +1,72 @@ +import React, { forwardRef, JSX } from 'react' +import clsx from 'clsx' +import { twMerge } from 'tailwind-merge' + +import { + IComponentBaseProps, + ComponentColor, + ComponentSize, +} from '../types' + +export type LoadingProps = + React.HTMLAttributes + & IComponentBaseProps + & { + size?: ComponentSize + color?: ComponentColor + variant?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity' + } + +const Loading = forwardRef( + ( + { + size, + variant = 'spinner', + color, + dataTheme, + className, + style, + ...props + }, + ref + ): JSX.Element => { + const classes = twMerge( + 'loading', + className, + clsx({ + 'loading-lg': size === 'lg', + 'loading-md': size === 'md', + 'loading-sm': size === 'sm', + 'loading-xs': size === 'xs', + 'loading-spinner': variant === 'spinner', + 'loading-dots': variant === 'dots', + 'loading-ring': variant === 'ring', + 'loading-ball': variant === 'ball', + 'loading-bars': variant === 'bars', + 'loading-infinity': variant === 'infinity', + 'text-primary': color === 'primary', + 'text-secondary': color === 'secondary', + 'text-accent': color === 'accent', + 'text-info': color === 'info', + 'text-success': color === 'success', + 'text-warning': color === 'warning', + 'text-error': color === 'error', + 'text-ghost': color === 'ghost', + }) + ) + + return ( + + ) + } +) + +Loading.displayName = 'Loading' + +export default Loading \ No newline at end of file diff --git a/src/components/forms/Input.tsx b/src/components/forms/Input.tsx new file mode 100644 index 0000000..21dc15d --- /dev/null +++ b/src/components/forms/Input.tsx @@ -0,0 +1,71 @@ +import React, { forwardRef, JSX } from 'react' +import clsx from 'clsx' +import { twMerge } from 'tailwind-merge' + +import { IComponentBaseProps, ComponentColor, ComponentSize } from '../types' + +export type InputProps = Omit< + React.InputHTMLAttributes, + 'size' | 'color' +> & + IComponentBaseProps & { + bordered?: boolean + borderOffset?: boolean + size?: ComponentSize + color?: ComponentColor + } + +const Input = forwardRef( + ( + { + value, + placeholder, + bordered = true, + borderOffset, + size, + color, + dataTheme, + className, + type, + ...props + }, + ref + ): JSX.Element => { + const classes = twMerge( + 'input', + className, + clsx({ + 'input-lg': size === 'lg', + 'input-md': size === 'md', + 'input-sm': size === 'sm', + 'input-xs': size === 'xs', + 'input-primary': color === 'primary', + 'input-secondary': color === 'secondary', + 'input-accent': color === 'accent', + 'input-ghost': color === 'ghost', + 'input-info': color === 'info', + 'input-success': color === 'success', + 'input-warning': color === 'warning', + 'input-error': color === 'error', + 'input-bordered': bordered, + 'focus:outline-offset-0': !borderOffset, + }) + ) + + return ( + + ) + } +) + +Input.displayName = 'Input' + +export default Input \ No newline at end of file diff --git a/src/components/layouts/Dashboard/Header.tsx b/src/components/layouts/Dashboard/Header.tsx new file mode 100644 index 0000000..c33190f --- /dev/null +++ b/src/components/layouts/Dashboard/Header.tsx @@ -0,0 +1,122 @@ +import React from "react"; +import { NavLink } from "react-router"; +import { User } from "@/features/auth/store"; +import Menu from "@/components/navigation/Menu/Menu"; +import Dropdown from "@/components/actions/Dropdown/Dropdown"; + +interface HeaderProps { + user: User | null; + handleLogout: () => void; + toggleSidebar: () => void; +} + +const Header: React.FC = ({ + user, + handleLogout, + toggleSidebar, +}) => { + return ( +

+ {/* Mobile Sidebar Toggle */} +

User	Aktivitas	Waktu
admin@example.com	Login ke sistem	5 menit yang lalu
user1@example.com	Update profil	10 menit yang lalu
admin@example.com	Tambah user baru	15 menit yang lalu
user2@example.com	Login ke sistem	20 menit yang lalu
user3@example.com	Reset password	30 menit yang lalu

404

Login

Dashboard

{stat.value.toLocaleString()}

Aktivitas Terkini

Informasi Sistem

Teknologi

Version

Devices

+ {isEditing ? 'Edit Pengguna' : 'Tambah Pengguna'} +

Manajemen Pengguna

Konfirmasi Hapus

+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} +