1- import { AnchorButton , Card } from " @blueprintjs/core" ;
2- import DBEntryView from " @gcsim/db/src/SharedComponents/DBEntryView" ;
3- import { db } from " @gcsim/types" ;
4- import axios from " axios" ;
5- import { useEffect , useState } from " react" ;
6- import { useTranslation } from " react-i18next" ;
7- import ReactMarkdown from " react-markdown" ;
8- import { Link } from " react-router-dom" ;
9- import remarkGfm from " remark-gfm" ;
1+ import { AnchorButton , Card } from ' @blueprintjs/core' ;
2+ import { Button , DBCard } from ' @gcsim/components' ;
3+ import { db } from ' @gcsim/types' ;
4+ import axios from ' axios' ;
5+ import { useEffect , useState } from ' react' ;
6+ import { useTranslation } from ' react-i18next' ;
7+ import ReactMarkdown from ' react-markdown' ;
8+ import { Link } from ' react-router-dom' ;
9+ import remarkGfm from ' remark-gfm' ;
1010
1111const randQuery = {
1212 query : {
@@ -20,33 +20,33 @@ const randQuery = {
2020} ;
2121
2222export function Dash ( ) {
23- const { t } = useTranslation ( ) ;
23+ const { t } = useTranslation ( ) ;
2424
25- const [ { isLoaded, text, tag } , setState ] = useState ( {
25+ const [ { isLoaded, text, tag} , setState ] = useState ( {
2626 isLoaded : false ,
27- text : "" ,
28- tag : "" ,
27+ text : '' ,
28+ tag : '' ,
2929 } ) ;
3030 const [ data , setData ] = useState < db . Entry [ ] > ( [ ] ) ;
3131 const [ dataIsLoaded , setDataIsLoaded ] = useState ( false ) ;
3232
3333 useEffect ( ( ) => {
34- axios ( " https://api.github.com/repos/genshinsim/gcsim/releases/latest" )
35- . then ( ( resp : { data } ) => {
36- setState ( { isLoaded : true , text : resp . data . body , tag : resp . data . name } ) ;
34+ axios ( ' https://api.github.com/repos/genshinsim/gcsim/releases/latest' )
35+ . then ( ( resp : { data } ) => {
36+ setState ( { isLoaded : true , text : resp . data . body , tag : resp . data . name } ) ;
3737 } )
3838 . catch ( ( err ) =>
39- console . log ( t < string > ( " viewer.error_encountered" ) + err . message )
39+ console . log ( t < string > ( ' viewer.error_encountered' ) + err . message ) ,
4040 ) ;
4141 axios ( `/api/db?q=${ encodeURIComponent ( JSON . stringify ( randQuery ) ) } )
42- . then ( ( resp : { data : db . Entries } ) => {
42+ . then ( ( resp : { data : db . Entries } ) => {
4343 if ( resp . data && resp . data . data ) {
4444 setData ( resp . data . data ) ;
4545 setDataIsLoaded ( true ) ;
4646 }
4747 } )
4848 . catch ( ( err ) =>
49- console . log ( t < string > ( " viewer.error_encountered" ) + err . message )
49+ console . log ( t < string > ( ' viewer.error_encountered' ) + err . message ) ,
5050 ) ;
5151 } , [ t ] ) ;
5252
@@ -56,33 +56,46 @@ export function Dash() {
5656 to = "/simulator"
5757 role = "button"
5858 className = "bp4-button bp4-intent-success !p-3 !rounded-md"
59- tabIndex = { 0 }
60- >
59+ tabIndex = { 0 } >
6160 < span className = "bp4-button-text text-3xl md:text-4xl lg:text-5xl font-semibold" >
62- { t < string > ( " dash.get_started" ) }
61+ { t < string > ( ' dash.get_started' ) }
6362 </ span >
6463 </ Link >
6564 { /* mobile Chrome/Safari needs w-full for padding to work properly, mobile Firefox works fine though... */ }
6665 < div className = "flex flex-col gap-4 w-full md:w-fit" >
6766 < Card className = "flex flex-col gap-4 items-center" >
6867 < h1 className = "text-center text-xl md:text-2xl lg:text-4xl" >
69- < b > { t < string > ( " dash.users_submitted" ) } </ b >
68+ < b > { t < string > ( ' dash.users_submitted' ) } </ b >
7069 </ h1 >
7170 < div >
7271 { dataIsLoaded
73- ? data . map ( ( entry , index ) => (
74- < DBEntryView dbEntry = { entry } key = { index } />
72+ ? data . map ( ( e , i ) => (
73+ < DBCard
74+ className = "border-0"
75+ key = { 'entry-' + i }
76+ entry = { e }
77+ skipTags = { - 1 }
78+ footer = {
79+ < div className = "flex flex-row flex-wrap place-content-end mr-2 gap-4" >
80+ < a
81+ href = { 'https://gcsim.app/db/' + e . _id }
82+ target = "_blank"
83+ rel = "noopener noreferrer" >
84+ < Button className = "bg-blue-600" > Show Detail</ Button >
85+ </ a >
86+ </ div >
87+ }
88+ />
7589 ) )
76- : t < string > ( " sim.loading" ) }
90+ : t < string > ( ' sim.loading' ) }
7791 </ div >
7892 < AnchorButton
7993 href = "https://simpact.app/"
8094 intent = "primary"
8195 target = "_blank"
82- className = "!p-3 !rounded-md"
83- >
96+ className = "!p-3 !rounded-md" >
8497 < span className = "text-xl md:text-2xl font-semibold" >
85- { t < string > ( " dash.visit_teams_db" ) }
98+ { t < string > ( ' dash.visit_teams_db' ) }
8699 </ span >
87100 </ AnchorButton >
88101 </ Card >
@@ -91,10 +104,9 @@ export function Dash() {
91104 < >
92105 < div className = "flex flex-col gap-4" >
93106 < h1 className = "text-center text-xl md:text-2xl lg:text-4xl" >
94- < b > { t < string > ( " dash.latest_release" ) } </ b >
107+ < b > { t < string > ( ' dash.latest_release' ) } </ b >
95108 < a
96- href = { `https://github.com/genshinsim/gcsim/releases/tag/${ tag } }
97- >
109+ href = { `https://github.com/genshinsim/gcsim/releases/tag/${ tag } } >
98110 { tag }
99111 </ a >
100112 </ h1 >
@@ -108,15 +120,14 @@ export function Dash() {
108120 href = "https://github.com/genshinsim/gcsim/releases"
109121 intent = "primary"
110122 target = "_blank"
111- className = "!p-3 !rounded-md"
112- >
123+ className = "!p-3 !rounded-md" >
113124 < span className = "text-xl md:text-2xl font-semibold" >
114- { t < string > ( " dash.view_releases" ) }
125+ { t < string > ( ' dash.view_releases' ) }
115126 </ span >
116127 </ AnchorButton >
117128 </ >
118129 ) : (
119- t < string > ( " sim.loading" )
130+ t < string > ( ' sim.loading' )
120131 ) }
121132 </ Card >
122133 </ div >
0 commit comments