initiate drf app
This commit is contained in:
75
frontend/components/ui/Accordion.tsx
Normal file
75
frontend/components/ui/Accordion.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react'
|
||||
import { IoIosAdd, IoIosClose } from 'react-icons/io'
|
||||
import { AccordionProps } from '@/app/types'
|
||||
|
||||
const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const contentRef = useRef<HTMLDivElement>(null)
|
||||
const [contentHeight, setContentHeight] = useState<number>(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (contentRef.current) {
|
||||
setContentHeight(contentRef.current.scrollHeight)
|
||||
}
|
||||
}, [content])
|
||||
|
||||
const renderContent = () => {
|
||||
if (typeof content === 'string') {
|
||||
return (
|
||||
<div
|
||||
className="text-md font-medium [&>ol]:list-decimal [&>ol]:pl-4 [&_ul]:list-disc [&_ul]:py-2 [&_ul]:pl-4 [&_li]:mb-2 [&_p]:mt-1 [&_a]:text-orange [&_a]:hover:underline"
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <div className="text-md font-medium">{content}</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative bg-white rounded-2xl my-4">
|
||||
<button
|
||||
className="flex justify-between items-center py-4 px-6 hover:bg-gray-50 rounded-2xl space-x-9 w-full"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<h3 className="text-xl font-bold text-left">{title}</h3>
|
||||
<div className="w-6 h-6 flex items-center justify-center rounded-full border border-orange">
|
||||
<div
|
||||
className={`transition-all duration-500 ${
|
||||
isOpen ? 'rotate-180' : 'rotate-0'
|
||||
}`}
|
||||
>
|
||||
{isOpen ? (
|
||||
<IoIosClose className="w-5 h-5 text-orange" />
|
||||
) : (
|
||||
<IoIosAdd className="w-5 h-5 text-orange" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
ref={contentRef}
|
||||
style={
|
||||
{ '--accordion-height': `${contentHeight}px` } as React.CSSProperties
|
||||
}
|
||||
className={`
|
||||
grid
|
||||
transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]
|
||||
${
|
||||
isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
<div className=" rounded-xl px-6 mt-2">
|
||||
<div className="py-4">{renderContent()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Accordion
|
||||
82
frontend/components/ui/Burger.tsx
Normal file
82
frontend/components/ui/Burger.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import Button from './Button'
|
||||
const Burger = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="relative z-50 w-8 h-8 flex flex-col justify-center items-center"
|
||||
>
|
||||
<div className="relative w-8 h-8">
|
||||
<span
|
||||
className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
|
||||
isOpen ? 'w-8 rotate-45 top-4' : 'w-8 top-2'
|
||||
}`}
|
||||
></span>
|
||||
<span
|
||||
className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
|
||||
isOpen ? 'w-0 opacity-0 top-4' : 'w-8 top-4'
|
||||
}`}
|
||||
></span>
|
||||
<span
|
||||
className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
|
||||
isOpen ? 'w-8 -rotate-45 top-4' : 'w-8 top-6'
|
||||
}`}
|
||||
></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* меню */}
|
||||
<div
|
||||
className={`fixed z-50 left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
|
||||
isOpen
|
||||
? 'top-[80px] h-[calc(100vh-80px)] opacity-100 scale-y-100'
|
||||
: 'top-[80px] h-0 opacity-0 scale-y-0'
|
||||
} ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-col items-center pt-12 space-y-8 transition-all duration-300 ${
|
||||
isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xl hover:text-orange transition-colors duration-200"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Ссылка 1
|
||||
</Link>
|
||||
<Link
|
||||
href="/search"
|
||||
className="text-xl hover:text-orange transition-colors duration-200"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Ссылка 2
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className="text-xl hover:text-orange transition-colors duration-200"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Ссылка 3
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xl hover:text-orange transition-colors duration-200"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Могу взять посылку
|
||||
</Link>
|
||||
<Button text="Разместить объявление" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Burger
|
||||
16
frontend/components/ui/Button.tsx
Normal file
16
frontend/components/ui/Button.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
import { ButtonProps } from '@/app/types/index'
|
||||
|
||||
const Button = ({ onClick, className, text, type }: ButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`text-base font-medium rounded-2xl cursor-pointer ${className}`}
|
||||
type={type}
|
||||
>
|
||||
<span>{text}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default Button
|
||||
48
frontend/components/ui/ShowMore.tsx
Normal file
48
frontend/components/ui/ShowMore.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
|
||||
interface ShowMoreProps {
|
||||
text?: string
|
||||
}
|
||||
|
||||
const ShowMore = ({ text }: ShowMoreProps) => {
|
||||
const [isExpandedMobile, setIsExpandedMobile] = useState(false)
|
||||
const [isExpandedDesktop, setIsExpandedDesktop] = useState(false)
|
||||
|
||||
if (!text) return null
|
||||
|
||||
const maxLength = {
|
||||
mobile: 100,
|
||||
desktop: 100,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pb-5">
|
||||
{/* мобила */}
|
||||
<div
|
||||
onClick={() => setIsExpandedMobile(!isExpandedMobile)}
|
||||
className={`lg:hidden text-justify relative cursor-pointer overflow-hidden
|
||||
${isExpandedMobile ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
|
||||
>
|
||||
{isExpandedMobile ? text : text.slice(0, maxLength.mobile)}
|
||||
{!isExpandedMobile && text.length > maxLength.mobile && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* десктоп */}
|
||||
<div
|
||||
onClick={() => setIsExpandedDesktop(!isExpandedDesktop)}
|
||||
className={`hidden lg:block text-justify relative cursor-pointer overflow-hidden
|
||||
${isExpandedDesktop ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
|
||||
>
|
||||
{isExpandedDesktop ? text : text.slice(0, maxLength.desktop)}
|
||||
{!isExpandedDesktop && text.length > maxLength.desktop && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ShowMore
|
||||
41
frontend/components/ui/TextInput.tsx
Normal file
41
frontend/components/ui/TextInput.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
import { TextInputProps } from '@/app/types'
|
||||
import Tooltip from './Tooltip'
|
||||
|
||||
const TextInput = ({
|
||||
value,
|
||||
handleChange,
|
||||
label,
|
||||
placeholder,
|
||||
name,
|
||||
type = 'text',
|
||||
className = '',
|
||||
maxLength,
|
||||
tooltip,
|
||||
}: TextInputProps) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
{label && (
|
||||
<div className="flex items-center gap-2 my-2">
|
||||
<label className="font-medium text-sm text-gray-500" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
{tooltip && <Tooltip content={tooltip} />}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
value={value || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full p-4 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
|
||||
autoComplete={name}
|
||||
maxLength={maxLength}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextInput
|
||||
34
frontend/components/ui/Tooltip.tsx
Normal file
34
frontend/components/ui/Tooltip.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { CiCircleInfo } from 'react-icons/ci'
|
||||
|
||||
interface TooltipProps {
|
||||
content: string | React.ReactNode
|
||||
}
|
||||
|
||||
const Tooltip = ({ content }: TooltipProps) => {
|
||||
const [showTooltip, setShowTooltip] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center overflow-visible">
|
||||
<button
|
||||
type="button"
|
||||
className="text-orange hover:text-orange/80 focus:outline-none"
|
||||
onMouseEnter={() => setShowTooltip(true)}
|
||||
onMouseLeave={() => setShowTooltip(false)}
|
||||
onClick={() => setShowTooltip(!showTooltip)}
|
||||
>
|
||||
<CiCircleInfo className="w-4 h-4" />
|
||||
</button>
|
||||
{showTooltip && (
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 bg-white rounded-xl text-center shadow-lg text-sm text-gray-700 w-max max-w-xs z-10">
|
||||
{content}
|
||||
<div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tooltip
|
||||
Reference in New Issue
Block a user