mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 21:50:28 +01:00
parent eafb740b1d
commit ae303d8a5a
12 changed files with 88 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/FileExample.tsx
View File

@@ -102,12 +102,12 @@ export const FileExample: React.FC<FileExampleProps> = ({
return (
<div
className="file-example w-full bg-white border border-slate-200/80 rounded-lg overflow-hidden"
className="file-example w-full bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300"
data-file-example
data-expanded={isExpanded}
>
<div
className="px-3 py-2 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50/60 transition-colors"
className="px-4 py-3 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50 transition-colors"
onClick={toggleExpand}
role="button"
tabIndex={0}
@@ -175,13 +175,13 @@ export const FileExample: React.FC<FileExampleProps> = ({
<div
ref={contentRef}
className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-slate-50 ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-white ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
id={contentId}
role="region"
aria-labelledby={headerId}
>
<pre
className="m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded"
className="m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border-t border-slate-200"
style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
>
<code className={`language-${prismLanguage}`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>