feat(card): bdp card addition

Author: 0tuedon

.npmignore

@@ -0,0 +1 @@
+assets/images

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
+  staticDirs: ['../src/assets/images'],
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-webpack5-compiler-swc",

src/assets/images/good-first-issues.png

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Pangolins } from '../../icons'
+
+interface IByBDPBadge {
+    className?:string
+}
+export const ByBDPBadge  = () => {
+  return (
+    <div className='shadow-by-bdp text-brand-dark-100 border border-[#A9A49B] w-fit flex gap-1 p-1 rounded-md items-center bg-[#F6F0E6]'>
+        <Pangolins />
+        <span className='font-quicksand font-bold text-[11px] '>By BDP</span>
+    </div>
+  )
+}

src/assets/images/whitepaper.png

@@ -0,0 +1 @@
+export * from  "./ByBdp"

src/components/badge/ByBdp.tsx

@@ -4,24 +4,33 @@ import LeafIcon from "../../icons/LeafIcon";
 import React from "react";
 
 export interface LeavesProps {
+  leavesCount: number;
   onClick?: () => void;
   disabled?: boolean;
   withBorder?: boolean;
-  leavesCount: number;
   selected?: boolean;
+  showLeftOvers?: boolean
 }
 
-export const Leaf: React.FC<LeavesProps> = ({ leavesCount = 1, selected=false }) => {
-  const baseStyles = `rounded-md border border-brand-green w-max py-1 px-2 flex gap-1 hover:bg-brand-green/30 active:bg-brand-green active:text-white`
+export const Leaf: React.FC<LeavesProps> = ({ leavesCount = 1, selected=false, withBorder, showLeftOvers }) => {
+  const baseStyles = `rounded-md  w-max py-1 px-2 flex gap-1 `
   const allStyles =  `
   ${baseStyles}
   ${selected ? "bg-brand-green text-white": " text-brand-green"}
+  ${withBorder ? "border border-brand-green" : "border-0"}
+  ${showLeftOvers? "bg-none! hover:bg-none" : "hover:bg-brand-green/30 active:bg-brand-green active:text-white"}
   `.trim();
 
+  const leaves = showLeftOvers ? Array.from({length:3}).map((_,i) => ({
+        active: (i+1) <= leavesCount
+  })) : []
   return <div className={allStyles} role="button" tabIndex={0}>
-    {Array.from({length:leavesCount}).map((_,i)=>
+    { !showLeftOvers && Array.from({length:leavesCount}).map((_,i)=>
         <LeafIcon key={i} />
     )}
+
+    {showLeftOvers && leaves.map( (leave, i) => 
+       <LeafIcon key={i} className={`${leave.active ? "text-brand-green" : "text-[#A9A49B99]"}`} /> )}
   </div>;
 };
 

src/components/badge/index.tsx

@@ -1,27 +1,91 @@
 // src/components/card/BDPCard.tsx
 
 import React from "react";
+import { ByBDPBadge } from "../badge";
+import { Leaf } from "../button";
+import { Tag, TagType } from "../tag";
 export interface CardProps {
-  difficulty?: "easy" | "medium" | "hard";
+  title: string;
+  description: string;
+  bannerColor: string;
+  onClick: () => void;
+  logo: string;
+  link: string;
+  difficulty: Difficulty;
+  tagList: TagType[];
   byBDP?: boolean;
-  onClick: ()=> void;
-  link:string;
+}
+export type Difficulty = "easy" | "medium" | "hard";
+enum DIFFICULTY {
+  EASY = "easy",
+  MEDIUM = "medium",
+  HARD = "hard",
 }
 
 export const BDPCard: React.FC<CardProps> = ({
-  difficulty="easy",
+  difficulty = "easy",
+  logo,
   onClick,
-  link
+  title,
+  description,
+  bannerColor,
+  link,
+  tagList,
+  byBDP,
 }) => {
-  const baseStyles = "min-h";
+  const baseStyles = `border border-brand-stroke-on-base p-2 
+  flex min-h-[290px] w-[374px] rounded-2xl  bg-brand-card-bg`;
 
   const className = `
   ${baseStyles}
   `.trim();
 
+  const convertToLeavesCount = (level: string) => {
+    switch (level) {
+      case DIFFICULTY.EASY:
+        return 1;
+      case DIFFICULTY.MEDIUM:
+        return 2;
+      case DIFFICULTY.HARD:
+        return 3;
+      default:
+        return 0;
+    }
+  };
   return (
     <a href={link} className={className} onClick={onClick}>
-     
+      <div className="flex flex-col rounded-xl border border-brand-stroke-on-base w-full min-h-full bg-brand-card-bg">
+        <div
+          className={`h-[126px] flex border border-l-0 border-r-0 border-t-0
+             border-brand-stroke-on-base rounded-lg relative flex-col items-center justify-center`}
+          style={{ backgroundColor: bannerColor }}
+        >
+          <div>
+            <img className="w-full h-fit" src={logo} />
+          </div>
+
+         {byBDP && <div className="absolute bottom-3 left-3">
+            <ByBDPBadge />
+          </div> }
+        </div>
+        {/* Footer */}
+        <div className="flex flex-col w-full p-3 gap-2">
+          <div className="w-full flex items-center justify-between">
+            <h6 className="font-montserrat text-lg font-semibold">{title}</h6>
+            <Leaf showLeftOvers leavesCount={convertToLeavesCount(difficulty)} />
+          </div>
+          <p className="font-light font-quicksand">{description}</p>
+
+          <div className="flex gap-[9px] flex-wrap">
+            {tagList &&
+              tagList.map((tag) => (
+                <Tag className="capitalize" key={tag} type={tag}>
+                  {tag}
+                </Tag>
+              ))}
+          </div>
+        </div>
+      </div>
     </a>
   );
 };

src/components/button/Leaves.tsx

@@ -0,0 +1,38 @@
+// src/components/Card/BDPCard.tsx
+
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { BDPCard, CardProps } from "./BDPCard";
+
+
+export default {
+  title: "Components/Card",
+  component: BDPCard,
+    tags: ["autodocs"],
+} as Meta;
+
+const Template: StoryFn<CardProps> = (args) => <BDPCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    bannerColor:"#D5BBA4",
+    logo:"whitepaper.png",
+    difficulty:"easy",
+    title:"Bitcoin TLDR",
+    description:"The foundational document that introduced Bitcoin, explaining its decentralized, P2P, electronic cash system.",
+    tagList:["guide","interactive"]
+
+}
+export const MediumDifficulty = Template.bind({});
+
+MediumDifficulty.args = {
+    bannerColor:"#0E9158",
+    logo:"good-first-issues.png",
+    difficulty:"medium",
+    title:"Good first issues",
+    byBDP:true,
+    description:"Discover beginner-friendly issues from BOSS projects to start contributing today.",
+    tagList:["tool"]
+
+}
+

src/components/card/BDPCard.tsx

@@ -0,0 +1 @@
+export * from "./BDPCard"