From cb2eb56ae56feadf2cfddbbb0ef51194c15a7cb3 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Fri, 20 Oct 2023 17:47:12 +0800
Subject: [PATCH] :art: chore: remove styled-components

---
 package.json                        |  1 -
 src/ChatInputArea/demos/index.tsx   | 14 ++++----------
 src/DraggablePanel/demos/Layout.tsx | 24 ++++++------------------
 3 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 64cb9fce..b2ba616f 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,6 @@
     "react-dom": "^18",
     "semantic-release": "^21",
     "semantic-release-config-gitmoji": "^1",
-    "styled-components": "^6.1.0",
     "stylelint": "^15",
     "typescript": "^5",
     "vitest": "latest"
diff --git a/src/ChatInputArea/demos/index.tsx b/src/ChatInputArea/demos/index.tsx
index c8ca4c02..7b11d9e8 100644
--- a/src/ChatInputArea/demos/index.tsx
+++ b/src/ChatInputArea/demos/index.tsx
@@ -2,19 +2,13 @@ import { ActionIcon, ChatInputArea, DraggablePanel, Icon, TokenTag } from '@ant-
 import { Button } from 'antd';
 import { Archive, Eraser, Languages } from 'lucide-react';
 import { useState } from 'react';
-import styled from 'styled-components';
-
-const View = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 400px;
-`;
+import { Flexbox } from 'react-layout-kit';
 
 export default () => {
   const [expand, setExpand] = useState<boolean>(false);
+
   return (
-    <View>
+    <Flexbox height={400}>
       <div style={{ flex: 1 }}></div>
       <DraggablePanel expandable={false} fullscreen={expand} minHeight={200} placement="bottom">
         <ChatInputArea
@@ -31,6 +25,6 @@ export default () => {
           onExpandChange={setExpand}
         />
       </DraggablePanel>
-    </View>
+    </Flexbox>
   );
 };
diff --git a/src/DraggablePanel/demos/Layout.tsx b/src/DraggablePanel/demos/Layout.tsx
index ce12679d..110493ce 100644
--- a/src/DraggablePanel/demos/Layout.tsx
+++ b/src/DraggablePanel/demos/Layout.tsx
@@ -6,27 +6,13 @@ import {
   DraggablePanelHeader,
 } from '@ant-design/pro-chat';
 import { useState } from 'react';
-import styled from 'styled-components';
-
-const View = styled.div`
-  position: relative;
-
-  display: flex;
-
-  width: 100%;
-  height: 100%;
-  min-height: 500px;
-`;
-
-const Container = styled.div`
-  padding: 24px;
-`;
+import { Flexbox } from 'react-layout-kit';
 
 export default () => {
   const [expand, setExpand] = useState(true);
   const [pin, setPin] = useState(true);
   return (
-    <View>
+    <Flexbox style={{ minHeight: 500 }} width={'100%'} height={'100%'}>
       <DraggablePanel
         expand={expand}
         mode={pin ? 'fixed' : 'float'}
@@ -50,7 +36,9 @@ export default () => {
           <DraggablePanelFooter>Footer</DraggablePanelFooter>
         </DraggablePanelContainer>
       </DraggablePanel>
-      <Container style={{ flex: 1 }}>Content</Container>
-    </View>
+      <Flexbox padding={24} style={{ flex: 1 }}>
+        Content
+      </Flexbox>
+    </Flexbox>
   );
 };