inmake/nks-virtual-tour
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

marks filters + circle distance fix

Browse Source
This commit is contained in:
zojgame
2024-04-08 18:27:48 +05:00
parent 59e872e714
commit f48b8fa998
22 changed files with 127 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DistanceCircle.tsx
+3 -5
View File
@@ -5,10 +5,8 @@ interface DistanceCircleProps {
const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
return (
<svg
className="z-50 transition-transform duration-300 ease-in-out"
style={{ transform: `scale(${(selectedRange * 0.75) / 800})` }}
width="1600"
height="1600"
className="transition-[width] duration-300 ease-in-out"
width={(1600 * selectedRange) / 850}
viewBox="0 0 1600 1600"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -20,7 +18,7 @@ const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
fill="url(#paint0_radial_193_12559)"
fillOpacity="0.6"
stroke="white"
strokeWidth={(3 * 800) / selectedRange}
strokeWidth={(3 * 850) / selectedRange}
/>
<defs>
<radialGradient
src/components/InfrastructurePage/InfrastructureFilters.tsx
+17 -39
View File
@@ -1,61 +1,39 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { environments, transports } from "../../consts/infrastructure";
import InputRange from "./InputRange";
interface IFilter {
infrastructureId: string;
distanceStage: number;
}
const data: IFilter[] = [
{ infrastructureId: "1", distanceStage: 1 },
{ infrastructureId: "1", distanceStage: 2 },
{ infrastructureId: "2", distanceStage: 3 },
{ infrastructureId: "2", distanceStage: 4 },
{ infrastructureId: "2", distanceStage: 5 },
{ infrastructureId: "3", distanceStage: 6 },
{ infrastructureId: "3", distanceStage: 7 },
{ infrastructureId: "3", distanceStage: 8 },
{ infrastructureId: "4", distanceStage: 9 },
{ infrastructureId: "4", distanceStage: 10 },
{ infrastructureId: "5", distanceStage: 11 },
{ infrastructureId: "5", distanceStage: 12 },
{ infrastructureId: "5", distanceStage: 13 },
{ infrastructureId: "6", distanceStage: 14 },
{ infrastructureId: "6", distanceStage: 1 },
{ infrastructureId: "7", distanceStage: 1 },
];
import { Mark } from "../../types/Mark";
interface IInfrastructureFiltersProps {
setSelectedRange: React.Dispatch<React.SetStateAction<number>>;
setFilteredMarks: React.Dispatch<React.SetStateAction<Mark[]>>;
selectedRange: number;
marks: Mark[];
}
const InfrastructureFilters = ({
setSelectedRange,
setFilteredMarks,
selectedRange,
marks,
}: IInfrastructureFiltersProps) => {
const [filter, setFilter] = useState("");
function handleOnFilterClick(
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
): void {
const infrastructureId = event.currentTarget.dataset.set;
if (!infrastructureId) return;
const infrastructureFilter = event.currentTarget.dataset.set;
if (!infrastructureFilter) return;
setFilter(infrastructureId);
const filteredMarks = marks.filter(
(mark) => mark.icon === infrastructureFilter
);
setFilteredMarks(filteredMarks);
setFilter(infrastructureFilter);
}
const handleOnInputRangeChange = (
event: React.ChangeEvent<HTMLInputElement>
) => setSelectedRange(Number(event.target.value));
useEffect(() => {
const _distanceRange = (selectedRange - 150) / 50;
const filteredData = data.filter((d) => d.infrastructureId === filter && d.distanceStage === _distanceRange);
console.log("filteredData", filteredData);
}, [filter]);
return (
<>
<div>
@@ -64,11 +42,11 @@ const InfrastructureFilters = ({
<div className="flex flex-col gap-2 mb-8 border-b border-[#9595A2] pb-8">
{environments.map((env) => (
<button
data-set={env.id}
data-set={env.type}
onClick={handleOnFilterClick}
key={env.id}
className={`text-white w-fit ${
filter !== env.id
filter !== env.type
? "opacity-60 border-b-2 border-b-transparent"
: "border-b-2 border-b-[#0079C2]"
} flex gap-2 font-medium text-sm px-[2px] py-2 transition-all duration-300 ease-in-out`}
@@ -82,11 +60,11 @@ const InfrastructureFilters = ({
<h3 className="text-[18px] mb-5">Транспорт:</h3>
{transports.map((trans) => (
<button
data-set={trans.id}
data-set={trans.type}
onClick={handleOnFilterClick}
key={trans.id}
className={`text-white w-fit ${
filter !== trans.id
filter !== trans.type
? "opacity-60 border-b-2 border-b-transparent"
: "border-b-2 border-b-[#0079C2]"
} flex gap-2 font-medium text-sm px-[2px] py-2 transition-all duration-300 ease-in-out`}
src/components/MarksContainer.tsx
+13 -7
View File
@@ -1,20 +1,17 @@
import { Mark } from "../types/Mark";
import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
import MarkShopIcon from "./icons/marks/MarkShopIcon";
interface Mark {
id: string;
icon: string;
x: number;
y: number;
}
interface MarksContainerProps {
marks: Mark[];
filteredMarks: Mark[];
markWidth?: number;
markHeigth?: number;
}
function MarksContainer({
marks,
filteredMarks,
markWidth = 64,
markHeigth = 64,
}: MarksContainerProps) {
@@ -29,11 +26,17 @@ function MarksContainer({
>
{marks.map((mark) => {
let icon;
const isFiltered = filteredMarks.find(
(filteredMark) => filteredMark.id === mark.id
);
switch (mark.icon) {
case "shop":
icon = <MarkShopIcon />;
break;
case "food":
icon = <MarkFoodIcon />;
break;
default:
break;
@@ -41,6 +44,9 @@ function MarksContainer({
return (
<svg
className={`transition-opacity duration-300 ease-in-out ${
isFiltered ? "opacity-0" : "opacity-100"
}`}
x={mark.x}
y={mark.y}
width={markWidth}
src/components/icons/BusIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
const BusIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 10V16H17V10M3 10V2H17V10M3 10H17"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="square"
/>
<circle cx="6" cy="13" r="1" fill="currentColor" />
<circle cx="14" cy="13" r="1" fill="currentColor" />
<rect x="4" y="15.5" width="3" height="3.5" fill="currentColor" />
<rect x="13" y="15.5" width="3" height="3.5" fill="currentColor" />
</svg>
);
};
export default BusIcon;
src/components/icons/CrossIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const CrossIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.0002 12.0001L17.6572 6.34356M12.0002 12.0001L6.34337 6.34326M12.0002 12.0001L17.6571 17.657M12.0002 12.0001L6.34326 17.6571"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default CrossIcon;
src/components/icons/EducationIcon.tsx
+27
View File
@@ -0,0 +1,27 @@
const EducationIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_133_6227)">
<path
d="M4.66667 7.1875H2L10 2.5L18 7.1875H15.3333M4.66667 7.1875V14.6875M4.66667 7.1875H8.22222M4.66667 14.6875H3.33333L2 17.5H18L16.6667 14.6875H15.3333M4.66667 14.6875H8.22222M15.3333 7.1875V14.6875M15.3333 7.1875H11.7778M15.3333 14.6875H11.7778M11.7778 7.1875V14.6875M11.7778 7.1875H8.22222M11.7778 14.6875H8.22222M8.22222 7.1875V14.6875"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
</g>
<defs>
<clipPath id="clip0_133_6227">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export default EducationIcon;
src/components/icons/HealthyIcon.tsx
+20
View File
@@ -0,0 +1,20 @@
const HealthyIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 2H7V7H2V13H7V18H13V13H18V7H13V2Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
</svg>
);
};
export default HealthyIcon;
src/components/icons/MallIcon.tsx
+20
View File
@@ -0,0 +1,20 @@
const MallIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 6H5.5C4.67157 6 4 6.67157 4 7.5V15.5C4 16.3284 4.67157 17 5.5 17H14.5C15.3284 17 16 16.3284 16 15.5V7.5C16 6.67157 15.3284 6 14.5 6H13M7 6V8.5M7 6H13M7 6V5C7 4.60603 7.0776 4.21593 7.22836 3.85195C7.37913 3.48797 7.6001 3.15726 7.87868 2.87868C8.15726 2.6001 8.48797 2.37913 8.85195 2.22836C9.21593 2.0776 9.60603 2 10 2C10.394 2 10.7841 2.0776 11.1481 2.22836C11.512 2.37913 11.8427 2.6001 12.1213 2.87868C12.3999 3.15726 12.6209 3.48797 12.7716 3.85195C12.9224 4.21593 13 4.60603 13 5V6M13 6V8.5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
</svg>
);
};
export default MallIcon;
src/components/icons/RestourantIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
const RestourauntIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.5 18.0002V13.0002M16.5 13.0002V2.00018C15.5 1.33351 12.5 5.80018 12.5 13.0002H16.5Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
<path
d="M5.75 18V18.75H7.25V18H5.75ZM7.25 2.5C7.25 2.08579 6.91421 1.75 6.5 1.75C6.08579 1.75 5.75 2.08579 5.75 2.5H7.25ZM10.25 2.5C10.25 2.08579 9.91421 1.75 9.5 1.75C9.08579 1.75 8.75 2.08579 8.75 2.5H10.25ZM4.25 2.5C4.25 2.08579 3.91421 1.75 3.5 1.75C3.08579 1.75 2.75 2.08579 2.75 2.5H4.25ZM7.25 18V8H5.75V18H7.25ZM7.25 8V2.5H5.75V8H7.25ZM6.5 8.75H8V7.25H6.5V8.75ZM8 8C8 8.75 8.00135 8.75 8.00271 8.75C8.00317 8.74999 8.00454 8.74999 8.00546 8.74998C8.00731 8.74997 8.00919 8.74995 8.0111 8.74992C8.01492 8.74986 8.01885 8.74978 8.0229 8.74966C8.03101 8.74943 8.03957 8.74906 8.04858 8.74852C8.0666 8.74746 8.0864 8.74574 8.10784 8.74312C8.15075 8.73787 8.20002 8.72905 8.25447 8.71479C8.36425 8.68604 8.49086 8.63628 8.62546 8.55402C8.8977 8.38766 9.16985 8.10903 9.40842 7.67164C9.87327 6.81942 10.25 5.29363 10.25 2.5H8.75C8.75 5.20637 8.37673 6.43058 8.09158 6.95336C7.95515 7.20347 7.8523 7.26859 7.84329 7.2741C7.83727 7.27778 7.84669 7.271 7.87443 7.26373C7.88787 7.26021 7.90491 7.25676 7.92586 7.2542C7.9363 7.25292 7.94768 7.25187 7.96003 7.25114C7.9662 7.25078 7.97261 7.25049 7.97927 7.2503C7.9826 7.2502 7.98599 7.25013 7.98945 7.25008C7.99117 7.25005 7.99292 7.25003 7.99468 7.25002C7.99555 7.25001 7.99689 7.25001 7.99733 7.25C7.99866 7.25 8 7.25 8 8ZM6.5 7.25H5V8.75H6.5V7.25ZM5 8C5 7.25 5.00134 7.25 5.00267 7.25C5.00311 7.25001 5.00445 7.25001 5.00532 7.25002C5.00708 7.25003 5.00883 7.25005 5.01055 7.25008C5.01401 7.25013 5.0174 7.2502 5.02073 7.2503C5.02739 7.25049 5.0338 7.25078 5.03997 7.25114C5.05232 7.25187 5.0637 7.25292 5.07414 7.2542C5.09509 7.25676 5.11213 7.26021 5.12557 7.26373C5.15331 7.271 5.16273 7.27778 5.15671 7.2741C5.1477 7.26859 5.04484 7.20347 4.90842 6.95336C4.62327 6.43058 4.25 5.20637 4.25 2.5H2.75C2.75 5.29363 3.12673 6.81942 3.59158 7.67164C3.83016 8.10903 4.1023 8.38766 4.37454 8.55402C4.50914 8.63628 4.63575 8.68604 4.74553 8.71479C4.79998 8.72905 4.84925 8.73787 4.89216 8.74312C4.9136 8.74574 4.9334 8.74746 4.95142 8.74852C4.96043 8.74906 4.96899 8.74943 4.9771 8.74966C4.98115 8.74978 4.98508 8.74986 4.9889 8.74992C4.99081 8.74995 4.99269 8.74997 4.99454 8.74998C4.99546 8.74999 4.99683 8.74999 4.99729 8.75C4.99865 8.75 5 8.75 5 8ZM5 8.75C5 8.75 5 8 5 7.25C5 7.25 5 7.25 5 8C5 8.75 5 8.75 5 8.75C5 8 5 7.25 5 7.25V8.75ZM8 7.25C8 7.25 8 8 8 8.75C8 8.75 8 8.75 8 8C8 7.25 8 7.25 8 7.25C8 8 8 8.75 8 8.75V7.25Z"
fill="currentColor"
/>
</svg>
);
};
export default RestourauntIcon;
src/components/icons/SportIcon.tsx
+39
View File
@@ -0,0 +1,39 @@
const SportIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_133_6248)">
<path
d="M11.4085 10.6583C11.704 11.1701 11.8957 11.7351 11.9729 12.321C12.05 12.9069 12.011 13.5022 11.858 14.073C11.7051 14.6438 11.4412 15.1789 11.0815 15.6478C10.7217 16.1166 10.2731 16.51 9.76137 16.8055C9.2496 17.1009 8.68463 17.2927 8.09874 17.3698C7.51285 17.447 6.9175 17.408 6.34669 17.255C5.77587 17.1021 5.24078 16.8382 4.77195 16.4784C4.30311 16.1187 3.90973 15.6701 3.61426 15.1583C3.31878 14.6466 3.127 14.0816 3.04987 13.4957C2.97274 12.9098 3.01176 12.3145 3.16471 11.7437C3.31765 11.1728 3.58154 10.6377 3.94128 10.1689C4.30103 9.70009 4.7496 9.3067 5.26137 9.01123C5.77315 8.71576 6.33811 8.52398 6.924 8.44684C7.5099 8.36971 8.10525 8.40873 8.67606 8.56168C9.24687 8.71463 9.78197 8.97851 10.2508 9.33825C10.7196 9.698 11.113 10.1466 11.4085 10.6583L11.4085 10.6583Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
<path
d="M5.37646 8.94482L11.0056 5.69482L11.5056 6.56085L14.1037 5.06085L13.6037 4.19482L16.6348 2.44482L18.3848 5.47591L12.1576 13.69"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
<path
d="M3.79597 15.8419L3.24805 16.1582"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="square"
/>
</g>
<defs>
<clipPath id="clip0_133_6248">
<rect width="20" height="20" fill="currentColor" />
</clipPath>
</defs>
</svg>
);
};
export default SportIcon;
src/components/icons/TramIcon.tsx
+22
View File
@@ -0,0 +1,22 @@
const TramIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 13L3.5 19H16.5L17 13M3 13L3.5 5H8M3 13H17M17 13L16.5 5H12M8 5H12M8 5L6 1H14L12 5"
stroke="white"
strokeWidth="1.5"
strokeLinecap="square"
/>
<circle cx="6" cy="16" r="1" fill="white" />
<circle cx="14" cy="16" r="1" fill="white" />
</svg>
);
};
export default TramIcon;
src/components/icons/marks/MarkFoodIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
function MarkFoodIcon() {
return (
<svg
width="64"
height="65"
viewBox="0 0 64 65"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M43.8371 46.5041V37.6141M43.8371 37.6141V18.0561C42.0591 16.8708 36.7251 24.8125 36.7251 37.6141H43.8371Z"
stroke="white"
strokeWidth="2.2225"
strokeLinecap="square"
/>
<path
d="M24.9457 46.5043V47.6156H27.1682V46.5043H24.9457ZM27.1682 18.9453C27.1682 18.3316 26.6706 17.8341 26.0569 17.8341C25.4432 17.8341 24.9457 18.3316 24.9457 18.9453H27.1682ZM32.5022 18.9453C32.5022 18.3316 32.0046 17.8341 31.3909 17.8341C30.7772 17.8341 30.2797 18.3316 30.2797 18.9453H32.5022ZM21.8342 18.9453C21.8342 18.3316 21.3366 17.8341 20.7229 17.8341C20.1092 17.8341 19.6117 18.3316 19.6117 18.9453H21.8342ZM27.1682 46.5043V28.7243H24.9457V46.5043H27.1682ZM27.1682 28.7243V18.9453H24.9457V28.7243H27.1682ZM26.0569 29.8356H28.7239V27.6131H26.0569V29.8356ZM28.7239 28.7243C28.7239 29.8356 28.7259 29.8356 28.7279 29.8356C28.7286 29.8356 28.7306 29.8355 28.732 29.8355C28.7348 29.8355 28.7376 29.8355 28.7404 29.8354C28.7461 29.8354 28.752 29.8352 28.7582 29.8351C28.7704 29.8347 28.7834 29.8341 28.7972 29.8333C28.8247 29.8317 28.8553 29.829 28.8887 29.825C28.9555 29.8168 29.0333 29.8029 29.12 29.7802C29.2949 29.7344 29.4998 29.6543 29.7201 29.5197C30.1651 29.2478 30.6239 28.784 31.033 28.0341C31.8328 26.5676 32.5022 23.8995 32.5022 18.9453H30.2797C30.2797 23.7702 29.6155 25.9915 29.0818 26.9698C28.8241 27.4423 28.6162 27.5897 28.5612 27.6233C28.5314 27.6415 28.528 27.6378 28.557 27.6302C28.5708 27.6266 28.5913 27.6223 28.619 27.6189C28.6329 27.6172 28.6485 27.6157 28.6659 27.6147C28.6747 27.6142 28.6839 27.6138 28.6935 27.6135C28.6983 27.6134 28.7033 27.6132 28.7083 27.6132C28.7109 27.6131 28.7134 27.6131 28.716 27.6131C28.7173 27.6131 28.7193 27.6131 28.7199 27.6131C28.7219 27.6131 28.7239 27.6131 28.7239 28.7243ZM26.0569 27.6131H23.3899V29.8356H26.0569V27.6131ZM23.3899 28.7243C23.3899 27.6131 23.3919 27.6131 23.3939 27.6131C23.3945 27.6131 23.3965 27.6131 23.3978 27.6131C23.4004 27.6131 23.4029 27.6131 23.4055 27.6132C23.4105 27.6132 23.4155 27.6134 23.4203 27.6135C23.4299 27.6138 23.4391 27.6142 23.4479 27.6147C23.4653 27.6157 23.4809 27.6172 23.4948 27.6189C23.5225 27.6223 23.543 27.6266 23.5568 27.6302C23.5858 27.6378 23.5824 27.6415 23.5526 27.6233C23.4976 27.5897 23.2897 27.4423 23.032 26.9698C22.4983 25.9915 21.8342 23.7702 21.8342 18.9453H19.6117C19.6117 23.8995 20.281 26.5676 21.0808 28.0341C21.4899 28.784 21.9487 29.2478 22.3937 29.5197C22.614 29.6543 22.8189 29.7344 22.9938 29.7802C23.0805 29.8029 23.1583 29.8168 23.2251 29.825C23.2585 29.829 23.2891 29.8317 23.3166 29.8333C23.3304 29.8341 23.3434 29.8347 23.3556 29.8351C23.3618 29.8352 23.3677 29.8354 23.3734 29.8354C23.3762 29.8355 23.379 29.8355 23.3818 29.8355C23.3832 29.8355 23.3852 29.8356 23.3859 29.8356C23.3879 29.8356 23.3899 29.8356 23.3899 28.7243ZM23.3899 29.8356C23.3899 29.8356 23.3899 28.7243 23.3899 27.6131C23.3899 27.6131 23.3899 27.6131 23.3899 28.7243C23.3899 29.8356 23.3899 29.8356 23.3899 29.8356C23.3899 28.7243 23.3899 27.6131 23.3899 27.6131V29.8356ZM28.7239 27.6131C28.7239 27.6131 28.7239 28.7243 28.7239 29.8356C28.7239 29.8356 28.7239 29.8356 28.7239 28.7243C28.7239 27.6131 28.7239 27.6131 28.7239 27.6131C28.7239 28.7243 28.7239 29.8356 28.7239 29.8356V27.6131Z"
fill="white"
/>
</svg>
);
}
export default MarkFoodIcon;
src/components/icons/marks/MarkShopIcon.tsx
+2 -2
View File
@@ -3,8 +3,8 @@ function MarkShopIcon() {
<path
d="M26.4442 25.1668H23.7775C22.3047 25.1668 21.1108 26.3607 21.1108 27.8334V42.0557C21.1108 43.5284 22.3047 44.7223 23.7775 44.7223H39.7775C41.2503 44.7223 42.4442 43.5284 42.4442 42.0557V27.8334C42.4442 26.3607 41.2503 25.1668 39.7775 25.1668H37.1108M26.4442 25.1668V29.6112M26.4442 25.1668H37.1108M26.4442 25.1668V23.389C26.4442 22.6886 26.5821 21.9951 26.8501 21.348C27.1182 20.7009 27.511 20.113 28.0063 19.6178C28.5015 19.1225 29.0895 18.7297 29.7365 18.4616C30.3836 18.1936 31.0771 18.0557 31.7775 18.0557C32.4779 18.0557 33.1714 18.1936 33.8185 18.4616C34.4656 18.7297 35.0535 19.1225 35.5487 19.6178C36.044 20.113 36.4368 20.7009 36.7049 21.348C36.9729 21.9951 37.1108 22.6886 37.1108 23.389V25.1668M37.1108 25.1668V29.6112"
stroke="white"
stroke-width="2.96296"
stroke-linecap="square"
strokeWidth="2.96296"
strokeLinecap="square"
/>
);
}
src/components/maps/Infra.tsx
View File