tanshu/kakawa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Insta, spotlight, fonts

Browse Source
This commit is contained in:
Amritanshu Agrawal
2024-09-24 12:47:02 +05:30
parent 18c719a22d
commit 1e49dab4c1
32 changed files with 261 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/category-slider.tsx
View File

@ -15,14 +15,14 @@ export function ChocolateCategories() {
const [currentImage, setCurrentImage] = useState(categories[0].image);
return (
<section className='flex flex-col md:flex-row bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8'>
<section className='flex flex-col md:flex-row bg-white py-12 px-4 sm:px-6 lg:px-8'>
<div className='w-full md:w-1/2 bg-white h-auto'>
<ul className='m-8 space-y-10 text-[#5a352a] font-serif text-5xl justify-center text-left'>
{categories.map((category) => (
<li
key={category.name}
onMouseEnter={() => setCurrentImage(category.image)}
className='hover:text-[#c19a6b] cursor-pointer'
className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-9xl'
>
{category.name}
</li>

21
src/components/footer.tsx
View File

@ -1,7 +1,9 @@
// components/Footer.js
export default function Footer() {
import { FaPhoneAlt } from 'react-icons/fa';
import { FaMapLocationDot } from 'react-icons/fa6';
export function Footer() {
return (
<footer className='bg-white text-brown-800 py-12'>
<footer className='bg-[#f8f6f5] py-12 border-t-2 border-black'>
<div className='max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-4'>
{/* First Column: Logo and Description */}
<div className='space-y-4'>
@ -22,12 +24,12 @@ export default function Footer() {
<div className='space-y-4'>
<h3 className='font-semibold'>Get in touch</h3>
<p className='text-sm flex items-center'>
<span className='material-symbols-outlined'>call</span>
0172-4045414
<FaPhoneAlt />
&nbsp; 0172-4045414
</p>
<p className='text-sm flex items-center'>
<span className='material-symbols-outlined'>pin_drop</span>
SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
<FaMapLocationDot />
&nbsp; SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
</p>
</div>
@ -115,10 +117,7 @@ export default function Footer() {
>
<img src='/icons/youtube.svg' />
</a>
<a
href='https://linkedin.com'
className='text-brown-600 hover:text-brown-800'
>
<a href='https://linkedin.com' className=''>
<img src='/icons/linkedin.svg' />
</a>
</div>

2
src/components/header.tsx
View File

@ -1,5 +1,5 @@
// components/Header.js
export default function Header() {
export function Header() {
return (
<header className='bg-white shadow'>
<div className='container mx-auto px-4 py-6'>

32
src/components/instagram.tsx Normal file
View File

@ -0,0 +1,32 @@
'use client';
import { InstagramPost, fetchInstagramPosts } from '@/app/lib/instagram';
import { useEffect, useState } from 'react';
export function InstagramFeed() {
const [posts, setPosts] = useState<InstagramPost[]>([]);
useEffect(() => {
async function getInstagramData() {
const data = await fetchInstagramPosts();
setPosts(data);
}
getInstagramData();
}, []);
return (
<div className='grid grid-cols-1 md:grid-cols-5 gap-8'>
{posts.map((post) => (
<div key={post.id} className='flex flex-col items-center'>
<a href={post.permalink} target='_blank' rel='noopener noreferrer'>
<img
src={post.media_url}
alt={post.caption}
className='rounded-lg shadow-lg'
/>
</a>
</div>
))}
</div>
);
}

6
src/components/layout.tsx
View File

@ -1,12 +1,12 @@
// components/Layout.js
import Header from './header';
import Footer from './footer';
import { Header } from './header';
import { Footer } from './footer';
import { ReactNode } from 'react'; // Import ReactNode
interface LayoutProps {
children: ReactNode; // Define the type of children prop
}
export default function Layout({ children }: LayoutProps) {
export function Layout({ children }: LayoutProps) {
return (
<>
<Header />

2
src/components/navbar-old.tsx
View File

@ -1,5 +1,5 @@
// components/Navbar.tsx
export default function Navbar() {
export function Navbar() {
return (
<nav className='navbar'>
<div className='left'>

12
src/components/navbar.module-old.css
View File

@ -1,20 +1,16 @@
.navbar {
/* .navbar {
position: fixed;
top: 1.5em;
left: 2em;
right: 2em;
@apply transition-all;
/* background-color: white;
background-color: white;
border-radius: 0px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1em 2em;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000; */
z-index: 1000;
}
/* .navbar a {
.navbar a {
color: black;
text-decoration: none;
margin: 0 0.5em;

6
src/components/navbar.module.css
View File

@ -1,7 +1,11 @@
/* navbar.module.css */
.navBar {
@apply top-6 left-6 right-6 transition-all duration-300 z-50;
@apply top-6 left-6 right-6 transition-all duration-300 z-50 h-16;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1em 2em;
}
.navBarInitial {

96
src/components/navbar.tsx
View File

@ -1,67 +1,65 @@
'use client'
'use client';
import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import { FiSearch, FiUser } from 'react-icons/fi';
import { HiShoppingBag } from "react-icons/hi2";
import { HiShoppingBag } from 'react-icons/hi2';
import styles from './navbar.module.css';
// components/Navbar.tsx
export default function Navbar() {
export function Navbar() {
const prevScrollY = useRef(0);
const [navBarStyle, setNavBarStyle] = useState('initial');
useEffect(() => {
const handleScroll = () => {
const currentScrollY = window.scrollY;
if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
// Scrolling down and scrolled past 100px
setNavBarStyle('initial');
} else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
// Scrolling up and scrolled past 100px
setNavBarStyle('scrolledUp');
} else if (currentScrollY <= 100) {
setNavBarStyle('initial');
}
prevScrollY.current = currentScrollY;
};
window.addEventListener('scroll', handleScroll);
const currentScrollY = window.scrollY;
if (currentScrollY > prevScrollY.current && currentScrollY > 100) {
// Scrolling down and scrolled past 100px
setNavBarStyle('initial');
} else if (currentScrollY < prevScrollY.current && currentScrollY > 100) {
// Scrolling up and scrolled past 100px
setNavBarStyle('scrolledUp');
} else if (currentScrollY <= 100) {
setNavBarStyle('initial');
}
prevScrollY.current = currentScrollY;
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []); // Empty dependency array
return () => window.removeEventListener('scroll', handleScroll);
}, []); // Empty dependency array
const navClasses = `${styles.navBar} ${
navBarStyle === 'scrolledUp' ? styles.navBarScrolledUp : styles.navBarInitial
}`;
const navClasses = `${styles.navBar} ${
navBarStyle === 'scrolledUp'
? styles.navBarScrolledUp
: styles.navBarInitial
}`;
return (
<nav className={navClasses}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Left side */}
<div className="flex items-center">
<Link href="/about" className="text-sm font-medium hover:underline">
About Us
</Link>
</div>
{/* Middle */}
<div className="flex-shrink-0">
<Link href="/" className="text-lg font-bold">
<img src='/images/logo.png' alt='Logo' className='logo' />
</Link>
</div>
{/* Right side */}
<div className="flex items-center space-x-4">
<button aria-label="Search">
<FiSearch size={20} />
</button>
<button aria-label="Profile">
<FiUser size={20} />
</button>
<button aria-label="Shopping Cart">
<HiShoppingBag size={20} />
</button>
</div>
</div>
{/* Left side */}
<div className='flex items-center'>
<Link href='/about' className='text-sm font-medium hover:underline'>
About Us
</Link>
</div>
{/* Middle */}
<div className='flex-shrink-0'>
<Link href='/' className='text-lg font-bold'>
<img src='/images/logo.png' alt='Logo' className='logo' />
</Link>
</div>
{/* Right side */}
<div className='flex items-center space-x-4'>
<button aria-label='Search'>
<FiSearch size={20} />
</button>
<button aria-label='Profile'>
<FiUser size={20} />
</button>
<button aria-label='Shopping Cart'>
<HiShoppingBag size={20} />
</button>
</div>
</nav>
);

2
src/components/our-collection.tsx
View File

@ -17,7 +17,7 @@ const collections = [
export function Collections() {
return (
<div className='max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
<div className='flex flex-row max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
{collections.map((collection, index) => (
<div
key={index}

48
src/components/spotlight.tsx Normal file
View File

@ -0,0 +1,48 @@
// components/Spotlight.tsx
import Image from 'next/image';
const logos = [
{ src: '/images/logo.png', alt: 'TOI' }, // Replace with actual logo path
{ src: '/images/logo.png', alt: 'The Tribune' }, // Replace with actual logo path
{ src: '/images/logo.png', alt: 'ET' }, // Replace with actual logo path
{ src: '/images/logo.png', alt: 'The Hindu' }, // Replace with actual logo path
];
// { src: '/images/logos/toi-logo.png', alt: 'TOI' }, // Replace with actual logo path
// { src: '/images/logos/tribune-logo.png', alt: 'The Tribune' }, // Replace with actual logo path
// { src: '/images/logos/et-logo.png', alt: 'ET' }, // Replace with actual logo path
// { src: '/images/logos/hindu-logo.png', alt: 'The Hindu' }, // Replace with actual logo path
export function Spotlight() {
return (
<div className='flex flex-row justify-center items-center space-x-8 py-16'>
{logos.map((logo, index) => (
<div key={index} className='flex flex-col items-center'>
<div className='w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center'>
<Image
src={logo.src}
alt={logo.alt}
width={80}
height={80}
className='object-contain'
/>
</div>
</div>
))}
</div>
);
}
// return (
// <div className="flex flex-col items-center py-16">
// <h2 className="text-3xl font-semibold mb-8">In the Spotlight</h2>
// <div className="flex justify-center space-x-8">
// {logos.map((logo, index) => (
// <div key={index} className="flex flex-col items-center">
// <div className="w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center">
// <Image src={logo.src} alt={logo.alt} width={80} height={80} className="object-contain" />
// </div>
// </div>
// ))}
// </div>
// </div>
// );