change card style

glassonion1 · May 30, 2024 · 0935fd1 · 0935fd1
1 parent c54b8eb
commit 0935fd1
Show file tree

Hide file tree

Showing 8 changed files with 4,108 additions and 2,576 deletions.
diff --git a/examples/package.json b/examples/package.json
@@ -9,21 +9,21 @@
   },
   "dependencies": {
     "@sakura-ui/config": "^0.1.10",
-    "@sakura-ui/core": "^0.1.31",
-    "@sakura-ui/forms": "^0.1.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.2"
+    "@sakura-ui/core": "^0.1.36",
+    "@sakura-ui/forms": "^0.1.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "autoprefixer": "^10.4.17",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^4.5.2"
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^4.5.3"
   }
 }
diff --git a/examples/src/pages/Home.tsx b/examples/src/pages/Home.tsx
@@ -13,6 +13,7 @@ import {
   Ol,
   Ul,
   Card,
+  CardImg,
   CardHeader,
   CardBody,
   CardFooter,
@@ -108,7 +109,7 @@ const Home = () => {
           </Tbody>
         </Table>
       </div>
-      <div className="w-1/3 my-4">
+      <div className="w-1/3">
         <H2>Card</H2>
         <Card>
           <CardBody>
@@ -118,8 +119,13 @@ const Home = () => {
           </CardBody>
         </Card>
         <Card>
-          <CardHeader>XXXxxx</CardHeader>
-          <CardBody>XXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxxx</CardBody>
+          <CardImg src="bg-mt.webp" className="h-48 w-full" />
+          <CardHeader>Header: XXXxxx</CardHeader>
+          <CardBody>Body: XXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxxx</CardBody>
+        </Card>
+        <Card>
+          <CardHeader>Header: XXXxxx</CardHeader>
+          <CardBody>Body: XXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxxx</CardBody>
         </Card>
       </div>
       <div className="w-1/3 my-4">
@@ -135,7 +141,7 @@ const Home = () => {
           <img src="bg-mt.webp" className="object-cover h-48 w-full" />
           <CardHeader>Header:XXXxxx</CardHeader>
           <CardBody>Body:XXXXXXXXXXXXxxxxxxxxxxxxx</CardBody>
-          <CardFooter className="">
+          <CardFooter>
             <Button variant="secondary" className="w-full mb-2">
               Button1
             </Button>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.32",
+  "version": "0.1.36",
   "description": "",
   "keywords": [],
   "author": "glassonion1",

diff --git a/packages/core/src/components/Card.tsx b/packages/core/src/components/Card.tsx
@@ -23,6 +23,8 @@ export const Card = (props: CardProps) => {
     sm:rounded-3xl
     text-sumi-900
     overflow-hidden
+    flex flex-col
+    gap-2
   `
 
   return (
@@ -38,20 +40,34 @@ export const Card = (props: CardProps) => {
   )
 }
 
-export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'h2'> {}
+export interface CardImgProps extends React.ComponentPropsWithoutRef<'img'> {}
+
+export const CardImg = (props: CardImgProps) => {
+  const { className, children, ...restProps } = props
+
+  const ctx = React.useContext(IdContext)
+
+  const style = `
+    object-cover
+  `
+
+  return <img id={ctx.id} className={cx(style, className)} {...restProps} />
+}
+
+export interface CardHeaderProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
 
 export const CardHeader = (props: CardHeaderProps) => {
   const { className, children, ...restProps } = props
 
   const ctx = React.useContext(IdContext)
 
   const style = `
-    px-6
-    first:pt-6
-    last:pb-6
-    py-3
     text-base
     font-medium
+    first:pt-4
+    last:pb-4
+    px-6
   `
 
   return (
@@ -67,11 +83,10 @@ export const CardBody = (props: CardBodyProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    px-6
-    first:pt-6
-    last:pb-6
-    pb-3
     text-base-sm
+    first:pt-4
+    last:pb-4
+    px-6
   `
 
   return (
@@ -88,10 +103,10 @@ export const CardFooter = (props: CardFooterProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    px-6
-    first:pt-6
-    last:pb-6
     text-base-sm
+    first:pt-4
+    last:pb-4
+    px-6
   `
 
   return (

diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -1,7 +1,8 @@
 export { Button, type ButtonProps } from './Button'
-export { Card, CardHeader, CardBody, CardFooter } from './Card'
+export { Card, CardImg, CardHeader, CardBody, CardFooter } from './Card'
 export type {
   CardProps,
+  CardImgProps,
   CardHeaderProps,
   CardBodyProps,
   CardFooterProps

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,6 +1,7 @@
 export {
   Button,
   Card,
+  CardImg,
   CardHeader,
   CardBody,
   CardFooter,
@@ -33,6 +34,7 @@ export {
 export type {
   ButtonProps,
   CardProps,
+  CardImgProps,
   CardHeaderProps,
   CardBodyProps,
   CardFooterProps,