How to add a phone number property into the frontmatter

I want to create a Call.astro button into every blogpost but wanted this button to dynamically change phone-number from the post frontmatter. I have created the Call.astro button in the component as the following

---
import { Icon } from 'astro-icon/components';
export interface Props {
  phoneNumber: string;
}
const { phoneNumber } = Astro.props;
import Button from '~/components/ui/Button.astro';
---

<div class="fixed bottom-5 left-5 z-50 flex items-center space-x-2">
  <Button
    variant="primary"
    class="px-3 sm:px-4 md:px-5 lg:px-6 xl:px-7 2xl:px-8 transition duration-300 ease-in-out transform hover:scale-105"
    href={'tel:' + phoneNumber}
  >
    <span class="mr-1 rtl:mr-0 rtl:ml-1">اتصل الان</span>
    <Icon
      name="tabler:phone"
      class="w-5 h-5 rtl:-ml-1 rtl:mr-1 sm:w-6 sm:h-6 md:w-7 md:h-7 lg:w-8 lg:h-8 xl:w-9 xl:h-9 2xl:w-10 2xl:h-10"
    />
  </Button>
</div>

Then in the SinglePost.astro i update the code into

---
import { Icon } from 'astro-icon/components';

import Image from '~/components/common/Image.astro';
import PostTags from '~/components/blog/Tags.astro';
import SocialShare from '~/components/common/SocialShare.astro';

import { getPermalink } from '~/utils/permalinks';
import { getFormattedDate } from '~/utils/utils';

import type { Post } from '~/types';

import Call from '~/components/widgets/Call.astro';
export interface Props {
  post: Post;
  url: string | URL;
}

const { post, url } = Astro.props;
const { Content } = post;
---

<section class="py-8 sm:py-16 lg:py-20 mx-auto">
  <article>
    <p>
      {console.log(post)}
    </p>
    <p class="bg-red-400">
      {post.phoneNumber}
    </p>

    <header class={post.image ? '' : ''}>
      <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
        <p>
          <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
          <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
          {
            post.category && (
              <>
                {' '}
                ·{' '}
                <a class="capitalize hover:underline inline-block" href={getPermalink(post.category, 'category')}>
                  {post.category.replaceAll('-', ' ')}
                </a>
              </>
            )
          }
          {post.readingTime && <> · {post.readingTime} وقت القراءة</>}
        </p>
      </div>
      <h1
        class="px-4 sm:px-6 max-w-3xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
      >
        {post.title}
      </h1>
      <p
        class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-muted dark:text-slate-400 text-justify"
      >
        {post.excerpt}
      </p>

      {
        post.image ? (
          <Image
            src={post.image}
            class="max-w-full lg:max-w-[900px] mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
            widths={[400, 900]}
            sizes="(max-width: 900px) 400px, 900px"
            alt={post?.excerpt || ''}
            width={550}
            height={550}
            loading="eager"
            decoding="async"
          />
        ) : (
          <div class="max-w-3xl mx-auto px-4 sm:px-6">
            <div class="border-t dark:border-slate-700" />
          </div>
        )
      }
    </header>
    <div
      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
    >
      {Content ? <Content /> : <Fragment set:html={post.content || ''} />}
    </div>
    <div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
      <PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
      <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
    </div>
    {post.phoneNumber && <Call phoneNumber={String(post.phoneNumber)} />}
  </article>
</section>

for types.d.ts i configured it by adding the phonenumber type into it as a string like the following

import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
import type { HTMLAttributes, ImageMetadata } from 'astro/types';

export interface Post {
  /** A unique ID number that identifies a post. */
  id: string;

  /** A post’s unique slug – part of the post’s URL based on its name, i.e. a post called “My Sample Page” has a slug “my-sample-page”. */
  slug: string;

  /**  */
  permalink: string;

  /**  */
  publishDate: Date;
  /**  */
  updateDate?: Date;

  /**  */
  title: string;
  /** Optional summary of post content. */
  excerpt?: string;
  /**  */
  image?: ImageMetadata | string;

  /**  */
  category?: Taxonomy;
  /**  */
  tags?: Taxonomy[];
  /**  */
  author?: string;

  /**  */
  metadata?: MetaData;

  /**  */
  draft?: boolean;

  /**  */
  Content?: AstroComponentFactory;
  content?: string;

  /**  */
  readingTime?: number;
  /** The phone number for contact. */
  phoneNumber?: string;
}

but i still get undefinied type in the call us button! Any help is appreactited

onwidget / astrowind

How to add a phone number property into the frontmatter #489