xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 16:51:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add some styles

Browse Source
This commit is contained in:
Defectink
2022-04-29 09:56:40 +08:00
parent 32e0f1c953
commit 5112eebb42
3 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/gists/GistsCode.tsx
View File

@ -6,12 +6,15 @@ import rehypePrism from '@mapbox/rehype-prism';
import remarkGfm from 'remark-gfm';
import { createElement, Fragment } from 'react';
import rehypeReact from 'rehype-react';
import styles from './styles.module.css';
import classNames from 'classnames';
interface Props {
file: GistsFile;
showFileName?: boolean;
}
const GistsCode = ({ file }: Props) => {
const GistsCode = ({ file, showFileName = false }: Props) => {
const code = unified()
.use(remarkParse)
.use(remarkRehype)
@ -25,7 +28,49 @@ const GistsCode = ({ file }: Props) => {
return (
<>
<div>{code}</div>
{showFileName ? (
<div className={styles.wrapper}>
<div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
<div className="flex items-center h-full mx-3">
<div
className={classNames(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#ce5347]'
)}
></div>
<div
className={classNames(
'box-border inline-block',
'w-[13px] h-[13px] mr-2',
'rounded-full bg-[#d6a243]'
)}
></div>
<div
className={classNames(
'box-border inline-block',
'w-[13px] h-[13px]',
'rounded-full bg-[#58a942]'
)}
></div>
</div>
<div
className={classNames(
'px-4 bg-white',
'leading-[30px]',
'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]'
)}
>
{file.filename}
</div>
</div>
<div>{code}</div>
</div>
) : (
<div>{code}</div>
)}
</>
);
};

13
components/gists/styles.module.css Normal file
View File

@ -0,0 +1,13 @@
.wrapper {
@apply overflow-hidden rounded-lg;
@apply mb-8 shadow-lg;
/* box-shadow: 0 13px 27px -5px rgb(50 50 93 / 25%),
0 8px 16px -8px rgb(0 0 0 / 30%), 0 -6px 16px -6px rgb(0 0 0 / 3%); */
}
.wrapper pre {
margin: unset;
border-radius: unset;
}
.wrapper .loading span {
margin: unset;
}