UsePageTitleDemo

1'use client';
2 
3import React, { useState } from 'react';
4 
5import { Button } from '@/components/ui/button';
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from '@/components/ui/card';
14import { Input } from '@/components/ui/input';
15import { Label } from '@/components/ui/label';
16 
17import { usePageTitle } from '@/hooks/guarahooks/use-page-title';
18 
19export default function UsePageTitleDemo() {
20  const [title, setTitle] = useState('guarahooks');
21  const { setTitle: updatePageTitle, resetTitle } = usePageTitle({
22    suffix: 'guarahooks',
23    separator: ' - ',
24  });
25 
26  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
27    setTitle(e.target.value);
28  };
29 
30  const handleUpdateTitle = () => {
31    updatePageTitle(title);
32  };
33 
34  return (
35    <Card className="w-full max-w-sm mx-auto">
36      <CardHeader>
37        <CardTitle>Page Title Demo</CardTitle>
38        <CardDescription>Change the page title dynamically</CardDescription>
39      </CardHeader>
40      <CardContent className="space-y-4">
41        <div className="space-y-2">
42          <Label htmlFor="title">New Page Title</Label>
43          <Input
44            id="title"
45            placeholder="Enter new page title"
46            value={title}
47            onChange={handleChangeTitle}
48          />
49        </div>
50        <div className="text-sm text-muted-foreground">
51          Current document title:{' '}
52          <span className="font-mono">
53            {typeof document !== 'undefined'
54              ? document.title
55              : 'Not available on server'}
56          </span>
57        </div>
58      </CardContent>
59      <CardFooter className="flex justify-between">
60        <Button variant="outline" onClick={resetTitle}>
61          Reset Title
62        </Button>
63        <Button onClick={handleUpdateTitle}>Update Title</Button>
64      </CardFooter>
65    </Card>
66  );
67}