dbeaver/pro#8372 add claude code snippet (#4156)

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/packages/core-blocks/src/Code.module.css

@@ -1,12 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-.codeContainer {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    padding: 16px;
-    border-radius: var(--theme-group-element-radius);
-}

webapp/packages/core-blocks/src/Code.tsx

@@ -1,27 +1,30 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { observer } from 'mobx-react-lite';
 
-import style from './Code.module.css';
-import { s } from './s.js';
-import { useS } from './useS.js';
+import { observer } from 'mobx-react-lite';
+import { clsx } from '@dbeaver/ui-kit';
 
 interface Props {
   className?: string;
   children?: React.ReactNode;
+  inline?: boolean;
 }
 
-export const Code = observer<Props>(function Code({ children, className }) {
-  const styles = useS(style);
-
+export const Code = observer<Props>(function Code({ children, className, inline }) {
   return (
-    <div className={s(styles, { codeContainer: true }, className)}>
-      <code>{children}</code>
+    <div
+      className={clsx(
+        'tw:flex tw:p-4 tw:items-start tw:overflow-x-auto tw:rounded-(--theme-group-element-radius) theme-background-secondary theme-text-on-secondary', className,
+      )}
+    >
+      <div className='tw:align-middle'>
+        <code className={clsx(inline && 'tw:whitespace-nowrap')}>{children}</code>
+      </div>
     </div>
   );
 });