Merge pull request #12 from acrool/10-add-storybook-skeleton-sample-l…

…otterycard2

feat: 新增 storybook lotteryCard2骨架屏

example/src/components/examples/LotteryCard2/LotteryCard2Skeleton.stories.tsx

@@ -0,0 +1,37 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Col, Flex, Row} from '@acrool/react-grid';
+
+import previewImg from './preview.webp';
+import LotteryCard2Skeleton from './LotteryCard2Skeleton';
+
+const meta = {
+    title: 'Examples/LotteryCard2',
+    component: LotteryCard2Skeleton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Custom skeleton lottery card 2'
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {},
+} satisfies Meta<typeof LotteryCard2Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+
+
+export const Primary: Story = {
+    args: {},
+    render: function Render(args) {
+        return <Flex className="gap-4 align-items-center">
+            <img src={previewImg} width="auto" height="261px" alt={''}/>
+            <LotteryCard2Skeleton/>
+        </Flex>;
+    },
+};

example/src/components/examples/LotteryCard2/LotteryCard2Skeleton.tsx

@@ -0,0 +1,94 @@
+import {Flex} from '@acrool/react-grid';
+import styled from 'styled-components';
+
+import {Skeleton} from '@acrool/react-skeleton';
+import {generatorArray} from '@acrool/js-utils/array';
+
+const LotteryCard2Skeleton = () => {
+    return <LotteryCard2SkeletonRoot>
+
+        <Skeleton h={20} w="85%" className="mx-auto mb-2"/>
+
+        <Flex className="align-items-center">
+            {/*  左邊區塊  */}
+            <Flex column className="row-gap-2">
+                {generatorArray(3)
+                    .map((key) => {
+                        return <Flex className="gap-2" key={key}>
+                            <Skeleton w={50} aspect={1}/>
+
+                            <Flex className="flex-column gap-1 my-auto">
+                                <Skeleton w={100} r={5}/>
+                                <Flex className="flex-row gap-1 mx-auto">
+                                    {generatorArray(4)
+                                        .map((key) => {
+                                            return <div key={key}>
+                                                <Skeleton h={25} r={3}/>
+                                            </div>;
+                                        })}
+                                </Flex>
+                            </Flex>
+
+                            <Skeleton w={50} r/>
+                        </Flex>;
+                    })}
+            </Flex>
+
+            {/*  右邊區塊  /*/}
+            <CustomTable className="py-3">
+                <tr>
+                    <CustomTd/>
+                </tr>
+                <tr>
+                    <CustomTd2/>
+                </tr>
+
+                <FloatSkeleton h={50} w={90} className="my-auto"/>
+
+            </CustomTable>
+        </Flex>
+
+    </LotteryCard2SkeletonRoot>;
+};
+
+export default LotteryCard2Skeleton;
+
+
+
+
+
+const FloatSkeleton = styled(Skeleton)`
+  position: absolute;
+  background-color: #fff;
+  right: 0;
+  top: 62px;
+`;
+
+const CustomTable = styled.table`
+  width: 120px;
+  border-left: none;
+  border-collapse: separate;
+  position: relative;
+  padding-right: 42px;
+`;
+
+const CustomTd = styled.td`
+  border: 1px dashed rgba(133, 133, 133, 0.2);
+  border-radius: 0 8px 0 0;
+  border-left: none;
+  height: 60px;
+`;
+
+const CustomTd2 = styled(CustomTd)`
+  border-radius: 0 0 8px 0;
+  border-top: none;
+`;
+
+const LotteryCard2SkeletonRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  background-color: #fff;
+  border: 1px solid rgba(133, 133, 133, 0.2);
+  padding: 15px;
+`;

example/src/components/examples/LotteryCard2/index.ts

@@ -0,0 +1 @@
+export {default as LotteryCard2Skeleton} from './LotteryCard2Skeleton';

example/src/components/examples/YoutubeCard/YoutubeCardSkeleton.tsx

@@ -10,7 +10,7 @@ const YoutubeCardSkeleton = () => {
             <Skeleton w={330} h={180}/>
 
             <Flex className="gap-1">
-                <Skeleton round w={32} h={32} className="flex-auto"/>
+                <Skeleton r w={32} h={32} className="flex-auto"/>
                 <Flex className="flex-column gap-1 w-100">
                     <Skeleton w="90%"/>
                     <Skeleton w="60%"/>
@@ -33,7 +33,7 @@ const YoutubeCardSkeletonRoot = styled.div`
     width: 100%;
     height: auto;
     border-radius: 8px;
-    background-color: rgba(255, 255, 255, 1);
+    background-color: #fff;
     border: 1px solid rgba(133, 133, 133, .2);
     padding: 10px;
     font-size: 18px;