gistfile1.txt

import React from 'react';
import {
  TemplateCard,
  type TemplateCardProps,
} from '@backstage/plugin-scaffolder-react';
import { Typography, makeStyles } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  annotation: {
    marginTop: theme.spacing(1),
    color: theme.palette.text.secondary,
    fontSize: '0.875rem',
  },
}));

export const CustomTemplateCard = (props: TemplateCardProps) => {
  const { template } = props;
  const classes = useStyles();
  
  const createdAt = template.metadata.annotations?.['backstage.io/created-at'];
  const updatedAt = template.metadata.annotations?.['backstage.io/updated-at'];

  return (
    <TemplateCard
      {...props}
      title={
        <>
          {props.title}
          {createdAt && (
            <Typography className={classes.annotation}>
              Created: {new Date(createdAt).toLocaleDateString()}
            </Typography>
          )}
          {updatedAt && (
            <Typography className={classes.annotation}>
              Updated: {new Date(updatedAt).toLocaleDateString()}
            </Typography>
          )}
        </>
      }
    />
  );
};

gistfile2.txt

import { ScaffolderPage } from '@backstage/plugin-scaffolder';
import { CustomTemplateCard } from './components/scaffolder/CustomTemplateCard';

// In your routes:
<Route path="/create" element={
  <ScaffolderPage
    components={{
      TemplateCard: CustomTemplateCard
    }}
  />
} />