General

All files include some level of explanation so that you can quickly understand what the file is supposed to be doing, what it depends on, and how it works.

All files follow the same structure at the top:

// Import External Packages <- External Packages like React
// Import Local Imports <- A module's own components, functions, etc.
// Import Core Dependencies <- Files from Core Modules
// Import Shared Dependencies <- Files from Shared Modules
// Import Extension Dependencies <- Files from Extension Modules

The structure allows to quickly get an overview of what is flowing into the file at hand.

To give an example, here is a Back To Top Button. Every other component will have the same level of documentation.

'use client'

// Import External Packages
import { ArrowUp } from 'lucide-react'
// Import Local Imports
// Import Core Dependencies
// Import Shared Dependencies
import { Button, ButtonProps } from '@/ui/Button'
import { cn } from '@/lib/utils'
// Import Extension Dependencies

/**
 * Renders a button component that scrolls the page to the top when clicked.
 *
 * @param buttonText - The text to display on the button. Default is 'Back to top'.
 * @param showArrowIcon - Determines whether to show an arrow icon next to the button text. Default is true.
 * @param className - Additional CSS class names to apply to the button.
 * @param variant - The variant of the button. Default is 'secondary'.
 */
export default function Button_BackToTop({
	buttonText = 'Back to top',
	showArrowIcon = true,
	className,
	variant,
}: {
	buttonText?: string
	showArrowIcon?: boolean
	className?: string
	variant?: ButtonProps['variant']
}) {
	// Function to scroll the page to the top when the button is clicked
	const handleClick = () => {
		window.scrollTo({ top: 0, behavior: 'smooth' })
	}

	return (
		<Button
			className={cn('fixed bottom-4 right-4 z-50', className)}
			onClick={handleClick}
			variant={variant || 'secondary'}
		>
			{buttonText}
			{showArrowIcon && <ArrowUp size={18} className="pl-1" />}
		</Button>
	)
}