chore: Refactor BusinessCard component to accept null values for description, joinDate, location, and tags

This commit is contained in:
Pattadon 2024-08-29 13:35:56 +07:00
parent e29519708f
commit 75b3d71b98
3 changed files with 34 additions and 12 deletions

View File

@ -78,10 +78,10 @@ export default function Home() {
<p className="text-lg">The deals attracting the most interest right now</p> <p className="text-lg">The deals attracting the most interest right now</p>
</span> </span>
<div className="grid grid-cols-4 gap-4"> <div className="grid grid-cols-4 gap-4">
<BusinessCard /> <BusinessCard description={null} joinDate={null} location={null} tags={null} />
<BusinessCard /> <BusinessCard description={null} joinDate={null} location={null} tags={null} />
<BusinessCard /> <BusinessCard description={null} joinDate={null} location={null} tags={null} />
<BusinessCard /> <BusinessCard description={null} joinDate={null} location={null} tags={null} />
</div> </div>
<div className="self-center py-5"> <div className="self-center py-5">
<Button> <Button>

View File

@ -1,8 +1,25 @@
import Image from "next/image"; import Image from "next/image";
import { Card, CardFooter, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardFooter,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { CalendarDaysIcon } from "lucide-react"; import { CalendarDaysIcon } from "lucide-react";
export function BusinessCard() { interface XMap {
[tag: string]: string;
}
interface BusinessCardProps {
description: string | null;
joinDate: string | null;
location: string | null;
tags: XMap | null;
}
export function BusinessCard(props: BusinessCardProps) {
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
@ -18,7 +35,8 @@ export function BusinessCard() {
</div> </div>
<CardTitle>NVIDIA</CardTitle> <CardTitle>NVIDIA</CardTitle>
<CardDescription> <CardDescription>
Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology Founded in 1993, NVIDIA is a key innovator of computer graphics and AI
technology
<span className="flex items-center pt-2 gap-1"> <span className="flex items-center pt-2 gap-1">
<CalendarDaysIcon width={20} /> <CalendarDaysIcon width={20} />
Joined December 2021 Joined December 2021
@ -27,7 +45,9 @@ export function BusinessCard() {
</CardHeader> </CardHeader>
<CardFooter className="flex-col items-start"> <CardFooter className="flex-col items-start">
Bangkok, Thailand Bangkok, Thailand
<span className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1">Technology</span> <span className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1">
Technology
</span>
</CardFooter> </CardFooter>
</Card> </Card>
); );

View File

@ -83,7 +83,7 @@ export function UnsignedNav() {
}, },
]; ];
return ( return (
<header className="relative flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border"> <header className="sticky top-0 flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border">
<nav className="max-w-[85rem] w-full mx-auto px-4"> <nav className="max-w-[85rem] w-full mx-auto px-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-col"> <div className="flex flex-col">
@ -177,9 +177,11 @@ export function UnsignedNav() {
<div className="flex gap-2 pl-2"> <div className="flex gap-2 pl-2">
<ThemeToggle /> <ThemeToggle />
<Separator orientation="vertical" className="mx-3" /> <Separator orientation="vertical" className="mx-3" />
<Button variant="secondary" className="border-2 border-border"> <Link href="/login">
<Link href='/login'>Login</Link> <Button variant="secondary" className="border-2 border-border">
</Button> Login
</Button>
</Link>
<Button>Sign up</Button> <Button>Sign up</Button>
</div> </div>
</div> </div>