UserDashboard/components/panel-code-highlight.tsx
2025-02-20 23:52:51 +08:00

32 lines
1.1 KiB
TypeScript

'use client';
import IconCode from '@/components/icon/icon-code';
import React, { useState, ReactNode } from 'react';
interface PanelCodeHighlightProps {
children: ReactNode;
title?: string;
codeHighlight?: string;
id?: string;
className?: string;
}
const PanelCodeHighlight = ({ children, title, codeHighlight, id, className = '' }: PanelCodeHighlightProps) => {
const [toggleCode, setToggleCode] = useState(false);
return (
<div className={`panel ${className}`} id={id}>
<div className="mb-5 flex items-center justify-between">
<h5 className="text-lg font-semibold dark:text-white-light">{title}</h5>
<button type="button" className="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" onClick={() => setToggleCode(!toggleCode)}>
<span className="flex items-center">
<IconCode className="me-2" />
Code
</span>
</button>
</div>
{children}
</div>
);
};
export default PanelCodeHighlight;