Browse Source

show more button

main
sina_sajjadi 5 days ago
parent
commit
d9363a054b
  1. 3
      src/app/(client-components)/(HeroSearchForm)/LocationInput.tsx
  2. 5
      src/app/globals.css
  3. 10
      src/app/signup/page.tsx
  4. 8
      src/components/SectionGridFeaturePlaces.tsx
  5. 19
      src/data/navigation.ts

3
src/app/(client-components)/(HeroSearchForm)/LocationInput.tsx

@ -79,9 +79,6 @@ const LocationInput: FC<LocationInputProps> = ({
key={item.id} key={item.id}
className="flex px-4 sm:px-8 items-center space-x-3 sm:space-x-4 py-4 hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer" className="flex px-4 sm:px-8 items-center space-x-3 sm:space-x-4 py-4 hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer"
> >
<span className="block text-neutral-400">
<ClockIcon className="h-4 sm:h-6 w-4 sm:w-6" />
</span>
<span className=" block font-medium text-neutral-700 dark:text-neutral-200"> <span className=" block font-medium text-neutral-700 dark:text-neutral-200">
{item.title} {item.title}
</span> </span>

5
src/app/globals.css

@ -5,4 +5,9 @@
font-family: 'PasswordDots'; font-family: 'PasswordDots';
font-size: 16px; font-size: 16px;
-webkit-text-security: disc; -webkit-text-security: disc;
}
.no-border-on-focus:focus {
outline: none;
box-shadow: none;
border: none; /* Ensures no border shows on focus */
} }

10
src/app/signup/page.tsx

@ -90,24 +90,24 @@ const PageSignUp: FC<PageSignUpProps> = () => {
{errors.name && <p className="text-xs text-red-600">{errors.name}</p>} {errors.name && <p className="text-xs text-red-600">{errors.name}</p>}
</label> </label>
<label className="block"> <label className="block">
<span className="text-neutral-800 dark:text-neutral-200">Phone Number</span>
<span className=" text-neutral-800 dark:text-neutral-200">Phone Number</span>
<div className="flex items-center mt-1 rounded-2xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:ring-0"> <div className="flex items-center mt-1 rounded-2xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 focus-within:ring-0">
<span className="px-2 mr-[-15px] text-neutral-800 dark:text-neutral-200">+</span> <span className="px-2 mr-[-15px] text-neutral-800 dark:text-neutral-200">+</span>
<input <input
value={countryCode} value={countryCode}
onChange={countryCodeHandler} onChange={countryCodeHandler}
type="text" type="text"
placeholder="98"
placeholder="000"
maxLength={3} maxLength={3}
className="w-[50px] p-2 mr-[-10px] text-center border-none outline-none bg-transparent text-neutral-800 dark:text-neutral-200"
className="w-[50px] no-border-on-focus p-2 mr-[-10px] shadow-none text-center border-none outline-none bg-transparent text-neutral-800 dark:text-neutral-200"
/> />
<span className="px-2 text-neutral-500">|</span> <span className="px-2 text-neutral-500">|</span>
<input <input
value={phoneNumber} value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)} onChange={(e) => setPhoneNumber(e.target.value)}
type="text" type="text"
placeholder="26363687"
className="flex-1 p-2 border-none outline-none bg-transparent text-neutral-800 dark:text-neutral-200"
placeholder=""
className="flex-1 p-2 no-border-on-focus border-none outline-none bg-transparent text-neutral-800 dark:text-neutral-200"
/> />
</div> </div>
{errors.countryCode && <p className="text-xs text-red-600">{errors.countryCode}</p>} {errors.countryCode && <p className="text-xs text-red-600">{errors.countryCode}</p>}

8
src/components/SectionGridFeaturePlaces.tsx

@ -32,10 +32,12 @@ const SectionGridFeaturePlaces: FC<SectionGridFeaturePlacesProps> = ({
}) => { }) => {
const { countries, tours } = useContext(Context);
const { countries , tours } = useContext(Context);
const [countryTours, setCountryTours] = useState(); const [countryTours, setCountryTours] = useState();
const [limit, setLimit] = useState(7);
@ -85,13 +87,13 @@ const SectionGridFeaturePlaces: FC<SectionGridFeaturePlacesProps> = ({
className={`grid gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 ${gridClass}`} className={`grid gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 ${gridClass}`}
> >
{countryTours?.length ? ( {countryTours?.length ? (
countryTours?.map((stay) => <StayCard2 key={stay.id} data={stay} />)
countryTours?.map((stay , idx) => limit >= idx && <StayCard2 key={stay.id} data={stay} />)
) : ( ) : (
<h2>No tours Available</h2> <h2>No tours Available</h2>
)} )}
</div> </div>
<div className="flex mt-16 justify-center items-center"> <div className="flex mt-16 justify-center items-center">
<ButtonPrimary>Show me more</ButtonPrimary>
<ButtonPrimary onClick={()=>{setLimit((prev)=> prev + 8)}}>Show me more</ButtonPrimary>
</div> </div>
</div> </div>
); );

19
src/data/navigation.ts

@ -164,6 +164,13 @@ const templatesChildrenMenus: NavItemType[] = [
]; ];
export const NAVIGATION_DEMO: NavItemType[] = [ export const NAVIGATION_DEMO: NavItemType[] = [
{
id: ncNanoId(),
href: "/",
name: "Home",
type: "none",
isNew: true,
},
{ {
id: ncNanoId(), id: ncNanoId(),
href: "/", href: "/",
@ -179,6 +186,18 @@ export const NAVIGATION_DEMO: NavItemType[] = [
type: "megaMenu", type: "megaMenu",
megaMenu: megaMenuDemo, megaMenu: megaMenuDemo,
}, },
{
id: ncNanoId(),
href: "/",
name: "FAQ",
type: "none",
},
{
id: ncNanoId(),
href: "/",
name: "AboutUs",
type: "none",
},
// { // {
// id: ncNanoId(), // id: ncNanoId(),
// href: "/listing-stay", // href: "/listing-stay",

Loading…
Cancel
Save