Profile Components

Profile components build the restaurant detail pages. The Hero and Navigation components anchor the page chrome; the sub-sections (About, Hours, Map, Contact, Reviews, etc.) are slotted into the page layout. Most components accept a restaurant prop typed to the Restaurant or RestaurantApiResponse type from ~/types/restaurant.

The three auto-registered sub-pages ([slug]/index.vue, [slug]/menu.vue, [slug]/reviews.vue) use inject("restaurant") to receive the restaurant object from the parent [slug].vue layout page.

Components

<XRdProfileHero />

Full-width cover image banner (96/72 responsive height) with a gradient overlay. Displays restaurant name, star rating with half-star support, review count, cuisine types, price level, and open/closed status.

<XRdProfileHero :restaurant="restaurant" />

Props

<XRdProfileNavigation />

Sticky top navigation tab bar with links to Home, Menu, Local Reviews, Photos, and Articles sub-pages. Derives all paths from the restaurant slug.

<XRdProfileNavigation :slug="restaurant.slug" />

Props

<XRdProfileBreadcrumb />

Breadcrumb trail: Home → Explore → {Restaurant Name}.

<XRdProfileBreadcrumb :restaurant-name="restaurant.name" />

Props

<XRdProfileCard />

Clickable listing card used in home page grids and explore results. Links to /restaurants/{slug}. Shows hero image with price level badge, name, cuisine badges, star rating, review count, and neighborhood/city.

<XRdProfileCard :restaurant="restaurant" />

Props

<XRdProfileSidebar />

Right-column sidebar with the full address, phone, email, website, and conditional CTA buttons (Make a Reservation, Order Online). Reads restaurant.acceptsReservations and restaurant.reservationUrl to control the reservation button.

<XRdProfileSidebar :restaurant="restaurant" />

Props

<XRdProfileAbout />

Summary card combining description/tagline, cuisine types, price range, opening hours by day, and phone number in a single overview card.

<XRdProfileAbout :restaurant="restaurant" />

Props

<XRdProfileDescription />

Minimal "About" card that renders only restaurant.description.

<XRdProfileDescription :restaurant="restaurant" />

Props

<XRdProfileContact />

Full contact section displayed in a 3-column grid. Includes address with Google Maps directions link, phone, email, website, and a full opening hours table. Derives a Google Maps directions URL from location fields.

<XRdProfileContact :restaurant="restaurant" />

Props

<XRdProfileContactInfo />

Compact sidebar quick-info card showing address (with Get Directions link), phone, and website.

<XRdProfileContactInfo :restaurant="restaurant" />

Props

<XRdProfileHours />

Operating hours card. Iterates over restaurant.hours (an object keyed by day name) and renders open/close times.

<XRdProfileHours :restaurant="restaurant" />

Props

<XRdProfileMap />

Embedded Google Maps iframe card using the Google Maps Embed API. Constructs the query from location.address, location.city, and location.state.

<XRdProfileMap :restaurant="restaurant" />

Props

Note: Requires a valid Google Maps API key configured in the embed URL.

<XRdProfileCuisine />

Badge cloud of cuisine type labels from restaurant.cuisineTypes.

<XRdProfileCuisine :restaurant="restaurant" />

Props

<XRdProfileDietary />

Checklist card of dietary options. Only renders when restaurant.dietaryOptions is non-empty.

<XRdProfileDietary :restaurant="restaurant" />

Props

<XRdProfileAmenities />

Icon + label list card of restaurant amenities. Renders an icon when amenity.icon is provided.

<XRdProfileAmenities :restaurant="restaurant" />

Props

<XRdProfileReviews />

Full reviews section. Displays a rating distribution bar chart (1–5 stars) and a list of XRdProfileReviewsItem components from restaurant.reviews.

<XRdProfileReviews :restaurant="restaurant" />

Props

<XRdProfileReviewsItem />

Single review row with avatar, author name, formatted date, star rating icons, and review comment text.

<XRdProfileReviewsItem :review="review" />

Props

<XRdProfileMenuSection />

Grouped menu section with a bold title, optional description, a list of XRdProfileMenuItem rows, and an optional section image.

<XRdProfileMenuSection :section="menuSection" />

Props

<XRdProfileMenuItem />

Individual menu item row with name, description, dietary tag icons (colored by type), calorie count, and price.

<XRdProfileMenuItem :item="menuItem" />

Props

<XRdProfileFAQ />

Auto-generates a UAccordion FAQ from restaurant data fields. Includes dynamic questions about reservations (from acceptsReservations), dietary options (from servesCuisine), parking, and dress code.

<XRdProfileFAQ :restaurant="restaurant" />

Props

<XRdProfileNewsletter />

Email subscription form with full name and email fields, email preference checkboxes (promotions, events, newsletter), and Zod schema validation. No external props — manages its own form state.

<XRdProfileNewsletter />

Props

None. Form state and validation are internal.

<XRdProfilePromotions />

Active promotions section displaying promotion cards with image, title, price, description, validity dates, status badge, and a "Claim Offer" button. Only renders when promotions are available.

<XRdProfilePromotions
  :promotions="restaurant.promotions"
  :has-specials="restaurant.hasSpecials"
  :specials="restaurant.specials"
/>

Props

<XRdProfileSocial />

Social media link buttons. Renders Facebook, Instagram, Twitter, and TikTok buttons conditionally based on restaurant.social fields.

<XRdProfileSocial :restaurant="restaurant" />

Props

Pages

AI Context

package: "@xenterprises/nuxt-x-restaurants"
prefix: XRd
category: Profile
components:
  - XRdProfileHero
  - XRdProfileNavigation
  - XRdProfileBreadcrumb
  - XRdProfileCard
  - XRdProfileSidebar
  - XRdProfileAbout
  - XRdProfileDescription
  - XRdProfileContact
  - XRdProfileContactInfo
  - XRdProfileHours
  - XRdProfileMap
  - XRdProfileCuisine
  - XRdProfileDietary
  - XRdProfileAmenities
  - XRdProfileReviews
  - XRdProfileReviewsItem
  - XRdProfileMenuSection
  - XRdProfileMenuItem
  - XRdProfileFAQ
  - XRdProfileNewsletter
  - XRdProfilePromotions
  - XRdProfileSocial
use-when: >
  Building restaurant profile/detail pages. Use Hero + Navigation for the page
  chrome, Sidebar for the right column, and individual section components
  (About, Hours, Map, Reviews, Menu, Contact) as the main column content.
  ProfileCard is used in listing grids across home page and explore pages.
  Sub-pages receive restaurant data via Vue inject from the parent [slug].vue layout.
auto-registered-pages:
  - route: /restaurants/[slug]
    file: app/pages/restaurants/[slug]/index.vue
  - route: /restaurants/[slug]/menu
    file: app/pages/restaurants/[slug]/menu.vue
  - route: /restaurants/[slug]/reviews
    file: app/pages/restaurants/[slug]/reviews.vue
  - route: /explore
    file: app/pages/explore.vue
  - route: /popular
    file: app/pages/popular/index.vue