create news card

src/app/home/page.tsx

@@ -1,4 +1,4 @@
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import NewsCard from "@/components/news-card";
 
 export default function Page(){
     return (
@@ -8,15 +8,12 @@ export default function Page(){
                     Home
                 </h1>
             </div>
-            <div>
-                <Card>
-                    <CardHeader>
-                        <CardTitle>News title</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <p>Hello World!</p>
-                    </CardContent>
-                </Card>
+            <div className="grid grid-cols-4 gap-4">
+                <NewsCard />
+                <NewsCard />
+                <NewsCard />
+                <NewsCard />
+                <NewsCard />
             </div>
         </div>
     );

src/components/news-card.tsx

@@ -0,0 +1,27 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
+import Image from 'next/image';
+import { Button } from "@/components/ui/button";
+
+export default function NewsCard(){
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>News title</CardTitle>
+                <CardDescription>That's just some story</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <Image
+                    src="/example-image.jpg"
+                    width="640"
+                    height="360"
+                    className="block rounded-lg"
+                    alt="News article"
+                />
+            </CardContent>
+            <CardFooter className="flex justify-between">
+                <Button>Read more...</Button>
+                <Button variant="outline">Save for later</Button>
+            </CardFooter>
+        </Card>
+    );
+}

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }