d4a5378adf
Frontend: - Replace Next.js with Vite + React + TypeScript - Add new component architecture (app-shell, sidebar, dashboard modules) - Implement product modules: FRAME, safety protocols, walkthrough checkin, campus/staff attendance, personality quiz, sign language, classroom timer - Add shadcn/ui component library with Tailwind CSS - Remove legacy generated components, stores, and pages Backend: - Add product migrations: frame_entries, user_progress, safety_quiz_results, walkthrough_checkins, communication_events, personality_quiz_results, campus_attendance_config/summaries, staff_attendance_records, content_catalog - Add corresponding models, services, and routes - Implement cookie-based auth with refresh token rotation - Add content catalog seeder with product content - Migrate to ESLint flat config - Switch from yarn to npm Infrastructure: - Update .gitignore for new tooling - Add project documentation (CLAUDE.md, docs/) - Remove deprecated config files and yarn.lock Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React, { ReactNode } from 'react'
|
|
import CardBoxComponentBody from './CardBoxComponentBody'
|
|
import CardBoxComponentFooter from './CardBoxComponentFooter'
|
|
import { useAppSelector } from '../stores/hooks';
|
|
|
|
type Props = {
|
|
rounded?: string
|
|
flex?: string
|
|
className?: string
|
|
hasComponentLayout?: boolean
|
|
cardBoxClassName?: string
|
|
hasTable?: boolean
|
|
isHoverable?: boolean
|
|
isModal?: boolean
|
|
children?: ReactNode
|
|
footer?: ReactNode
|
|
isList?:boolean
|
|
id?: string;
|
|
onClick?: (e: React.MouseEvent) => void
|
|
}
|
|
|
|
export default function CardBox({
|
|
rounded = 'rounded',
|
|
flex = 'flex-col',
|
|
className = '',
|
|
hasComponentLayout = false,
|
|
cardBoxClassName = '',
|
|
hasTable = false,
|
|
isHoverable = false,
|
|
isList = false,
|
|
isModal = false,
|
|
children,
|
|
footer,
|
|
id ='',
|
|
onClick,
|
|
}: Props) {
|
|
const corners = useAppSelector((state) => state.style.corners);
|
|
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
|
const componentClass = [
|
|
`flex dark:border-dark-700 dark:bg-dark-900`,
|
|
className,
|
|
corners !== 'rounded-full'? corners : 'rounded-3xl',
|
|
flex,
|
|
isList ? '' : `${cardsStyle}`,
|
|
hasTable ? '' : `border-dark-700 dark:border-dark-700`,
|
|
]
|
|
|
|
if (isHoverable) {
|
|
componentClass.push('hover:shadow-lg transition-shadow duration-500')
|
|
}
|
|
|
|
return React.createElement(
|
|
'div',
|
|
{ className: componentClass.join(' '), onClick },
|
|
hasComponentLayout ? (
|
|
children
|
|
) : (
|
|
<>
|
|
<CardBoxComponentBody id={id} noPadding={hasTable} className={cardBoxClassName}>{children}</CardBoxComponentBody>
|
|
{footer && <CardBoxComponentFooter>{footer}</CardBoxComponentFooter>}
|
|
</>
|
|
)
|
|
)
|
|
}
|