56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
type Props = {
|
|
header: React.JSX.Element;
|
|
content: React.JSX.Element;
|
|
};
|
|
|
|
type ClsHeaderSkeletonProps = {
|
|
name: string;
|
|
};
|
|
export const ClsHeaderSkeleton: React.FC<ClsHeaderSkeletonProps> = ({ name }) => {
|
|
return (
|
|
<p className="text-xs">
|
|
<span className="text-red-500">class</span>
|
|
<span className="text-purple-400 pl-1">{name}</span>
|
|
</p>
|
|
);
|
|
};
|
|
|
|
type MethodHeaderSkeletonProps = {
|
|
name: string;
|
|
};
|
|
export const MethodHeaderSkeleton: React.FC<MethodHeaderSkeletonProps> = ({ name }) => {
|
|
return (
|
|
<p className="text-xs">
|
|
<span className="text-red-500">def</span>
|
|
<span className="text-sky-400 pl-1">{name}</span>
|
|
</p>
|
|
);
|
|
};
|
|
type DefaultContentProps = {
|
|
name?: string;
|
|
description: string;
|
|
docTeaser?: string;
|
|
};
|
|
export const DefaultContent: React.FC<DefaultContentProps> = ({ name, description, docTeaser }) => {
|
|
return (
|
|
<>
|
|
<p className="text-xs">
|
|
{name && <span className="bg-gray-500 px-1 rounded-[2px] text-gray-100">{name}</span>}
|
|
<span className="text-gray-400 pl-1">{description}</span>
|
|
</p>
|
|
<p className="text-gray-500 text-xs mt-4 whitespace-pre-line">{docTeaser}</p>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const ToolbarSkeleton: React.FC<Props> = ({ header, content }) => {
|
|
return (
|
|
<div className="bg-slate-500/10 border rounded max-w-96">
|
|
<div className="bg-slate-500/10 border-b-[0.5px] px-2 py-2">{header}</div>
|
|
<div className="px-2 py-4">{content}</div>
|
|
</div>
|
|
);
|
|
};
|