36 |
40 | {content && content}
41 | {title}
37 | {subtitle &&{subtitle}
}
38 | {cta && }
39 | 
10 |
10 | {top}
29 |37 | {bottom} 38 |
39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /components/Code.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement, ReactNode, useState } from 'react'; 2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; 3 | import { prism } from '../styles/highlight'; 4 | import { CopyToClipboard } from 'react-copy-to-clipboard'; 5 | import { Icon } from '@iconify/react'; 6 | 7 | interface Props { 8 | children: ReactNode; 9 | className: string | undefined; 10 | style?: any; 11 | } 12 | 13 | export default function Code({ children, className = '', style = prism }: Props): ReactElement { 14 | const [copied, setCopied] = useState(false); 15 | const code = String(children).replace(/\n$/, ''); 16 | 17 | const codeLanguage = /language-(\w+)/.exec(className); 18 | 19 | return ( 20 |
56 | 
63 | 65 | An experimental dark theme for people who love purple 66 |
67 |
73 |
74 | 76 | {`theme for `} 77 | {title} 78 |
79 |Instalation
66 |{children}
77 | );
78 | },
79 | a({ children, ...props }) {
80 | return (
81 |
82 | {children}
83 |
84 | );
85 | },
86 | }}
87 | >
88 | {instructions}
89 | {asset}
96 | 99 |24 | {color} 25 |
26 | )} 27 |79 | And yeah, it's not for everyone, but once I couldn't find any color theme for my daily 80 | applications in such style, I started to customize everything on a common color scheme, now called{' '} 81 | wildberries 82 |
83 |84 | Being just a developer and not a graphic designer, I came up with this color scheme by pure personal 85 | taste, however, by time passing and many applications being customized, I tried to follow some 86 | consistencies. 87 |
88 |Wildberries is a dark theme, with additional bright accents, almost in a cyberpunkish way.
89 |
5 | 
10 |