# ngothanhtung/kim-hung-phat architecture

> Architecture diagram of the GitHub repository ngothanhtung/kim-hung-phat, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ngothanhtung/kim-hung-phat
- Repository: https://github.com/ngothanhtung/kim-hung-phat

## Overview

Kim Hưng Phát is a Vietnamese jewelry-shop website. Visitors browse the live-style gold-price board, learn about the shop, or find contact details and directions; shared layout components provide navigation and contact information. Price updates are currently simulated in client state, not fetched from a market API, and the README identifies the policy page as another route. Edges reflect the supplied excerpts and README; unsampled page internals are not assumed.

Main entry points: [`lib/site.ts`](https://github.com/ngothanhtung/kim-hung-phat/blob/main/lib/site.ts) (Shop Defaults), [`app/layout.tsx`](https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/layout.tsx) (App Layout), [`components/price-provider.tsx`](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/price-provider.tsx) (Price State), [`components/site-header.tsx`](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/site-header.tsx) (Site Header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site Shell"]
  node_layout["App Layout<br/>[layout.tsx]"]
  node_header["Site Header<br/>[site-header.tsx]"]
  node_footer["Site Footer<br/>[site-footer.tsx]"]
  node_bottom["Contact Bar<br/>[bottom-bar.tsx]"]
end

subgraph group_prices["Price Board"]
  node_board["Price Display<br/>[price-board.tsx]"]
  node_price_state["Price State<br/>[price-provider.tsx]"]
end

subgraph group_pages["Shop Pages"]
  node_home["Price Home<br/>[page.tsx]"]
  node_about["About Page<br/>[page.tsx]"]
  node_contact["Contact Page<br/>[page.tsx]"]
  node_policy["Policy Page<br/>[page.tsx]"]
end

subgraph group_shared["Shop Information"]
  node_defaults["Shop Defaults<br/>[site.ts]"]
  node_clock["Client Clock<br/>[use-now.ts]"]
  node_logo["Brand Marks<br/>[logo.tsx]"]
end

node_visitor(("Visitor"))
node_maps["Google Maps"]

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders"| node_header
node_layout -->|"renders"| node_footer
node_layout -->|"renders"| node_bottom
node_layout -->|"provides state"| node_price_state
node_visitor -->|"opens prices"| node_home
node_visitor -->|"opens about"| node_about
node_visitor -->|"opens contact"| node_contact
node_visitor -->|"opens policy"| node_policy
node_home -->|"renders"| node_board
node_home -->|"reads shop details"| node_defaults
node_about -->|"reads shop details"| node_defaults
node_contact -->|"reads shop details"| node_defaults
node_policy -->|"reads shop data"| node_defaults
node_board -->|"reads and refreshes"| node_price_state
node_board -->|"formats prices"| node_defaults
node_board -->|"reads current time"| node_clock
node_price_state -->|"loads initial prices"| node_defaults
node_price_state -->|"gets load time"| node_clock
node_header -->|"reads ticker prices"| node_price_state
node_header -->|"reads navigation and shop"| node_defaults
node_header -->|"renders mark"| node_logo
node_footer -->|"reads shop details"| node_defaults
node_footer -->|"renders mark"| node_logo
node_bottom -->|"reads shop details"| node_defaults
node_home -->|"renders brand card"| node_logo
node_about -->|"renders brand card"| node_logo
node_contact -->|"embeds directions"| node_maps
node_visitor -->|"opens directions"| node_maps

click node_layout "https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/layout.tsx"
click node_header "https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/site-header.tsx"
click node_footer "https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/site-footer.tsx"
click node_bottom "https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/bottom-bar.tsx"
click node_home "https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/page.tsx"
click node_about "https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/gioi-thieu/page.tsx"
click node_contact "https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/lien-he/page.tsx"
click node_policy "https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/chinh-sach/page.tsx"
click node_board "https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/price-board.tsx"
click node_price_state "https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/price-provider.tsx"
click node_defaults "https://github.com/ngothanhtung/kim-hung-phat/blob/main/lib/site.ts"
click node_clock "https://github.com/ngothanhtung/kim-hung-phat/blob/main/lib/use-now.ts"
click node_logo "https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/logo.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_header,node_footer,node_bottom toneBlue
class node_board,node_price_state toneAmber
class node_home,node_about,node_contact,node_policy toneMint
class node_defaults,node_clock,node_logo toneRose
class node_visitor,node_maps toneIndigo
```

## Components

### Site Shell

- [App Layout](https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/layout.tsx): `app/layout.tsx`
- [Site Header](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/site-header.tsx): `components/site-header.tsx`
- [Site Footer](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/site-footer.tsx): `components/site-footer.tsx`
- [Contact Bar](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/bottom-bar.tsx): `components/bottom-bar.tsx`

### Price Board

- [Price Display](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/price-board.tsx): `components/price-board.tsx`
- [Price State](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/price-provider.tsx): `components/price-provider.tsx`

### Shop Pages

- [Price Home](https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/page.tsx): `app/page.tsx`
- [About Page](https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/gioi-thieu/page.tsx): `app/gioi-thieu/page.tsx`
- [Contact Page](https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/lien-he/page.tsx): `app/lien-he/page.tsx`
- [Policy Page](https://github.com/ngothanhtung/kim-hung-phat/blob/main/app/chinh-sach/page.tsx): `app/chinh-sach/page.tsx`

### Shop Information

- [Shop Defaults](https://github.com/ngothanhtung/kim-hung-phat/blob/main/lib/site.ts): `lib/site.ts`
- [Client Clock](https://github.com/ngothanhtung/kim-hung-phat/blob/main/lib/use-now.ts): `lib/use-now.ts`
- [Brand Marks](https://github.com/ngothanhtung/kim-hung-phat/blob/main/components/logo.tsx): `components/logo.tsx`

### Other components

- **Visitor**
- **Google Maps**

## Connections

- Visitor → App Layout: opens site (evidence: `README.md`)
- App Layout → Site Header: renders (evidence: `app/layout.tsx`)
- App Layout → Site Footer: renders (evidence: `app/layout.tsx`)
- App Layout → Contact Bar: renders (evidence: `app/layout.tsx`)
- App Layout → Price State: provides state (evidence: `app/layout.tsx`)
- Visitor → Price Home: opens prices (evidence: `README.md`)
- Visitor → About Page: opens about (evidence: `README.md`)
- Visitor → Contact Page: opens contact (evidence: `README.md`)
- Visitor → Policy Page: opens policy (evidence: `README.md`)
- Price Home → Price Display: renders (evidence: `app/page.tsx`)
- Price Home → Shop Defaults: reads shop details (evidence: `app/page.tsx`)
- About Page → Shop Defaults: reads shop details (evidence: `app/gioi-thieu/page.tsx`)
- Contact Page → Shop Defaults: reads shop details (evidence: `app/lien-he/page.tsx`)
- Policy Page → Shop Defaults: reads shop data (evidence: `app/chinh-sach/page.tsx`)
- Price Display → Price State: reads and refreshes (evidence: `components/price-board.tsx`)
- Price Display → Shop Defaults: formats prices (evidence: `components/price-board.tsx`)
- Price Display → Client Clock: reads current time (evidence: `components/price-board.tsx`)
- Price State → Shop Defaults: loads initial prices (evidence: `components/price-provider.tsx`)
- Price State → Client Clock: gets load time (evidence: `components/price-provider.tsx`)
- Site Header → Price State: reads ticker prices (evidence: `components/site-header.tsx`)
- Site Header → Shop Defaults: reads navigation and shop (evidence: `components/site-header.tsx`)
- Site Header → Brand Marks: renders mark (evidence: `components/site-header.tsx`)
- Site Footer → Shop Defaults: reads shop details (evidence: `components/site-footer.tsx`)
- Site Footer → Brand Marks: renders mark (evidence: `components/site-footer.tsx`)
- Contact Bar → Shop Defaults: reads shop details (evidence: `components/bottom-bar.tsx`)
- Price Home → Brand Marks: renders brand card (evidence: `app/page.tsx`)
- About Page → Brand Marks: renders brand card (evidence: `app/gioi-thieu/page.tsx`)
- Contact Page → Google Maps: embeds directions (evidence: `app/lien-he/page.tsx`)
- Visitor → Google Maps: opens directions