1+ import React from "react" ;
2+ import {
3+ Card ,
4+ CardHeader ,
5+ CardContent ,
6+ Typography ,
7+ Stack ,
8+ Chip ,
9+ Tooltip ,
10+ Divider ,
11+ List ,
12+ ListItem ,
13+ ListItemText ,
14+ Box ,
15+ Link
16+ } from "@mui/material" ;
17+ import CodeIcon from "@mui/icons-material/Code" ;
18+ import ScoreIcon from "@mui/icons-material/Star" ;
19+ import PackageIcon from "@mui/icons-material/Archive" ;
20+ import JavaIcon from "@mui/icons-material/Coffee" ;
21+ import InfoIcon from "@mui/icons-material/Info" ;
22+ import { CodeSnippet } from "@site/src/services/models" ;
23+
24+ import CodeBlock from '@theme/CodeBlock' ;
25+
26+ type CodeSnippetProps = {
27+ snippet : CodeSnippet ;
28+ } ;
29+
30+ const measureLabels : Partial < Record < string , string > > = {
31+ m_static_line_td : "Lines" ,
32+ m_static_loc_td : "LOC" ,
33+ m_static_methods_td : "Methods" ,
34+ m_static_complexity_td : "Complexity" ,
35+ } ;
36+
37+ export const CodeSnippetCard : React . FC < CodeSnippetProps > = ( { snippet } ) => (
38+ < Card variant = "outlined" sx = { { height : "100%" , display : "flex" , flexDirection : "column" } } >
39+ < CardHeader
40+ avatar = { < JavaIcon color = "primary" /> }
41+ title = {
42+ < Stack direction = "row" alignItems = "center" spacing = { 1 } >
43+ < span > { snippet . name } </ span >
44+ < Chip
45+ label = { snippet . docType ?. toUpperCase ( ) ?? snippet . unitType }
46+ size = "small"
47+ color = "secondary"
48+ />
49+ </ Stack >
50+ }
51+ subheader = {
52+ < Stack direction = "row" spacing = { 1 } >
53+ < Chip icon = { < PackageIcon /> } size = "small" label = { snippet . packagename } />
54+ < Chip
55+ icon = { < CodeIcon /> }
56+ size = "small"
57+ color = "primary"
58+ label = { snippet . groupId + ":" + snippet . artifactId }
59+ />
60+ < Chip size = "small" label = { snippet . version } />
61+ { /* <Chip
62+ label={snippet.dataSource?.toUpperCase()}
63+ size="small" /> */ }
64+ </ Stack >
65+ }
66+ action = {
67+ < Tooltip title = { `Lucene Score: ${ snippet . score . toFixed ( 2 ) } } >
68+ < Chip
69+ icon = { < ScoreIcon fontSize = "small" /> }
70+ color = "success"
71+ size = "small"
72+ label = { snippet . score . toFixed ( 1 ) }
73+ />
74+ </ Tooltip >
75+ }
76+ />
77+ < CardContent sx = { { flexGrow : 1 , pt : 0 } } >
78+ { /* Short Description and URLs */ }
79+ { snippet . metaData ?. meta_description_s ?. length ? (
80+ < Typography variant = "body2" sx = { { mb : 1 } } >
81+ < InfoIcon fontSize = "inherit" sx = { { mr : 0.5 , verticalAlign : "middle" } } />
82+ { snippet . metaData . meta_description_s [ 0 ] }
83+ </ Typography >
84+ ) : null }
85+ { snippet . metaData ?. meta_url_s ?. length ? (
86+ < Typography variant = "caption" component = "div" sx = { { mb : 1 } } >
87+ < Link href = { snippet . metaData . meta_url_s [ 0 ] } target = "_blank" rel = "noopener" >
88+ { snippet . metaData . meta_url_s [ 0 ] }
89+ </ Link >
90+ </ Typography >
91+ ) : null }
92+
93+ { /* Methods */ }
94+ < Typography variant = "subtitle2" sx = { { mt : 1 } } >
95+ Signature (LQL):
96+ </ Typography >
97+ { /* <List dense disablePadding>
98+ {snippet.methods.map((mth, idx) => (
99+ <ListItem key={idx} disableGutters sx={{ pl: 0 }}>
100+ <ListItemText primary={<Typography fontFamily="monospace">{mth}</Typography>} />
101+ </ListItem>
102+ ))}
103+ </List> */ }
104+
105+ < CodeBlock
106+ language = "java" >
107+ { snippet . lql }
108+ </ CodeBlock >
109+
110+ { /* Basic software metrics */ }
111+ < Divider sx = { { my : 1 } } />
112+ < Stack direction = "row" spacing = { 1 } sx = { { mb : 2 } } >
113+ { Object . entries ( measureLabels ) . map (
114+ ( [ key , label ] ) =>
115+ snippet . measures ?. [ key ] !== undefined && (
116+ < Chip
117+ key = { key }
118+ label = { `${ label } ${ snippet . measures [ key ] } }
119+ color = "default"
120+ size = "small"
121+ />
122+ )
123+ ) }
124+ </ Stack >
125+
126+ { /* Code content */ }
127+ < Typography variant = "subtitle2" sx = { { mb : 0.5 } } >
128+ Source:
129+ </ Typography >
130+ < CodeBlock
131+ language = "java" >
132+ { snippet . content }
133+ </ CodeBlock >
134+ { /* <Box
135+ component="pre"
136+ sx={{
137+ background: "#f6f8fa",
138+ p: 2,
139+ borderRadius: 2,
140+ maxHeight: 210,
141+ overflow: "auto",
142+ fontFamily: "monospace",
143+ fontSize: "0.93rem",
144+ }}
145+ >
146+
147+
148+ </Box> */ }
149+ < Typography
150+ variant = "caption"
151+ color = "text.secondary"
152+ sx = { { mt : 1 , display : 'block' } }
153+ >
154+ ID: { snippet . id } (Data Source: { snippet . dataSource } )
155+ </ Typography >
156+ </ CardContent >
157+ </ Card >
158+ ) ;
0 commit comments