in website/src/components/gallery/ShowcaseCardPanel/index.tsx [90:531]
export default function ShowcaseCardPanel({ user }: { user: User }) {
const [
isPopupVisibleTemplateDetails,
{ toggle: toggleIsPopupVisibleTemplateDetails },
] = useBoolean(true);
const [
IsPopupVisibleAzureCalculator,
{ toggle: toggleIsPopupVisibleAzureCalculator },
] = useBoolean(true);
let templateURL = user.source
.replace("https://github.com/", "")
.toLowerCase();
if (templateURL.includes("azure-samples/")) {
templateURL = templateURL.replace("azure-samples/", "");
}
const azdInitCommand = "azd init -t " + templateURL;
let chevronSVG = useBaseUrl("/img/leftChevron.svg");
let pivotTextColor = "black";
const { colorMode } = useColorMode();
if (colorMode == "dark") {
pivotTextColor = "white";
chevronSVG = useBaseUrl("/img/leftChevronDark.svg");
}
const pivotStyles: IPivotStyles = {
linkIsSelected: [
{
selectors: {
":before":
colorMode != "dark"
? { backgroundColor: "#6656d1" }
: { backgroundColor: "#A79CF1" },
":hover":
colorMode != "dark"
? { backgroundColor: "#f3f2f1" }
: { backgroundColor: "#242424" },
},
},
],
root: "",
link: {
selectors: {
":active":
colorMode != "dark"
? { backgroundColor: "#f3f2f1" }
: { backgroundColor: "#242424" },
":hover":
colorMode != "dark"
? { backgroundColor: "#f3f2f1" }
: { backgroundColor: "#242424" },
},
},
linkContent: "",
text: {
color: pivotTextColor,
},
count: "",
icon: "",
linkInMenu: "",
overflowMenuButton: "",
};
const tags = [
...user.tags,
...(user.languages || []),
...(user.azureServices || []),
];
return (
<div>
<div
style={{
display: "flex",
alignItems: "center",
columnGap: "5px",
padding: "10px 0",
flexWrap: "wrap",
}}
>
<div className={styles.cardDescription}>by</div>
<ShowcaseMultipleAuthors
key={"author_" + user.title}
user={user}
cardPanel={true}
/>
<div className={styles.textColor}>•</div>
{/* <div>Last Update: </div>
<div>•</div> */}
<FluentUILink
href={user.source}
target="_blank"
style={{
display: "flex",
alignItems: "center",
columnGap: "5px",
}}
className={styles.color}
>
View in GitHub
{colorMode != "dark" ? (
<img
src={useBaseUrl("/img/redirect.svg")}
alt="Redirect"
height={13}
/>
) : (
<img
src={useBaseUrl("/img/redirectDark.svg")}
alt="Redirect"
height={13}
/>
)}
</FluentUILink>
</div>
<div
className={styles.cardTag}
style={{
display: "flex",
overflow: "hidden",
columnGap: "5px",
flexFlow: "wrap",
padding: "5px 0",
}}
>
<ShowcaseCardTag
key={"tag_" + user.title}
tags={tags}
moreTag={false}
/>
</div>
<Pivot
aria-label="Template Details and Legal"
styles={pivotStyles}
style={{ paddingTop: "20px" }}
>
<PivotItem
style={{
fontSize: "14px",
}}
headerText="Template Details"
>
<Label>
<div
className={styles.textColor}
style={{
fontSize: "14px",
fontWeight: "400",
}}
>
{user.description}
</div>
<div>
<div
className={styles.borderBottomColor}
style={{
display: "flex",
paddingTop: "30px",
}}
>
<div
className={styles.textColor}
style={{
fontSize: "14px",
flex: "1",
}}
>
Quick Use
</div>
<DefaultButton
style={{
backgroundColor: "transparent",
borderColor: "transparent",
minWidth: "0px",
padding: "0px",
height: "20px",
}}
>
<img
onClick={toggleIsPopupVisibleTemplateDetails}
src={chevronSVG}
height={20}
alt="Expand"
/>
</DefaultButton>
</div>
{isPopupVisibleTemplateDetails && (
<Popup>
<div
className={styles.textColor}
style={{
fontSize: "14px",
fontWeight: "400",
padding: "10px 0",
}}
>
If you already have the Azure Developer CLI installed on
your machine, using this template is as simple as running
this command in a new directory.
</div>
<div
className={styles.terminalSquareTopColor}
style={{
display: "flex",
height: "32px",
justifyContent: "center",
alignItems: "center",
}}
>
<div
className={styles.textColor}
style={{
flex: "1",
fontSize: "12px",
paddingLeft: "11px",
}}
>
Terminal Command
</div>
<CopyButton colorMode={colorMode} url={azdInitCommand} />
</div>
<div
className={styles.terminalSquareBottomColor}
style={{
height: "46px",
padding: "11px",
}}
>
<div
className={styles.commandColor}
style={{
margin: "auto",
whiteSpace: "nowrap",
overflow: "hidden",
fontFamily: "Consolas, Courier New, Courier, monospace",
fontSize: "14px",
fontWeight: "400",
}}
>
{azdInitCommand}
</div>
</div>
<div
style={{
paddingTop: "10px",
}}
>
<Separator alignContent="start">Or</Separator>
</div>
<div
className={styles.textColor}
style={{
fontSize: "14px",
fontWeight: "400",
padding: "10px 0",
}}
>
If using the{" "}
<a
href={
"https://marketplace.visualstudio.com/items?itemName=ms-azuretools.azure-dev"
}
target="_blank"
className={styles.color}
>
azd VS Code extension
</a>{" "}
you can paste this URL in the VS Code command terminal.
</div>
<div
className={styles.terminalSquareTopColor}
style={{
display: "flex",
height: "32px",
justifyContent: "center",
alignItems: "center",
}}
>
<div
className={styles.textColor}
style={{
flex: "1",
paddingLeft: "11px",
fontSize: "12px",
}}
>
Terminal URL
</div>
<CopyButton colorMode={colorMode} url={templateURL} />
</div>
<div
className={styles.terminalSquareBottomColor}
style={{
height: "46px",
padding: "11px",
}}
>
<div
className={styles.commandColor}
style={{
margin: "auto",
whiteSpace: "nowrap",
overflow: "hidden",
fontFamily: "Consolas, Courier New, Courier, monospace",
fontSize: "14px",
fontWeight: "400",
}}
>
{templateURL}
</div>
</div>
</Popup>
)}
</div>
<div>
<div
className={styles.borderBottomColor}
style={{
display: "flex",
paddingTop: "30px",
}}
>
<div
className={styles.textColor}
style={{
fontSize: "14px",
flex: "1",
}}
>
Included in this template
</div>
<DefaultButton
style={{
backgroundColor: "transparent",
borderColor: "transparent",
minWidth: "0px",
padding: "0px",
height: "20px",
}}
>
<img
onClick={toggleIsPopupVisibleAzureCalculator}
src={chevronSVG}
height={20}
alt="Expand"
/>
</DefaultButton>
</div>
{IsPopupVisibleAzureCalculator && (
<Popup>
<div
className={styles.textColor}
style={{
fontSize: "14px",
fontWeight: "400",
padding: "10px 0",
}}
>
The services used in this template are subject to their
normal usage fees and charges. Learn more about the cost of
individual services by visiting the{" "}
<a
href="https://azure.microsoft.com/en-us/pricing/calculator/"
target="_blank"
className={styles.color}
>
Azure Pricing Calculator
</a>
.
</div>
<ShowcaseCardAzureTag
key={"azure_tag_" + user.title}
tags={tags}
colorMode={colorMode}
/>
</Popup>
)}
</div>
</Label>
</PivotItem>
<PivotItem
style={{
color: "#424242",
fontSize: "14px",
fontWeight: "400",
}}
headerText="Legal"
>
<Label>
<div
className={styles.textColor}
style={{
fontSize: "14px",
fontWeight: "400",
}}
>
<div
style={{
padding: "10px 0",
}}
>
Awesome AZD Templates is a place for Azure Developer CLI users
to discover open-source Azure Developer CLI templates.
</div>
<div
style={{
padding: "10px 0",
}}
>
Please note that each template is licensed by its respective
owner (which may or may not be Microsoft) under the agreement
which accompanies the template. It is your responsibility to
determine what license applies to any template you choose to
use.
</div>
<div
style={{
padding: "10px 0",
}}
>
Microsoft is not responsible for any non-Microsoft code and does
not screen templates included in the Awesome AZD Templates for
security, privacy, compatibility, or performance issues.
</div>
<div
style={{
padding: "10px 0",
}}
>
The templates included in Awesome AZD Templates are not
supported by any Microsoft support program or service. Awesome
AZD Templates and any Microsoft-provided templates are provided
without warranty of any kind.
</div>
</div>
</Label>
</PivotItem>
</Pivot>
</div>
);
}