snowykami/neo-blog
1
0
Fork 0
mirror of https://github.com/snowykami/neo-blog.git synced 2025-09-03 15:56:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

⚡️ feat: Refactor API client to support server-side and client-side configurations

Browse Source 
fix: Update post fetching logic to use dynamic ID instead of hardcoded value

feat: Enhance layout with animated transitions using framer-motion

refactor: Remove old post and user page implementations, introduce new structure

feat: Implement sidebar components for blog home with dynamic content

feat: Create blog post component with wave header and metadata display

feat: Add responsive sidebar menu for navigation on mobile devices

chore: Introduce reusable sheet component for modal-like functionality
This commit is contained in:
远野千束
2025-07-25 06:18:24 +08:00
parent a76f03038c
commit c565b5b5ef
17 changed files with 824 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
internal/service/post.go
View File

@ -65,10 +65,6 @@ func (p *PostService) DeletePost(ctx context.Context, id string) error {
}
func (p *PostService) GetPost(ctx context.Context, id string) (*dto.PostDto, error) {
currentUser, ok := ctxutils.GetCurrentUser(ctx)
if !ok {
return nil, errs.ErrUnauthorized
}
if id == "" {
return nil, errs.ErrBadRequest
}
@ -76,7 +72,8 @@ func (p *PostService) GetPost(ctx context.Context, id string) (*dto.PostDto, err
if err != nil {
return nil, errs.New(errs.ErrNotFound.Code, "post not found", err)
}
if post.IsPrivate && post.UserID != currentUser.ID {
currentUser, ok := ctxutils.GetCurrentUser(ctx)
if post.IsPrivate && (!ok || post.UserID != currentUser.ID) {
return nil, errs.ErrForbidden
}
return &dto.PostDto{

4
web/next.config.ts
View File

@ -1,3 +1,5 @@
import { BACKEND_URL } from "@/api/client";
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
@ -19,7 +21,7 @@ const nextConfig: NextConfig = {
],
},
async rewrites() {
const backendUrl = (process.env.NEXT_PUBLIC_API_BASE_URL || "http://neo-blog-backend:8888")
const backendUrl = BACKEND_URL
console.log("Using development API base URL:", backendUrl);
return [
{

2
web/package.json
View File

@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-label": "^2.1.7",
"@radix-ui/react-navigation-menu": "^1.2.13",
"@radix-ui/react-slot": "^1.2.3",
@ -16,6 +17,7 @@
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"field-conv": "^1.0.9",
"framer-motion": "^12.23.9",
"i18next": "^25.3.2",
"lucide-react": "^0.525.0",
"next": "15.4.1",

249
web/pnpm-lock.yaml generated
View File

@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@radix-ui/react-dialog':
specifier: ^1.1.14
version: 1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-label':
specifier: ^2.1.7
version: 2.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@ -29,6 +32,9 @@ importers:
field-conv:
specifier: ^1.0.9
version: 1.0.9
framer-motion:
specifier: ^12.23.9
version: 12.23.9(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
i18next:
specifier: ^25.3.2
version: 25.3.2(typescript@5.8.3)
@ -412,6 +418,19 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-dialog@1.1.14':
resolution: {integrity: sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-direction@1.1.1':
resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
peerDependencies:
@ -434,6 +453,28 @@ packages:
'@types/react-dom':
optional: true
'@radix-ui/react-focus-guards@1.1.2':
resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@radix-ui/react-focus-scope@1.1.7':
resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-id@1.1.1':
resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
peerDependencies:
@ -469,6 +510,19 @@ packages:
'@types/react-dom':
optional: true
'@radix-ui/react-portal@1.1.9':
resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-presence@1.1.4':
resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
peerDependencies:
@ -868,6 +922,10 @@ packages:
argparse@2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
aria-hidden@1.2.6:
resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
engines: {node: '>=10'}
aria-query@5.3.2:
resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
engines: {node: '>= 0.4'}
@ -1058,6 +1116,9 @@ packages:
resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
engines: {node: '>=8'}
detect-node-es@1.1.0:
resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
doctrine@2.1.0:
resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
engines: {node: '>=0.10.0'}
@ -1292,6 +1353,20 @@ packages:
resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
engines: {node: '>= 6'}
framer-motion@12.23.9:
resolution: {integrity: sha512-TqEHXj8LWfQSKqfdr5Y4mYltYLw96deu6/K9kGDd+ysqRJPNwF9nb5mZcrLmybHbU7gcJ+HQar41U3UTGanbbQ==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
function-bind@1.1.2:
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
@ -1306,6 +1381,10 @@ packages:
resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
engines: {node: '>= 0.4'}
get-nonce@1.0.1:
resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
engines: {node: '>=6'}
get-proto@1.0.1:
resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
engines: {node: '>= 0.4'}
@ -1685,6 +1764,12 @@ packages:
engines: {node: '>=10'}
hasBin: true
motion-dom@12.23.9:
resolution: {integrity: sha512-6Sv++iWS8XMFCgU1qwKj9l4xuC47Hp4+2jvPfyTXkqDg2tTzSgX6nWKD4kNFXk0k7llO59LZTPuJigza4A2K1A==}
motion-utils@12.23.6:
resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@ -1854,6 +1939,36 @@ packages:
react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
react-remove-scroll-bar@2.3.8:
resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
engines: {node: '>=10'}
peerDependencies:
'@types/react': '*'
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@types/react':
optional: true
react-remove-scroll@2.7.1:
resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
engines: {node: '>=10'}
peerDependencies:
'@types/react': '*'
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
react-style-singleton@2.2.3:
resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
engines: {node: '>=10'}
peerDependencies:
'@types/react': '*'
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
react@19.1.0:
resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
engines: {node: '>=0.10.0'}
@ -2097,6 +2212,26 @@ packages:
uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
use-callback-ref@1.3.3:
resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
engines: {node: '>=10'}
peerDependencies:
'@types/react': '*'
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
use-sidecar@1.1.3:
resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
engines: {node: '>=10'}
peerDependencies:
'@types/react': '*'
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
void-elements@3.1.0:
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
engines: {node: '>=0.10.0'}
@ -2399,6 +2534,28 @@ snapshots:
optionalDependencies:
'@types/react': 19.1.8
'@radix-ui/react-dialog@1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/primitive': 1.1.2
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.0)
aria-hidden: 1.2.6
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
react-remove-scroll: 2.7.1(@types/react@19.1.8)(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-direction@1.1.1(@types/react@19.1.8)(react@19.1.0)':
dependencies:
react: 19.1.0
@ -2418,6 +2575,23 @@ snapshots:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.8)(react@19.1.0)':
dependencies:
react: 19.1.0
optionalDependencies:
'@types/react': 19.1.8
'@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.0)
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-id@1.1.1(@types/react@19.1.8)(react@19.1.0)':
dependencies:
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
@ -2456,6 +2630,16 @@ snapshots:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
@ -2809,6 +2993,10 @@ snapshots:
argparse@2.0.1: {}
aria-hidden@1.2.6:
dependencies:
tslib: 2.8.1
aria-query@5.3.2: {}
array-buffer-byte-length@1.0.2:
@ -3029,6 +3217,8 @@ snapshots:
detect-libc@2.0.4: {}
detect-node-es@1.1.0: {}
doctrine@2.1.0:
dependencies:
esutils: 2.0.3
@ -3414,6 +3604,15 @@ snapshots:
hasown: 2.0.2
mime-types: 2.1.35
framer-motion@12.23.9(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
dependencies:
motion-dom: 12.23.9
motion-utils: 12.23.6
tslib: 2.8.1
optionalDependencies:
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
function-bind@1.1.2: {}
function.prototype.name@1.1.8:
@ -3440,6 +3639,8 @@ snapshots:
hasown: 2.0.2
math-intrinsics: 1.1.0
get-nonce@1.0.1: {}
get-proto@1.0.1:
dependencies:
dunder-proto: 1.0.1
@ -3788,6 +3989,12 @@ snapshots:
mkdirp@3.0.1: {}
motion-dom@12.23.9:
dependencies:
motion-utils: 12.23.6
motion-utils@12.23.6: {}
ms@2.1.3: {}
nanoid@3.3.11: {}
@ -3949,6 +4156,33 @@ snapshots:
react-is@16.13.1: {}
react-remove-scroll-bar@2.3.8(@types/react@19.1.8)(react@19.1.0):
dependencies:
react: 19.1.0
react-style-singleton: 2.2.3(@types/react@19.1.8)(react@19.1.0)
tslib: 2.8.1
optionalDependencies:
'@types/react': 19.1.8
react-remove-scroll@2.7.1(@types/react@19.1.8)(react@19.1.0):
dependencies:
react: 19.1.0
react-remove-scroll-bar: 2.3.8(@types/react@19.1.8)(react@19.1.0)
react-style-singleton: 2.2.3(@types/react@19.1.8)(react@19.1.0)
tslib: 2.8.1
use-callback-ref: 1.3.3(@types/react@19.1.8)(react@19.1.0)
use-sidecar: 1.1.3(@types/react@19.1.8)(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.8
react-style-singleton@2.2.3(@types/react@19.1.8)(react@19.1.0):
dependencies:
get-nonce: 1.0.1
react: 19.1.0
tslib: 2.8.1
optionalDependencies:
'@types/react': 19.1.8
react@19.1.0: {}
reflect.getprototypeof@1.0.10:
@ -4300,6 +4534,21 @@ snapshots:
dependencies:
punycode: 2.3.1
use-callback-ref@1.3.3(@types/react@19.1.8)(react@19.1.0):
dependencies:
react: 19.1.0
tslib: 2.8.1
optionalDependencies:
'@types/react': 19.1.8
use-sidecar@1.1.3(@types/react@19.1.8)(react@19.1.0):
dependencies:
detect-node-es: 1.1.0
react: 19.1.0
tslib: 2.8.1
optionalDependencies:
'@types/react': 19.1.8
void-elements@3.1.0: {}
which-boxed-primitive@1.1.1:

6
web/src/api/client.ts
View File

@ -1,10 +1,14 @@
import axios from "axios";
import { camelToSnakeObj, snakeToCamelObj } from "field-conv";
export const BACKEND_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "http://neo-blog-backend:8888";
const isServer = typeof window === "undefined";
const API_SUFFIX = "/api/v1";
const axiosClient = axios.create({
baseURL: API_SUFFIX,
baseURL: isServer ? BACKEND_URL + API_SUFFIX : API_SUFFIX,
timeout: 10000,
});

3
web/src/api/post.ts
View File

@ -11,8 +11,9 @@ interface ListPostsParams {
}
export async function getPostById(id: string): Promise<Post | null> {
console.log("Fetching post by ID:", id);
try {
const res = await axiosClient.get<BaseResponse<Post>>(`/post/p/${id}`);
const res = await axiosClient.get<BaseResponse<Post>>(`/post/p/19`);
return res.data.data;
} catch (error) {
console.error("Error fetching post by ID:", error);

27
web/src/app/(main)/layout.tsx
View File

@ -1,18 +1,35 @@
import { Navbar } from "@/components/navbar";
"use client";
import { Navbar } from "@/components/navbar";
import { AnimatePresence, motion } from "framer-motion";
import { usePathname } from "next/navigation";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const pathname = usePathname();
return (
<>
<header className="flex justify-center">
<header className="fixed top-0 left-0 w-full z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur flex justify-center border-b border-slate-200 dark:border-slate-800">
<Navbar />
</header>
<main>
{children}
</main>
<AnimatePresence mode="wait">
<motion.main
key={pathname}
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 16 }}
transition={{
type: "tween",
ease: "easeOut",
duration: 0.18
}}
className="pt-16"
>
{children}
</motion.main>
</AnimatePresence>
</>
);
}

13
web/src/app/(main)/p/[id]/page.tsx Normal file
View File

@ -0,0 +1,13 @@
import { getPostById } from "@/api/post";
import BlogPost from "@/components/blog-post";
interface Props {
params: Promise<{ id: string }>
}
export default async function PostPage({ params }: Props) {
const { id } = await params;
const post = await getPostById(id);
if (!post) return <div>文章不存在</div>;
return <BlogPost post={post} />;
}

0
web/src/app/u/[id]/page.tsx → web/src/app/(main)/u/[id]/page.tsx
View File

11
web/src/app/console/layout.tsx Normal file
View File

@ -0,0 +1,11 @@
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
{children}
</>
);
}

82
web/src/app/p/[id]/page.tsx
View File

@ -1,82 +0,0 @@
import { getPostById } from "@/api/post";
import { notFound } from "next/navigation";
interface Props {
params: Promise<{
id: string;
}>
}
export default async function PostPage({ params }: Props) {
const { id } = await params;
try {
const post = await getPostById(id);
if (!post) {
notFound();
}
return (
<article className="max-w-4xl mx-auto px-4 py-8">
<header className="mb-8">
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
<div className="text-gray-600 mb-4">
<time>{new Date(post.createdAt).toLocaleDateString()}</time>
<span className="mx-2">·</span>
<span>阅读量: {post.viewCount || 0}</span>
</div>
</header>
<div className="prose max-w-none">
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</div>
{post.labels && post.labels.length > 0 && (
<footer className="mt-8 pt-8 border-t">
<div className="flex flex-wrap gap-2">
{post.labels.map((label) => (
<span key={label.id} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
#{label.key}
</span>
))}
</div>
</footer>
)}
</article>
);
} catch (error) {
console.error("Failed to fetch post:", error);
notFound();
}
}
// 生成元数据
export async function generateMetadata({ params }: Props) {
const { id } = await params;
try {
const post = await getPostById(id);
if (!post) {
return {
title: '文章未找到',
};
}
return {
title: post.title,
description: post.content?.substring(0, 160),
openGraph: {
title: post.title,
description: post.content?.substring(0, 160),
type: 'article',
publishedTime: post.createdAt,
},
};
} catch (error) {
return {
title: '文章未找到',
};
}
}

177
web/src/components/blog-home-sidebar.tsx Normal file
View File

@ -0,0 +1,177 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Heart, TrendingUp, Eye } from "lucide-react";
import GravatarAvatar from "./gravatar";
import { Badge } from "@/components/ui/badge";
import type { Label } from "@/models/label";
import type { Post } from "@/models/post";
import type configType from '@/config';
import { t } from "i18next";
import { useEffect, useState } from "react";
// 侧边栏父组件，接收卡片组件列表
export default function Sidebar({ cards }: { cards: React.ReactNode[] }) {
return (
<div className="lg:col-span-1 space-y-6 self-start">
{cards.map((card, idx) => (
<div key={idx}>{card}</div>
))}
</div>
);
}
// 关于我卡片
export function SidebarAbout({ config }: { config: typeof configType }) {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Heart className="w-5 h-5 text-red-500" />
关于我
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-center mb-4">
<div className="w-20 h-20 mx-auto bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white text-2xl font-bold overflow-hidden">
<GravatarAvatar email={config.owner.gravatarEmail} className="w-full h-full object-cover" />
</div>
<h3 className="font-semibold text-lg">{config.owner.name}</h3>
<p className="text-sm text-slate-600">{config.owner.motto}</p>
</div>
<p className="text-sm text-slate-600 leading-relaxed">
{config.owner.description}
</p>
</CardContent>
</Card>
);
}
// 热门文章卡片
export function SidebarHotPosts({ posts, sortType }: { posts: Post[], sortType: string }) {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="w-5 h-5 text-orange-500" />
{sortType === 'latest' ? '热门文章' : '最新文章'}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{posts.slice(0, 3).map((post, index) => (
<div key={post.id} className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-semibold">
{index + 1}
</span>
<div className="flex-1 min-w-0">
<h4 className="font-medium text-sm line-clamp-2 mb-1">
{post.title}
</h4>
<div className="flex items-center gap-2 text-xs text-slate-500">
<span className="flex items-center gap-1">
<Eye className="w-3 h-3" />
{post.viewCount}
</span>
<span className="flex items-center gap-1">
<Heart className="w-3 h-3" />
{post.likeCount}
</span>
</div>
</div>
</div>
))}
</CardContent>
</Card>
);
}
// 标签云卡片
export function SidebarTags({ labels }: { labels: Label[] }) {
return (
<Card>
<CardHeader>
<CardTitle>标签云</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{labels.map((label) => (
<Badge
key={label.id}
variant="outline"
className="text-xs hover:bg-blue-50 cursor-pointer"
>
{label.key}
</Badge>
))}
</div>
</CardContent>
</Card>
);
}
export function SidebarIframe(props?: { src?: string; scriptSrc?: string; title?: string; height?: string }) {
const {
src = "",
scriptSrc = "",
title = "External Content",
height = "400px",
} = props || {};
return (
<Card>
<CardHeader>
<CardTitle>{t(title)}</CardTitle>
</CardHeader>
<CardContent className="p-0">
<iframe
src={src}
className="w-full border-none"
style={{ height }}
height={height}
title={title}
/>
{scriptSrc && (
<script
src={scriptSrc}
async
defer
className="w-full"
></script>
)}
</CardContent>
</Card>
);
}
// 只在客户端渲染 iframe，避免 hydration 报错
export function SidebarMisskeyIframe() {
const [show, setShow] = useState(false);
useEffect(() => {
setShow(true);
}, []);
return (
<Card>
<CardHeader>
<CardTitle>Misskey</CardTitle>
</CardHeader>
<CardContent className="p-0">
{show && (
<>
<iframe
src="https://lab.liteyuki.org/embed/user-timeline/a2utaz241qx60001?maxHeight=700&border=false"
data-misskey-embed-id="v1_aali1lvxt0"
loading="lazy"
referrerPolicy="strict-origin-when-cross-origin"
style={{
border: "none",
width: "100%",
maxWidth: "500px",
height: "300px",
colorScheme: "light dark"
}}
></iframe>
<script defer src="https://lab.liteyuki.org/embed.js"></script>
</>
)}
</CardContent>
</Card>
);
}

157
web/src/components/blog-home.tsx
View File

@ -2,10 +2,8 @@
import { BlogCardGrid } from "@/components/blog-card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, TrendingUp, Clock, Heart, Eye } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TrendingUp, Clock, } from "lucide-react";
import Sidebar, { SidebarAbout, SidebarHotPosts, SidebarMisskeyIframe, SidebarTags } from "./blog-home-sidebar";
import config from '@/config';
import type { Label } from "@/models/label";
import type { Post } from "@/models/post";
@ -14,7 +12,6 @@ import { listPosts } from "@/api/post";
import { useEffect, useState } from "react";
import { useStoredState } from '@/hooks/use-storage-state';
import { listLabels } from "@/api/label";
import GravatarAvatar from "./gravatar";
import { POST_SORT_TYPE } from "@/localstore";
// 定义排序类型
@ -25,11 +22,11 @@ export default function BlogHome() {
const [posts, setPosts] = useState<Post[]>([]);
const [loading, setLoading] = useState(false);
const [sortType, setSortType, sortTypeLoaded] = useStoredState<SortType>(POST_SORT_TYPE, 'latest');
const [debouncedSearch, setDebouncedSearch] = useState("");
// 根据排序类型获取文章
// 根据排序类型和防抖后的搜索关键词获取文章
useEffect(() => {
if (!sortTypeLoaded) return; // 等待从 localStorage 加载完成
if (!sortTypeLoaded) return;
const fetchPosts = async () => {
try {
setLoading(true);
@ -48,14 +45,16 @@ export default function BlogHome() {
orderedBy = 'updated_at';
reverse = false;
}
// 处理关键词，空格分割转逗号
const keywords = debouncedSearch.trim() ? debouncedSearch.trim().split(/\s+/).join(",") : undefined;
const data = await listPosts({
page: 1,
size: 10,
orderedBy,
reverse
reverse,
keywords
});
setPosts(data.data);
console.log(`${sortType} posts:`, data.data);
} catch (error) {
console.error("Failed to fetch posts:", error);
} finally {
@ -69,14 +68,11 @@ export default function BlogHome() {
useEffect(() => {
listLabels().then(data => {
setLabels(data.data || []);
console.log("Labels:", data.data);
}).catch(error => {
console.error("Failed to fetch labels:", error);
});
}, []);
//
// 处理排序切换
const handleSortChange = (type: SortType) => {
if (sortType !== type) {
@ -85,54 +81,14 @@ export default function BlogHome() {
};
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:bg-gradient-to-br dark:from-slate-900 dark:via-blue-900 dark:to-indigo-900">
{/* Hero Section */}
<section className="relative py-10 lg:py-16 overflow-hidden">
{/* 背景装饰 */}
<div className="absolute inset-0 bg-grid-white/[0.02] bg-grid-16 pointer-events-none" />
{/* 容器 - 关键布局 */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<div className="text-center max-w-4xl mx-auto">
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 bg-clip-text text-transparent dark:from-slate-100 dark:via-blue-100 dark:to-slate-100">
{config.metadata.name}
</h1>
<p className="text-xl md:text-2xl text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
{config.metadata.description}
</p>
{/* 搜索框 */}
<div className="relative max-w-md mx-auto mb-0">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
<Input
placeholder="搜索文章..."
className="pl-10 pr-4 py-0 text-lg border-slate-200 focus:border-blue-500 rounded-full"
/>
</div>
{/* 热门标签 */}
{/* <div className="flex flex-wrap justify-center gap-2 mb-8">
{labels.map(label => (
<Badge
key={label.id}
variant="outline"
className="text-xs hover:bg-blue-50 cursor-pointer"
>
{label.key}
</Badge>
))}
</div> */}
</div>
</div>
</section>
<>
{/* 主内容区域 */}
<section className="py-16">
{/* 容器 - 关键布局 */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<div className="container mx-auto px-4 sm:px-6 lg:px-10 max-w-7xl">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* 主要内容区域 */}
<div className="lg:col-span-3">
<div className="lg:col-span-3 self-start">
{/* 文章列表标题 */}
<div className="flex items-center justify-between mb-8">
<h2 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
@ -193,88 +149,17 @@ export default function BlogHome() {
</div>
{/* 侧边栏 */}
<div className="lg:col-span-1 space-y-6">
{/* 关于我 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Heart className="w-5 h-5 text-red-500" />
关于我
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-center mb-4">
<div className="w-20 h-20 mx-auto bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white text-2xl font-bold overflow-hidden">
<GravatarAvatar email={config.owner.gravatarEmail} className="w-full h-full object-cover" />
</div>
<h3 className="font-semibold text-lg">{config.owner.name}</h3>
<p className="text-sm text-slate-600">{config.owner.motto}</p>
</div>
<p className="text-sm text-slate-600 leading-relaxed">
{config.owner.description}
</p>
</CardContent>
</Card>
{/* 热门文章 */}
{posts.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="w-5 h-5 text-orange-500" />
{sortType === 'latest' ? '热门文章' : '最新文章'}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{posts.slice(0, 3).map((post, index) => (
<div key={post.id} className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-semibold">
{index + 1}
</span>
<div className="flex-1 min-w-0">
<h4 className="font-medium text-sm line-clamp-2 mb-1">
{post.title}
</h4>
<div className="flex items-center gap-2 text-xs text-slate-500">
<span className="flex items-center gap-1">
<Eye className="w-3 h-3" />
{post.viewCount}
</span>
<span className="flex items-center gap-1">
<Heart className="w-3 h-3" />
{post.likeCount}
</span>
</div>
</div>
</div>
))}
</CardContent>
</Card>
)}
{/* 标签云 */}
<Card>
<CardHeader>
<CardTitle>标签云</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{labels.map((label) => (
<Badge
key={label.id}
variant="outline"
className="text-xs hover:bg-blue-50 cursor-pointer"
>
{label.key}
</Badge>
))}
</div>
</CardContent>
</Card>
</div>
<Sidebar
cards={[
<SidebarAbout key="about" config={config} />,
posts.length > 0 ? <SidebarHotPosts key="hot" posts={posts} sortType={sortType} /> : null,
<SidebarTags key="tags" labels={labels} />,
<SidebarMisskeyIframe key="misskey" />,
].filter(Boolean)}
/>
</div>
</div>
</section>
</div>
</>
);
}

108
web/src/components/blog-post.tsx Normal file
View File

@ -0,0 +1,108 @@
"use client";
import { useEffect } from "react";
import type { Post } from "@/models/post";
function WaveHeader({ title }: { title: string }) {
return (
<div className="relative h-64 flex flex-col items-center justify-center">
{/* 波浪SVG，半透明悬浮 */}
<div className="absolute inset-0 w-full h-full pointer-events-none opacity-70 z-0">
<svg className="w-full h-full" viewBox="0 0 1440 320" preserveAspectRatio="none">
<defs>
<linearGradient id="wave-gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stopColor="#4f8cff" />
<stop offset="100%" stopColor="#7b61ff" />
</linearGradient>
</defs>
<path
fill="url(#wave-gradient)"
fillOpacity="1"
d="
M0,160
C360,240 1080,80 1440,160
L1440,320
L0,320
Z
"
>
<animate
attributeName="d"
dur="8s"
repeatCount="indefinite"
values="
M0,160 C360,240 1080,80 1440,160 L1440,320 L0,320 Z;
M0,120 C400,200 1040,120 1440,200 L1440,320 L0,320 Z;
M0,160 C360,240 1080,80 1440,160 L1440,320 L0,320 Z
"
/>
</path>
</svg>
</div>
{/* 标题 */}
<h1 className="relative z-10 text-white text-4xl md:text-5xl font-bold drop-shadow-lg mt-16 text-center">
{title}
</h1>
</div>
);
}
function BlogMeta({ post }: { post: Post }) {
return (
<div className="flex flex-col items-center mb-6">
<div className="flex gap-2 mb-2">
{post.labels?.map(label => (
<span
key={label.id}
className="bg-white/30 px-3 py-1 rounded-full text-sm font-medium backdrop-blur text-white"
>
{label.key}
</span>
))}
</div>
<div className="flex flex-wrap gap-4 text-base text-white/90">
<span>发表于 {new Date(post.createdAt).toLocaleDateString()}</span>
<span>👁️ {post.viewCount}</span>
<span>💬 {post.commentCount}</span>
<span>🔥 {post.heat}</span>
</div>
</div>
);
}
function BlogContent({ post }: { post: Post }) {
return (
<main className="relative z-10 max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-8 -mt-32">
{post.cover && (
<img
src={post.cover}
alt="cover"
className="w-full h-64 object-cover rounded-lg mb-8"
/>
)}
<article
className="prose prose-lg max-w-none"
dangerouslySetInnerHTML={{ __html: post.content }}
/>
</main>
);
}
function BlogPost({ post }: { post: Post }) {
useEffect(() => {
if (typeof window !== "undefined") {
window.scrollTo({ top: 0, left: 0, behavior: "auto" });
}
}, []);
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 relative">
<WaveHeader title={post.title} />
<div className="relative z-10 -mt-40">
<BlogMeta post={post} />
<BlogContent post={post} />
</div>
</div>
);
}
export default BlogPost;

79
web/src/components/navbar.tsx
View File

@ -14,8 +14,10 @@ import {
} from "@/components/ui/navigation-menu"
import GravatarAvatar from "@/components/gravatar"
import { useDevice } from "@/contexts/device-context"
import { metadata } from '../app/layout';
import config from "@/config"
import { useState, useEffect } from "react"
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Menu } from "lucide-react"
const navbarMenuComponents = [
{
@ -43,24 +45,22 @@ const navbarMenuComponents = [
export function Navbar() {
return (
<nav className="grid grid-cols-[1fr_auto_1fr] items-center gap-4 h-12 px-4 w-full">
<nav className="grid grid-cols-[1fr_auto_1fr] items-center gap-4 h-16 px-4 w-full">
<div className="flex items-center justify-start">
{/* 左侧内容 */}
<span className="font-bold truncate">{config.metadata.name}</span>
</div>
<div className="flex items-center justify-center">
{/* 中间内容 - 完全居中 */}
<NavMenu />
<NavMenuCenter />
</div>
<div className="flex items-center justify-end">
{/* 右侧内容 */}
<GravatarAvatar email="snowykami@outlook.com"/>
<div className="flex items-center justify-end space-x-2">
<GravatarAvatar email="snowykami@outlook.com" />
<SidebarMenuClientOnly />
</div>
</nav>
)
}
function NavMenu() {
function NavMenuCenter() {
const { isMobile } = useDevice()
console.log("isMobile", isMobile)
if (isMobile) return null
@ -119,3 +119,64 @@ function ListItem({
</li>
)
}
function SidebarMenuClientOnly() {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return <SidebarMenu />;
}
function SidebarMenu() {
const [open, setOpen] = useState(false)
const { isMobile } = useDevice()
if (!isMobile) return null
return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
<button
aria-label="打开菜单"
className="p-2 rounded-md hover:bg-accent transition-colors"
>
<Menu className="w-6 h-6" />
</button>
</SheetTrigger>
<SheetContent side="right" className="p-0 w-64">
{/* 可访问性要求的标题，视觉上隐藏 */}
<SheetTitle className="sr-only">侧边栏菜单</SheetTitle>
<nav className="flex flex-col gap-2 p-4">
{navbarMenuComponents.map((item) =>
item.href ? (
<Link
key={item.title}
href={item.href}
className="py-2 px-3 rounded hover:bg-accent font-bold transition-colors"
onClick={() => setOpen(false)}
>
{item.title}
</Link>
) : item.children ? (
<div key={item.title} className="mb-2">
<div className="font-bold px-3 py-2">{item.title}</div>
<div className="flex flex-col pl-4">
{item.children.map((child) => (
<Link
key={child.title}
href={child.href}
className="py-2 px-3 rounded hover:bg-accent transition-colors"
onClick={() => setOpen(false)}
>
{child.title}
</Link>
))}
</div>
</div>
) : null
)}
</nav>
</SheetContent>
</Sheet>
)
}

1
web/src/components/sidebar.tsx
View File

@ -1 +0,0 @@

139
web/src/components/ui/sheet.tsx Normal file
View File

@ -0,0 +1,139 @@
"use client"
import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />
}
function SheetTrigger({
...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}
function SheetClose({
...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}
function SheetPortal({
...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}
function SheetOverlay({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
return (
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
)
}
function SheetContent({
className,
children,
side = "right",
...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
side?: "top" | "right" | "bottom" | "left"
}) {
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
data-slot="sheet-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
side === "right" &&
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
side === "left" &&
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
side === "top" &&
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
className
)}
{...props}
>
{children}
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<XIcon className="size-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
)
}
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-header"
className={cn("flex flex-col gap-1.5 p-4", className)}
{...props}
/>
)
}
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
)
}
function SheetTitle({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn("text-foreground font-semibold", className)}
{...props}
/>
)
}
function SheetDescription({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
export {
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}