Refactor/card component

apps/docs/content/components/card/action.ts

@@ -48,20 +48,20 @@ export default function App() {
     <Grid.Container gap={2} justify="flex-start">
       {list.map((item, index) => (
         <Grid xs={6} sm={3} key={index}>
-          <Card hoverable clickable>
+          <Card isPressable>
             <Card.Body css={{ p: 0 }}>
               <Card.Image
+                src={"https://nextui.org" + item.img}
                 objectFit="cover"
-                src={'https://nextui.org' + item.img}
                 width="100%"
                 height={140}
                 alt={item.title}
               />
             </Card.Body>
-            <Card.Footer justify="flex-start">
-              <Row wrap="wrap" justify="space-between">
+            <Card.Footer css={{ justifyItems: "flex-start" }}>
+              <Row wrap="wrap" justify="space-between" align="center">
                 <Text b>{item.title}</Text>
-                <Text css={{ color: "$accents4", fontWeight: "$semibold" }}>
+                <Text css={{ color: "$accents7", fontWeight: "$semibold", fontSize: "$sm" }}>
                   {item.price}
                 </Text>
               </Row>

apps/docs/content/components/card/cover.ts

@@ -1,7 +1,7 @@
 const Card1 = `import { Card, Col, Text } from "@nextui-org/react";
 
 export const Card1 = () => (
-  <Card cover>
+  <Card>
     <Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
       <Col>
         <Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
@@ -14,8 +14,9 @@ export const Card1 = () => (
     </Card.Header>
     <Card.Image
       src="https://nextui.org/images/card-example-4.jpeg"
-      height={340}
+      objectFit="cover"
       width="100%"
+      height={340}
       alt="Card image background"
     />
   </Card>
@@ -24,7 +25,7 @@ export const Card1 = () => (
 const Card2 = `import { Card, Col, Text } from "@nextui-org/react";
 
 export const Card2 = () => (
-  <Card width="100%" cover>
+  <Card css={{ w: "100%" }}>
     <Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
       <Col>
         <Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
@@ -37,8 +38,9 @@ export const Card2 = () => (
     </Card.Header>
     <Card.Image
       src="https://nextui.org/images/card-example-3.jpeg"
-      height={340}
       width="100%"
+      height={340}
+      objectFit="cover"
       alt="Card image background"
     />
   </Card>
@@ -47,7 +49,7 @@ export const Card2 = () => (
 const Card3 = `import { Card, Col, Text } from "@nextui-org/react";
 
 export const Card3 = () => (
-  <Card cover css={{ bg: "$black", w: "100%" }}>
+  <Card css={{ bg: "$black", w: "100%" }}>
     <Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
       <Col>
         <Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
@@ -60,8 +62,9 @@ export const Card3 = () => (
     </Card.Header>
     <Card.Image
       src="https://nextui.org/images/card-example-2.jpeg"
-      height={340}
       width="100%"
+      height={340}
+      objectFit="cover"
       alt="Card image background"
     />
   </Card>
@@ -70,7 +73,7 @@ export const Card3 = () => (
 const Card4 = `import { Card, Col, Row, Button, Text } from "@nextui-org/react";
 
 export const Card4 = () => (
-  <Card cover css={{ w: "100%" }}>
+  <Card css={{ w: "100%", h: "400px" }}>
     <Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
       <Col>
         <Text size={12} weight="bold" transform="uppercase" color="#ffffffAA">
@@ -81,16 +84,17 @@ export const Card4 = () => (
         </Text>
       </Col>
     </Card.Header>
-    <Card.Body>
+    <Card.Body css={{ p: 0 }}>
       <Card.Image
         src="https://nextui.org/images/card-example-6.jpeg"
-        height={400}
         width="100%"
+        height="100%"
+        objectFit="cover"
         alt="Card example background"
       />
     </Card.Body>
     <Card.Footer
-      blur
+      isBlurred
       css={{
         position: "absolute",
         bgBlur: "#ffffff66",
@@ -130,7 +134,7 @@ export const Card4 = () => (
 const Card5 = `import { Card, Col, Row, Button, Text } from "@nextui-org/react";
 
 export const Card5 = () => (
-  <Card cover css={{ w: "100%", p: 0 }}>
+  <Card css={{ w: "100%", h: "400px" }}>
     <Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
       <Col>
         <Text size={12} weight="bold" transform="uppercase" color="#9E9E9E">
@@ -141,20 +145,21 @@ export const Card5 = () => (
         </Text>
       </Col>
     </Card.Header>
-    <Card.Body>
+    <Card.Body css={{ p: 0 }}>
       <Card.Image
         src="https://nextui.org/images/card-example-5.jpeg"
-        height={400}
+        objectFit="cover"
         width="100%"
+        height="100%"
         alt="Relaxing app background"
       />
     </Card.Body>
     <Card.Footer
-      blur
+      isBlurred
       css={{
         position: "absolute",
         bgBlur: "#0f111466",
-        borderTop: "$borderWeights$light solid $gray700",
+        borderTop: "$borderWeights$light solid $gray800",
         bottom: 0,
         zIndex: 1,
       }}
@@ -164,8 +169,8 @@ export const Card5 = () => (
           <Row>
             <Col span={3}>
               <Card.Image
-                src="/images/breathing-app-icon.jpeg"
-                css={{ background: "black" }}
+                src="https://nextui.org/images/breathing-app-icon.jpeg"
+                css={{ bg: "black", br: "50%" }}
                 height={40}
                 width={40}
                 alt="Breathing app icon"

apps/docs/content/components/card/default.ts

@@ -3,7 +3,9 @@ const App = `import { Card } from "@nextui-org/react";
 export default function App() {
   return (
     <Card css={{ mw: "400px" }}>
-      <p>A basic card.</p>
+      <Card.Body>
+        <Text>A basic card</Text>
+      </Card.Body>
     </Card>
   );
 }`;

apps/docs/content/components/card/divider.ts

@@ -1,4 +1,4 @@
-const App = `import { Card, Grid, Text, Divider, Button, Row } from "@nextui-org/react";
+const App = `import { Card, Grid, Text, Button, Row } from "@nextui-org/react";
 
 export default function App() {
   return (
@@ -8,14 +8,14 @@ export default function App() {
           <Card.Header>
             <Text b>Card Title</Text>
           </Card.Header>
-          <Divider />
+          <Card.Divider />
           <Card.Body css={{ py: "$10" }}>
             <Text>
               Some quick example text to build on the card title and make up the
               bulk of the card's content.
             </Text>
           </Card.Body>
-          <Divider />
+          <Card.Divider />
           <Card.Footer>
             <Row justify="flex-end">
               <Button size="sm" light>
@@ -31,14 +31,14 @@ export default function App() {
           <Card.Header>
             <Text b>Card Title</Text>
           </Card.Header>
-          <Divider />
+          <Card.Divider />
           <Card.Body css={{ py: "$10" }}>
             <Text>
               Some quick example text to build on the card title and make up the
               bulk of the card's content.
             </Text>
           </Card.Body>
-          <Divider />
+          <Card.Divider />
           <Card.Footer>
             <Row justify="flex-end">
               <Button size="sm" light>

apps/docs/content/components/card/footer.ts

@@ -2,40 +2,41 @@ const App = `import { Card, Grid, Text, Link } from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Grid.Container gap={2}>
-      <Grid sm={12} md={5}>
-        <Card css={{ mw: "330px" }}>
-          <Text h4>Next UI</Text>
-          <Text>🚀 Beautiful and modern React UI library.</Text>
-          <Card.Footer>
-            <Link
-              color="primary"
-              target="_blank"
-              href="https://github.com/nextui-org/nextui"
-            >
-              Visit source code on GitHub.
-            </Link>
-          </Card.Footer>
-        </Card>
-      </Grid>
-      <Grid sm={12} md={5}>
-        <Card css={{ mw: "330px" }} color="primary">
-          <Text h4 color="white">
-            Next UI
-          </Text>
-          <Text color="white">🚀 Beautiful and modern React UI library.</Text>
-          <Card.Footer>
-            <Link
-              target="_blank"
-              css={{ color: "white" }}
-              href="https://github.com/nextui-org/nextui"
-            >
-              Visit source code on GitHub.
-            </Link>
-          </Card.Footer>
-        </Card>
-      </Grid>
-    </Grid.Container>
+    <Card css={{ p: "$6", mw: "400px" }}>
+      <Card.Header>
+        <img
+          alt="nextui logo"
+          src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
+          width="34px"
+          height="34px"
+        />
+        <Grid.Container css={{ pl: "$6" }}>
+          <Grid xs={12}>
+            <Text h4 css={{ lineHeight: "$xs" }}>
+              Next UI
+            </Text>
+          </Grid>
+          <Grid xs={12}>
+            <Text css={{ color: "$accents8" }}>nextui.org</Text>
+          </Grid>
+        </Grid.Container>
+      </Card.Header>
+      <Card.Body css={{ py: "$2" }}>
+        <Text>
+          Make beautiful websites regardless of your design experience.
+        </Text>
+      </Card.Body>
+      <Card.Footer>
+        <Link
+          icon
+          color="primary"
+          target="_blank"
+          href="https://github.com/nextui-org/nextui"
+        >
+          Visit source code on GitHub.
+        </Link>
+      </Card.Footer>
+    </Card>
   );
 }`;