import { Link } from "react-router-dom" ; import { Badge , Row , Table } from "~/components" ; import { Stack } from "~/components/Stack" ; import { useStacks } from "~/data/aws/stacks" ; import { styled } from "~/stitches.config" ; import { H1 , H3 } from "../components" ; const StackItem = styled ( "div" , { padding : "$xl 0" , borderBottom : "1px solid $border" , flexShrink : 0 , "&:first-child" : { paddingTop : 0 , } , } ) ; const StackName = styled ( "div" , { fontWeight : 600 , } ) ; const StackMetric = styled ( "div" , { fontSize : "$sm" , color : "$gray11" , } ) ; const Root = styled ( "div" , { padding : "$xl" , } ) ; const Constructs = styled ( "div" , { display : "flex" , flexWrap : "wrap" , gap : "$md" , } ) ; const ConstructsItem = styled ( "div" , { color : "$hiContrast" , padding : "$md" , fontSize : "$sm" , border : "1px solid $border" , borderRadius : 6 , width : 200 , overflow : "hidden" , textOverflow : "ellipsis" , } ) ; const ConstructsItemName = styled ( "div" , { fontWeight : 500 , whiteSpace : "nowrap" , textOverflow : "ellipsis" , overflow : "hidden" , } ) ; const ConstructsItemType = styled ( "div" , { fontSize : "$xs" , } ) ; export function Stacks ( ) { const stacks = useStacks ( ) ; return ( < Root > < Stack space = "xl" > < H1 > Stacks < /H1> < Stack space = "0" > { stacks . data ! . all . map ( ( s ) => ( < StackItem key = { s . info . StackName } > < Stack space = "lg" > < Row alignHorizontal = "justify" alignVertical = "start" > < Stack space = "sm" > < StackName > { s . info . StackName } < /StackName> { ! s . info . Outputs ?. length && ! s . constructs . all . length && ( < StackMetric > No exports in this stack < /StackMetric>)} < /Stack> < /Row> { Boolean ( s . info . Outputs ?. length ) && ( < Table . Root > < Table . Head > < Table . Row > < Table . Header > Output < /Table.Header> < Table . Header > Value < /Table.Header> < /Table.Row> < /Table.Head> < Table . Body > { s . info . Outputs ?. map ( ( o ) => ( < Table . Row key = { o . OutputKey } > < Table . Cell > { o . OutputKey } < /Table.Cell> < Table . Cell > { o . OutputValue } < /Table.Cell> < /Table.Row>))} < /Table.Body> < /Table.Root>)} { s . constructs . all . length > 0 && ( < Constructs > { s . constructs . all . filter ( ( c ) => c . type !== "Function" ) . map ( ( c ) => { return ( < ConstructsItem > < Stack space = "xs" > < ConstructsItemName title = { c . id } > { c . id } < /ConstructsItemName> < ConstructsItemType > { c . type } < /ConstructsItemType> < /Stack> < /ConstructsItem>); } ) } < /Constructs>)} < /Stack> < /StackItem>))} < /Stack> < /Stack> < /Root>); }