Nikola Derežić
23c3695a89
- Add responsive layout for action buttons (stack vertically on mobile, horizontal on sm+) - Adjust card max-widths for better mobile display (LocationCard, MultiBillEdit) - Improve button text sizing with responsive classes (text-sm on mobile, text-xs on sm+) - Remove width constraints on file inputs and info boxes for full-width mobile layout - Fine-tune icon positioning for better visual alignment 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
25 lines
1.1 KiB
TypeScript
25 lines
1.1 KiB
TypeScript
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
|
|
import { QuestionMarkCircleIcon } from "@heroicons/react/16/solid";
|
|
import { useTranslations } from "next-intl";
|
|
import { FC, ReactNode } from "react";
|
|
|
|
export const InfoBox: FC<{
|
|
children: ReactNode;
|
|
title?: string;
|
|
}> = ({ children, title }) => {
|
|
|
|
const t = useTranslations("info-box");
|
|
|
|
return (
|
|
<details className="group border border-gray-800 rounded-lg p-2 mb-1 w-full">
|
|
<summary className="flex cursor-pointer items-center justify-between">
|
|
<span className="font-bold"><QuestionMarkCircleIcon className="w-5 h-5 inline mr-1 mt-[-.3em]" /> {title ?? t("default-title")}</span>
|
|
<span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>
|
|
<span className="ml-2 text-sm text-gray-500 hidden group-open:inline"><ChevronUpIcon className="w-5 h-5 inline" /></span>
|
|
</summary>
|
|
<div className="mt-2 italic text-sm text-gray-400 group-open:animate-[animateDown_0.2s_linear_forwards]">{children}</div>
|
|
</details>
|
|
)
|
|
}
|
|
|