Commit f65bdc97 authored by Wohlgemuth, Jason's avatar Wohlgemuth, Jason
Browse files

feat: Add card shadcn component

parent 1815480e

package.json

+4 −4
Original line number Diff line number Diff line
@@ -7,17 +7,17 @@ 
    "dev": "astro dev --host --open",

    "dev:mac": "astro dev --host",

    "predownload": "npm run clean",

    "download": "./acorn download --buckets buckets.json --output src/data",

    "download": "acorn-cli download --buckets buckets.json --output src/data",

    "postdownload": "npm run format",

    "start": "astro dev",

    "build:pdf": "./acorn export src/data --output public/pdf",

    "build:pdf": "acorn-cli export src/data --output public/pdf",

    "build:src": "astro build",

    "build": "run-p build:*",

    "preview": "astro preview",

    "astro": "astro",

    "format": "./acorn format src/data --ignore highlight -vv",

    "format": "acorn-cli format src/data --ignore highlight -vv",

    "lint:code": "eslint --fix --config ./eslint.config.js",

    "lint:data": "./acorn check src/data",

    "lint:data": "acorn-cli check src/data",

    "lint": "run-p lint:*"

  },

  "dependencies": {

src/components/Listing.tsx

+19 −19
Original line number Diff line number Diff line
@@ -50,7 +50,7 @@ const Labels = ({ item = { meta: { identifier: '', keywords: [] } } }) => { 
        <div className="label-container" style={style}>

            {

                labels.map(keyword => (

                    <div className="label" onClick={onClick(keyword)}>

                    <div className="label" onClick={onClick(keyword)} key={keyword}>

                        {isItemLabel ? '' : <X />}

                        {keyword}

                    </div>
@@ -59,6 +59,21 @@ const Labels = ({ item = { meta: { identifier: '', keywords: [] } } }) => { 
        </div>

    );

};

const ListItem = ({ item }) => {

    const formatScoreText = value => value ? `Relevancy = ${(1.0 - value).toFixed(4)}` : '';

    return (

        <div className="item-container" key={item.meta.identifier}>

            <div className="item-title-container">

                <h4>

                    <a href={`/${item?.meta.identifier}`}>{item?.title}</a>

                </h4>

                {item?.score && <span className="search-score">{formatScoreText(item?.score)}</span>}

            </div>

            <Labels item={item} />

            <p>{ item?.sections?.mission }</p>

        </div>

    );

};

const X = () => {

    const style = {

        display: 'inline-block',
@@ -80,26 +95,11 @@ export default ({ items }) => { 
        const results = fuse.search(searchParameters.join(' '));

        return results;

    };

    const formatScoreText = value => value ? `Relevancy = ${(1.0 - value).toFixed(4)}` : '';

    const hasSelectedKeywords = item => {

        const keywords = item.meta?.keywords;

        const isSelectedKeyword = value => keywords.map(x => x.toLowerCase()).includes(value.toLowerCase());

        return getParameters('q').every(isSelectedKeyword);

    };

    const html = item => {

        return (

            <div className="item-container">

                <div className="item-title-container">

                    <h4>

                        <a href={`/${item?.meta.identifier}`}>{item?.title}</a>

                    </h4>

                    {item?.score && <span className="search-score">{formatScoreText(item?.score)}</span>}

                </div>

                <Labels item={item} />

                <p>{ item?.sections?.mission }</p>

            </div>

        );

    };

    return (

        <>

            <Details items={items} />
@@ -108,10 +108,10 @@ export default ({ items }) => { 
            {

                getParameters('search').length > 0

                    // @ts-expect-error Only objects can use spread

                    ? search(items).map(({ item, score }) => ({ ...item, score })).map(html)

                    ? search(items).map(({ item, score }) => ({ ...item, score })).map(item => ListItem({ item }))

                    : getParameters('q').length > 0

                        ? items.filter(hasSelectedKeywords).map(html)

                        : items.map(html)

                        ? items.filter(hasSelectedKeywords).map(item => ListItem({ item }))

                        : items.map(item => ListItem({ item }))

            }

        </>

    );

src/components/ui/card.tsx

0 → 100644
+79 −0
Original line number Diff line number Diff line 
import * as React from "react"



import { cn } from "@/lib/utils"



const Card = React.forwardRef<

  HTMLDivElement,

  React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

  <div

    ref={ref}

    className={cn(

      "rounded-lg border bg-card text-card-foreground shadow-sm",

      className

    )}

    {...props}

  />

))

Card.displayName = "Card"



const CardHeader = React.forwardRef<

  HTMLDivElement,

  React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

  <div

    ref={ref}

    className={cn("flex flex-col space-y-1.5 p-6", className)}

    {...props}

  />

))

CardHeader.displayName = "CardHeader"



const CardTitle = React.forwardRef<

  HTMLDivElement,

  React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

  <div

    ref={ref}

    className={cn(

      "text-2xl font-semibold leading-none tracking-tight",

      className

    )}

    {...props}

  />

))

CardTitle.displayName = "CardTitle"



const CardDescription = React.forwardRef<

  HTMLDivElement,

  React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

  <div

    ref={ref}

    className={cn("text-sm text-muted-foreground", className)}

    {...props}

  />

))

CardDescription.displayName = "CardDescription"



const CardContent = React.forwardRef<

  HTMLDivElement,

  React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />

))

CardContent.displayName = "CardContent"



const CardFooter = React.forwardRef<

  HTMLDivElement,

  React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

  <div

    ref={ref}

    className={cn("flex items-center p-6 pt-0", className)}

    {...props}

  />

))

CardFooter.displayName = "CardFooter"



export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }