1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import React, { useContext } from "react";
import styled from "styled-components";
import { buttonColor, defaultBorderRadius, lightGray } from ".";
import { useSelector } from "react-redux";
import { RootStore } from "../redux/store";
import { BookOpenIcon } from "@heroicons/react/24/outline";
import HeaderButtonWithText from "./HeaderButtonWithText";
import { MODEL_PROVIDER_TAG_COLORS } from "../util/modelData";
const Div = styled.div<{ color: string; disabled: boolean }>`
border: 1px solid ${lightGray};
border-radius: ${defaultBorderRadius};
padding: 4px 8px;
position: relative;
width: 100%;
transition: all 0.5s;
${(props) =>
props.disabled
? `
opacity: 0.5;
`
: `
&:hover {
border: 1px solid ${props.color};
background-color: ${props.color}22;
cursor: pointer;
}
`}
`;
interface ModelCardProps {
title: string;
description: string;
tags?: string[];
refUrl?: string;
icon?: string;
onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
disabled?: boolean;
}
function ModelCard(props: ModelCardProps) {
const vscMediaUrl = useSelector(
(state: RootStore) => state.config.vscMediaUrl
);
return (
<Div
disabled={props.disabled || false}
color={buttonColor}
onClick={props.disabled ? undefined : (e) => props.onClick(e)}
>
<div style={{ display: "flex", alignItems: "center" }}>
{vscMediaUrl && props.icon && (
<img
src={`${vscMediaUrl}/logos/${props.icon}`}
height="24px"
style={{ marginRight: "10px" }}
/>
)}
<h3>{props.title}</h3>
</div>
{props.tags?.map((tag) => {
return (
<span
style={{
backgroundColor: `${MODEL_PROVIDER_TAG_COLORS[tag]}55`,
color: "white",
padding: "2px 4px",
borderRadius: defaultBorderRadius,
marginRight: "4px",
}}
>
{tag}
</span>
);
})}
<p>{props.description}</p>
{props.refUrl && (
<a
style={{
position: "absolute",
right: "8px",
top: "8px",
}}
href={props.refUrl}
target="_blank"
>
<HeaderButtonWithText text="Read the docs">
<BookOpenIcon width="1.6em" height="1.6em" />
</HeaderButtonWithText>
</a>
)}
</Div>
);
}
export default ModelCard;
|