Add CSS panel for display patterns

2025-08-22 21:53:10 +02:00 · 2021-03-31 21:33:21 +07:00
parent 04384dbee2
commit 57b8bff9bb
42 changed files with 1008 additions and 894 deletions
--- a/client/patterns/drop-area/Details.tsx
+++ b/client/patterns/drop-area/Details.tsx
@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    ...
+</div>
+`}
+css={`
+.container {
    /* Center the content */
    align-items: center;
    display: flex;
@@ -30,11 +35,8 @@ html={`
    /* Border */
    border: 4px dashed rgba(0, 0, 0, 0.3),
    border-radius: 4px;
-">
-    ...
-</div>
+}
 `}
-css={``}
                >
                    <div
                        style={{